From a9ec8562ddd27e52bfaa43a61adc534f33c83eec Mon Sep 17 00:00:00 2001
From: Carsten Graf <reptil1990@me.com>
Date: Wed, 3 Sep 2025 12:32:01 +0200
Subject: [PATCH] Update desighn login.html

---
 public/login.html | 153 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 111 insertions(+), 42 deletions(-)

diff --git a/public/login.html b/public/login.html
index 916f3c7..2f05dc5 100644
--- a/public/login.html
+++ b/public/login.html
@@ -6,6 +6,7 @@
     <title>Ninja Server - Admin Login</title>
     <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         * {
             margin: 0;
             padding: 0;
@@ -13,21 +14,30 @@
         }
 
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Inter', sans-serif;
+            background: #0a0a0f;
+            color: #ffffff;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            background-image: 
+                radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
         }
 
         .container {
-            background: white;
-            padding: 2rem;
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            background: rgba(30, 41, 59, 0.95);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(51, 65, 85, 0.3);
+            padding: 2.5rem;
+            border-radius: 1.5rem;
+            box-shadow: 
+                0 25px 50px rgba(0, 0, 0, 0.3),
+                0 0 0 1px rgba(0, 212, 255, 0.1);
             width: 100%;
-            max-width: 400px;
+            max-width: 420px;
         }
 
         .logo {
@@ -36,14 +46,21 @@
         }
 
         .logo h1 {
-            color: #333;
-            font-size: 2rem;
+            font-size: 2.5rem;
             font-weight: 700;
+            background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
         }
 
         .logo p {
-            color: #666;
+            color: #94a3b8;
             margin-top: 0.5rem;
+            font-size: 1rem;
+            font-weight: 400;
         }
 
         .form-container {
@@ -61,55 +78,69 @@
         .form-group label {
             display: block;
             margin-bottom: 0.5rem;
-            color: #333;
+            color: #e2e8f0;
             font-weight: 500;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
         }
 
         .form-group input {
             width: 100%;
-            padding: 0.75rem;
-            border: 2px solid #e1e5e9;
-            border-radius: 10px;
+            padding: 1rem;
+            background: #1e293b;
+            border: 2px solid #334155;
+            border-radius: 0.75rem;
+            color: #ffffff;
             font-size: 1rem;
-            transition: border-color 0.3s ease;
+            font-family: inherit;
+            transition: all 0.2s ease;
         }
 
         .form-group input:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: #00d4ff;
+            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
+        }
+
+        .form-group input::placeholder {
+            color: #64748b;
         }
 
         .btn {
             width: 100%;
-            padding: 0.75rem;
+            padding: 1rem;
             border: none;
-            border-radius: 10px;
+            border-radius: 0.75rem;
             font-size: 1rem;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.2s ease;
             margin-bottom: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #00d4ff, #0891b2);
             color: white;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
         }
 
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
         }
 
         .btn-secondary {
             background: transparent;
-            color: #667eea;
-            border: 2px solid #667eea;
+            color: #00d4ff;
+            border: 2px solid #00d4ff;
         }
 
         .btn-secondary:hover {
-            background: #667eea;
-            color: white;
+            background: #00d4ff;
+            color: #0a0a0f;
         }
 
         .toggle-form {
@@ -120,40 +151,42 @@
         .toggle-form button {
             background: none;
             border: none;
-            color: #667eea;
+            color: #00d4ff;
             cursor: pointer;
             text-decoration: underline;
             font-size: 0.9rem;
+            transition: color 0.2s ease;
         }
 
         .toggle-form button:hover {
-            color: #764ba2;
+            color: #0891b2;
         }
 
         .message {
-            padding: 0.75rem;
-            border-radius: 10px;
+            padding: 1rem;
+            border-radius: 0.75rem;
             margin-bottom: 1rem;
             text-align: center;
             font-weight: 500;
+            border: 1px solid;
         }
 
         .message.success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
+            background: rgba(34, 197, 94, 0.1);
+            color: #22c55e;
+            border-color: rgba(34, 197, 94, 0.3);
         }
 
         .message.error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
+            background: rgba(239, 68, 68, 0.1);
+            color: #ef4444;
+            border-color: rgba(239, 68, 68, 0.3);
         }
 
         .loading {
             display: none;
             text-align: center;
-            color: #666;
+            color: #94a3b8;
         }
 
         .loading.active {
@@ -161,8 +194,8 @@
         }
 
         .spinner {
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
+            border: 3px solid #334155;
+            border-top: 3px solid #00d4ff;
             border-radius: 50%;
             width: 30px;
             height: 30px;
@@ -174,13 +207,49 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                margin: 1rem;
+                padding: 2rem;
+                max-width: none;
+            }
+
+            .logo h1 {
+                font-size: 2rem;
+            }
+
+            .form-group input {
+                padding: 0.875rem;
+            }
+
+            .btn {
+                padding: 0.875rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                margin: 0.5rem;
+                padding: 1.5rem;
+            }
+
+            .logo h1 {
+                font-size: 1.75rem;
+            }
+
+            .logo p {
+                font-size: 0.875rem;
+            }
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="logo">
-            <h1>🥷 Ninja Server</h1>
-            <p>Secure Authentication Portal</p>
+            <h1>🥷 NINJACROSS</h1>
+            <p>Admin Authentication Portal</p>
         </div>
 
         <div id="message"></div>
@@ -191,7 +260,7 @@
 
         <!-- Login Form -->
         <div id="loginForm" class="form-container active">
-            <h2 style="text-align: center; margin-bottom: 1.5rem; color: #333;">Welcome Back</h2>
+            <h2 style="text-align: center; margin-bottom: 1.5rem; color: #e2e8f0; font-weight: 600;">Welcome Back</h2>
             <form id="loginFormElement">
                 <div class="form-group">
                     <label for="loginEmail">Email</label>
@@ -210,7 +279,7 @@
 
         <!-- Register Form -->
         <div id="registerForm" class="form-container">
-            <h2 style="text-align: center; margin-bottom: 1.5rem; color: #333;">Create Account</h2>
+            <h2 style="text-align: center; margin-bottom: 1.5rem; color: #e2e8f0; font-weight: 600;">Create Account</h2>
             <form id="registerFormElement">
                 <div class="form-group">
                     <label for="registerEmail">Email</label>