Hugging Face's logo

Spaces:
Abmacode12
/
espace-codage-3-cols
Running

App Files Community
Abmacode12 commited on
Commit
2c85448
·
verified ·
1 Parent(s): c0f95ed

<!doctype html>

Browse files

<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Espace Codage — 3 Colonnes</title>

<style>
: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; /* ✅ 3 colonnes */
}

/* ===== COLONNE 1 (inchangée) ===== */
.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; }

/* ===== COLONNE 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); }

pre.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;
}

/* ✅ Générer + Micro à GAUCHE du champ */
.promptBar{
display:flex;
gap:10px;
align-items:center;
}

.generateBtn{
padding:14px 16px;
border-radius:12px;
border:none;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}

.micBtn{
padding:14px 16px;
border-radius:12px;
border:1px solid var(--border);
background:#121b33;
color:var(--text);
cursor:pointer;
white-space:nowrap;
}

#promptInput{
flex:1;
padding:14px;
border-radius:12px;
border:1px solid var(--border);
background:#0b1222;
color:var(--text);
outline:none;
min-width:0;
}

/* ===== COLONNE 3 : VIDE 100% ===== */
.right{
border-left:1px solid var(--border);
background: transparent;
}

/* toast discret */
.toast{
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
background:rgba(15,23,42,.92);
border:1px solid rgba(124,245,220,.25);
color:#e7eefc;
padding:10px 14px;
border-radius:12px;
font-size:13px;
z-index:9999;
}
</style>
</head>

<body>
<div class="app">

<!-- COL 1 -->
<aside class="sidebar" id="colLeft">
<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>

<!-- COL 2 -->
<main class="main" id="colCenter">

<header class="smallHeader" id="mainHeader">
<h1 id="appTitle">Espace Codage</h1>
<p id="appSubtitle">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 : actions à gauche -->
<section class="promptDock">
<div class="promptBar">
<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>

<!-- COL 3 : vide -->
<aside class="right" id="colRight"></aside>
</div>

<div id="toast" class="toast" hidden></div>

<script>
// ===== util =====
const toastEl = document.getElementById("toast");
function toast(msg){
toastEl.hidden = false;
toastEl.textContent = msg;
clearTimeout(toast._t);
toast._t = setTimeout(()=>toastEl.hidden=true, 1400);
}

// ===== éléments =====
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");

const colRight = document.getElementById("colRight");
const appTitle = document.getElementById("appTitle");
const appSubtitle = document.getElementById("appSubtitle");

// ===== générateur de code (temporaire) =====
function fakeGenerate(prompt){
const p = (prompt || "").trim();
if(!p) return "// Écris une demande puis clique sur Générer ✨";
return `// ✅ Demande reçue : ${p}

function main() {
console.log("Hello Espace Codage!");
}

main();`;
}

// ===== moteur de consignes UI (simple et efficace) =

Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +102 -18
  3. script.js +139 -0
  4. style.css +54 -20
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Espace Codage 3 Cols
3
- emoji: 🐠
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
  title: Espace Codage 3 Cols
3
+ colorFrom: red
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,103 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!doctype html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Espace Codage — 3 Colonnes</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ </head>
10
+ <body class="bg-slate-950 text-slate-100 min-h-screen">
11
+ <div class="min-h-screen grid" style="grid-template-columns: 280px 1fr 360px;">
12
+ <!-- COL 1 -->
13
+ <aside class="border-r border-slate-800 bg-gradient-to-b from-slate-900/80 to-slate-950/80 p-4 flex flex-col gap-4">
14
+ <div class="flex items-center gap-3">
15
+ <div class="w-10 h-10 rounded-xl bg-slate-900/60 border border-slate-800 flex items-center justify-center text-xl">🚀</div>
16
+ <div>
17
+ <div class="font-extrabold text-slate-100">DeepSeed</div>
18
+ <div class="text-xs text-slate-400">Interface</div>
19
+ </div>
20
+ </div>
21
+
22
+ <button class="w-full py-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-bold transition">+ Nouvelle tâche</button>
23
+
24
+ <div class="flex flex-col gap-2">
25
+ <button class="w-full text-left py-3 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">🔍 Rechercher</button>
26
+ <button class="w-full text-left py-3 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">📚 Bibliothèque</button>
27
+ </div>
28
+
29
+ <div class="mt-2 text-xs tracking-widest font-extrabold uppercase text-rose-400">Projets</div>
30
+ <div class="flex flex-col gap-2">
31
+ <button class="project-item">
32
+ <span>API Utilisateurs</span>
33
+ <span class="pill green">TERMINÉ</span>
34
+ </button>
35
+ <button class="project-item active">
36
+ <span>Composant React</span>
37
+ <span class="pill orange">EN COURS</span>
38
+ </button>
39
+ <button class="project-item">
40
+ <span>Base de données</span>
41
+ <span class="pill blue">BROUILLON</span>
42
+ </button>
43
+ <button class="project-item">
44
+ <span>API REST</span>
45
+ <span class="pill purple">NOUVEAU</span>
46
+ </button>
47
+ </div>
48
+
49
+ <div class="mt-auto text-xs text-slate-400">
50
+ <div class="hint">✅ Colonne 1 fixe</div>
51
+ </div>
52
+ </aside>
53
+
54
+ <!-- COL 2 -->
55
+ <main class="p-6 flex flex-col gap-4 min-w-0">
56
+ <header>
57
+ <h1 id="appTitle" class="text-2xl font-black">Espace Codage</h1>
58
+ <p id="appSubtitle" class="text-slate-400 mt-1 text-sm">Génération de code IA (mode simple)</p>
59
+ </header>
60
+
61
+ <section class="rounded-2xl border border-slate-800 bg-slate-950/80 p-4">
62
+ <div class="flex items-center justify-between gap-3 mb-3">
63
+ <h2 class="text-rose-300 font-bold">Code généré</h2>
64
+ <div class="flex gap-2">
65
+ <button id="copyBtn" class="px-3 py-2 rounded-xl bg-slate-900/60 border border-slate-800 hover:bg-slate-900 transition">📄 Copier</button>
66
+ <button id="clearBtn" class="px-3 py-2 rounded-xl bg-rose-500/15 border border-rose-500/40 text-rose-200 hover:bg-rose-500/25 transition">🗑️ Effacer</button>
67
+ </div>
68
+ </div>
69
+ <pre id="codeOutput" class="text-slate-200 leading-relaxed whitespace-pre-wrap text-sm">// Le code généré apparaîtra ici…</pre>
70
+ </section>
71
+
72
+ <section class="rounded-2xl border border-slate-800 bg-slate-900/30 p-4">
73
+ <div class="font-extrabold text-rose-300 mb-2">Exemples de demandes :</div>
74
+ <div class="flex flex-wrap gap-2">
75
+ <button class="chip" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
76
+ <button class="chip" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
77
+ <button class="chip" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
78
+ <button class="chip" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Barre en bas -->
83
+ <section class="mt-auto rounded-2xl border border-slate-800 bg-slate-900/30 p-4">
84
+ <div class="flex items-center gap-3">
85
+ <button id="generateBtn" class="px-4 py-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-black transition">Générer ✨</button>
86
+ <button id="micBtn" class="px-4 py-3 rounded-xl border border-slate-800 bg-slate-900/60 hover:bg-slate-900 transition" title="Parler">🎤</button>
87
+ <input id="promptInput" class="flex-1 px-4 py-3 rounded-xl bg-slate-900/60 border border-slate-800 focus:outline-none focus:ring-2 focus:ring-rose-500/40" type="text" placeholder="Écrivez ici… (ex: bonjour)" />
88
+ </div>
89
+ </section>
90
+ </main>
91
+
92
+ <!-- COL 3 -->
93
+ <aside id="colRight" class="border-l border-slate-800 bg-transparent p-4">
94
+ <!-- Colonne vide par défaut -->
95
+ </aside>
96
+ </div>
97
+
98
+ <div id="toast" class="toast" hidden></div>
99
+
100
+ <script src="script.js"></script>
101
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
102
+ </body>
103
+ </html>
script.js ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // ===== util =====
2
+ const toastEl = document.getElementById("toast");
3
+ function toast(msg){
4
+ toastEl.hidden = false;
5
+ toastEl.textContent = msg;
6
+ clearTimeout(toast._t);
7
+ toast._t = setTimeout(()=>toastEl.hidden=true, 1400);
8
+ }
9
+
10
+ // ===== éléments =====
11
+ const promptInput = document.getElementById("promptInput");
12
+ const generateBtn = document.getElementById("generateBtn");
13
+ const micBtn = document.getElementById("micBtn");
14
+ const codeOutput = document.getElementById("codeOutput");
15
+ const copyBtn = document.getElementById("copyBtn");
16
+ const clearBtn = document.getElementById("clearBtn");
17
+
18
+ const colRight = document.getElementById("colRight");
19
+ const appTitle = document.getElementById("appTitle");
20
+ const appSubtitle = document.getElementById("appSubtitle");
21
+
22
+ // ===== générateur de code (temporaire) =====
23
+ function fakeGenerate(prompt){
24
+ const p = (prompt || "").trim();
25
+ if(!p) return "// Écris une demande puis clique sur Générer ✨";
26
+ return `// ✅ Demande reçue : ${p}
27
+
28
+ function main() {
29
+ console.log("Hello Espace Codage!");
30
+ }
31
+
32
+ main();`;
33
+ }
34
+
35
+ // ===== moteur de consignes UI (simple et efficace) =====
36
+ function isUiCommand(text){
37
+ const t = (text||"").toLowerCase();
38
+ return ["colonne","cache","affiche","vide","titre","sous-titre","espace codage"].some(k=>t.includes(k));
39
+ }
40
+
41
+ function applyUiCommand(text){
42
+ const raw = text || "";
43
+ const t = raw.toLowerCase();
44
+
45
+ if(t.includes("cache") && (t.includes("colonne 3") || t.includes("colonne trois") || t.includes("droite"))){
46
+ colRight.style.display = "none";
47
+ toast("✅ Colonne 3 masquée");
48
+ return true;
49
+ }
50
+
51
+ if((t.includes("affiche") || t.includes("montre")) && (t.includes("colonne 3") || t.includes("droite"))){
52
+ colRight.style.display = "";
53
+ toast("✅ Colonne 3 affichée");
54
+ return true;
55
+ }
56
+
57
+ if(t.includes("colonne 3") && t.includes("vide")){
58
+ colRight.innerHTML = "";
59
+ colRight.style.display = "";
60
+ toast("✅ Colonne 3 vidée");
61
+ return true;
62
+ }
63
+
64
+ // Titre: ...
65
+ const mTitle = raw.match(/(?:titre|nom)\s*[:=]\s*(.+)$/i);
66
+ if(mTitle){
67
+ appTitle.textContent = mTitle[1].trim();
68
+ toast("✅ Titre mis à jour");
69
+ return true;
70
+ }
71
+
72
+ // Sous-titre: ...
73
+ const mSub = raw.match(/(?:sous[-\s]?titre|description)\s*[:=]\s*(.+)$/i);
74
+ if(mSub){
75
+ appSubtitle.textContent = mSub[1].trim();
76
+ toast("✅ Sous-titre mis à jour");
77
+ return true;
78
+ }
79
+
80
+ toast("ℹ️ Consigne non reconnue");
81
+ return false;
82
+ }
83
+
84
+ // ===== actions =====
85
+ generateBtn.addEventListener("click", ()=>{
86
+ const text = promptInput.value;
87
+
88
+ if(isUiCommand(text)){
89
+ if(applyUiCommand(text)) return;
90
+ }
91
+
92
+ codeOutput.textContent = fakeGenerate(text);
93
+ });
94
+
95
+ document.querySelectorAll(".chip").forEach(btn=>{
96
+ btn.addEventListener("click", ()=>{
97
+ const p = btn.dataset.prompt || "";
98
+ promptInput.value = p;
99
+ codeOutput.textContent = fakeGenerate(p);
100
+ });
101
+ });
102
+
103
+ copyBtn.addEventListener("click", async ()=>{
104
+ try{
105
+ await navigator.clipboard.writeText(codeOutput.textContent);
106
+ toast("✅ Copié");
107
+ }catch{
108
+ alert("Copie impossible automatiquement.");
109
+ }
110
+ });
111
+
112
+ clearBtn.addEventListener("click", ()=>{
113
+ promptInput.value = "";
114
+ codeOutput.textContent = "// Le code généré apparaîtra ici…";
115
+ toast("✅ Effacé");
116
+ });
117
+
118
+ // Micro (si dispo)
119
+ let recognition = null;
120
+ if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
121
+ const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
122
+ recognition = new SR();
123
+ recognition.lang = "fr-FR";
124
+ recognition.interimResults = true;
125
+ recognition.onresult = (event) => {
126
+ let transcript = "";
127
+ for (let i = event.resultIndex; i < event.results.length; i++) {
128
+ transcript += event.results[i][0].transcript;
129
+ }
130
+ promptInput.value = transcript.trim();
131
+ };
132
+ }
133
+ micBtn.addEventListener("click", ()=>{
134
+ if(!recognition){ alert("Micro non disponible sur ce navigateur."); return; }
135
+ try{ recognition.start(); }catch{}
136
+ });
137
+
138
+ // ✅ preuve que le JS charge
139
+ toast("✅ Espace Codage prêt");
style.css CHANGED
@@ -1,28 +1,62 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
9
  }
 
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
 
 
 
 
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root{
2
+ --bg:#0b0f1a;
3
+ --panel:#0f172a;
4
+ --panel2:#0b1222;
5
+ --border:#1f2a44;
6
+ --text:#e7eefc;
7
+ --muted:#98a6c7;
8
+ --accent:#23f3c7;
9
+ --accent2:#ff2d7a;
10
  }
11
 
12
+ /* Project item styles (extend Tailwind with a few custom bits) */
13
+ .project-item{
14
+ width:100%;
15
+ padding:12px;
16
+ background:#0f1a33;
17
+ border:1px solid var(--border);
18
+ border-radius:12px;
19
+ color:var(--text);
20
+ display:flex;
21
+ align-items:center;
22
+ justify-content:space-between;
23
+ cursor:pointer;
24
  }
25
+ .project-item.active{ outline:2px solid rgba(244,63,94,0.25); }
26
 
27
+ /* Pills */
28
+ .pill{
29
+ font-size:11px;
30
+ padding:4px 8px;
31
+ border-radius:999px;
32
+ border:1px solid var(--border);
33
  }
34
+ .pill.green{ background:rgba(40,199,111,.15); }
35
+ .pill.orange{ background:rgba(255,159,67,.15); }
36
+ .pill.blue{ background:rgba(54,162,235,.15); }
37
+ .pill.purple{ background:rgba(153,102,255,.15); }
38
 
39
+ /* Chips */
40
+ .chip{
41
+ padding:10px 12px;
42
+ border-radius:999px;
43
+ background:#0f1a33;
44
+ border:1px solid var(--border);
45
+ color:var(--text);
46
+ cursor:pointer;
47
  }
48
 
49
+ /* Toast */
50
+ .toast{
51
+ position:fixed;
52
+ bottom:18px;
53
+ left:50%;
54
+ transform:translateX(-50%);
55
+ background:rgba(15,23,42,.92);
56
+ border:1px solid rgba(244,63,94,.35);
57
+ color:#e7eefc;
58
+ padding:10px 14px;
59
+ border-radius:12px;
60
+ font-size:13px;
61
+ z-index:9999;
62
+ }