Spaces:

Mattimax
/

DAC_UI

Running

App Files Files Community

Mattimax commited on Jan 19

Commit

be5b46b

verified ·

1 Parent(s): a0c9d4c

Manual changes saved

Browse files

Files changed (1) hide show

index.html +214 -194

index.html CHANGED Viewed

@@ -3,314 +3,334 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DAC - Private Intelligence</title>
     <style>
         :root {
-            --bg-black: #000000;
-            --bg-card: #1e1f20; /* Grigio scuro tipico delle AI moderne */
-            --bg-sidebar: #131314;
-            --text-white: #ffffff;
-            --text-gray: #b4b4b4;
-            --rainbow: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #4285f4);
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
-            font-weight: 900;
-            background-color: var(--bg-black);
-            color: var(--text-white);
             height: 100vh;
-            overflow: hidden;
             display: flex;
         }
-        /* --- HEADER --- */
         .header {
             position: fixed;
             top: 0; left: 0; right: 0;
-            height: 64px;
             padding: 0 20px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
             z-index: 1000;
         }
-        .header-left { display: flex; align-items: center; gap: 15px; }
         .menu-btn {
             cursor: pointer;
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        .menu-btn div {
-            width: 22px; height: 2px;
-            background: white;
             transition: var(--transition);
         }
-        /* Animazione X */
-        .menu-btn.active .line1 { transform: translateY(7px) rotate(45deg); }
-        .menu-btn.active .line2 { opacity: 0; }
-        .menu-btn.active .line3 { transform: translateY(-7px) rotate(-45deg); }
-        .user-profile {
-            width: 40px; height: 40px;
-            background: #2b2c2d;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            border: 1px solid rgba(255,255,255,0.1);
         }
-        .user-profile span {
-            font-family: "Times New Roman", serif;
-            font-size: 20px;
-            font-weight: normal;
-        }
         /* --- SIDEBAR --- */
         .sidebar {
             position: fixed;
             left: -300px;
             top: 0;
-            bottom: 0;
-            width: 300px;
-            background: var(--bg-sidebar);
-            transition: var(--transition);
             z-index: 900;
-            padding: 80px 20px;
-            border-right: 1px solid #303134;
         }
-        .sidebar.open { left: 0; }
-        .sidebar-title {
-            font-size: 12px;
-            color: var(--text-gray);
-            margin-bottom: 20px;
             text-transform: uppercase;
         }
-        /* --- MAIN CONTENT --- */
-        .main-container {
             flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            padding: 20px;
-        }
-        .logo-area {
-            text-align: center;
-            margin-bottom: 40px;
             position: relative;
         }
-        .logo-text {
-            font-size: 80px;
-            letter-spacing: -2px;
-            margin-bottom: 10px;
-            background: white;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .aura {
             position: absolute;
             top: 50%; left: 50%;
             transform: translate(-50%, -50%);
-            width: 200px; height: 200px;
-            background: var(--rainbow);
-            background-size: 300% 300%;
-            filter: blur(80px);
-            opacity: 0.4;
-            z-index: -1;
-            animation: rainbowShift 3s linear infinite;
         }
         .sub-text {
-            font-size: 14px;
-            color: var(--text-gray);
             letter-spacing: 5px;
-            font-weight: bold;
         }
-        /* --- CHAT INPUT (GEMINI STYLE) --- */
-        .input-wrapper {
             width: 100%;
-            max-width: 800px;
-            position: relative;
         }
         .input-box {
-            background: var(--bg-card);
-            border-radius: 32px;
-            padding: 12px 24px;
             display: flex;
             align-items: center;
-            gap: 15px;
             transition: var(--transition);
         }
-        .input-box:focus-within {
-            background: #28292a;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-        }
         textarea {
             flex: 1;
             background: transparent;
             border: none;
             outline: none;
-            color: white;
-            font-family: Arial, sans-serif;
             font-size: 16px;
-            font-weight: bold;
             resize: none;
-            padding: 10px 0;
         }
-        .icon-btn {
-            background: transparent;
             border: none;
             cursor: pointer;
-            color: var(--text-gray);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .icon-btn:hover { color: white; }
-        /* SUGGESTION CHIPS */
-        .suggestions {
-            display: flex;
-            gap: 10px;
-            margin-top: 20px;
-            justify-content: center;
-        }
-        .chip {
-            background: #1e1f20;
-            padding: 8px 16px;
-            border-radius: 12px;
-            font-size: 13px;
-            cursor: pointer;
-            border: 1px solid #303134;
-            transition: 0.2s;
         }
-        .chip:hover { background: #333537; }
-        @keyframes rainbowShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
-        /* TEMA LIGHT */
-        [data-theme="light"] {
-            --bg-black: #ffffff;
-            --bg-card: #f0f4f9;
-            --bg-sidebar: #f8fafd;
-            --text-white: #1f1f1f;
-            --text-gray: #444746;
         }
     </style>
 </head>
 <body>
-    <header class="header">
-        <div class="header-left">
-            <div class="menu-btn" id="menuToggle">
-                <div class="line1"></div>
-                <div class="line2"></div>
-                <div class="line3"></div>
-            </div>
-            <span style="font-size: 18px; letter-spacing: 1px;">DAC AI</span>
-        </div>
-        <div class="user-profile" id="userProfile">
-            <span>M</span>
         </div>
-    </header>
     <aside class="sidebar" id="sidebar">
-        <div class="sidebar-title">Recenti</div>
-        <div style="color: var(--text-gray); font-size: 14px; text-align: center; margin-top: 40px;">
-            Le tue conversazioni appariranno qui.
         </div>
     </aside>
-    <main class="main-container">
-        <div class="logo-area">
-            <div class="aura"></div>
             <h1 class="logo-text">DAC</h1>
             <p class="sub-text">PRIVATE INTELLIGENCE</p>
         </div>
-        <div class="input-wrapper">
             <div class="input-box">
-                <button class="icon-btn">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
-                </button>
-                <textarea placeholder="Chiedi a DAC..." rows="1"></textarea>
-                <button class="icon-btn">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                 </button>
             </div>
-            <div class="suggestions">
-                <div class="chip">Crea un piano</div>
-                <div class="chip">Analizza codice</div>
-                <div class="chip">Aiutami a scrivere</div>
             </div>
         </div>
-    </main>
     <script>
-        const menuToggle = document.getElementById('menuToggle');
         const sidebar = document.getElementById('sidebar');
-        const userProfile = document.getElementById('userProfile');
-        // Toggle Sidebar
-        menuToggle.addEventListener('click', () => {
-            menuToggle.classList.toggle('active');
             sidebar.classList.toggle('open');
         });
-        // Toggle Theme (Dark/Light) su click profilo
-        userProfile.addEventListener('click', () => {
-            const currentTheme = document.body.getAttribute('data-theme');
-            if(currentTheme === 'light') {
-                document.body.removeAttribute('data-theme');
-            } else {
-                document.body.setAttribute('data-theme', 'light');
-            }
         });
-        // Auto-resize textarea
-        const tx = document.getElementsByTagName('textarea');
-        for (let i = 0; i < tx.length; i++) {
-          tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
-          tx[i].addEventListener("input", OnInput, false);
-        }
-        function OnInput() {
-          this.style.height = 'auto';
-          this.style.height = (this.scrollHeight) + 'px';
-        }
     </script>
 </body>
 </html>

 <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;
+            --bg-sidebar: rgba(20, 20, 20, 0.9);
+            --bg-glass: rgba(255, 255, 255, 0.04);
+            /* Gradiente più compatto per diminuire l'ampiezza cromatica */
+            --primary-rainbow: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #4285f4);
+            --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);
+        }
+        [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, sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
             height: 100vh;
             display: flex;
+            overflow: hidden;
+            transition: background var(--transition);
         }
+        /* --- HEADER & HAMBURGER --- */
         .header {
             position: fixed;
             top: 0; left: 0; right: 0;
+            height: 60px;
             padding: 0 20px;
             display: flex;
             align-items: center;
             z-index: 1000;
         }
         .menu-btn {
+            width: 44px; height: 44px;
+            display: flex; flex-direction: column;
+            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;
+            background-color: var(--text-main);
+            margin: 3px 0;
+            transition: var(--transition);
+            transform-origin: center;
+            border-radius: 1px;
         }
+        .menu-btn.active .menu-btn-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+        .menu-btn.active .menu-btn-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
+        .menu-btn.active .menu-btn-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
         /* --- SIDEBAR --- */
         .sidebar {
+            width: 300px;
+            background: var(--bg-sidebar);
+            backdrop-filter: blur(30px);
+            height: 100vh;
             position: fixed;
             left: -300px;
             top: 0;
             z-index: 900;
+            transition: var(--transition);
+            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; }
+        .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);
         }
+        .avatar {
+            width: 38px; height: 38px;
+            border-radius: 50%;
+            background: var(--text-main);
+            color: var(--bg-dark);
+            font-family: 'Georgia', serif;
+            font-size: 20px;
+            font-weight: bold;
+            display: flex; align-items: center; justify-content: center;
+        }
+        /* --- LOGO CENTRALE --- */
+        .main-content {
             flex: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             position: relative;
         }
+        .logo-container {
+            position: relative;
+            text-align: center;
+            z-index: 10;
         }
+        .logo-aura {
             position: absolute;
             top: 50%; left: 50%;
             transform: translate(-50%, -50%);
+            width: 220px; height: 220px; /* Ampiezza diminuita */
+            background: var(--primary-rainbow);
+            background-size: 300%;
+            filter: blur(60px); /* Blur più contenuto */
+            opacity: 0.3;
+            border-radius: 50%;
+            animation: rainbow-pulse 4s infinite linear;
         }
+        .logo-text {
+            font-family: "Arial Black", "Arial Bold", Arial, sans-serif; /* Arial Bold */
+            font-weight: 900;
+            font-size: 6rem;
+            letter-spacing: -3px;
+            color: #ffffff;
+            position: relative;
+            text-shadow: 0 10px 20px rgba(0,0,0,0.4);
+        }
         .sub-text {
+            color: var(--text-muted);
+            font-size: 13px;
             letter-spacing: 5px;
+            margin-top: 10px;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+        @keyframes rainbow-pulse {
+            0% { background-position: 0% 50%; }
+            100% { background-position: 300% 50%; }
         }
+        /* --- BARRA INPUT ORIGINALE --- */
+        .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);
         }
         textarea {
             flex: 1;
             background: transparent;
             border: none;
             outline: none;
+            color: var(--text-main);
             font-size: 16px;
+            padding: 12px 0;
             resize: none;
+            max-height: 150px;
+            font-family: Arial, sans-serif;
+            font-weight: 600;
         }
+        .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);
         }
+        /* MODALE SETTINGS */
+        .modal-overlay {
+            position: fixed; inset: 0;
+            background: rgba(0,0,0,0.85);
+            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;
         }
     </style>
 </head>
 <body>
+    <div class="header">
+        <div class="menu-btn" id="hamburger">
+            <div class="menu-btn-line"></div>
+            <div class="menu-btn-line"></div>
+            <div class="menu-btn-line"></div>
         </div>
+    </div>
     <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.5; font-style: italic;">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>
+    <main class="main-content">
+        <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="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>
+    </main>
+    <div class="modal-overlay" id="modal">
+        <div class="modal">
+            <h2 style="margin-bottom: 15px;">Impostazioni</h2>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
+                <span>Tema Scuro</span>
+                <input type="checkbox" checked id="themeToggle" style="width: 40px; height: 20px;">
             </div>
+            <button id="closeModal" style="margin-top: 30px; background: white; color: black; border: none; padding: 12px; border-radius: 12px; cursor: pointer; font-weight: bold; width: 100%;">Chiudi</button>
         </div>
+    </div>
     <script>
+        const hamburger = document.getElementById('hamburger');
         const sidebar = document.getElementById('sidebar');
+        const profileBtn = document.getElementById('profileBtn');
+        const modal = document.getElementById('modal');
+        const closeModal = document.getElementById('closeModal');
+        const chatInput = document.getElementById('chatInput');
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
             sidebar.classList.toggle('open');
         });
+        document.querySelector('.main-content').addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            hamburger.classList.remove('active');
         });
+        profileBtn.addEventListener('click', () => modal.classList.add('active'));
+        closeModal.addEventListener('click', () => modal.classList.remove('active'));
+        chatInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
     </script>
 </body>
 </html>