Spaces:

Mattimax
/

DAC_UI

Running

App Files Files Community

Mattimax commited on Jan 19

Commit

d71b6eb

verified ·

1 Parent(s): 9cdd3fc

Manual changes saved

Browse files

Files changed (1) hide show

index.html +102 -558

index.html CHANGED Viewed

@@ -1,618 +1,162 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DAC Chat</title>
     <style>
-        /* CSS Variables for Themes */
         :root {
-            /* Dark Theme (Default) */
-            --primary: #5865F2;
-            --primary-hover: #4752C4;
-            --primary-active: #3A45A5;
-            --secondary: #404EED;
-            --bg-dark: #36393F;
-            --bg-darker: #2F3136;
-            --bg-light: #F8F9FA;
-            --bg-lighter: #FFFFFF;
-            --text-dark: #DCDDDE;
-            --text-light: #2E3338;
-            --text-muted: #A3A6AA;
-            --success: #3BA55C;
-            --error: #ED4245;
-            --border-radius: 8px;
-            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            --blur-bg: rgba(0, 0, 0, 0.5);
         }
-        /* Light Theme Overrides */
-        [data-theme="light"] {
-            --bg-dark: #FFFFFF;
-            --bg-darker: #F2F3F5;
-            --bg-light: #36393F;
-            --bg-lighter: #2F3136;
-            --text-dark: #2E3338;
-            --text-light: #DCDDDE;
-            --text-muted: #747F8D;
-            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
-            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
-            --blur-bg: rgba(255, 255, 255, 0.5);
-        }
-        /* Base Styles */
-        * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background-color: var(--bg-dark);
-            color: var(--text-dark);
-            height: 100vh;
-            display: flex;
-            overflow: hidden;
-            transition: var(--transition);
-        }
-        /* Layout */
-        .app-container {
-            display: flex;
             width: 100%;
             height: 100%;
-        }
-        /* Header */
-        .header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 60px;
-            background-color: var(--bg-darker);
-            display: flex;
-            align-items: center;
-            padding: 0 20px;
-            z-index: 90;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
-        /* Hamburger Menu */
-        .menu-btn {
-            width: 44px;
-            height: 44px;
             display: flex;
-            flex-direction: column;
             justify-content: center;
             align-items: center;
-            cursor: pointer;
-            position: fixed;
-            left: 16px;
-            top: 8px;
-            z-index: 110;
-            transform: rotate(0deg);
-            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-            background-color: var(--bg-darker);
-            border-radius: 12px;
-            box-shadow: var(--shadow-sm);
-        }
-        .menu-btn:hover {
-            background-color: rgba(255,255,255,0.05);
-        }
-        .menu-btn:hover .hovered-element {
-            background-color: white;
-            transform: scaleX(0.6);
-        }
-        .menu-btn.active {
-            background-color: var(--primary-hover);
-        }
-.menu-btn-line {
-            width: 20px;
-            height: 2px;
-            background-color: var(--text-dark);
-            margin: 3px 0;
-            transform-origin: center center;
-            transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
-        }
-        .menu-btn.active .menu-btn-line:nth-child(1) {
-            transform: translateY(8px) rotate(45deg);
-            background-color: white;
-        }
-        .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);
-            background-color: white;
-        }
-/* Sidebar */
-        .sidebar {
-            width: 300px;
-            background-color: var(--bg-darker);
-            height: 100vh;
-            position: fixed;
-            left: -300px;
-            top: 0;
-            z-index: 100;
-            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-            padding: 80px 20px 20px;
             display: flex;
             flex-direction: column;
-            border-right: 1px solid rgba(0, 0, 0, 0.1);
-            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
-            will-change: transform;
-        }
-        .sidebar.sidebar-open {
-            transform: translateX(300px);
-        }
-.history-header {
-            display: flex;
-            justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
         }
-        .history-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
         }
-        .history-items {
-            flex: 1;
-            overflow-y: auto;
             margin-bottom: 20px;
         }
-        .history-empty {
-            color: var(--text-muted);
-            font-size: 14px;
-            text-align: center;
-            padding: 20px 0;
-        }
-        /* Settings */
-        .settings-btn {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            border-radius: var(--border-radius);
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        .settings-btn:hover {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-        .settings-icon {
-            width: 20px;
-            height: 20px;
-            margin-right: 10px;
-            color: var(--text-muted);
-        }
-        .settings-label {
-            font-size: 14px;
-            color: var(--text-dark);
-        }
-        /* Profile */
-        .profile-section {
-            display: flex;
-            align-items: center;
-            margin-top: auto;
-            padding: 10px;
-            border-radius: var(--border-radius);
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        .profile-section:hover {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-        .profile-avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background-color: var(--primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: 600;
-            margin-right: 8px;
-            transition: var(--transition);
-        }
-        .profile-name {
-            font-size: 14px;
-            color: var(--text-dark);
         }
-        /* Modal */
-        .modal-overlay {
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: var(--blur-bg);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 200;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(5px);
-        }
-        .modal-overlay.active {
-            opacity: 1;
-            visibility: visible;
-        }
-        .modal-content {
-            background-color: var(--bg-darker);
-            border-radius: var(--border-radius);
-            width: 90%;
-            max-width: 400px;
-            padding: 24px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-            transform: translateY(10px);
-            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-            opacity: 0;
-            will-change: transform, opacity;
-        }
-        .modal-overlay.active .modal-content {
-            transform: translateY(0);
-            opacity: 1;
-        }
-.modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-        .modal-title {
-            font-size: 18px;
-            font-weight: 600;
-            color: var(--text-dark);
         }
-        .modal-close {
-            width: 24px;
-            height: 24px;
             display: flex;
             align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            border-radius: 4px;
-            transition: var(--transition);
-        }
-        .modal-close:hover {
-            background-color: rgba(255, 255, 255, 0.1);
         }
-        .modal-close-icon {
-            color: var(--text-muted);
         }
-        /* Toggle Switch */
-        .toggle-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 0;
         }
-        .toggle-label {
-            font-size: 14px;
-            color: var(--text-dark);
         }
-        .toggle-switch {
-            position: relative;
-            display: inline-block;
-            width: 44px;
-            height: 24px;
         }
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .toggle-slider {
-            position: absolute;
-            cursor: pointer;
             top: 0;
             left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: var(--bg-light);
-            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-            border-radius: 24px;
-        }
-.toggle-slider:before {
-            position: absolute;
-            content: "";
-            height: 16px;
-            width: 16px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: var(--transition);
-            border-radius: 50%;
-        }
-        .toggle-switch input:checked + .toggle-slider {
-            background-color: var(--primary);
-        }
-        .toggle-switch input:checked + .toggle-slider:before {
-            transform: translateX(20px);
-        }
-        /* Chat Container */
-        .chat-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
             height: 100%;
-            padding-top: 60px;
-            padding-bottom: 80px;
-        }
-        .chat-messages {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-        }
-        .chat-empty {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: var(--text-muted);
-            font-size: 14px;
-        }
-        /* Message Input */
-        .message-input-container {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 20px;
-            background-color: var(--bg-darker);
-            border-top: 1px solid rgba(0, 0, 0, 0.1);
-            z-index: 90;
-        }
-        .message-input-wrapper {
-            display: flex;
-            background-color: var(--bg-dark);
-            border-radius: 24px;
-            overflow: hidden;
-            padding: 2px;
-            transition: var(--transition);
-            border: 1px solid transparent;
-        }
-        .message-input-wrapper:focus-within {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
-        }
-        .message-input {
-            flex: 1;
-            background: none;
-            border: none;
-            outline: none;
-            color: var(--text-dark);
-            font-size: 14px;
-            padding: 14px 16px;
-            resize: none;
-            max-height: 120px;
-            min-height: 50px;
-            line-height: 1.5;
-        }
-        .message-input::placeholder {
-            color: var(--text-muted);
-            opacity: 0.6;
-        }
-        .send-button {
-            width: 48px;
-            height: 48px;
-            background-color: var(--primary);
-            border: none;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-left: 8px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-            box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
-            will-change: transform;
-        }
-        .send-button:hover {
-            background-color: var(--primary-hover);
-            transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(88, 101, 242, 0.4);
-        }
-        .send-button:active {
-            background-color: var(--primary-active);
-            transform: translateY(0) scale(0.96);
-        }
-.send-icon {
-            color: white;
-            width: 20px;
-            height: 20px;
         }
     </style>
 </head>
 <body>
-    <div class="app-container">
-        <!-- Header -->
-        <div class="header">
-            <div class="menu-btn">
-                <span class="menu-btn-line"></span>
-                <span class="menu-btn-line"></span>
-                <span class="menu-btn-line"></span>
-            </div>
-        </div>
-        <!-- Sidebar -->
-        <div class="sidebar">
-            <div class="menu-btn close-sidebar hovered-element">
-                <span class="menu-btn-line hovered-element"></span>
-                <span class="menu-btn-line hovered-element"></span>
-                <span class="menu-btn-line"></span>
-            </div>
-<div class="history-header">
-                <div class="history-title">Chat History</div>
-            </div>
-<div class="history-items">
-                <div class="history-empty">No recent conversations</div>
-            </div>
-            <div class="settings-btn">
-                <div class="settings-icon">⚙️</div>
-                <div class="settings-label">Settings</div>
-            </div>
-            <div class="profile-section">
-                <div class="profile-avatar">U</div>
-                <div class="profile-name">User</div>
-            </div>
-        </div>
-        <!-- Chat Area -->
-        <div class="chat-container">
-            <div class="chat-messages">
-                <div class="chat-empty">Ready to chat</div>
-            </div>
-        </div>
-        <!-- Message Input -->
-        <div class="message-input-container">
-            <div class="message-input-wrapper">
-                <textarea class="message-input" placeholder="Message DAC..." rows="1"></textarea>
-                <button class="send-button">
-                    <div class="send-icon">
-                        <span class="arrow-icon">→</span>
-                        <div class="ring-effect"></div>
-                        <div class="ripple-effect"></div>
-                    </div>
-                </button>
-</div>
         </div>
-        <!-- Settings Modal -->
-        <div class="modal-overlay">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <div class="modal-title">Settings</div>
-                    <div class="modal-close">
-                        <div class="modal-close-icon">✕</div>
-                    </div>
-                </div>
-                <div class="toggle-container">
-                    <div class="toggle-label">Dark Theme</div>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="theme-toggle">
-                        <span class="toggle-slider"></span>
-                    </label>
-                </div>
-            </div>
-        </div>
     </div>
-    <script>
-        // DOM Elements
-        const menuBtn = document.querySelector('.menu-btn');
-        const sidebar = document.querySelector('.sidebar');
-        const profileSection = document.querySelector('.profile-section');
-        const modalOverlay = document.querySelector('.modal-overlay');
-        const modalClose = document.querySelector('.modal-close');
-        const themeToggle = document.getElementById('theme-toggle');
-        // Toggle Sidebar
-        const toggleSidebar = () => {
-            menuBtn.classList.toggle('active');
-            sidebar.classList.toggle('sidebar-open');
-        };
-        menuBtn.addEventListener('click', toggleSidebar);
-        document.querySelector('.close-sidebar').addEventListener('click', toggleSidebar);
-// Toggle Modal
-        profileSection.addEventListener('click', () => {
-            modalOverlay.classList.add('active');
-        });
-        modalClose.addEventListener('click', () => {
-            modalOverlay.classList.remove('active');
-        });
-        modalOverlay.addEventListener('click', (e) => {
-            if (e.target === modalOverlay) {
-                modalOverlay.classList.remove('active');
-            }
-        });
-        // Theme Toggle
-        function setThemePreference() {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            const savedTheme = localStorage.getItem('theme');
-            if (savedTheme) {
-                applyTheme(savedTheme);
-            } else {
-                applyTheme(prefersDark ? 'dark' : 'light');
-            }
-        }
-function applyTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem('theme', theme);
-            themeToggle.checked = theme === 'dark'; // Invert the toggle state
-        }
-        themeToggle.addEventListener('change', (e) => {
-            applyTheme(e.target.checked ? 'dark' : 'light');
-        });
-// Auto-resize textarea
-        const textarea = document.querySelector('.message-input');
-        textarea.addEventListener('input', function() {
-            this.style.height = 'auto';
-            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-        });
-        // Initialize
-        setThemePreference();
-        // Prevent send button from actually submitting
-        document.querySelector('.send-button').addEventListener('click', (e) => {
-            e.preventDefault();
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="it">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DAC - AI Interface</title>
     <style>
         :root {
+            /* Palette ispirata ai modelli AI moderni */
+            --bg-color: #050505;
+            --text-main: #ffffff;
+            --ai-gradient: linear-gradient(135deg, #4285f4, #9b72cb, #d96570, #f4af4a);
+            --aura-opacity: 0.4;
         }
+        body, html {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
+            background-color: var(--bg-color);
             display: flex;
             justify-content: center;
             align-items: center;
+            /* Font di sistema che sembrano premium (Apple/Windows) */
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            overflow: hidden;
+            color: var(--text-main);
         }
+        /* Container principale */
+        .interface-wrapper {
+            position: relative;
             display: flex;
             flex-direction: column;
             align-items: center;
+            z-index: 10;
         }
+        /* L'effetto Aura dietro il testo (ispirato a Google AI) */
+        .aura-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 400px;
+            height: 400px;
+            z-index: -1;
+            filter: blur(80px);
+            opacity: var(--aura-opacity);
+            animation: aura-rotate 10s infinite linear;
+        }
+        .aura-layer {
+            position: absolute;
+            inset: 0;
+            background: var(--ai-gradient);
+            border-radius: 50%;
         }
+        /* Il Logo DAC con gradiente animato */
+        .logo-dac {
+            font-size: 3.5rem;
+            font-weight: 700;
+            letter-spacing: -2px;
             margin-bottom: 20px;
+            background: var(--ai-gradient);
+            background-size: 300% 300%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: gradient-shift 6s ease infinite;
+            position: relative;
         }
+        /* Sottotitolo elegante */
+        .status-text {
+            font-size: 0.9rem;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            opacity: 0.5;
+            font-weight: 300;
         }
+        /* Barra di input stile Claude (minimalista e fluttuante) */
+        .input-area {
             position: fixed;
+            bottom: 50px;
+            width: 100%;
+            max-width: 700px;
+            padding: 0 20px;
         }
+        .input-container {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: 15px 25px;
             display: flex;
             align-items: center;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
         }
+        .input-container:focus-within {
+            border-color: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.05);
+            box-shadow: 0 0 30px rgba(155, 114, 203, 0.1);
         }
+        .input-placeholder {
+            color: rgba(255, 255, 255, 0.4);
+            font-size: 1rem;
+            flex-grow: 1;
         }
+        /* ANIMAZIONI */
+        @keyframes gradient-shift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
+        @keyframes aura-rotate {
+            0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
+            50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
+            100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
         }
+        /* Effetto particelle di sfondo (opzionale, molto sottile) */
+        .background-glow {
+            position: fixed;
             top: 0;
             left: 0;
+            width: 100%;
             height: 100%;
+            background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050505 100%);
+            z-index: -2;
         }
     </style>
 </head>
 <body>
+    <div class="background-glow"></div>
+    <div class="interface-wrapper">
+        <div class="aura-container">
+            <div class="aura-layer"></div>
         </div>
+        <h1 class="logo-dac">DAC</h1>
+        <div class="status-text">Pronto ad assisterti</div>
     </div>
+    <div class="input-area">
+        <div class="input-container">
+            <div class="input-placeholder">Scrivi un messaggio a DAC...</div>
+            <div style="width: 32px; height: 32px; background: var(--ai-gradient); border-radius: 50%; opacity: 0.8;"></div>
+        </div>
+    </div>
 </body>
 </html>