Spaces:
Running
index.html
Browse files<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Espace Codage — Interface 3 Colonnes</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="app">
<!-- COLONNE 1 : SIDEBAR (inchangée) -->
<aside class="sidebar">
<div class="brand">
<div class="logo">🚀</div>
<div class="brandText">
<div class="brandName">DeepSeed</div>
<div class="brandSub">Interface</div>
</div>
</div>
<button class="btnPrimary">+ Nouvelle tâche</button>
<div class="nav">
<button class="navBtn">🔍 Rechercher</button>
<button class="navBtn">📚 Bibliothèque</button>
</div>
<div class="sectionTitle">PROJETS</div>
<div class="projects">
<button class="projectItem">
<span>API Utilisateurs</span>
<span class="pill green">TERMINÉ</span>
</button>
<button class="projectItem active">
<span>Composant React</span>
<span class="pill orange">EN COURS</span>
</button>
<button class="projectItem">
<span>Base de données</span>
<span class="pill blue">BROUILLON</span>
</button>
<button class="projectItem">
<span>API REST</span>
<span class="pill purple">NOUVEAU</span>
</button>
</div>
<div class="sidebarFooter">
<div class="hint">✅ Colonne 1 fixe</div>
</div>
</aside>
<!-- COLONNE 2 : ESPACE CODAGE -->
<main class="main">
<!-- ✅ Titre plus petit + nom entreprise -->
<header class="mainHeader smallHeader">
<h1>Espace Codage</h1>
<p>Génération de code IA (mode simple)</p>
</header>
<section class="codePanel">
<div class="codeTop">
<h2>Code généré</h2>
<div class="codeActions">
<button id="copyBtn" class="smallBtn">📄 Copier</button>
<button id="clearBtn" class="smallBtn danger">🗑️ Effacer</button>
</div>
</div>
<pre id="codeOutput" class="codeOutput">// Le code généré apparaîtra ici…</pre>
</section>
<section class="examples">
<div class="examplesTitle">Exemples de demandes :</div>
<div class="chips">
<button class="chip" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
<button class="chip" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
<button class="chip" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
<button class="chip" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
</div>
</section>
<!-- ✅ BARRE EN BAS : Générer + Micro à GAUCHE du champ -->
<section class="promptDock">
<div class="promptBar leftActions">
<button id="generateBtn" class="generateBtn">Générer ✨</button>
<button id="micBtn" class="micBtn" title="Parler">🎤</button>
<input id="promptInput" type="text" placeholder="Écrivez ici… (ex: bonjour)" />
</div>
</section>
</main>
<!-- COLONNE 3 : VIDE 100% -->
<aside class="right emptyRight" aria-label="Colonne vide"></aside>
</div>
<script src="./app.js"></script>
</body>
</html>
2) styles.css
:root{
--bg:#0b0f1a;
--panel:#0f172a;
--panel2:#0b1222;
--border:#1f2a44;
--text:#e7eefc;
--muted:#98a6c7;
--accent:#23f3c7;
--accent2:#ff2d7a;
}
*{ box-sizing:border-box; margin:0; padding:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ background:var(--bg); color:var(--text); height:100vh; }
.app{
height:100vh;
display:grid;
grid-template-columns: 280px 1fr 360px;
}
/* ===== COL 1 ===== */
.sidebar{
background: linear-gradient(180deg, #0e1424, #0a1020);
border-right:1px solid var(--border);
padding:18px;
display:flex;
flex-direction:column;
gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
width:40px; height:40px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:#121b33; border:1px solid var(--border);
}
.brandName{ font-weight:800; font-size:20px; color:#7cf5dc; }
.brandSub{ font-size:12px; color:var(--muted); }
.btnPrimary{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:700;
cursor:pointer;
}
.nav{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.navBtn{
width:100%;
padding:12px;
background:#121b33;
border:1px solid var(--border);
border-radius:10px;
color:var(--text);
text-align:left;
cursor:pointer;
}
.sectionTitle{
margin-top:10px;
font-size:12px;
letter-spacing:1px;
color:#7cf5dc;
font-weight:800;
}
.projects{ display:flex; flex-direction:column; gap:10px; }
.projectItem{
width:100%;
padding:12px;
background:#0f1a33;
border:1px solid var(--border);
border-radius:12px;
color:var(--text);
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
}
.projectItem.active{ outline:2px solid rgba(35,243,199,0.25); }
.pill{
font-size:11px;
padding:4px 8px;
border-radius:999px;
border:1px solid var(--border);
}
.pill.green{ background:rgba(40,199,111,.15); }
.pill.orange{ background:rgba(255,159,67,.15); }
.pill.blue{ background:rgba(54,162,235,.15); }
.pill.purple{ background:rgba(153,102,255,.15); }
.sidebarFooter{ margin-top:auto; color:var(--muted); font-size:12px; }
/* ===== COL 2 ===== */
.main{
padding:22px;
display:flex;
flex-direction:column;
gap:16px;
min-width:0;
}
.smallHeader h1{ font-size:22px; font-weight:900; }
.smallHeader p{ color:var(--muted); margin-top:4px; font-size:12px; }
.codePanel{
background:rgba(5, 9, 20, .85);
border:1px solid var(--border);
border-radius:16px;
padding:16px;
min-height:260px;
}
.codeTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.codeTop h2{ font-size:16px; color:#7cf5dc; }
.codeActions{ display:flex; gap:10px; }
.smallBtn{
padding:10px 12px;
background:#121b33;
border:1px solid var(--border);
color:var(--text);
border-radius:10px;
cursor:pointer;
}
.smallBtn.danger{ background:rgba(255,45,122,.15); }
.codeOutput{
white-space:pre-wrap;
line-height:1.5;
color:#d9e6ff;
font-size:13px;
}
.examples{
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}
.examplesTitle{ color:#7cf5dc; font-weight:800; margin-bottom:10px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
padding:10px 12px;
border-radius:999px;
background:#0f1a33;
border:1px solid var(--border);
color:var(--text);
cursor:pointer;
}
/* ✅ barre en bas */
.promptDock{
margin-top:auto;
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}
.promptBar{
display:flex;
gap:10px;
align-items:center;
}
/* ✅ actions à gauche */
.leftActions #promptInput{ order: 3; flex:1; }
#promptInput{
padding:14px;
border-radius:12px;
border:1px solid var(--border);
background:#0b1222;
color:var(--text);
outline:none;
min-width: 0;
}
.generateBtn{
padding:14px 16px;
border-radius:12px;
border:none;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:900;
cursor:pointer;
}
.micBtn{
padding:14px 16px;
border-radius:12px;
border:1px solid var(--border);
background:#121b33;
color:var(--text);
cursor:pointer;
}
/* ===== COL 3 : VIDE 100% ===== */
.right{
border-left:1px solid var(--border);
background: transparent;
}
.emptyRight{
background: transparent;
padding:0;
}
3) app.js
const promptInput = document.getElementById("promptInput");
const generateBtn = document.getElementById("generateBtn");
const micBtn = document.getElementById("micBtn");
const codeOutput = document.getElementById("codeOutput");
const copyBtn = document.getElementById("copyBtn");
const clearBtn = document.getElementById("clearBtn");
function fakeGenerate(prompt) {
const p = (prompt || "").trim();
if (!p) return "// Écris une demande dans la barre en bas, puis clique sur Générer ✨";
return `// ✅ Demande reçue : ${p}
function main() {
console.log("Hello Rosalinda!");
}
// (Ici, tu brancheras ton IA pour générer du vrai code)
main();`;
}
generateBtn.addEventListener("click", () => {
codeOutput.textContent = fakeGenerate(promptInput.value);
});
document.querySelectorAll(".chip").forEach((btn) => {
btn.addEventListener("click", () => {
const p = btn.dataset.prompt || "";
promptInput.value = p;
codeOutput.textContent = fakeGenerate(p);
});
});
copyBtn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(codeOutput.textContent);
copyBtn.textContent = "✅ Copié";
setTimeout(() => (copyBtn.textContent = "📄 Copier"), 1200);
} catch {
alert("Impossible de copier automatiquement.");
}
});
clearBtn.addEventListener("click", () => {
promptInput.value = "";
codeOutput.textContent = "// Le code généré apparaîtra ici…";
});
/* 🎤 Micro (Web Speech API) */
let recognition = null;
if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
recognition = new SR();
recognition.lang = "fr-FR";
recognition.interimResults = true;
recognition.onresult = (event) => {
let transcript = "";
for (let i = event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
promptInput.value = transcript.trim();
};
}
micBtn.addEventListener("click", () => {
if (!recognition) {
alert("Micro non disponible sur ce navigateur.");
return;
}
try { recognition.start(); } catch {}
});
Si tu veux