Hugging Face's logo

Spaces:
Abmacode12
/
deepseed-interface
Running

App Files Community
deepseed-interface
File size: 7,866 Bytes
dca3691
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8f2764e
 
dca3691
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8f2764e
 
 
 
dca3691
8f2764e
dca3691
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8f2764e
 
dca3691
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8f2764e
dca3691
 
 
8f2764e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>DeepSeed — Interface 3 Colonnes</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#f43f5e', // rose-500
          }
        }
      }
    }
  </script>
</head>

<body>
  <div class="app h-screen grid grid-cols-[280px_1fr_360px]">
    <!-- COLONNE 1 : SIDEBAR -->
    <aside class="sidebar bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-700 p-4 flex flex-col gap-4" id="colLeft">
<div class="brand flex items-center gap-3">
        <div class="logo w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🚀</div>
        <div class="brandText">
          <div class="brandName font-extrabold text-lg text-primary">DeepSeed</div>
          <div class="brandSub text-xs text-slate-400">Interface</div>
        </div>
      </div>

      <button class="btnPrimary w-full py-3 px-3 border-none rounded-xl bg-gradient-to-r from-primary to-pink-500 text-white font-bold cursor-pointer">+ Nouvelle tâche</button>

      <div class="nav flex flex-col gap-3 mt-2">
        <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">🔍 Rechercher</button>
        <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">📚 Bibliothèque</button>
      </div>

      <div class="sectionTitle mt-3 text-xs tracking-widest text-primary font-extrabold">PROJETS</div>

      <div class="projects flex flex-col gap-3">
        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
          <span>API Utilisateurs</span>
          <span class="pill bg-emerald-500/15 text-emerald-400 text-xs px-2 py-1 rounded-full border border-emerald-500/20">TERMINÉ</span>
        </button>

        <button class="projectItem active w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer outline outline-2 outline-primary/20">
          <span>Composant React</span>
          <span class="pill bg-orange-500/15 text-orange-400 text-xs px-2 py-1 rounded-full border border-orange-500/20">EN COURS</span>
        </button>

        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
          <span>Base de données</span>
          <span class="pill bg-blue-500/15 text-blue-400 text-xs px-2 py-1 rounded-full border border-blue-500/20">BROUILLON</span>
        </button>

        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
          <span>API REST</span>
          <span class="pill bg-purple-500/15 text-purple-400 text-xs px-2 py-1 rounded-full border border-purple-500/20">NOUVEAU</span>
        </button>
      </div>

      <div class="sidebarFooter mt-auto text-slate-400 text-xs">
        <div class="hint">✅ Menu fixe — rien ne bouge</div>
      </div>
    </aside>
    <!-- COLONNE 2 : GÉNÉRATEUR (barre en bas) -->
    <main class="main p-6 flex flex-col gap-4 min-w-0" id="colCenter">
<header class="mainHeader 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 bg-slate-900/85 border border-slate-700 rounded-2xl p-4 min-h-[280px]">
        <div class="codeTop flex items-center justify-between gap-3 mb-3">
          <h2 class="text-lg text-primary font-semibold">Code généré</h2>
          <div class="codeActions flex gap-3">
            <button id="copyBtn" class="smallBtn py-2.5 px-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl cursor-pointer">📄 Copier</button>
            <button id="clearBtn" class="smallBtn danger py-2.5 px-3 bg-primary/15 border border-primary/20 text-primary rounded-xl cursor-pointer">🗑️ Effacer</button>
          </div>
        </div>

        <pre id="codeOutput" class="codeOutput whitespace-pre-wrap leading-6 text-slate-200 text-sm">// Le code généré apparaîtra ici…</pre>
      </section>

      <section class="examples bg-slate-800/35 border border-slate-700 rounded-2xl p-4">
        <div class="examplesTitle text-primary font-extrabold mb-3">Exemples de demandes :</div>
        <div class="chips flex gap-3 flex-wrap">
          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
        </div>
      </section>

      <!-- ✅ BARRE DÉPLACÉE EN BAS (zone flèche) -->
      <section class="promptDock mt-auto bg-slate-800/35 border border-slate-700 rounded-2xl p-4">
        <div class="promptBar flex gap-3">
          <input id="promptInput" type="text" placeholder="Décrivez votre idée ou thème..." class="flex-1 py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none" />
          <button id="generateBtn" class="generateBtn py-3.5 px-4 rounded-xl border-none bg-gradient-to-r from-primary to-pink-400 text-slate-900 font-black cursor-pointer">Générer ✨</button>
          <button id="micBtn" class="micBtn py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-800 text-slate-100 cursor-pointer" title="Parler">🎤</button>
        </div>

        <div class="dockHint mt-3 text-xs text-slate-400">
          La barre est volontairement en bas (comme ta flèche rouge).
        </div>
      </section>
    </main>
    <!-- COLONNE 3 : VIDE + petit titre seulement -->
    <aside class="right emptyRight bg-gradient-to-b from-slate-900 to-slate-950 border-l border-slate-700 p-4 flex flex-col gap-4" id="colRight" aria-label="Colonne de droite">
<div class="rightHeader flex items-center gap-3 p-3 rounded-2xl border border-slate-700 bg-slate-900">
        <div class="avatar w-11 h-11 rounded-2xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🤖</div>
        <div>
          <div class="rightTitle font-black">Générateur de Code IA</div>
          <div class="rightSub text-slate-400 text-xs">Rosalinda (zone vide)</div>
        </div>
      </div>

      <!-- ✅ vide (future grande image/vidéo/preview) -->
      <div class="emptyStage flex-1 rounded-2xl border-2 border-dashed border-primary/25 bg-slate-900/35 flex items-center justify-center text-center p-5" id="stage">
        <div class="emptyText text-slate-300/60">
          Zone vide (future image / vidéo / preview)
        </div>
      </div>
    </aside>

  </div>
  <div id="toast" class="toast" hidden></div>
  <script src="./script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>