🖥️ iframe-edge

All-in-one HTML/CSS/JS widgets in a single file for Productivity, Streaming, and more.
Specially designed to be 100% responsive for Corsair Xeneon Edge & iCUE.

---

✨ Features

• No external dependencies: Pure HTML, CSS, and vanilla JavaScript bundled in single files.
• Fully Responsive: M / L / XL sizes via ?size= URL param or iCUE body-class injection.
• Plug & Play: Just copy the code and paste it into iCUE.
• Dark Mode OLED / Light Mode with a toggle on each widget.
• EN / FR bilingual support on all widgets.
• AI Assistant for 3 AI Models: Google Gemini, Anthropic Claude, and OpenAI ChatGPT.
• Xeneon Edge Design System: Shared xeneon-edge.css + size-loader.js — unified tokens, fonts, and size variants across all widgets.

---

🗂️ Available Widgets

Widget	iCUE <iframe> Code (Copy & Paste)
🤖 AI Assistant	<iframe src="https://stealthylabshq.github.io/iframe-edge/ai-assistant/"></iframe>
🎵 Spotify Visualizer	<iframe src="https://stealthylabshq.github.io/iframe-edge/spotify-visualizer/"></iframe>
🛰️ ISS Horizon	<iframe src="https://stealthylabshq.github.io/iframe-edge/iss-horizon/"></iframe>
💧 Hydration	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/hydration/"></iframe>
💰 Budget	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/budget/"></iframe>
🍅 Pomodoro	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/pomodoro/"></iframe>
⏱️ Timer & Countdown	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/timer/"></iframe>
📝 Quick Notes	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/notes/"></iframe>
🎯 Daily Focus	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/daily-focus/"></iframe>
✅ Habit Tracker	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/habit-tracker/"></iframe>
🧘 Posture & Blink	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/posture-reminder/"></iframe>
📋 Quick Clipboard	<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/quick-clipboard/"></iframe>

---

🇬🇧 English Documentation

📋 Prerequisites

To use these widgets on your Corsair setup, you will need:

• A Corsair Xeneon Edge display.
• The Corsair iCUE software installed and up to date.

🚀 iFrame

1. Open iCUE and go to your screen/dashboard configuration.
2. In the Widgets list (left column), click on the </> iFrame icon.
3. Choose your desired size: M, L, or XL.
4. In the iFrame settings, look for the HTML code text area.
5. Copy the <iframe> code from the table above for your desired widget, and paste it into the text area. (Example: <iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/hydration/"></iframe>)

🎉 Done! The widget will load live from GitHub Pages.

📐 Size Variants

Most widgets support three sizes via the ?size= URL parameter:

Size	Dimensions	URL
M	~300 × 200 px	…/pomodoro/?size=m
L	~400 × 280 px	…/pomodoro/ (default)
XL	~560 × 380 px	…/pomodoro/?size=xl

Example — Pomodoro in XL:

<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/pomodoro/?size=xl"></iframe>

ISS Horizon uses iCUE's native body-class injection (sz-m / sz-l / sz-xl) and does not need the ?size= param.

🤖 AI Assistant

The AI Assistant widget requires an API key from either Google (Gemini), Anthropic (Claude), or OpenAI (ChatGPT) to function.

How to get an API Key:

• Google Gemini (Free tier available / Pay-as-you-go [Recommended]): Go to Google AI Studio, sign in with your Google account, and click "Create API Key".
• Anthropic Claude (Pay-as-you-go): Go to the Anthropic Console, sign in, and generate a new secret key.
• OpenAI (Pay-as-you-go): Go to the OpenAI Platform, sign in, and generate a new secret key.

Setup Instructions:

1. Add the widget to iCUE using its <iframe> code from the table.
2. Click the Settings ⚙️ icon in the top right corner of the widget.
3. Select your preferred provider (Google, Anthropic, or OpenAI) and paste your API Key.
4. Click Save. Your key is securely stored locally in your iCUE session.

🎵 Spotify Visualizer

Prerequisites:

• A Spotify Premium account.

Setup Instructions:

1. Go to the Spotify Developer Dashboard and log in.
2. Click on Create app.
3. Fill in the app name and description.
4. For the Redirect URL, add exactly: https://stealthylabshq.github.io/iframe-edge/spotify-visualizer/auth/callback.html
5. Make sure to check the Web API box.
6. Save and go to your app settings to find your Client ID.

How to Use:

1. Add the widget to iCUE as described above using its specific URL.
2. When the widget loads, enter your Client ID to connect.
3. You will be redirected to log in and grant permissions.

---

🇫🇷 Documentation en Français

📋 Prérequis

Pour utiliser ces widgets sur votre installation Corsair, vous aurez besoin de :

• Un écran Corsair Xeneon Edge.
• Le logiciel Corsair iCUE installé et à jour sur votre machine.

🚀 iFrame Direct

1. Ouvrez iCUE et allez dans la configuration de votre écran.
2. Dans la liste des Widgets (colonne gauche), cliquez sur l'icône </> iFrame.
3. Choisissez la taille souhaitée : M, L, ou XL.
4. Dans les réglages de l'iFrame, cherchez le champ de texte principal code HTML.
5. Copiez le code <iframe> du tableau ci-dessus pour le widget souhaité, et collez-le dans la zone de texte. (Exemple : <iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/hydration/"></iframe>)

🎉 Et voilà ! Le widget se chargera directement depuis GitHub Pages.

📐 Variantes de taille

La plupart des widgets supportent trois tailles via le paramètre URL ?size= :

Taille	Dimensions	URL
M	~300 × 200 px	…/pomodoro/?size=m
L	~400 × 280 px	…/pomodoro/ (défaut)
XL	~560 × 380 px	…/pomodoro/?size=xl

Exemple — Pomodoro en XL :

<iframe src="https://stealthylabshq.github.io/iframe-edge/productivity/pomodoro/?size=xl"></iframe>

ISS Horizon utilise l'injection de classe iCUE native (sz-m / sz-l / sz-xl) et n'a pas besoin du paramètre ?size=.

🤖 Assistant IA

Le widget Assistant IA nécessite une clé API de Google (Gemini), Anthropic (Claude), ou OpenAI (ChatGPT) pour fonctionner.

Comment obtenir une clé API :

• Google Gemini (Gratuit disponible / Payant à l'usage [Recommandé]) : Allez sur Google AI Studio, connectez-vous avec votre compte Google et cliquez sur "Create API Key".
• Anthropic Claude (Payant à l'usage) : Allez sur la Console Anthropic, connectez-vous et générez une nouvelle clé secrète.
• OpenAI (Payant à l'usage) : Allez sur la Plateforme OpenAI, connectez-vous et générez une nouvelle clé secrète.

Configuration :

1. Ajoutez le widget dans iCUE en utilisant son code <iframe> du tableau.
2. Cliquez sur l'icône Paramètres ⚙️ en haut à droite du widget.
3. Sélectionnez votre fournisseur préféré (Google, Anthropic, ou OpenAI) et collez votre clé API.
4. Cliquez sur Enregistrer. Votre clé est stockée localement de manière sécurisée dans votre session iCUE.

🎵 Spotify Visualizer

Prérequis :

• Avoir un compte Spotify Premium.

Comment l'installer :

1. Allez sur le site des développeurs Spotify avec ce lien et connectez-vous.
2. Cliquez sur Create app (Créer une application).
3. Remplissez le nom et la description de l'application.
4. Ajouter en tant que Redirect URL exactement : https://stealthylabshq.github.io/iframe-edge/spotify-visualizer/auth/callback.html
5. Et cochez la case Web API.
6. Enregistrez et récupérez votre Client ID.

Comment l'utiliser :

1. Ajoutez le widget dans iCUE comme décrit plus haut avec son URL.
2. Au chargement du widget, entrez votre Client ID pour vous connecter.
3. Autorisez l'accès à votre compte et profitez de la musique !

---