| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Générateur de Code IA | Interface Moderne</title> |
| |
| |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
| <style> |
| :root { |
| --primary: #3b82f6; |
| --primary-hover: #2563eb; |
| --secondary: #10b981; |
| --bg-dark: #0f172a; |
| --bg-card: #1e293b; |
| --bg-input: #334155; |
| --text-main: #f8fafc; |
| --text-muted: #94a3b8; |
| --border: #334155; |
| --code-bg: #0d1117; |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg-dark); |
| color: var(--text-main); |
| line-height: 1.6; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| header { |
| background: rgba(30, 41, 59, 0.8); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--border); |
| padding: 1rem 2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .logo { |
| font-size: 1.25rem; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--primary); |
| } |
| |
| .logo i { |
| font-size: 1.5rem; |
| } |
| |
| .anycoder-link { |
| font-size: 0.875rem; |
| color: var(--text-muted); |
| text-decoration: none; |
| transition: color 0.3s; |
| border: 1px solid var(--border); |
| padding: 5px 12px; |
| border-radius: 20px; |
| } |
| |
| .anycoder-link:hover { |
| color: var(--primary); |
| border-color: var(--primary); |
| } |
| |
| |
| main { |
| flex: 1; |
| max-width: 1200px; |
| width: 100%; |
| margin: 0 auto; |
| padding: 2rem; |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 2rem; |
| } |
| |
| @media (min-width: 900px) { |
| main { |
| grid-template-columns: 350px 1fr; |
| align-items: start; |
| } |
| } |
| |
| |
| .input-section { |
| background: var(--bg-card); |
| padding: 1.5rem; |
| border-radius: 16px; |
| border: 1px solid var(--border); |
| box-shadow: var(--shadow); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .input-section h2 { |
| font-size: 1.1rem; |
| margin-bottom: 1rem; |
| color: var(--text-main); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-size: 0.9rem; |
| color: var(--text-muted); |
| } |
| |
| textarea { |
| width: 100%; |
| height: 120px; |
| background: var(--bg-input); |
| border: 2px solid transparent; |
| border-radius: 8px; |
| padding: 12px; |
| color: var(--text-main); |
| font-family: 'Inter', sans-serif; |
| font-size: 1rem; |
| resize: vertical; |
| transition: all 0.3s ease; |
| } |
| |
| textarea:focus { |
| outline: none; |
| border-color: var(--primary); |
| background: #1e293b; |
| } |
| |
| .btn-generate { |
| width: 100%; |
| padding: 14px; |
| background: linear-gradient(135deg, var(--primary), var(--primary-hover)); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: transform 0.2s, box-shadow 0.2s; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .btn-generate:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); |
| } |
| |
| .btn-generate:active { |
| transform: translateY(0); |
| } |
| |
| |
| .suggestions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 1rem; |
| } |
| |
| .chip { |
| background: rgba(59, 130, 246, 0.1); |
| color: var(--primary); |
| padding: 6px 12px; |
| border-radius: 20px; |
| font-size: 0.8rem; |
| cursor: pointer; |
| transition: background 0.2s; |
| border: 1px solid rgba(59, 130, 246, 0.2); |
| } |
| |
| .chip:hover { |
| background: rgba(59, 130, 246, 0.2); |
| } |
| |
| |
| .output-section { |
| display: flex; |
| flex-direction: column; |
| gap: 1.5rem; |
| } |
| |
| .tabs { |
| display: flex; |
| gap: 1rem; |
| border-bottom: 1px solid var(--border); |
| padding-bottom: 1px; |
| } |
| |
| .tab { |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| padding: 8px 16px; |
| cursor: pointer; |
| font-size: 0.95rem; |
| font-weight: 500; |
| position: relative; |
| transition: color 0.3s; |
| } |
| |
| .tab.active { |
| color: var(--primary); |
| } |
| |
| .tab.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: var(--primary); |
| } |
| |
| .panel { |
| display: none; |
| background: var(--bg-card); |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| overflow: hidden; |
| animation: fadeIn 0.3s ease; |
| } |
| |
| .panel.active { |
| display: block; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(5px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| .code-container { |
| position: relative; |
| background: var(--code-bg); |
| } |
| |
| .code-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 8px 16px; |
| background: #161b22; |
| border-bottom: 1px solid #30363d; |
| } |
| |
| .lang-label { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| font-family: 'Fira Code', monospace; |
| } |
| |
| .btn-copy { |
| background: transparent; |
| border: 1px solid var(--border); |
| color: var(--text-muted); |
| padding: 4px 10px; |
| border-radius: 4px; |
| font-size: 0.8rem; |
| cursor: pointer; |
| transition: all 0.2s; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| .btn-copy:hover { |
| color: var(--text-main); |
| border-color: var(--text-muted); |
| } |
| |
| pre { |
| margin: 0; |
| padding: 1.5rem; |
| overflow-x: auto; |
| color: #e6edf3; |
| font-family: 'Fira Code', monospace; |
| font-size: 0.9rem; |
| white-space: pre-wrap; |
| } |
| |
| |
| .preview-container { |
| width: 100%; |
| height: 400px; |
| background: white; |
| border: none; |
| } |
| |
| |
| .explanation-content { |
| padding: 1.5rem; |
| } |
| |
| .explanation-content h4 { |
| color: var(--primary); |
| margin-bottom: 1rem; |
| } |
| |
| .explanation-content ul { |
| padding-left: 1.5rem; |
| color: var(--text-muted); |
| } |
| |
| .explanation-content li { |
| margin-bottom: 0.5rem; |
| } |
| |
| |
| footer { |
| text-align: center; |
| padding: 2rem; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| margin-top: auto; |
| } |
| |
| |
| .tag { color: #7ee787; } |
| .attr { color: #79c0ff; } |
| .val { color: #a5d6ff; } |
| .keyword { color: #ff7b72; } |
| .func { color: #d2a8ff; } |
| |
| </style> |
| </head> |
| <body> |
|
|
| <header> |
| <div class="logo"> |
| <i class="fa-solid fa-code"></i> |
| <span>SimpleGen AI</span> |
| </div> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> |
| Built with anycoder |
| </a> |
| </header> |
|
|
| <main> |
| |
| <section class="input-section"> |
| <h2><i class="fa-solid fa-wand-magic-sparkles"></i> Configuration</h2> |
| <div class="form-group"> |
| <label for="prompt">Décrivez votre application :</label> |
| <textarea id="prompt" placeholder="Ex: une calculatrice simple, un compte à rebours, une liste de tâches..."></textarea> |
| </div> |
| |
| <button class="btn-generate" onclick="generate()"> |
| <i class="fa-solid fa-bolt"></i> Générer le code |
| </button> |
|
|
| <div class="suggestions"> |
| <span class="chip" onclick="setPrompt('compteur')">Compteur</span> |
| <span class="chip" onclick="setPrompt('calculatrice')">Calculatrice</span> |
| <span class="chip" onclick="setPrompt('liste de tâches')">To-Do List</span> |
| <span class="chip" onclick="setPrompt('générateur de couleur')">Couleurs</span> |
| <span class="chip" onclick="setPrompt('minuteur')">Minuteur</span> |
| </div> |
| </section> |
|
|
| |
| <section class="output-section"> |
| <div class="tabs"> |
| <button class="tab active" onclick="switchTab('preview')"><i class="fa-solid fa-eye"></i> Aperçu</button> |
| <button class="tab" onclick="switchTab('code')"><i class="fa-solid fa-file-code"></i> Code Source</button> |
| <button class="tab" onclick="switchTab('explain')"><i class="fa-solid fa-book-open"></i> Explications</button> |
| </div> |
|
|
| |
| <div id="panel-preview" class="panel active"> |
| <div class="code-header"> |
| <span class="lang-label">Live Render</span> |
| </div> |
| <iframe id="previewFrame" class="preview-container" title="Aperçu"></iframe> |
| </div> |
|
|
| |
| <div id="panel-code" class="panel"> |
| <div class="code-container"> |
| <div class="code-header"> |
| <span class="lang-label">index.html</span> |
| <button class="btn-copy" onclick="copyCode()"> |
| <i class="fa-regular fa-copy"></i> Copier |
| </button> |
| </div> |
| <pre id="code"></pre> |
| </div> |
| </div> |
|
|
| |
| <div id="panel-explain" class="panel"> |
| <div class="explanation-content" id="explain"> |
| <p style="color: var(--text-muted); font-style: italic;">Générez du code pour voir les explications détaillées ici.</p> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| <p>© 2023 SimpleGen AI. Interface démonstrative en HTML/CSS/JS pur.</p> |
| </footer> |
|
|
| <script> |
| // --- Templates et Logique de Génération --- |
| |
| const templates = { |
| counter: { |
| keywords: ['compteur', 'counter', 'incrémenter', 'compte'], |
| code: `<!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #f0f2f5; } |
| .card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } |
| h1 { color: #333; } |
| #count { font-size: 4rem; font-weight: bold; color: #2563eb; margin: 20px 0; } |
| button { padding: 10px 20px; font-size: 1.2rem; cursor: pointer; border: none; border-radius: 6px; margin: 0 5px; transition: opacity 0.2s; } |
| .btn-inc { background: #2563eb; color: white; } |
| .btn-dec { background: #ef4444; color: white; } |
| button:hover { opacity: 0.9; } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Compteur</h1> |
| <div id="count">0</div> |
| <button class="btn-dec" onclick="update(-1)">-</button> |
| <button class="btn-inc" onclick="update(1)">+</button> |
| </div> |
| <script> |
| let count = 0; |
| function update(val) { |
| count += val; |
| document.getElementById('count').innerText = count; |
| } |
| <\/script> |
| </body> |
| </html>`, |
| explanation: ` |
| <h4><i class="fa-solid fa-list-ol"></i> Fonctionnement du Compteur</h4> |
| <ul> |
| <li><strong>Structure HTML :</strong> Une carte (div) centrée contenant le titre, l'affichage du nombre et deux boutons.</li> |
| <li><strong>Style CSS :</strong> Utilisation de Flexbox pour centrer le contenu verticalement et horizontalement. Les boutons ont des couleurs distinctes pour l'action positive (+) et négative (-).</li> |
| <li><strong>Logique JS :</strong> Une variable <code>count</code> stocke la valeur. La fonction <code>update(val)</code> modifie cette valeur et met à jour le texte de l'élément avec l'ID "count".</li> |
| </ul> |
| ` |
| }, |
| calculator: { |
| keywords: ['calculatrice', 'calcul', 'math', 'calculator'], |
| code: `<!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } |
| .calc { background: #333; padding: 20px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); width: 260px; } |
| #display { width: 100%; height: 50px; background: #444; color: white; border: none; text-align: right; font-size: 24px; padding: 10px; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box; } |
| .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } |
| button { padding: 15px; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; background: #555; color: white; transition: 0.1s; } |
| button:hover { background: #666; } |
| .op { background: #f39c12; } |
| .eq { background: #27ae60; grid-column: span 2; } |
| .clr { background: #c0392b; } |
| </style> |
| </head> |
| <body> |
| <div class="calc"> |
| <input type="text" id="display" readonly> |
| <div class="grid"> |
| <button class="clr" onclick="clearD()">C</button> |
| <button class="op" onclick="append('/')">/</button> |
| <button class="op" onclick="append('*')">×</button> |
| <button onclick="append('7')">7</button> |
| <button onclick="append('8')">8</button> |
| <button onclick="append('9')">9</button> |
| <button class="op" onclick="append('-')">-</button> |
| <button onclick="append('4')">4</button> |
| <button onclick="append('5')">5</button> |
| <button onclick="append('6')">6</button> |
| <button class="op" onclick="append('+')">+</button> |
| <button onclick="append('1')">1</button> |
| <button onclick="append('2')">2</button> |
| <button onclick="append('3')">3</button> |
| <button class="eq" onclick="calc()">=</button> |
| <button onclick="append('0')">0</button> |
| <button onclick="append('.')">.</button> |
| </div> |
| </div> |
| <script> |
| const display = document.getElementById('display'); |
| function append(v) { display.value += v; } |
| function clearD() { display.value = ''; } |
| function calc() { |
| try { display.value = eval(display.value); } |
| catch { display.value = 'Erreur'; } |
| } |
| <\/script> |
| </body> |
| </html>`, |
| explanation: ` |
| <h4><i class="fa-solid fa-calculator"></i> Logique de la Calculatrice</h4> |
| <ul> |
| <li><strong>Affichage :</strong> Un champ input en lecture seule affiche la chaîne de calcul.</li> |
| <li><strong>Grille CSS :</strong> Le pavé numérique utilise CSS Grid pour aligner parfaitement les boutons.</li> |
| <li><strong>Fonctions JS :</strong> |
| <ul> |
| <li><code>append(v)</code> : Ajoute le chiffre ou l'opérateur à la chaîne.</li> |
| <li><code>clearD()</code> : Efface tout le contenu.</li> |
| <li><code>calc()</code> : Utilise <code>eval()</code> pour calculer le résultat mathématique de la chaîne (avec gestion d'erreur simple).</li> |
| </ul> |
| </li> |
| </ul> |
| ` |
| }, |
| todo: { |
| keywords: ['tâche', 'todo', 'liste', 'task'], |
| code: `<!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { font-family: sans-serif; background: #eef2f3; padding: 20px; } |
| .container { max-width: 400px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } |
| h2 { text-align: center; color: #333; } |
| input[type="text"] { width: 70%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } |
| button { padding: 10px 15px; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; } |
| ul { list-style: none; padding: 0; } |
| li { background: #f9f9f9; margin: 8px 0; padding: 10px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; } |
| li.done span { text-decoration: line-through; color: #888; } |
| .del-btn { background: #dc3545; padding: 5px 10px; font-size: 12px; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h2>Ma Liste</h2> |
| <div style="display:flex; gap:5px; margin-bottom: 20px;"> |
| <input type="text" id="taskInput" placeholder="Nouvelle tâche..."> |
| <button onclick="add()">Ajouter</button> |
| </div> |
| <ul id="list"></ul> |
| </div> |
| <script> |
| function add() { |
| const txt = document.getElementById('taskInput').value; |
| if(!txt) return; |
| |
| const li = document.createElement('li'); |
| li.innerHTML = '<span onclick="this.parentElement.classList.toggle(\\'done\\')">' + txt + '</span> <button class="del-btn" onclick="this.parentElement.remove()">X</button>'; |
| document.getElementById('list').appendChild(li); |
| document.getElementById('taskInput').value = ''; |
| } |
| <\/script> |
| </body> |
| </html>`, |
| explanation: ` |
| <h4><i class="fa-solid fa-check-square"></i> Gestion de Liste de Tâches</h4> |
| <ul> |
| <li><strong>Ajout dynamique :</strong> La fonction <code>add()</code> crée un nouvel élément <code>li</code> via <code>document.createElement</code> et l'ajoute à la liste <code>ul</code>.</li> |
| <li><strong>Interaction :</strong> Cliquer sur le texte de la tâche bascule la classe CSS <code>done</code>, qui applique un style barré via <code>text-decoration: line-through</code>.</li> |
| <li><strong>Suppression :</strong> Chaque tâche possède un bouton "X" qui appelle <code>this.parentElement.remove()</code> pour supprimer l'élément du DOM.</li> |
| </ul> |
| ` |
| }, |
| color: { |
| keywords: ['couleur', 'color', 'background', 'thème'], |
| code: `<!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; transition: background 0.5s; text-align: center; } |
| .card { background: rgba(255,255,255,0.9); padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } |
| h1 { margin-bottom: 20px; } |
| button { padding: 15px 30px; font-size: 18px; cursor: pointer; background: #333; color: white; border: none; border-radius: 50px; transition: transform 0.2s; } |
| button:hover { transform: scale(1.05); } |
| #hex { font-size: 24px; font-family: monospace; margin-top: 20px; color: #333; font-weight: bold; } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Générateur de Couleur</h1> |
| <button onclick="changeColor()">Changer la couleur</button> |
| <div id="hex">#FFFFFF</div> |
| </div> |
| <script> |
| function changeColor() { |
| const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0'); |
| document.body.style.background = randomColor; |
| document.getElementById('hex').innerText = randomColor.toUpperCase(); |
| |
| // Ajuster la couleur du texte si fond trop sombre (simplifié) |
| document.getElementById('hex').style.color = randomColor; |
| } |
| <\/script> |
| </body> |
| </html>`, |
| explanation: ` |
| <h4><i class="fa-solid fa-palette"></i> Générateur Aléatoire</h4> |
| <ul> |
| <li><strong>Math.random :</strong> Génère un nombre hexadécimal aléatoire pour créer une couleur RGB.</li> |
| <li><strong>Manipulation du DOM :</strong> La fonction modifie directement le style <code>background</code> du <code>body</code> pour changer la couleur de toute la page.</li> |
| <li><strong>Interaction :</strong> Un bouton déclenche la fonction, offrant un retour visuel immédiat.</li> |
| </ul> |
| ` |
| } |
| }; |
| |
| const defaultTemplate = { |
| code: `<!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; } |
| .card { background: white; padding: 40px; border-radius: 12px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } |
| h1 { color: #333; margin-bottom: 10px; } |
| p { color: #666; } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Hello World!</h1> |
| <p>Je n'ai pas compris votre demande, mais voici une belle carte par défaut.</p> |
| </div> |
| </body> |
| </html>`, |
| explanation: `<p>Aucun modèle spécifique n'a été détecté dans votre demande. Essayez des mots-clés comme "compteur", "calculatrice" ou "liste".</p>` |
| }; |
| |
| // --- Fonctions Principales --- |
| |
| function setPrompt(text) { |
| const textarea = document.getElementById('prompt'); |
| textarea.value = text; |
| textarea.focus(); |
| generate(); |
| } |
| |
| function switchTab(tabName) { |
| // Mettre à jour les boutons |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); |
| const index = ['preview', 'code', 'explain'].indexOf(tabName); |
| document.querySelectorAll('.tab')[index].classList.add('active'); |
| |
| // Mettre à jour les panneaux |
| document.querySelectorAll('.panel').forEach(p => p.classList.remove('active')); |
| document.getElementById('panel-' + tabName).classList.add('active'); |
| } |
| |
| function generate() { |
| const prompt = document.getElementById('prompt').value.toLowerCase(); |
| let result = defaultTemplate; |
| let found = false; |
| |
| // Recherche simple de mots-clés |
| for (const key in templates) { |
| const t = templates[key]; |
| if (t.keywords.some(k => prompt.includes(k))) { |
| result = t; |
| found = true; |
| break; |
| } |
| } |
| |
| // Affichage du code brut |
| document.getElementById('code').textContent = result.code; |
| |
| // Affichage des explications |
| document.getElementById('explain').innerHTML = result.explanation; |
| |
| // Mise à jour de l'iframe (Preview) |
| const iframe = document.getElementById('previewFrame'); |
| const doc = iframe.contentDocument || iframe.contentWindow.document; |
| doc.open(); |
| doc.write(result.code); |
| doc.close(); |
| |
| // Switch automatique vers l'onglet preview si on vient de cliquer sur générer |
| switchTab('preview'); |
| } |
| |
| function copyCode() { |
| const codeText = document.getElementById('code').textContent; |
| navigator.clipboard.writeText(codeText).then(() => { |
| const btn = document.querySelector('.btn-copy'); |
| const originalHTML = btn.innerHTML; |
| btn.innerHTML = '<i class="fa-solid fa-check"></i> Copié !'; |
| btn.style.color = 'var(--secondary)'; |
| btn.style.borderColor = 'var(--secondary)'; |
| |
| setTimeout(() => { |
| btn.innerHTML = originalHTML; |
| btn.style.color = ''; |
| btn.style.borderColor = ''; |
| }, 2000); |
| }); |
| } |
| |
| // Générer un "Hello World" au chargement initial |
| window.onload = function() { |
| document.getElementById('prompt').value = ""; |
| // On peut pré-remplir ou laisser vide. Laissons vide pour inviter à l'action. |
| }; |
| |
| </script> |
| </body> |
| </html> |
