|
|
<!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> |
