Spaces:

Mattimax
/

DAC_UI

Running

App Files Files Community

Mattimax commited on about 1 month ago

Commit

a0c9d4c

verified ·

1 Parent(s): 84207ca

Manual changes saved

Browse files

Files changed (1) hide show

index.html +189 -270

index.html CHANGED Viewed

@@ -3,226 +3,168 @@
 <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 --- */
         .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;
         }
-        /* Animazione Hamburger a X */
-        .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 SCORREVOLE --- */
-        .sidebar {
-            width: 300px;
-            background: var(--bg-sidebar);
-            backdrop-filter: blur(30px); /* Effetto vetro più forte */
-            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;
-            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 --- */
-        .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: 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 {
@@ -230,168 +172,145 @@
             background: transparent;
             border: none;
             outline: none;
-            color: var(--text-main);
             font-size: 16px;
-            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>
 <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.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>
-    <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="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>
-    </main>
-    <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>
     <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 themeToggle = document.getElementById('themeToggle');
-        const chatInput = document.getElementById('chatInput');
-        // Toggle Sidebar & Hamburger Animation
-        hamburger.addEventListener('click', () => {
-            hamburger.classList.toggle('active');
-            sidebar.classList.toggle('open');
-        });
-        // Close sidebar if clicking main content
-        document.querySelector('.main-content').addEventListener('click', () => {
-            sidebar.classList.remove('open');
-            hamburger.classList.remove('active');
         });
-        // Modal Logic
-        profileBtn.addEventListener('click', () => modal.classList.add('active'));
-        closeModal.addEventListener('click', () => modal.classList.remove('active'));
-        // Theme Toggle
-        themeToggle.addEventListener('change', () => {
-            const mode = themeToggle.checked ? 'dark' : 'light';
-            document.documentElement.setAttribute('data-theme', mode);
         });
         // Auto-resize textarea
-        chatInput.addEventListener('input', function() {
-            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 {
+            --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 {
             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>