Update src/templates/base.html

src/templates/base.html

@@ -4,149 +4,133 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Crypto Volume Analysis Toolki (CryptoVAT)</title>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
-/* --- CSS VARIABLES --- */
-
+/* --- CSS VARIABLES  --- */
 :root {
-    --bg-dark: #0b0e11;
-    --bg-card: #151a1e;
-    --text-main: #eaecef;
+    /* Backgrounds */
+    --bg-dark: #151a1e;      
+    --bg-card: #1e252a;       
+    --bg-glass: rgba(21, 26, 30, 0.90); 
+    
+    /* Text */
+    --text-main: #ffffff;
     --text-dim: #848e9c;
-    --accent-green: #0ecb81;
+    
+    /* Accents */
+    --accent-green: #10b981;
     --accent-blue: #3b82f6;
     --accent-orange: #f59e0b;
-    --accent-red: #f6465d;
+    --accent-red: #ef4444;
     --accent-purple: #9333ea;
+    
+    /* UI Elements */
     --border: #2b3139;
-    --input-bg: #1e252a;
+    --input-bg: #111827;
+    --radius: 12px;           /
 }
 
 /* --- BASE & LAYOUT --- */
 
 body {
     margin: 0;
-    background: var(--bg-dark);
+    background-color: var(--bg-dark);
     color: var(--text-main);
     font-family: 'Inter', sans-serif;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    
+    /* THE MODERN VIBE */
+    background-image: radial-gradient(circle at top right, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
+    background-attachment: fixed;
+    -webkit-font-smoothing: antialiased;
 }
       
 main {
     flex: 1;
     width: 100%;
+    padding-top: 80px; 
 }
 
-/* --- GLOBAL FOOTER --- */
+a { text-decoration: none; transition: 0.2s; }
 
-.footer {
-    background: var(--bg-card);
-    border-top: 1px solid var(--border);
-    padding: 20px;
-    margin-top: 40px; 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.85rem;
-    color: var(--text-dim);
-}
-      
-@media (max-width: 600px) {
-    .footer {
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-    }
-}
-
-/* --- GLOBAL HEADER --- */
+/* --- GLOBAL HEADER (Glassmorphism) --- */
 .header {
-    padding: 20px;
-    background: var(--bg-card);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 70px;
+    padding: 0 20px;
+    box-sizing: border-box;
+    background: var(--bg-glass);
+    backdrop-filter: blur(12px); /
     border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    z-index: 1000;
 }
 
 .header h1 {
     margin: 0;
-    font-size: 1.1rem;
-    color: var(--accent-green);
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
 }
       
 .header h1 > a {
-    color: var(--accent-green);
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.header h1 > a:hover {
-    opacity: 0.8;
+    color: #fff;
 }
+.header h1 > a span { color: var(--accent-green); } 
 
-.credit a {
-  color: var(--accent-green);
-    text-decoration: none;
-    cursor: pointer;}
+.header h1 > a:hover { opacity: 0.9; }
 
-.credit a:hover { 
-  opacity: 0.8;
-}
+/* Icons */
 .icon-btn {
     color: var(--text-dim);
-    text-decoration: none;
     font-size: 1.2rem;
     padding: 0 10px;
+    transition: color 0.2s;
 }
+.icon-btn:hover { color: var(--text-main); }
 
 .logout-btn {
     color: var(--accent-red);
-    text-decoration: none;
     font-size: 1.2rem;
     padding: 0 10px;
     font-weight: bold;
 }
+.logout-btn:hover { opacity: 0.8; }
+
+
+/* --- CONTAINER & CARDS --- */
 
 .container {
     width: 100%;
     max-width: 600px;
-    margin: 30px auto;
-    padding: 0 15px;
+    margin: 0 auto;
+    padding: 0 20px;
     box-sizing: border-box;
 }
 
-/* "Wide" Modifier - for larger layouts */
-.container.wide {
-    max-width: 1000px;
-}
-
-/* --- CARD COMPONENT --- */
+.container.wide { max-width: 1000px; }
 
 .card {
     background: var(--bg-card);
-    padding: 25px;
-    border-radius: 12px;
+    padding: 30px;
+    border-radius: var(--radius);
     border: 1px solid var(--border);
     margin-bottom: 20px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Subtle shadow */
 }
 
 /* --- TYPOGRAPHY --- */
 
-h1 {
-    color: var(--accent-green);
-    text-align: center;
-    font-size: 1.4rem;
-    margin-bottom: 10px;
-}
-
-h2 {
-    color: var(--accent-blue);
-    font-size: 1.1rem;
-    margin-top: 20px;
-}
+h1 { color: var(--accent-green); text-align: center; font-size: 1.5rem; margin-bottom: 20px; }
+h2 { color: var(--accent-blue); font-size: 1.2rem; margin-top: 25px; }
 
 /* --- FORM ELEMENTS --- */
 
@@ -154,15 +138,17 @@ input[type="text"],
 input[type="email"],
 input[type="password"] {
     width: 100%;
-    padding: 12px;
+    padding: 14px;
     background: var(--input-bg);
     border: 1px solid var(--border);
     color: #fff;
     border-radius: 8px;
-    font-family: monospace;
-    margin-top: 5px;
+    font-family: 'Inter', sans-serif; /* Cleaner than monospace for inputs */
+    margin-top: 8px;
     box-sizing: border-box;
+    font-size: 0.95rem;
 }
+input:focus { outline: none; border-color: var(--accent-green); }
 
 /* --- BUTTONS --- */
 
@@ -172,133 +158,118 @@ input[type="password"] {
     padding: 15px;
     border: none;
     border-radius: 8px;
-    font-weight: 800;
+    font-weight: 700;
     cursor: pointer;
     text-align: center;
-    text-decoration: none;
-    margin-top: 10px;
+    margin-top: 15px;
     font-size: 0.95rem;
-    transition: transform 0.2s ease; /* For consistent hover animation */
-}
-
-.btn, .help-btn:hover {
-    transform: translateY(-2px);
-}
-
-/* Button Color Variants */
-.btn-green {
-    background: var(--accent-green);
-    color: #000;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
 }
+.btn:hover, .help-btn:hover { transform: translateY(-2px); opacity: 0.95; }
 
-.btn-green:hover {
-    box-shadow: 0 4px 12px rgba(14, 203, 129, 0.3);
-    opacity: 0.9;
-}
+/* Variants */
+.btn-green { background: var(--accent-green); color: #000; }
+.btn-green:hover { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
 
 .btn-blue {
-    background: var(--bg-card);
-    width: 90%;
+    background: transparent;
     border: 1px solid var(--accent-blue);
     color: var(--accent-blue);
+    width: 100%; 
 }
-
-.btn-blue:hover {
-    background: rgba(59, 130, 246, 0.1);
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-}
-
-.btn-links, .help-nav-btn {
-    background: var(--bg-card);
-    width: 80%;
-    border: 1px solid var(--accent-blue);
-    color: var(--accent-blue);
-}
-
-.btn-links, .help-nav-btn:hover {
-    background: rgba(59, 130, 246, 0.1);
-}
+.btn-blue:hover { background: rgba(59, 130, 246, 0.1); }
 
 .btn-red {
-    background: rgba(246, 70, 93, 0.1);
-    width: 95%;
+    background: rgba(239, 68, 68, 0.1);
     border: 1px solid var(--accent-red);
     color: var(--accent-red);
+    width: 100%;
 }
+.btn-red:hover { background: rgba(239, 68, 68, 0.2); }
 
-.btn-red:hover {
-    background: rgba(246, 70, 93, 0.2);
-    box-shadow: 0 4px 12px rgba(246, 70, 93, 0.2);
+/* Navigation Buttons (Back Buttons) */
+.btn-links, .help-nav-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    width: auto; 
+    display: inline-block;
+    padding: 10px 25px;
 }
-
-/* --- LINK STYLES --- */
-
-.link {
-    color: var(--accent-blue);
-    text-decoration: none;
-    font-size: 0.85rem;
-    float: right;
+.btn-links:hover, .help-nav-btn:hover {
+    border-color: var(--text-main);
+    color: var(--text-main);
+    background: rgba(255,255,255,0.05);
 }
 
-.link:hover {
-    text-decoration: underline;
-}
+/* --- UTILITIES --- */
+.link { color: var(--accent-blue); font-size: 0.9rem; float: right; margin-top: 5px;}
+.link:hover { text-decoration: underline; }
 
-/* --- GLOBAL NAV BUTTON --- */
+.grid-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
 
-.back-nav-container {
-    margin-top: 40px;
-    padding-top: 20px;
-    border-top: 1px solid var(--border);
+/* Messages */
+.error-message {
+    color: #fee2e2;
+    padding: 15px;
+    background: rgba(239, 68, 68, 0.15);
+    border: 1px solid var(--accent-red);
+    border-radius: 8px;
+    margin: 15px 0;
     text-align: center;
 }
-
-.back-nav-btn {
-    width: auto;
-    padding: 10px 25px;
-    display: inline-block;
-    margin-bottom: 5px;
+.success-message {
+    color: #d1fae5;
+    padding: 15px;
+    background: rgba(16, 185, 129, 0.15);
+    border: 1px solid var(--accent-green);
+    border-radius: 8px;
+    margin: 15px 0;
+    text-align: center;
 }
 
-/* --- GRID LAYOUT --- */
-
-.grid-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
+/* --- GLOBAL NAV BUTTON AREA --- */
+.back-nav-container {
+    margin-top: 60px;
+    padding-top: 30px;
+    border-top: 1px solid var(--border);
+    text-align: center;
 }
+.back-nav-btn { margin-bottom: 5px; }
 
-/* --- MESSAGE STATES --- */
-
-.error-message {
-    color: var(--accent-red);
-    padding: 10px;
-    background: rgba(246, 70, 93, 0.1);
-    border-radius: 8px;
-    margin: 10px 0;
+/* --- GLOBAL FOOTER --- */
+.footer {
+    background: var(--bg-card);
+    border-top: 1px solid var(--border);
+    padding: 30px 20px;
+    margin-top: auto; 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.85rem;
+    color: var(--text-dim);
 }
+.credit a { color: var(--accent-green); font-weight: 600; }
+.credit a:hover { text-decoration: underline; }
 
-.success-message {
-    color: var(--accent-green);
-    padding: 10px;
-    background: rgba(14, 203, 129, 0.1);
-    border-radius: 8px;
-    margin: 10px 0;
+@media (max-width: 600px) {
+    .footer { flex-direction: column; gap: 15px; text-align: center; }
 }
-        </style>
+    </style>
     {% block extra_css %}{% endblock %}
 </head>
 <body>
 
     <div class="header">
-    <h1>
-        <a href="{{ url_for('main.home') }}">CryptoVAT</a>
-    </h1>
+        <h1>
+            <a href="{{ url_for('main.home') }}">Crypto<span style="color:var(--accent-green)">VAT</span></a>
+        </h1>
         <div>
-            <a href="{{ url_for('main.help_page') }}" class="icon-btn">?</a>
+            <a href="{{ url_for('main.help_page') }}" class="icon-btn" title="Help">?</a>
             {% if session.get('user_id') %}
                 {% if request.endpoint != 'main.setup' %}
-                    <a href="{{ url_for('main.settings') }}" class="icon-btn">⚙️</a>
+                    <a href="{{ url_for('main.settings') }}" class="icon-btn" title="Settings">⚙️</a>
                 {% endif %}
                 <a href="{{ url_for('auth.logout') }}" class="logout-btn" title="Logout">➜]</a>
             {% endif %}
@@ -307,8 +278,8 @@ input[type="password"] {
 
     <main>
         {% block content %}{% endblock %}
-         <!-- GLOBAL NAV BUTTON -->
-           <div class="back-nav-container">
+        
+         <div class="back-nav-container">
 
             {% if session.get('user_id') and request.endpoint not in ['main.home', 'main.setup', 'auth.login', 'auth.register', 'auth.reset_password', 'main.help_page'] %}
                 <a href="{{ url_for('main.home') }}" class="btn btn-links back-nav-btn">
@@ -316,7 +287,7 @@ input[type="password"] {
                 </a>
                 
                 {% if request.endpoint == 'main.admin_dashboard' and server_time %}
-                    <p style="color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.5px; margin-top: 15px; margin-bottom: 0;">
+                    <p style="color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.5px; margin-top: 15px; margin-bottom: 0; font-family: 'JetBrains Mono', monospace;">
                         SERVER TIMESTAMP: {{ server_time }}
                     </p>
                 {% endif %}