Spaces:

Mattimax
/

DAC_UI

Running

App Files Files Community

Mattimax commited on 26 days ago

Commit

84207ca

verified ·

1 Parent(s): c50e21e

Manual changes saved

Browse files

Files changed (1) hide show

index.html +131 -102

index.html CHANGED Viewed

@@ -3,40 +3,41 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DAC Private AI</title>
     <style>
         :root {
-            /* Palette Ultra-Moderna */
-            --bg-dark: #0a0a0a;
-            --bg-sidebar: rgba(18, 18, 18, 0.95);
-            --primary-rainbow: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
-            --text-main: #ffffff;
-            --text-muted: #a0a0a0;
-            --accent: #5865F2;
-            --glass: rgba(255, 255, 255, 0.03);
-            --border: rgba(255, 255, 255, 0.1);
-            --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         }
         [data-theme="light"] {
-            --bg-dark: #f5f5f7;
-            --bg-sidebar: rgba(255, 255, 255, 0.98);
-            --text-main: #1d1d1f;
-            --text-muted: #6e6e73;
-            --glass: rgba(0, 0, 0, 0.03);
-            --border: rgba(0, 0, 0, 0.1);
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background-color: var(--bg-dark);
             color: var(--text-main);
             height: 100vh;
             display: flex;
             overflow: hidden;
-            transition: background 0.5s ease;
         }
         /* --- HEADER & HAMBURGER --- */
@@ -56,13 +57,14 @@
             justify-content: center; align-items: center;
             cursor: pointer;
             z-index: 1100;
-            background: var(--glass);
             border-radius: 12px;
-            border: 1px solid var(--border);
             transition: var(--transition);
         }
-        .menu-btn:hover { background: rgba(255,255,255,0.1); }
         .menu-btn-line {
             width: 22px; height: 2px;
@@ -70,6 +72,7 @@
             margin: 3px 0;
             transition: var(--transition);
             transform-origin: center;
         }
         /* Animazione Hamburger a X */
@@ -81,7 +84,7 @@
         .sidebar {
             width: 300px;
             background: var(--bg-sidebar);
-            backdrop-filter: blur(20px);
             height: 100vh;
             position: fixed;
             left: -300px;
@@ -91,64 +94,54 @@
             display: flex;
             flex-direction: column;
             padding: 80px 20px 20px;
-            border-right: 1px solid var(--border);
-            box-shadow: 20px 0 50px rgba(0,0,0,0.3);
         }
         .sidebar.open { transform: translateX(300px); }
         .history-title {
-            font-size: 12px;
             text-transform: uppercase;
             color: var(--text-muted);
-            letter-spacing: 1.5px;
-            margin-bottom: 20px;
         }
         .chat-list {
             flex: 1;
             overflow-y: auto;
-        }
-        .chat-item {
-            padding: 12px;
-            border-radius: 10px;
-            margin-bottom: 8px;
-            cursor: pointer;
-            font-size: 14px;
             color: var(--text-muted);
-            transition: 0.2s;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .chat-item:hover {
-            background: var(--glass);
-            color: var(--text-main);
         }
         /* Profilo Utente in fondo alla Sidebar */
         .profile-section {
-            padding: 15px;
-            background: var(--glass);
-            border-radius: 15px;
             display: flex;
             align-items: center;
-            gap: 12px;
             cursor: pointer;
-            transition: 0.3s;
-            border: 1px solid var(--border);
         }
-        .profile-section:hover { background: rgba(255,255,255,0.08); }
         .avatar {
-            width: 35px; height: 35px;
             border-radius: 50%;
-            background: var(--primary-rainbow);
-            background-size: 400%;
-            animation: rainbow-anim 3s infinite linear;
         }
         /* --- LOGO CENTRALE & RAINBOW --- */
@@ -171,49 +164,65 @@
             position: absolute;
             top: 50%; left: 50%;
             transform: translate(-50%, -50%);
-            width: 250px; height: 250px;
             background: var(--primary-rainbow);
             background-size: 400%;
-            filter: blur(70px);
-            opacity: 0.4;
             border-radius: 50%;
-            animation: rainbow-anim 4s infinite linear;
         }
         .logo-text {
-            font-size: 4.5rem;
-            font-weight: 900;
-            background: var(--primary-rainbow);
-            background-size: 400%;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            animation: rainbow-anim 3s infinite linear;
-            letter-spacing: -2px;
         }
-        @keyframes rainbow-anim {
-            0% { background-position: 0% 50%; }
-            100% { background-position: 400% 50%; }
         }
         /* --- INPUT AREA --- */
         .input-container {
             position: fixed;
-            bottom: 30px;
             width: 100%;
-            max-width: 750px;
             padding: 0 20px;
         }
         .input-box {
             background: var(--bg-sidebar);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 10px 20px;
             display: flex;
             align-items: center;
-            backdrop-filter: blur(15px);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
         }
         textarea {
@@ -226,44 +235,67 @@
             padding: 12px 0;
             resize: none;
             max-height: 150px;
         }
         .send-btn {
-            width: 40px; height: 40px;
             background: var(--text-main);
             border-radius: 50%;
             border: none;
             cursor: pointer;
             margin-left: 15px;
             display: flex; align-items: center; justify-content: center;
-            transition: 0.3s;
         }
-        .send-btn:hover { transform: scale(1.1); background: #fff; }
         /* MODALE SETTINGS */
         .modal-overlay {
             position: fixed; inset: 0;
-            background: rgba(0,0,0,0.85);
-            backdrop-filter: blur(10px);
             display: flex; align-items: center; justify-content: center;
             opacity: 0; visibility: hidden; z-index: 2000;
-            transition: 0.3s;
         }
         .modal-overlay.active { opacity: 1; visibility: visible; }
         .modal {
             background: var(--bg-sidebar);
-            width: 90%; max-width: 400px;
-            padding: 30px; border-radius: 25px;
-            border: 1px solid var(--border);
             text-align: center;
         }
         .toggle-row {
             display: flex; justify-content: space-between;
-            align-items: center; margin-top: 25px;
         }
     </style>
 </head>
@@ -280,19 +312,16 @@
     <aside class="sidebar" id="sidebar">
         <div class="history-title">Cronologia Chat</div>
         <div class="chat-list">
-            <div class="chat-item">Analisi Modello Locale</div>
-            <div class="chat-item">Generazione Codice CSS</div>
-            <div class="chat-item">Brainstorming DAC AI</div>
-            <div class="chat-item">Nuova conversazione...</div>
         </div>
         <div class="profile-section" id="profileBtn">
-            <div class="avatar"></div>
             <div style="flex: 1;">
-                <div style="font-size: 14px; font-weight: 600;">Utente Locale</div>
-                <div style="font-size: 11px; color: var(--text-muted);">Impostazioni DAC</div>
             </div>
-            <span style="font-size: 18px;">⚙️</span>
         </div>
     </aside>
@@ -300,14 +329,14 @@
         <div class="logo-container">
             <div class="logo-aura"></div>
             <h1 class="logo-text">DAC</h1>
-            <p style="color: var(--text-muted); font-size: 14px; letter-spacing: 2px; margin-top: 10px;">PRIVATE INTELLIGENCE</p>
         </div>
         <div class="input-container">
             <div class="input-box">
                 <textarea id="chatInput" placeholder="Chiedi a DAC..." rows="1"></textarea>
                 <button class="send-btn">
-                    <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>
                 </button>
             </div>
         </div>
@@ -315,15 +344,15 @@
     <div class="modal-overlay" id="modal">
         <div class="modal">
-            <h2 style="margin-bottom: 10px;">Impostazioni</h2>
             <p style="color: var(--text-muted); font-size: 14px;">Personalizza la tua esperienza locale.</p>
             <div class="toggle-row">
-                <span>Tema Scuro</span>
-                <input type="checkbox" checked id="themeToggle" style="width: 40px; height: 20px;">
             </div>
-            <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>
         </div>
     </div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DAC Private Intelligence</title>
     <style>
         :root {
+            /* Palette Ultra-Premium */
+            --bg-dark: #000000; /* Nero profondo */
+            --bg-sidebar: rgba(20, 20, 20, 0.9);
+            --bg-glass: rgba(255, 255, 255, 0.04);
+            --primary-rainbow: linear-gradient(135deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #0000ff, #9900ff, #ff0000);
+            --text-main: #f0f0f0;
+            --text-muted: #808080;
+            --border-glass: rgba(255, 255, 255, 0.08);
+            --shadow-premium: 0 20px 40px rgba(0,0,0,0.6);
+            --transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* Transizione "Apple" */
         }
         [data-theme="light"] {
+            --bg-dark: #f5f7fa;
+            --bg-sidebar: rgba(255, 255, 255, 0.9);
+            --bg-glass: rgba(0, 0, 0, 0.03);
+            --text-main: #222222;
+            --text-muted: #666666;
+            --border-glass: rgba(0, 0, 0, 0.1);
+            --shadow-premium: 0 20px 40px rgba(0,0,0,0.1);
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
+            font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
             background-color: var(--bg-dark);
             color: var(--text-main);
             height: 100vh;
             display: flex;
             overflow: hidden;
+            transition: background var(--transition);
         }
         /* --- HEADER & HAMBURGER --- */
             justify-content: center; align-items: center;
             cursor: pointer;
             z-index: 1100;
+            background: var(--bg-glass);
             border-radius: 12px;
+            border: 1px solid var(--border-glass);
             transition: var(--transition);
+            backdrop-filter: blur(5px);
         }
+        .menu-btn:hover { background: rgba(255,255,255,0.08); }
         .menu-btn-line {
             width: 22px; height: 2px;
             margin: 3px 0;
             transition: var(--transition);
             transform-origin: center;
+            border-radius: 1px;
         }
         /* Animazione Hamburger a X */
         .sidebar {
             width: 300px;
             background: var(--bg-sidebar);
+            backdrop-filter: blur(30px); /* Effetto vetro più forte */
             height: 100vh;
             position: fixed;
             left: -300px;
             display: flex;
             flex-direction: column;
             padding: 80px 20px 20px;
+            border-right: 1px solid var(--border-glass);
+            box-shadow: 20px 0 50px rgba(0,0,0,0.5);
         }
         .sidebar.open { transform: translateX(300px); }
         .history-title {
+            font-size: 11px;
             text-transform: uppercase;
             color: var(--text-muted);
+            letter-spacing: 2px;
+            margin-bottom: 25px;
+            font-weight: 600;
         }
         .chat-list {
             flex: 1;
             overflow-y: auto;
             color: var(--text-muted);
+            font-size: 14px;
+            font-style: italic;
         }
         /* Profilo Utente in fondo alla Sidebar */
         .profile-section {
+            padding: 12px 15px;
+            background: var(--bg-glass);
+            border-radius: 18px;
             display: flex;
             align-items: center;
+            gap: 15px;
             cursor: pointer;
+            transition: var(--transition);
+            border: 1px solid var(--border-glass);
+            backdrop-filter: blur(10px);
         }
+        .profile-section:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
         .avatar {
+            width: 38px; height: 38px;
             border-radius: 50%;
+            background: var(--text-main);
+            color: var(--bg-dark);
+            font-family: 'Georgia', serif; /* Font elegante per la 'M' */
+            font-size: 20px;
+            font-weight: bold;
+            display: flex; align-items: center; justify-content: center;
         }
         /* --- LOGO CENTRALE & RAINBOW --- */
             position: absolute;
             top: 50%; left: 50%;
             transform: translate(-50%, -50%);
+            width: 300px; height: 300px; /* Aura più grande */
             background: var(--primary-rainbow);
             background-size: 400%;
+            filter: blur(90px); /* Blur più intenso per l'effetto "sbiadito" */
+            opacity: 0.35;
             border-radius: 50%;
+            animation: rainbow-pulse 5s infinite alternate; /* Animazione più complessa */
         }
         .logo-text {
+            font-family: 'Times New Roman', serif; /* Font elegante simile all'immagine */
+            font-size: 5.5rem;
+            font-weight: 700;
+            letter-spacing: 1px;
+            /* Effetto testo in rilievo/scolpito */
+            color: #e0e0e0;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.1);
+            position: relative;
+        }
+        .sub-text {
+            color: var(--text-muted);
+            font-size: 13px;
+            letter-spacing: 4px;
+            margin-top: 20px;
+            font-weight: 500;
+            text-transform: uppercase;
+            opacity: 0.7;
         }
+        @keyframes rainbow-pulse {
+            0% { background-position: 0% 50%; transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
+            100% { background-position: 100% 50%; transform: translate(-50%, -50%) scale(1.1); opacity: 0.45; }
         }
         /* --- INPUT AREA --- */
         .input-container {
             position: fixed;
+            bottom: 35px;
             width: 100%;
+            max-width: 780px;
             padding: 0 20px;
         }
         .input-box {
             background: var(--bg-sidebar);
+            border: 1px solid var(--border-glass);
+            border-radius: 28px;
+            padding: 10px 10px 10px 25px;
             display: flex;
             align-items: center;
+            backdrop-filter: blur(20px);
+            box-shadow: var(--shadow-premium);
+            transition: var(--transition);
+        }
+        .input-box:focus-within {
+            border-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.7);
         }
         textarea {
             padding: 12px 0;
             resize: none;
             max-height: 150px;
+            font-family: inherit;
         }
+        textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
         .send-btn {
+            width: 46px; height: 46px;
             background: var(--text-main);
             border-radius: 50%;
             border: none;
             cursor: pointer;
             margin-left: 15px;
             display: flex; align-items: center; justify-content: center;
+            transition: var(--transition);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
         }
+        .send-btn:hover { transform: scale(1.08); background: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
+        .send-btn svg { stroke: var(--bg-dark); transition: var(--transition); }
         /* MODALE SETTINGS */
         .modal-overlay {
             position: fixed; inset: 0;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(15px);
             display: flex; align-items: center; justify-content: center;
             opacity: 0; visibility: hidden; z-index: 2000;
+            transition: var(--transition);
         }
         .modal-overlay.active { opacity: 1; visibility: visible; }
         .modal {
             background: var(--bg-sidebar);
+            width: 90%; max-width: 420px;
+            padding: 35px; border-radius: 30px;
+            border: 1px solid var(--border-glass);
             text-align: center;
+            box-shadow: var(--shadow-premium);
         }
         .toggle-row {
             display: flex; justify-content: space-between;
+            align-items: center; margin-top: 30px;
+            padding: 15px;
+            background: var(--bg-glass);
+            border-radius: 15px;
+        }
+        /* Stile Toggle Personalizzato */
+        input[type="checkbox"] {
+            appearance: none; width: 50px; height: 28px;
+            background: var(--border-glass); border-radius: 14px;
+            position: relative; cursor: pointer; transition: var(--transition);
+        }
+        input[type="checkbox"]::before {
+            content: ''; position: absolute; top: 3px; left: 3px;
+            width: 22px; height: 22px; background: var(--text-main);
+            border-radius: 50%; transition: var(--transition);
         }
+        input[type="checkbox"]:checked { background: #4CD964; }
+        input[type="checkbox"]:checked::before { transform: translateX(22px); background: #fff; }
     </style>
 </head>
     <aside class="sidebar" id="sidebar">
         <div class="history-title">Cronologia Chat</div>
         <div class="chat-list">
+            <div style="padding: 15px 0; text-align: center; opacity: 0.6;">Nessuna conversazione recente</div>
         </div>
         <div class="profile-section" id="profileBtn">
+            <div class="avatar">M</div>
             <div style="flex: 1;">
+                <div style="font-size: 15px; font-weight: 600;">Utente Locale</div>
+                <div style="font-size: 12px; color: var(--text-muted);">Impostazioni DAC</div>
             </div>
+            <span style="font-size: 18px; opacity: 0.7;">⚙️</span>
         </div>
     </aside>
         <div class="logo-container">
             <div class="logo-aura"></div>
             <h1 class="logo-text">DAC</h1>
+            <p class="sub-text">PRIVATE INTELLIGENCE</p>
         </div>
         <div class="input-container">
             <div class="input-box">
                 <textarea id="chatInput" placeholder="Chiedi a DAC..." rows="1"></textarea>
                 <button class="send-btn">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                 </button>
             </div>
         </div>
     <div class="modal-overlay" id="modal">
         <div class="modal">
+            <h2 style="margin-bottom: 15px; font-size: 22px;">Impostazioni</h2>
             <p style="color: var(--text-muted); font-size: 14px;">Personalizza la tua esperienza locale.</p>
             <div class="toggle-row">
+                <span style="font-weight: 500;">Tema Scuro</span>
+                <input type="checkbox" checked id="themeToggle">
             </div>
+            <button id="closeModal" style="margin-top: 35px; background: var(--text-main); color: var(--bg-dark); border: none; padding: 14px 30px; border-radius: 16px; cursor: pointer; font-weight: 700; width: 100%; transition: var(--transition);">Salva e Chiudi</button>
         </div>
     </div>