Spaces:
Running
Running
| <html lang="en" data-theme="{{ theme }}"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}AI Avatar Creator{% endblock %}</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| :root { | |
| --bg-body: #f0f4fd; | |
| --bg-window: rgba(255, 255, 255, 0.85); | |
| --text-main: #111827; | |
| --text-secondary: #4b5563; | |
| --text-muted: #9ca3af; | |
| --card-bg: #ffffff; | |
| --card-border: #f3f4f6; | |
| --sidebar-bg: transparent; | |
| --btn-dark: #111827; | |
| --btn-dark-hover: #374151; | |
| --shadow-soft: 0 10px 40px rgba(0,0,0,0.04); | |
| --shadow-card: 0 4px 15px rgba(0,0,0,0.02); | |
| --accent-blue: #3b82f6; | |
| } | |
| [data-theme="dark"] { | |
| --bg-body: #0f172a; | |
| --bg-window: rgba(30, 41, 59, 0.85); | |
| --text-main: #f8fafc; | |
| --text-secondary: #cbd5e1; | |
| --text-muted: #64748b; | |
| --card-bg: #1e293b; | |
| --card-border: #334155; | |
| --btn-dark: #f8fafc; | |
| --btn-dark-hover: #e2e8f0; | |
| --shadow-soft: 0 10px 40px rgba(0,0,0,0.2); | |
| --shadow-card: 0 4px 15px rgba(0,0,0,0.1); | |
| } | |
| body { | |
| background-color: var(--bg-body); | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(223, 233, 243, 0.6) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(230, 233, 240, 0.6) 0%, transparent 40%); | |
| background-attachment: fixed; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| height: 100vh; | |
| color: var(--text-main); | |
| overflow: hidden; | |
| transition: background-color 0.3s ease; | |
| } | |
| [data-theme="dark"] body { | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.8) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(15, 23, 42, 0.8) 0%, transparent 40%); | |
| } | |
| /* Sidebar Layout */ | |
| .sidebar { | |
| width: 70px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 20px 0; | |
| justify-content: space-between; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 18px; | |
| margin: 10px 0; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s; | |
| } | |
| .icon-btn:hover { color: var(--text-main); background: rgba(0,0,0,0.05); } | |
| [data-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,0.05); } | |
| .icon-btn.dark { | |
| background: var(--btn-dark); | |
| color: var(--bg-window); | |
| } | |
| .icon-btn.active { | |
| background: var(--card-bg); | |
| color: var(--text-main); | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| /* Main Window */ | |
| .app-window { | |
| flex: 1; | |
| background: var(--bg-window); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| margin: 15px 15px 15px 0; | |
| border-radius: 32px; | |
| box-shadow: var(--shadow-soft); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| } | |
| [data-theme="dark"] .app-window { border-color: rgba(255,255,255,0.05); } | |
| /* Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 24px 40px; | |
| border-bottom: 1px solid var(--card-border); | |
| } | |
| .brand { | |
| font-weight: 600; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .brand i { color: var(--accent-blue); font-size: 20px; } | |
| .center-title { | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| } | |
| .header-actions { display: flex; gap: 12px; } | |
| .upgrade-btn { | |
| background: var(--btn-dark); | |
| color: var(--bg-window); | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| [data-theme="dark"] .upgrade-btn { color: #0f172a; } | |
| .upgrade-btn:hover { background: var(--btn-dark-hover); } | |
| .theme-toggle-btn { | |
| background: transparent; | |
| border: 1px solid var(--card-border); | |
| color: var(--text-main); | |
| width: 36px; height: 36px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: 0.2s; | |
| } | |
| .theme-toggle-btn:hover { background: var(--card-border); } | |
| /* Content Area */ | |
| .content-scroll { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 40px 60px; | |
| } | |
| .flash-messages { | |
| list-style: none; padding: 0; margin: 0 0 20px 0; | |
| display: flex; flex-direction: column; gap: 10px; | |
| } | |
| .flash-messages li { | |
| padding: 12px 20px; border-radius: 12px; font-weight: 500; | |
| font-size: 14px; display: inline-flex; align-items: center; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| animation: slideIn 0.3s ease forwards; | |
| } | |
| .flash-messages .error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; } | |
| .flash-messages .success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; } | |
| .flash-messages .info { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 900px) { | |
| .sidebar { display: none; } | |
| .app-window { margin: 0; border-radius: 0; } | |
| .content-scroll { padding: 30px 20px; } | |
| .center-title { display: none; } | |
| } | |
| {% block head_extra %}{% endblock %} | |
| </style> | |
| </head> | |
| <body> | |
| <aside class="sidebar"> | |
| <div class="sidebar-top"> | |
| <button class="icon-btn dark"><i class="fas fa-plus"></i></button> | |
| <button class="icon-btn"><i class="fas fa-search"></i></button> | |
| <button class="icon-btn active"><i class="fas fa-border-all"></i></button> | |
| <button class="icon-btn"><i class="fas fa-history"></i></button> | |
| </div> | |
| <div class="sidebar-bottom"> | |
| <img src="https://ui-avatars.com/api/?name=User&background=random&rounded=true&size=32" alt="User" style="border-radius: 50%; cursor: pointer;"> | |
| </div> | |
| </aside> | |
| <main class="app-window"> | |
| <header class="app-header"> | |
| <div class="brand"> | |
| <i class="fas fa-robot"></i> <span>Assistant v2.6</span> | |
| </div> | |
| <div class="center-title">Daily Dashboard</div> | |
| <div class="header-actions"> | |
| <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle theme"> | |
| <i class="fas fa-moon icon-moon"></i> | |
| </button> | |
| <button class="upgrade-btn"><i class="fas fa-sparkles"></i> Upgrade</button> | |
| </div> | |
| </header> | |
| <div class="content-scroll"> | |
| <ul class="flash-messages"> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, message in messages %} | |
| <li class="{{ category }}"><i class="fas fa-info-circle" style="margin-right:8px;"></i> {{ message }}</li> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| </ul> | |
| {% block content %}{% endblock %} | |
| </div> | |
| </main> | |
| <script> | |
| // Theme toggling logic | |
| const toggleBtn = document.getElementById('theme-toggle'); | |
| const icon = toggleBtn.querySelector('i'); | |
| toggleBtn.addEventListener('click', () => { | |
| const html = document.documentElement; | |
| const currentTheme = html.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| html.setAttribute('data-theme', newTheme); | |
| // Toggle icon | |
| if(newTheme === 'dark') { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| // Sync with backend session optionally | |
| fetch('{{ url_for("toggle_theme") }}'); | |
| }); | |
| // Setup initial icon | |
| if(document.documentElement.getAttribute('data-theme') === 'dark') { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } | |
| // Auto-hide flash messages | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setTimeout(() => { | |
| const flashMessages = document.querySelectorAll('.flash-messages li'); | |
| flashMessages.forEach(msg => { | |
| msg.style.opacity = '0'; | |
| msg.style.transform = 'translateY(-10px)'; | |
| msg.style.transition = 'all 0.5s ease'; | |
| setTimeout(() => msg.remove(), 500); | |
| }); | |
| }, 5000); | |
| }); | |
| </script> | |
| {% block scripts_extra %}{% endblock %} | |
| </body> | |
| </html> |