Spaces:
Running
Running
🧠 **Role Prompt:** You are a world-class AI-powered full-stack designer and engineer. Your task is to build a next-generation, all-in-one admin dashboard for a smart e-commerce store called “Store AI Hub,” with a professional dark mode theme, modern UX, and future-proof modular architecture. Design as if you’re building a global SaaS product to impress both Gulf-region and international clients. Quality and speed are priorities. --- 🎨 **Core Design Requirements:** - Beautiful dark mode (high contrast, visually appealing) - Single Page Application (SPA) structure with modular, dynamic sections - UI inspired by premium SaaS platforms (Figma, Linear, Notion, Bolt) - Fixed sidebar with modern, interactive icons & short labels - Floating Action Button (FAB) always visible for adding new content - Flexible components that handle empty states gracefully --- 📋 **Main Layout Structure (Sample HTML):** ```html <div class="flex h-screen bg-gray-900 text-gray-100"> <!-- Sidebar --> <aside class="w-64 bg-gray-800 p-4"> <nav> <ul> <li class="sidebar-tab" data-tab="products">📦 Products</li> <li class="sidebar-tab" data-tab="shipping">🚚 Shipping</li> <li class="sidebar-tab" data-tab="ai">🤖 AI Center</li> <li class="sidebar-tab" data-tab="analytics">📈 Analytics</li> <li class="sidebar-tab" data-tab="social">📣 Social</li> <li class="sidebar-tab" data-tab="settings">⚙️ Settings</li> </ul> </nav> </aside> <!-- Main Content --> <main class="flex-1 p-6 overflow-y-auto"> <div id="module-container"></div> </main> <!-- Floating Action Button --> <button class="fab">+</button> </div> - Follow Up Deployment
24dc896
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | |
| <title>NeoVista AI Control Center</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| accent: '#a855f7', | |
| success: '#10b981', | |
| info: '#3b82f6', | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#a855f7', | |
| 500: '#9333ea', | |
| 600: '#7e22ce', | |
| 700: '#6a10a1', | |
| 800: '#580c84', | |
| 900: '#4c0a6d', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --accent: #a855f7; | |
| --glass-bg: rgba(30, 41, 59, 0.5); | |
| --glass-border: rgba(255, 255, 255, 0.18); | |
| } | |
| html,body{ | |
| overflow-x:hidden; | |
| min-width:320px; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #121212; | |
| color: #e5e7eb; | |
| -webkit-tap-highlight-color:transparent; | |
| } | |
| .blink { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| .glass { | |
| backdrop-filter: blur(25px) saturate(200%); | |
| border: 1px solid var(--glass-border); | |
| background: var(--glass-bg); | |
| } | |
| .glass-light { | |
| background: rgba(248, 250, 252, 0.6); | |
| color: #0f172a; | |
| } | |
| .kpi-card { | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| opacity: 0; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(30, 41, 59, 0.9); | |
| color: white; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| font-size: 0.75rem; | |
| white-space: nowrap; | |
| transition: opacity 0.3s; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .fab-shadow { | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| stroke-dasharray: 283; | |
| stroke-dashoffset: 283; | |
| transition: stroke-dashoffset 0.5s; | |
| } | |
| .active-nav { | |
| background: rgba(168, 85, 247, 0.2); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .sidebar-expanded { | |
| width: 240px; | |
| } | |
| .sidebar-collapsed { | |
| width: 72px; | |
| } | |
| .sidebar-toggle { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-toggle:hover { | |
| transform: scale(1.1); | |
| } | |
| .status-indicator { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid #121212; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%); | |
| } | |
| .drag-over { | |
| border: 2px dashed var(--accent); | |
| background: rgba(168, 85, 247, 0.1); | |
| } | |
| .drag-over * { | |
| pointer-events: none; | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); } | |
| 100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .chart-bar { | |
| animation: chart-grow 1s ease-out forwards; | |
| } | |
| @keyframes chart-grow { | |
| from { height: 0; } | |
| to { height: var(--target-height); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-200 antialiased overflow-x-hidden"> | |
| <!-- App Bar (enhanced) --> | |
| <header class="glass fixed top-0 left-0 right-0 z-50 backdrop-blur-md"> | |
| <div class="container mx-auto px-4 h-16 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400 flex items-center justify-center"> | |
| <i class="fas fa-brain text-white text-lg"></i> | |
| </div> | |
| <span class="font-extrabold text-xl hidden sm:inline">NeoVista AI</span> | |
| </div> | |
| <!-- Command Palette --> | |
| <div class="hidden md:flex flex-1 max-w-md mx-4"> | |
| <button id="openCommand" class="w-full glass text-sm px-4 py-2.5 rounded-lg flex items-center space-x-3 hover:bg-slate-700 transition"> | |
| <i class="fas fa-search text-sm"></i> | |
| <span>Search commands...</span> | |
| <kbd class="ml-auto text-xs px-2 py-1 bg-slate-700 rounded">⌘K</kbd> | |
| </button> | |
| </div> | |
| <!-- Nav Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-sm font-semibold hover:opacity-80 transition" title="Switch to Arabic">EN</button> | |
| <button id="themeToggle" class="p-2 rounded-full hover:bg-slate-700 transition tooltip"> | |
| <i class="fas fa-sun text-yellow-300"></i> | |
| <span class="tooltip-text">Toggle Theme</span> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-slate-700 transition tooltip"> | |
| <i class="fas fa-microphone text-red-400"></i> | |
| <span class="tooltip-text">Voice Command</span> | |
| </button> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-slate-700 relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse">3</span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 hover:bg-slate-700 transition rounded-full p-1"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center relative"> | |
| <span class="text-sm font-bold">AI</span> | |
| <div class="status-indicator bg-green-500"></div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Sidebar (enhanced) --> | |
| <aside id="sidebar" class="glass fixed inset-y-0 left-0 z-40 sidebar-collapsed p-3 space-y-3 overflow-y-auto transition-all duration-300 lg:relative lg:translate-x-0 transform -translate-x-full lg:translate-x-0"> | |
| <div class="flex justify-between items-center mb-6 mt-2"> | |
| <h2 class="text-xl font-bold px-3 hidden sidebar-text">Navigation</h2> | |
| <button id="toggleSidebar" class="p-2 rounded-full hover:bg-slate-700 sidebar-toggle"> | |
| <i class="fas fa-chevron-left text-sm"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col space-y-2"> | |
| <a href="#home" class="group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50 active-nav"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Home</span> | |
| <span class="absolute left-full ml-3 px-2 py-1 text-xs glass rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none transition">Home</span> | |
| </a> | |
| <a href="#products" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Smart Products"> | |
| <i class="fas fa-box-open text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Products</span> | |
| </a> | |
| <a href="#orders" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Orders & Invoices"> | |
| <i class="fas fa-file-invoice-dollar text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Orders</span> | |
| </a> | |
| <a href="#integrations" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Store Integrations"> | |
| <i class="fas fa-store text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Integrations</span> | |
| </a> | |
| <a href="#social" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Social Media Tools"> | |
| <i class="fas fa-share-alt text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Social</span> | |
| </a> | |
| <a href="#ai" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="AI Assistant"> | |
| <i class="fas fa-robot text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">AI Assistant</span> | |
| </a> | |
| <a href="#automations" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Automations"> | |
| <i class="fas fa-cogs text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Automations</span> | |
| </a> | |
| <a href="#shipping" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Shipping & Invoices"> | |
| <i class="fas fa-shipping-fast text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Shipping</span> | |
| </a> | |
| <a href="#payments" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Payments"> | |
| <i class="fas fa-credit-card text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Payments</span> | |
| </a> | |
| <a href="#trends" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Trends"> | |
| <i class="fas fa-fire text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Trends</span> | |
| </a> | |
| <a href="#settings" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Settings"> | |
| <i class="fas fa-sliders-h text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Settings</span> | |
| </a> | |
| <a href="#feedback" class="tooltip group relative flex items-center p-3 rounded-xl hover:bg-slate-700/50" title="Feedback"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| <span class="ml-4 font-medium sidebar-text hidden">Feedback</span> | |
| </a> | |
| </nav> | |
| <div class="mt-auto pt-4 border-t border-slate-700/50"> | |
| <div class="p-3 rounded-xl bg-slate-800/30"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mr-3"> | |
| <span class="text-sm font-bold">AI</span> | |
| </div> | |
| <div class="sidebar-text hidden"> | |
| <p class="font-medium">AI Assistant</p> | |
| <p class="text-xs text-slate-400">Online</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 px-3 py-2 bg-slate-700/50 hover:bg-slate-700 rounded-lg text-sm transition sidebar-text hidden"> | |
| <i class="fas fa-comment mr-2"></i>Chat with AI | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Mobile Hamburger --> | |
| <button id="openSidebar" class="glass fixed top-20 left-4 z-30 p-3 rounded-full lg:hidden fab-shadow touch-manipulation"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Main Content --> | |
| <main class="pt-20 lg:pl-20 px-4 pb-32 space-y-8"> | |
| <!-- Hero Widget --> | |
| <section id="home" class="scroll-mt-20"> | |
| <div class="relative glass rounded-xl p-6 mb-6 overflow-hidden hero-gradient"> | |
| <!-- animated bg --> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute -top-8 -left-8 w-40 h-40 bg-gradient-to-br from-indigo-500 to-cyan-400 rounded-full blur-2xl animate-pulse"></div> | |
| <div class="absolute -bottom-8 -right-8 w-48 h-48 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full blur-2xl animate-pulse delay-1000"></div> | |
| </div> | |
| <div class="relative z-10"> | |
| <div class="flex flex-col md:flex-row md:items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold mb-2">Welcome back, Alex! <span class="text-accent">🤖</span></h1> | |
| <p class="text-gray-400 mb-4"> | |
| Your AI assistant is <span class="text-green-400 font-bold">Online</span> · | |
| <span class="text-xs glass px-2 py-1 rounded-full">Next task in 5 min</span> | |
| </p> | |
| </div> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="glass px-4 py-2.5 rounded-lg text-sm hover:bg-slate-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i>Start Task | |
| </button> | |
| <button class="glass px-4 py-2.5 rounded-lg text-sm hover:bg-slate-700 transition flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i>Quick Action | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center"> | |
| <i class="fas fa-upload mr-1"></i> Upload CSV | |
| </button> | |
| <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center"> | |
| <i class="fas fa-chart-line mr-1"></i> View Reports | |
| </button> | |
| <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center"> | |
| <i class="fas fa-robot mr-1"></i> Ask AI | |
| </button> | |
| <button class="glass px-3 py-2.5 rounded-lg text-xs hover:bg-slate-700 transition flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Stats Row --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="kpi-card glass p-4 rounded-xl"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <i class="fas fa-dollar-sign text-3xl text-emerald-400"></i> | |
| <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full"> | |
| <i class="fas fa-caret-up"></i> 5.2 % | |
| </span> | |
| </div> | |
| <p class="text-3xl font-extrabold">$1,247</p> | |
| <p class="text-xs text-slate-400">Revenue</p> | |
| </div> | |
| <div class="kpi-card glass p-4 rounded-xl"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2"> | |
| <i class="fas fa-shopping-cart text-accent text-lg"></i> | |
| </div> | |
| <span class="text-sm">Orders</span> | |
| </div> | |
| <button class="text-xs text-slate-400 hover:text-accent"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-bold mb-1">28</p> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-red-400"> | |
| <i class="fas fa-caret-down"></i> | |
| <span>2.1%</span> | |
| </span> | |
| <span class="text-xs text-slate-400 ml-2">vs yesterday</span> | |
| </div> | |
| </div> | |
| <div class="kpi-card glass p-4 rounded-xl"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2"> | |
| <i class="fas fa-chart-line text-accent text-lg"></i> | |
| </div> | |
| <span class="text-sm">Conversion</span> | |
| </div> | |
| <button class="text-xs text-slate-400 hover:text-accent"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-bold mb-1">12.2%</p> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-emerald-400"> | |
| <i class="fas fa-caret-up"></i> | |
| <span>1.8%</span> | |
| </span> | |
| <span class="text-xs text-slate-400 ml-2">vs yesterday</span> | |
| </div> | |
| </div> | |
| <div class="kpi-card glass p-4 rounded-xl"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-2"> | |
| <i class="fas fa-heartbeat text-accent text-lg"></i> | |
| </div> | |
| <span class="text-sm">Health</span> | |
| </div> | |
| <button class="text-xs text-slate-400 hover:text-accent"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-bold mb-1">97%</p> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-emerald-400"> | |
| <i class="fas fa-caret-up"></i> | |
| <span>0.5%</span> | |
| </span> | |
| <span class="text-xs text-slate-400 ml-2">vs yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Health & AI Status --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="glass rounded-xl p-5 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-bold">System Health</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div> | |
| <span class="text-xs">Operational</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="h-48 flex items-end space-x-1 justify-center"> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 80%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 80%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 95%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 95%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 70%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 70%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 90%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 90%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 85%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 85%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 92%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 92%;"></div> | |
| </div> | |
| <div class="w-8 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 75%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-green-500 to-emerald-400 rounded-t chart-bar" style="--target-height: 75%;"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2 mt-4 text-center text-xs"> | |
| <div> | |
| <p class="text-slate-400">API</p> | |
| <p class="text-green-400 font-medium">98%</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400">Database</p> | |
| <p class="text-green-400 font-medium">99%</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400">Storage</p> | |
| <p class="text-green-400 font-medium">95%</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400">Network</p> | |
| <p class="text-green-400 font-medium">97%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-5"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-bold">AI Assistant</h3> | |
| <span class="text-xs px-2 py-1 bg-emerald-600/20 text-emerald-400 rounded-full">Online</span> | |
| </div> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="relative w-32 h-32"> | |
| <svg class="w-32 h-32 progress-ring" viewBox="0 0 100 100"> | |
| <circle class="text-slate-700" stroke-width="10" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" /> | |
| <circle class="progress-ring-circle" stroke-width="10" stroke-linecap="round" stroke="url(#gradient)" fill="transparent" r="45" cx="50" cy="50" stroke-dashoffset="283 - (283 * 87 / 100)" /> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#8b5cf6" /> | |
| <stop offset="100%" stop-color="#ec4899" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> | |
| <p class="text-2xl font-bold text-accent">87%</p> | |
| <p class="text-xs text-slate-400">Efficiency</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Tasks Completed</span> | |
| <span class="font-medium">42/50</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Response Time</span> | |
| <span class="font-medium">120ms</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Accuracy</span> | |
| <span class="font-medium">94%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What-If Sim --> | |
| <section id="sim" class="scroll-mt-20"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">What-If Simulator</h2> | |
| <button class="text-sm glass px-3 py-1.5 rounded hover:bg-slate-700">Save Scenario</button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="glass rounded-xl p-5"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-sm flex items-center justify-between"> | |
| <span>Discount</span> | |
| <span class="text-xs text-slate-400">Current: 15%</span> | |
| </label> | |
| <input type="range" min="0" max="50" value="10" class="w-full accent-accent mb-1"> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>0%</span> | |
| <span>10%</span> | |
| <span>50%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-sm flex items-center justify-between"> | |
| <span>Budget</span> | |
| <span class="text-xs text-slate-400">Current: $750</span> | |
| </label> | |
| <input type="range" min="0" max="2000" step="50" value="500" class="w-full accent-accent mb-1"> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>$0</span> | |
| <span>$500</span> | |
| <span>$2000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-5"> | |
| <h3 class="text-sm font-medium mb-3">Projected Results</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Revenue</span> | |
| <span class="font-medium">$1,075</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Profit</span> | |
| <span class="font-medium">$725</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">New Customers</span> | |
| <span class="font-medium">20</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">ROI</span> | |
| <span class="font-medium">145%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-5"> | |
| <h3 class="text-sm font-medium mb-3">Saved Scenarios</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 hover:bg-slate-700 rounded cursor-pointer"> | |
| <div> | |
| <p class="text-sm font-medium">Summer Sale</p> | |
| <p class="text-xs text-slate-400">Discount: 20% | Budget: $1000</p> | |
| </div> | |
| <button class="text-red-400 hover:text-red-300 p-1"> | |
| <i class="fas fa-trash text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-slate-700 rounded cursor-pointer"> | |
| <div> | |
| <p class="text-sm font-medium">Black Friday</p> | |
| <p class="text-xs text-slate-400">Discount: 30% | Budget: $1500</p> | |
| </div> | |
| <button class="text-red-400 hover:text-red-300 p-1"> | |
| <i class="fas fa-trash text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="text-center py-4 text-sm text-slate-400"> | |
| <p>No saved scenarios</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Smart Product Manager --> | |
| <section id="products" class="scroll-mt-20"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Smart Product Manager</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button id="bulkImportBtn" class="text-sm glass px-3 py-1.5 rounded hover:bg-gray-800/60 flex items-center space-x-1"> | |
| <i class="fas fa-file-import text-xs"></i> | |
| <span>Bulk Import</span> | |
| </button> | |
| <button id="addProductBtn" class="text-sm glass px-3 py-1.5 rounded hover:bg-gray-800/60 flex items-center space-x-1"> | |
| <i class="fas fa-plus text-xs"></i> | |
| <span>Add Product</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl overflow-x-auto"> | |
| <table id="productsTable" class="w-full text-sm"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th class="p-3 text-left">Name</th> | |
| <th class="p-3 text-left">SKU</th> | |
| <th class="p-3 text-left">Price</th> | |
| <th class="p-3 text-left">Stock</th> | |
| <th class="p-3 text-left">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-t border-slate-700 hover:bg-slate-800/50"> | |
| <td class="p-3">Premium T-Shirt</td> | |
| <td class="p-3">TSH-001</td> | |
| <td class="p-3">$29.99</td> | |
| <td class="p-3"> | |
| <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">42</span> | |
| </td> | |
| <td class="p-3"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span> | |
| </td> | |
| </tr> | |
| <tr class="border-t border-slate-700 hover:bg-slate-800/50"> | |
| <td class="p-3">Wireless Headphones</td> | |
| <td class="p-3">WH-002</td> | |
| <td class="p-3">$89.99</td> | |
| <td class="p-3"> | |
| <span class="px-2 py-1 rounded-full text-xs bg-emerald-600">15</span> | |
| </td> | |
| <td class="p-3"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span> | |
| </td> | |
| </tr> | |
| <tr class="border-t border-slate-700 hover:bg-slate-800/50"> | |
| <td class="p-3">Smart Watch</td> | |
| <td class="p-3">SW-003</td> | |
| <td class="p-3">$199.99</td> | |
| <td class="p-3"> | |
| <span class="px-2 py-1 rounded-full text-xs bg-red-600">3</span> | |
| </td> | |
| <td class="p-3"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-slate-700">Active</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Integrations --> | |
| <section id="ads" class="scroll-mt-20"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Integrations</h2> | |
| <button class="text-sm glass px-3 py-1.5 rounded hover:bg-slate-700 flex items-center space-x-1"> | |
| <i class="fas fa-plus text-xs"></i> | |
| <span>Add Integration</span> | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="px-3 py-1.5 rounded-md text-sm transition bg-accent text-white">All</button> | |
| <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Ads</button> | |
| <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Stores</button> | |
| <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Email</button> | |
| <button class="px-3 py-1.5 rounded-md text-sm transition glass hover:bg-slate-700">Automation</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center"> | |
| <i class="fab fa-wordpress text-accent text-xl"></i> | |
| </div> | |
| <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span> | |
| </div> | |
| <p class="font-semibold mb-1">WooCommerce</p> | |
| <p class="text-xs text-slate-400 mb-3">Connect your WooCommerce store</p> | |
| <div class="w-full bg-slate-700 rounded-full h-2 mb-1"> | |
| <div class="bg-accent h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>Not connected</span> | |
| <span>E-commerce</span> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center"> | |
| <i class="fab fa-shopify text-accent text-xl"></i> | |
| </div> | |
| <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span> | |
| </div> | |
| <p class="font-semibold mb-1">Shopify</p> | |
| <p class="text-xs text-slate-400 mb-3">Connect your Shopify store</p> | |
| <div class="w-full bg-slate-700 rounded-full h-2 mb-1"> | |
| <div class="bg-accent h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>Connected</span> | |
| <span>E-commerce</span> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center"> | |
| <i class="fab fa-google text-accent text-xl"></i> | |
| </div> | |
| <span class="text-xs px-2 py-1 rounded-full bg-emerald-600/20 text-emerald-400">Connected</span> | |
| </div> | |
| <p class="font-semibold mb-1">Google Ads</p> | |
| <p class="text-xs text-slate-400 mb-3">Connect your Google Ads account</p> | |
| <div class="w-full bg-slate-700 rounded-full h-2 mb-1"> | |
| <div class="bg-accent h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>Connected</span> | |
| <span>Advertising</span> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-4 hover:bg-slate-700/50 transition cursor-pointer"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center"> | |
| <i class="fab fa-facebook text-accent text-xl"></i> | |
| </div> | |
| <span class="text-xs px-2 py-1 rounded-full bg-slate-700/50 text-slate-400">Disconnected</span> | |
| </div> | |
| <p class="font-semibold mb-1">Facebook</p> | |
| <p class="text-xs text-slate-400 mb-3">Connect your Facebook page</p> | |
| <div class="w-full bg-slate-700 rounded-full h-2 mb-1"> | |
| <div class="bg-accent h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-400"> | |
| <span>Not connected</span> | |
| <span>Social</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Usage Section --> | |
| <section id="ai" class="scroll-mt-20"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">AI Usage</h2> | |
| <div class="relative"> | |
| <select class="glass text-sm px-3 py-1.5 rounded appearance-none pr-7"> | |
| <option value="7d">Last 7 Days</option> | |
| <option value="30d">Last 30 Days</option> | |
| <option value="90d">Last 90 Days</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="glass rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">API Usage</h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent mr-1"></div> | |
| <span class="text-xs">This Month</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-slate-500 mr-1"></div> | |
| <span class="text-xs">Last Month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="h-48 flex items-end space-x-1 justify-center"> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 60%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 60%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 75%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 75%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 90%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 90%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 85%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 85%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 95%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 95%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 80%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 80%;"></div> | |
| </div> | |
| <div class="w-6 bg-slate-700 rounded-t relative overflow-hidden" style="--target-height: 70%;"> | |
| <div class="absolute bottom-0 w-full bg-gradient-to-t from-accent to-purple-500 rounded-t chart-bar" style="--target-height: 70%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass rounded-xl p-4"> | |
| <h3 class="font-medium mb-4">Cost Summary</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <p class="text-sm text-slate-400 mb-1">This Month</p> | |
| <p class="text-xl font-bold">$1,245</p> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <p class="text-sm text-slate-400 mb-1">Last Month</p> | |
| <p class="text-xl font-bold">$1,080</p> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <p class="text-sm text-slate-400 mb-1">Change</p> | |
| <p class="text-xl font-bold text-emerald-400">+15.3%</p> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-3"> | |
| <p class="text-sm text-slate-400 mb-1">Forecast</p> | |
| <p class="text-xl font-bold">$1,450</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trends & Recommendations --> | |
| <section id="trends" class="scroll-mt-20"> | |
| <h2 class="text-xl font-bold mb-4">Trends & Recommendations</h2> | |
| <div class="glass rounded-xl p-4"> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-fire text-red-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Steam Wallet Cards selling 4× last week</p> | |
| <p class="text-xs text-slate-400">Trending in Gaming</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-lightbulb text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">AI: "Boost Netflix KSA ads 9 PM-11 PM"</p> | |
| <p class="text-xs text-slate-400">AI Recommendation</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> | |
| <i class="fas fa-chart-line text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">TikTok hashtag #PSNSaudi trending</p> | |
| <p class="text-xs text-slate-400">Social Media</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Command Palette Modal --> | |
| <div id="commandModal" class="fixed inset-0 bg-black/50 z-50 hidden items-start justify-center pt-20"> | |
| <div class="glass w-full max-w-lg rounded-xl overflow-hidden"> | |
| <div class="p-4 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-search text-sm mr-2 text-gray-400"></i> | |
| <input id="cmdInput" type="search" placeholder="Type to search..." class="w-full bg-transparent outline-none placeholder-gray-400" /> | |
| </div> | |
| <div id="cmdResults" class="max-h-96 overflow-y-auto"> | |
| <!-- dynamic results --> | |
| <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center"> | |
| <i class="fas fa-plus text-sm w-5 text-center text-accent mr-3"></i> | |
| <span>Add Product</span> | |
| </div> | |
| <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center"> | |
| <i class="fas fa-file-import text-sm w-5 text-center text-accent mr-3"></i> | |
| <span>Bulk Import Products</span> | |
| </div> | |
| <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center"> | |
| <i class="fas fa-cog text-sm w-5 text-center text-accent mr-3"></i> | |
| <span>System Settings</span> | |
| </div> | |
| <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center"> | |
| <i class="fas fa-robot text-sm w-5 text-center text-accent mr-3"></i> | |
| <span>Ask AI Assistant</span> | |
| </div> | |
| <div class="p-3 hover:bg-slate-700/50 cursor-pointer flex items-center"> | |
| <i class="fas fa-chart-line text-sm w-5 text-center text-accent mr-3"></i> | |
| <span>View Analytics</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-6 right-6 z-40 flex flex-col items-end space-y-3"> | |
| <button id="primaryFab" class="glass p-4 rounded-full shadow-xl fab-shadow hover:scale-110 transition pulse-glow"> | |
| <i class="fas fa-plus text-lg"></i> | |
| </button> | |
| <button id="addProductFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 neon hidden"> | |
| <i class="fas fa-box-open"></i> | |
| </button> | |
| <button id="chatToggleFab" class="glass p-3 rounded-full shadow-lg fab-shadow transition hover:scale-110 hidden"> | |
| <i class="fas fa-robot"></i> | |
| </button> | |
| </div> | |
| <!-- Live Chat Panel --> | |
| <div id="chatPanel" class="fixed inset-x-0 bottom-0 z-50 glass rounded-t-xl shadow-2xl transform translate-y-full transition-transform duration-300 md:max-w-md md:mx-auto"> | |
| <header class="flex items-center justify-between p-4 border-b border-slate-700"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-accent"></i> | |
| <span class="font-bold">AI Assistant</span> | |
| </div> | |
| <button id="closeChat" class="p-1 rounded-full hover:bg-slate-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </header> | |
| <div id="chatMessages" class="h-[60vh] md:h-[70vh] overflow-y-auto p-4 space-y-3"> | |
| <div class="flex justify-start"> | |
| <div class="max-w-[80%] px-4 py-3 rounded-xl glass"> | |
| <p>Hello Alex! How can I assist you today?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="max-w-[80%] px-4 py-3 rounded-xl bg-accent text-white"> | |
| <p>Can you show me the sales report for last month?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-start"> | |
| <div class="max-w-[80%] px-4 py-3 rounded-xl glass"> | |
| <p>Sure! Here's the sales report for last month. Revenue was $1,247 with a 5.2% increase from the previous month.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="p-4 border-t border-slate-700 flex items-center space-x-2"> | |
| <button id="emojiToggle" class="p-2 rounded-full hover:bg-slate-700"> | |
| <i class="far fa-face-smile"></i> | |
| </button> | |
| <label class="p-2 rounded-full hover:bg-slate-700 cursor-pointer"> | |
| <i class="fas fa-paperclip"></i> | |
| <input type="file" multiple accept="image/*,.pdf" class="hidden"> | |
| </label> | |
| <button id="recordBtn" class="p-2 rounded-full hover:bg-slate-700"> | |
| <i class="fas fa-microphone-lines"></i> | |
| </button> | |
| <input id="chatInput" type="text" placeholder="Type a message…" class="flex-1 bg-transparent outline-none" /> | |
| <button id="sendMessage" class="p-2 rounded-full hover:bg-slate-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </footer> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center"> | |
| <div class="glass w-full max-w-md rounded-xl p-6 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Settings</h3> | |
| <button id="closeSettings" class="p-1 rounded-full hover:bg-slate-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Accent Color</label> | |
| <input id="accentColorPicker" type="color" value="#a855f7" class="w-full h-10 rounded cursor-pointer" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Theme</label> | |
| <button id="themeToggleBtn" class="glass px-3 py-2 rounded w-full text-left">Dark Mode</button> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input id="pushToggle" type="checkbox" class="accent-accent" checked> | |
| <span class="text-sm">Enable Push Notifications</span> | |
| </label> | |
| </div> | |
| <div class="text-right"> | |
| <button id="saveSettings" class="px-4 py-2 bg-accent rounded hover:bg-opacity-80">Save Changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const toggleSidebarBtn = document.getElementById('toggleSidebar'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const openCommandBtn = document.getElementById('openCommand'); | |
| const commandModal = document.getElementById('commandModal'); | |
| const cmdInput = document.getElementById('cmdInput'); | |
| const primaryFab = document.getElementById('primaryFab'); | |
| const addProductFab = document.getElementById('addProductFab'); | |
| const chatToggleFab = document.getElementById('chatToggleFab'); | |
| const chatPanel = document.getElementById('chatPanel'); | |
| const closeChatBtn = document.getElementById('closeChat'); | |
| const themeToggleBtn = document.getElementById('themeToggleBtn'); | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const closeSettingsBtn = document.getElementById('closeSettings'); | |
| const saveSettingsBtn = document.getElementById('saveSettings'); | |
| const accentColorPicker = document.getElementById('accentColorPicker'); | |
| // State | |
| let isSidebarExpanded = true; | |
| let isChatOpen = false; | |
| let isDarkMode = true; | |
| // Toggle sidebar | |
| toggleSidebarBtn.addEventListener('click', () => { | |
| isSidebarExpanded = !isSidebarExpanded; | |
| sidebar.classList.toggle('sidebar-expanded', isSidebarExpanded); | |
| sidebar.classList.toggle('sidebar-collapsed', !isSidebarExpanded); | |
| const sidebarTexts = document.querySelectorAll('.sidebar-text'); | |
| sidebarTexts.forEach(text => { | |
| if (isSidebarExpanded) { | |
| text.classList.remove('hidden'); | |
| } else { | |
| text.classList.add('hidden'); | |
| } | |
| }); | |
| const icon = toggleSidebarBtn.querySelector('i'); | |
| if (isSidebarExpanded) { | |
| icon.classList.remove('fa-chevron-right'); | |
| icon.classList.add('fa-chevron-left'); | |
| } else { | |
| icon.classList.remove('fa-chevron-left'); | |
| icon.classList.add('fa-chevron-right'); | |
| } | |
| }); | |
| // Command palette | |
| openCommandBtn.addEventListener('click', () => { | |
| commandModal.classList.remove('hidden'); | |
| cmdInput.focus(); | |
| }); | |
| cmdInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| commandModal.classList.add('hidden'); | |
| } | |
| }); | |
| commandModal.addEventListener('click', (e) => { | |
| if (e.target === commandModal) { | |
| commandModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Floating action button | |
| primaryFab.addEventListener('click', () => { | |
| const isHidden = addProductFab.classList.contains('hidden'); | |
| if (isHidden) { | |
| addProductFab.classList.remove('hidden'); | |
| chatToggleFab.classList.remove('hidden'); | |
| setTimeout(() => { | |
| addProductFab.classList.add('animate-fadeIn'); | |
| chatToggleFab.classList.add('animate-fadeIn'); | |
| }, 10); | |
| } else { | |
| addProductFab.classList.add('hidden'); | |
| chatToggleFab.classList.add('hidden'); | |
| addProductFab.classList.remove('animate-fadeIn'); | |
| chatToggleFab.classList.remove('animate-fadeIn'); | |
| } | |
| }); | |
| // Chat panel | |
| chatToggleFab.addEventListener('click', () => { | |
| isChatOpen = !isChatOpen; | |
| chatPanel.classList.toggle('translate-y-full', !isChatOpen); | |
| chatPanel.classList.toggle('translate-y-0', isChatOpen); | |
| }); | |
| closeChatBtn.addEventListener('click', () => { | |
| isChatOpen = false; | |
| chatPanel.classList.add('translate-y-full'); | |
| chatPanel.classList.remove('translate-y-0'); | |
| }); | |
| // Theme toggle | |
| themeToggleBtn.addEventListener('click', () => { | |
| isDarkMode = !isDarkMode; | |
| document.documentElement.classList.toggle('dark', isDarkMode); | |
| themeToggleBtn.textContent = isDarkMode ? 'Dark Mode' : 'Light Mode'; | |
| themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-sun text-yellow-300"></i>' : '<i class="fas fa-moon text-slate-300"></i>'; | |
| }); | |
| themeToggle.addEventListener('click', () => { | |
| isDarkMode = !isDarkMode; | |
| document.documentElement.classList.toggle('dark', isDarkMode); | |
| themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-sun text-yellow-300"></i>' : '<i class="fas fa-moon text-slate-300"></i>'; | |
| themeToggleBtn.textContent = isDarkMode ? 'Dark Mode' : 'Light Mode'; | |
| }); | |
| // Settings modal | |
| document.querySelectorAll('[id$="Fab"]').forEach(btn => { | |
| if (btn.id !== 'primaryFab') { | |
| btn.addEventListener('click', () => { | |
| settingsModal.classList.remove('hidden'); | |
| }); | |
| } | |
| }); | |
| closeSettingsBtn.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| saveSettingsBtn.addEventListener('click', () => { | |
| const newAccent = accentColorPicker.value; | |
| document.documentElement.style.setProperty('--accent', newAccent); | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| // Close modals when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (commandModal.classList.contains('hidden') && | |
| settingsModal.classList.contains('hidden') && | |
| !isChatOpen) return; | |
| if (!commandModal.contains(e.target) && | |
| e.target !== openCommandBtn && | |
| !commandModal.classList.contains('hidden')) { | |
| commandModal.classList.add('hidden'); | |
| } | |
| if (!settingsModal.contains(e.target) && | |
| e.target !== primaryFab && | |
| e.target !== addProductFab && | |
| e.target !== chatToggleFab && | |
| !settingsModal.classList.contains('hidden')) { | |
| settingsModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Simulate loading data | |
| setTimeout(() => { | |
| const bars = document.querySelectorAll('.chart-bar'); | |
| bars.forEach(bar => { | |
| bar.style.height = bar.style.getPropertyValue('--target-height'); | |
| }); | |
| }, 500); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fsalmansour/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |