Hugging Face's logo

Spaces:
Mattimax
/
DAC_UI
Running

App Files Community
Mattimax commited on
Commit
c50e21e
·
verified ·
1 Parent(s): d71b6eb

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +302 -96
index.html CHANGED
@@ -3,160 +3,366 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DAC - AI Interface</title>
7
  <style>
8
  :root {
9
- /* Palette ispirata ai modelli AI moderni */
10
- --bg-color: #050505;
 
 
11
  --text-main: #ffffff;
12
- --ai-gradient: linear-gradient(135deg, #4285f4, #9b72cb, #d96570, #f4af4a);
13
- --aura-opacity: 0.4;
 
 
 
14
  }
15
 
16
- body, html {
17
- margin: 0;
18
- padding: 0;
19
- width: 100%;
20
- height: 100%;
21
- background-color: var(--bg-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  display: flex;
23
- justify-content: center;
24
  align-items: center;
25
- /* Font di sistema che sembrano premium (Apple/Windows) */
26
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  overflow: hidden;
 
 
 
 
 
28
  color: var(--text-main);
29
  }
30
 
31
- /* Container principale */
32
- .interface-wrapper {
33
- position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  display: flex;
35
  flex-direction: column;
36
  align-items: center;
37
- z-index: 10;
 
38
  }
39
 
40
- /* L'effetto Aura dietro il testo (ispirato a Google AI) */
41
- .aura-container {
42
- position: absolute;
43
- top: 50%;
44
- left: 50%;
45
- transform: translate(-50%, -50%);
46
- width: 400px;
47
- height: 400px;
48
- z-index: -1;
49
- filter: blur(80px);
50
- opacity: var(--aura-opacity);
51
- animation: aura-rotate 10s infinite linear;
52
  }
53
 
54
- .aura-layer {
55
  position: absolute;
56
- inset: 0;
57
- background: var(--ai-gradient);
 
 
 
 
 
58
  border-radius: 50%;
 
59
  }
60
 
61
- /* Il Logo DAC con gradiente animato */
62
- .logo-dac {
63
- font-size: 3.5rem;
64
- font-weight: 700;
65
- letter-spacing: -2px;
66
- margin-bottom: 20px;
67
- background: var(--ai-gradient);
68
- background-size: 300% 300%;
69
  -webkit-background-clip: text;
70
  -webkit-text-fill-color: transparent;
71
- animation: gradient-shift 6s ease infinite;
72
- position: relative;
73
  }
74
 
75
- /* Sottotitolo elegante */
76
- .status-text {
77
- font-size: 0.9rem;
78
- letter-spacing: 2px;
79
- text-transform: uppercase;
80
- opacity: 0.5;
81
- font-weight: 300;
82
  }
83
 
84
- /* Barra di input stile Claude (minimalista e fluttuante) */
85
- .input-area {
86
  position: fixed;
87
- bottom: 50px;
88
  width: 100%;
89
- max-width: 700px;
90
  padding: 0 20px;
91
  }
92
 
93
- .input-container {
94
- background: rgba(255, 255, 255, 0.03);
95
- border: 1px solid rgba(255, 255, 255, 0.1);
96
  border-radius: 24px;
97
- padding: 15px 25px;
98
  display: flex;
99
  align-items: center;
100
- backdrop-filter: blur(10px);
101
- transition: all 0.3s ease;
102
  }
103
 
104
- .input-container:focus-within {
105
- border-color: rgba(255, 255, 255, 0.3);
106
- background: rgba(255, 255, 255, 0.05);
107
- box-shadow: 0 0 30px rgba(155, 114, 203, 0.1);
 
 
 
 
 
 
108
  }
109
 
110
- .input-placeholder {
111
- color: rgba(255, 255, 255, 0.4);
112
- font-size: 1rem;
113
- flex-grow: 1;
 
 
 
 
 
114
  }
115
 
116
- /* ANIMAZIONI */
117
- @keyframes gradient-shift {
118
- 0% { background-position: 0% 50%; }
119
- 50% { background-position: 100% 50%; }
120
- 100% { background-position: 0% 50%; }
 
 
 
 
 
121
  }
 
122
 
123
- @keyframes aura-rotate {
124
- 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
125
- 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
126
- 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
 
 
127
  }
128
 
129
- /* Effetto particelle di sfondo (opzionale, molto sottile) */
130
- .background-glow {
131
- position: fixed;
132
- top: 0;
133
- left: 0;
134
- width: 100%;
135
- height: 100%;
136
- background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050505 100%);
137
- z-index: -2;
138
  }
 
139
  </style>
140
  </head>
141
  <body>
142
 
143
- <div class="background-glow"></div>
 
 
 
 
 
 
144
 
145
- <div class="interface-wrapper">
146
- <div class="aura-container">
147
- <div class="aura-layer"></div>
 
 
 
 
148
  </div>
149
 
150
- <h1 class="logo-dac">DAC</h1>
151
- <div class="status-text">Pronto ad assisterti</div>
152
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
153
 
154
- <div class="input-area">
155
  <div class="input-container">
156
- <div class="input-placeholder">Scrivi un messaggio a DAC...</div>
157
- <div style="width: 32px; height: 32px; background: var(--ai-gradient); border-radius: 50%; opacity: 0.8;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </div>
159
  </div>
160
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  </body>
162
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DAC Private AI</title>
7
  <style>
8
  :root {
9
+ /* Palette Ultra-Moderna */
10
+ --bg-dark: #0a0a0a;
11
+ --bg-sidebar: rgba(18, 18, 18, 0.95);
12
+ --primary-rainbow: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
13
  --text-main: #ffffff;
14
+ --text-muted: #a0a0a0;
15
+ --accent: #5865F2;
16
+ --glass: rgba(255, 255, 255, 0.03);
17
+ --border: rgba(255, 255, 255, 0.1);
18
+ --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
19
  }
20
 
21
+ [data-theme="light"] {
22
+ --bg-dark: #f5f5f7;
23
+ --bg-sidebar: rgba(255, 255, 255, 0.98);
24
+ --text-main: #1d1d1f;
25
+ --text-muted: #6e6e73;
26
+ --glass: rgba(0, 0, 0, 0.03);
27
+ --border: rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ * { margin: 0; padding: 0; box-sizing: border-box; }
31
+
32
+ body {
33
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
34
+ background-color: var(--bg-dark);
35
+ color: var(--text-main);
36
+ height: 100vh;
37
+ display: flex;
38
+ overflow: hidden;
39
+ transition: background 0.5s ease;
40
+ }
41
+
42
+ /* --- HEADER & HAMBURGER --- */
43
+ .header {
44
+ position: fixed;
45
+ top: 0; left: 0; right: 0;
46
+ height: 60px;
47
+ padding: 0 20px;
48
  display: flex;
 
49
  align-items: center;
50
+ z-index: 1000;
51
+ }
52
+
53
+ .menu-btn {
54
+ width: 44px; height: 44px;
55
+ display: flex; flex-direction: column;
56
+ justify-content: center; align-items: center;
57
+ cursor: pointer;
58
+ z-index: 1100;
59
+ background: var(--glass);
60
+ border-radius: 12px;
61
+ border: 1px solid var(--border);
62
+ transition: var(--transition);
63
+ }
64
+
65
+ .menu-btn:hover { background: rgba(255,255,255,0.1); }
66
+
67
+ .menu-btn-line {
68
+ width: 22px; height: 2px;
69
+ background-color: var(--text-main);
70
+ margin: 3px 0;
71
+ transition: var(--transition);
72
+ transform-origin: center;
73
+ }
74
+
75
+ /* Animazione Hamburger a X */
76
+ .menu-btn.active .menu-btn-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
77
+ .menu-btn.active .menu-btn-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
78
+ .menu-btn.active .menu-btn-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
79
+
80
+ /* --- SIDEBAR SCORREVOLE --- */
81
+ .sidebar {
82
+ width: 300px;
83
+ background: var(--bg-sidebar);
84
+ backdrop-filter: blur(20px);
85
+ height: 100vh;
86
+ position: fixed;
87
+ left: -300px;
88
+ top: 0;
89
+ z-index: 900;
90
+ transition: var(--transition);
91
+ display: flex;
92
+ flex-direction: column;
93
+ padding: 80px 20px 20px;
94
+ border-right: 1px solid var(--border);
95
+ box-shadow: 20px 0 50px rgba(0,0,0,0.3);
96
+ }
97
+
98
+ .sidebar.open { transform: translateX(300px); }
99
+
100
+ .history-title {
101
+ font-size: 12px;
102
+ text-transform: uppercase;
103
+ color: var(--text-muted);
104
+ letter-spacing: 1.5px;
105
+ margin-bottom: 20px;
106
+ }
107
+
108
+ .chat-list {
109
+ flex: 1;
110
+ overflow-y: auto;
111
+ }
112
+
113
+ .chat-item {
114
+ padding: 12px;
115
+ border-radius: 10px;
116
+ margin-bottom: 8px;
117
+ cursor: pointer;
118
+ font-size: 14px;
119
+ color: var(--text-muted);
120
+ transition: 0.2s;
121
+ white-space: nowrap;
122
  overflow: hidden;
123
+ text-overflow: ellipsis;
124
+ }
125
+
126
+ .chat-item:hover {
127
+ background: var(--glass);
128
  color: var(--text-main);
129
  }
130
 
131
+ /* Profilo Utente in fondo alla Sidebar */
132
+ .profile-section {
133
+ padding: 15px;
134
+ background: var(--glass);
135
+ border-radius: 15px;
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 12px;
139
+ cursor: pointer;
140
+ transition: 0.3s;
141
+ border: 1px solid var(--border);
142
+ }
143
+
144
+ .profile-section:hover { background: rgba(255,255,255,0.08); }
145
+
146
+ .avatar {
147
+ width: 35px; height: 35px;
148
+ border-radius: 50%;
149
+ background: var(--primary-rainbow);
150
+ background-size: 400%;
151
+ animation: rainbow-anim 3s infinite linear;
152
+ }
153
+
154
+ /* --- LOGO CENTRALE & RAINBOW --- */
155
+ .main-content {
156
+ flex: 1;
157
  display: flex;
158
  flex-direction: column;
159
  align-items: center;
160
+ justify-content: center;
161
+ position: relative;
162
  }
163
 
164
+ .logo-container {
165
+ position: relative;
166
+ text-align: center;
167
+ z-index: 10;
 
 
 
 
 
 
 
 
168
  }
169
 
170
+ .logo-aura {
171
  position: absolute;
172
+ top: 50%; left: 50%;
173
+ transform: translate(-50%, -50%);
174
+ width: 250px; height: 250px;
175
+ background: var(--primary-rainbow);
176
+ background-size: 400%;
177
+ filter: blur(70px);
178
+ opacity: 0.4;
179
  border-radius: 50%;
180
+ animation: rainbow-anim 4s infinite linear;
181
  }
182
 
183
+ .logo-text {
184
+ font-size: 4.5rem;
185
+ font-weight: 900;
186
+ background: var(--primary-rainbow);
187
+ background-size: 400%;
 
 
 
188
  -webkit-background-clip: text;
189
  -webkit-text-fill-color: transparent;
190
+ animation: rainbow-anim 3s infinite linear;
191
+ letter-spacing: -2px;
192
  }
193
 
194
+ @keyframes rainbow-anim {
195
+ 0% { background-position: 0% 50%; }
196
+ 100% { background-position: 400% 50%; }
 
 
 
 
197
  }
198
 
199
+ /* --- INPUT AREA --- */
200
+ .input-container {
201
  position: fixed;
202
+ bottom: 30px;
203
  width: 100%;
204
+ max-width: 750px;
205
  padding: 0 20px;
206
  }
207
 
208
+ .input-box {
209
+ background: var(--bg-sidebar);
210
+ border: 1px solid var(--border);
211
  border-radius: 24px;
212
+ padding: 10px 20px;
213
  display: flex;
214
  align-items: center;
215
+ backdrop-filter: blur(15px);
216
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
217
  }
218
 
219
+ textarea {
220
+ flex: 1;
221
+ background: transparent;
222
+ border: none;
223
+ outline: none;
224
+ color: var(--text-main);
225
+ font-size: 16px;
226
+ padding: 12px 0;
227
+ resize: none;
228
+ max-height: 150px;
229
  }
230
 
231
+ .send-btn {
232
+ width: 40px; height: 40px;
233
+ background: var(--text-main);
234
+ border-radius: 50%;
235
+ border: none;
236
+ cursor: pointer;
237
+ margin-left: 15px;
238
+ display: flex; align-items: center; justify-content: center;
239
+ transition: 0.3s;
240
  }
241
 
242
+ .send-btn:hover { transform: scale(1.1); background: #fff; }
243
+
244
+ /* MODALE SETTINGS */
245
+ .modal-overlay {
246
+ position: fixed; inset: 0;
247
+ background: rgba(0,0,0,0.85);
248
+ backdrop-filter: blur(10px);
249
+ display: flex; align-items: center; justify-content: center;
250
+ opacity: 0; visibility: hidden; z-index: 2000;
251
+ transition: 0.3s;
252
  }
253
+ .modal-overlay.active { opacity: 1; visibility: visible; }
254
 
255
+ .modal {
256
+ background: var(--bg-sidebar);
257
+ width: 90%; max-width: 400px;
258
+ padding: 30px; border-radius: 25px;
259
+ border: 1px solid var(--border);
260
+ text-align: center;
261
  }
262
 
263
+ .toggle-row {
264
+ display: flex; justify-content: space-between;
265
+ align-items: center; margin-top: 25px;
 
 
 
 
 
 
266
  }
267
+
268
  </style>
269
  </head>
270
  <body>
271
 
272
+ <div class="header">
273
+ <div class="menu-btn" id="hamburger">
274
+ <div class="menu-btn-line"></div>
275
+ <div class="menu-btn-line"></div>
276
+ <div class="menu-btn-line"></div>
277
+ </div>
278
+ </div>
279
 
280
+ <aside class="sidebar" id="sidebar">
281
+ <div class="history-title">Cronologia Chat</div>
282
+ <div class="chat-list">
283
+ <div class="chat-item">Analisi Modello Locale</div>
284
+ <div class="chat-item">Generazione Codice CSS</div>
285
+ <div class="chat-item">Brainstorming DAC AI</div>
286
+ <div class="chat-item">Nuova conversazione...</div>
287
  </div>
288
 
289
+ <div class="profile-section" id="profileBtn">
290
+ <div class="avatar"></div>
291
+ <div style="flex: 1;">
292
+ <div style="font-size: 14px; font-weight: 600;">Utente Locale</div>
293
+ <div style="font-size: 11px; color: var(--text-muted);">Impostazioni DAC</div>
294
+ </div>
295
+ <span style="font-size: 18px;">⚙️</span>
296
+ </div>
297
+ </aside>
298
+
299
+ <main class="main-content">
300
+ <div class="logo-container">
301
+ <div class="logo-aura"></div>
302
+ <h1 class="logo-text">DAC</h1>
303
+ <p style="color: var(--text-muted); font-size: 14px; letter-spacing: 2px; margin-top: 10px;">PRIVATE INTELLIGENCE</p>
304
+ </div>
305
 
 
306
  <div class="input-container">
307
+ <div class="input-box">
308
+ <textarea id="chatInput" placeholder="Chiedi a DAC..." rows="1"></textarea>
309
+ <button class="send-btn">
310
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </main>
315
+
316
+ <div class="modal-overlay" id="modal">
317
+ <div class="modal">
318
+ <h2 style="margin-bottom: 10px;">Impostazioni</h2>
319
+ <p style="color: var(--text-muted); font-size: 14px;">Personalizza la tua esperienza locale.</p>
320
+
321
+ <div class="toggle-row">
322
+ <span>Tema Scuro</span>
323
+ <input type="checkbox" checked id="themeToggle" style="width: 40px; height: 20px;">
324
+ </div>
325
+
326
+ <button id="closeModal" style="margin-top: 30px; background: var(--text-main); color: var(--bg-dark); border: none; padding: 12px 30px; border-radius: 12px; cursor: pointer; font-weight: bold; width: 100%;">Salva e Chiudi</button>
327
  </div>
328
  </div>
329
 
330
+ <script>
331
+ const hamburger = document.getElementById('hamburger');
332
+ const sidebar = document.getElementById('sidebar');
333
+ const profileBtn = document.getElementById('profileBtn');
334
+ const modal = document.getElementById('modal');
335
+ const closeModal = document.getElementById('closeModal');
336
+ const themeToggle = document.getElementById('themeToggle');
337
+ const chatInput = document.getElementById('chatInput');
338
+
339
+ // Toggle Sidebar & Hamburger Animation
340
+ hamburger.addEventListener('click', () => {
341
+ hamburger.classList.toggle('active');
342
+ sidebar.classList.toggle('open');
343
+ });
344
+
345
+ // Close sidebar if clicking main content
346
+ document.querySelector('.main-content').addEventListener('click', () => {
347
+ sidebar.classList.remove('open');
348
+ hamburger.classList.remove('active');
349
+ });
350
+
351
+ // Modal Logic
352
+ profileBtn.addEventListener('click', () => modal.classList.add('active'));
353
+ closeModal.addEventListener('click', () => modal.classList.remove('active'));
354
+
355
+ // Theme Toggle
356
+ themeToggle.addEventListener('change', () => {
357
+ const mode = themeToggle.checked ? 'dark' : 'light';
358
+ document.documentElement.setAttribute('data-theme', mode);
359
+ });
360
+
361
+ // Auto-resize textarea
362
+ chatInput.addEventListener('input', function() {
363
+ this.style.height = 'auto';
364
+ this.style.height = (this.scrollHeight) + 'px';
365
+ });
366
+ </script>
367
  </body>
368
  </html>