Update templates/login.html

templates/login.html

@@ -5,20 +5,176 @@
   <title>Login</title>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <style>
-    body { font-family: Arial, Helvetica, sans-serif; display:flex; align-items:center; justify-content:center; height:100vh; margin:0; background:#f3f4f6; }
-    .card { background:#fff; padding:24px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.08); width:320px; }
-    h2 { margin-top:0; margin-bottom:16px; font-size:20px; }
-    input[type="email"], input[type="password"] { width:100%; padding:10px; margin:6px 0 12px 0; border-radius:6px; border:1px solid #ccc; box-sizing:border-box; }
-    button { width:100%; padding:10px; border-radius:6px; border:none; background:#2563eb; color:white; font-weight:600; cursor:pointer; }
-    .small { margin-top:12px; text-align:center; }
-    .link { color:#2563eb; text-decoration:none; font-weight:600; }
-    .flash { padding:8px; border-radius:6px; margin-bottom:12px; font-size:14px; }
-    .flash.success { background:#d1fae5; color:#064e3b; }
-    .flash.danger { background:#fee2e2; color:#b91c1c; }
-    .flash.warning { background:#fff7ed; color:#92400e; }
+    /* Base styles */
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+      overflow: hidden;
+      position: relative;
+    }
+    
+    /* Animated background elements */
+    .balls-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      overflow: hidden;
+    }
+    
+    .ball {
+      position: absolute;
+      border-radius: 50%;
+      opacity: 0.7;
+      filter: blur(5px);
+      animation: float 15s infinite linear;
+    }
+    
+    @keyframes float {
+      0% {
+        transform: translate(0, 0) scale(1);
+      }
+      25% {
+        transform: translate(20vw, 40vh) scale(1.1);
+      }
+      50% {
+        transform: translate(40vw, 10vh) scale(0.9);
+      }
+      75% {
+        transform: translate(60vw, 30vh) scale(1.2);
+      }
+      100% {
+        transform: translate(0, 0) scale(1);
+      }
+    }
+    
+    /* Card styling */
+    .card {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      padding: 30px;
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      width: 340px;
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      z-index: 1;
+      position: relative;
+    }
+    
+    h2 {
+      margin-top: 0;
+      margin-bottom: 20px;
+      font-size: 24px;
+      color: #fff;
+      text-align: center;
+      text-shadow: 0 0 10px rgba(100, 149, 237, 0.8);
+    }
+    
+    label {
+      color: #e0e0e0;
+      font-size: 14px;
+      margin-bottom: 5px;
+      display: block;
+    }
+    
+    input[type="email"], input[type="password"] {
+      width: 100%;
+      padding: 12px;
+      margin: 6px 0 16px 0;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-sizing: border-box;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      transition: all 0.3s ease;
+    }
+    
+    input[type="email"]:focus, input[type="password"]:focus {
+      outline: none;
+      border-color: #6495ed;
+      box-shadow: 0 0 10px rgba(100, 149, 237, 0.5);
+    }
+    
+    input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+    
+    button {
+      width: 100%;
+      padding: 12px;
+      border-radius: 8px;
+      border: none;
+      background: linear-gradient(45deg, #6495ed, #7b68ee);
+      color: white;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 15px rgba(100, 149, 237, 0.4);
+    }
+    
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(100, 149, 237, 0.6);
+    }
+    
+    .small {
+      margin-top: 20px;
+      text-align: center;
+    }
+    
+    .small p {
+      color: #e0e0e0;
+    }
+    
+    .link {
+      color: #6495ed;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    
+    .link:hover {
+      text-shadow: 0 0 8px rgba(100, 149, 237, 0.8);
+    }
+    
+    .flash {
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 16px;
+      font-size: 14px;
+    }
+    
+    .flash.success {
+      background: rgba(209, 250, 229, 0.2);
+      color: #a7f3d0;
+      border: 1px solid rgba(167, 243, 208, 0.3);
+    }
+    
+    .flash.danger {
+      background: rgba(254, 226, 226, 0.2);
+      color: #fecaca;
+      border: 1px solid rgba(254, 202, 202, 0.3);
+    }
+    
+    .flash.warning {
+      background: rgba(255, 247, 237, 0.2);
+      color: #fed7aa;
+      border: 1px solid rgba(254, 215, 170, 0.3);
+    }
   </style>
 </head>
 <body>
+  <!-- Animated background balls -->
+  <div class="balls-container" id="ballsContainer"></div>
+  
+  <!-- Login card -->
   <div class="card">
     <h2>Login</h2>
 
@@ -31,11 +187,11 @@
     {% endwith %}
 
     <form method="post" action="{{ url_for('login') }}">
-      <label for="email">Email</label><br>
-      <input id="email" name="email" type="email" required value="{{ email|default('') }}"><br>
+      <label for="email">Email</label>
+      <input id="email" name="email" type="email" required value="{{ email|default('') }}" placeholder="Enter your email">
 
-      <label for="password">Password</label><br>
-      <input id="password" name="password" type="password" required><br>
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" required placeholder="Enter your password">
 
       <button type="submit">Login</button>
     </form>
@@ -44,5 +200,33 @@
       <p>Don't have an account? <a class="link" href="{{ url_for('register') }}">Register</a></p>
     </div>
   </div>
+
+  <script>
+    // Create animated balls for background
+    document.addEventListener('DOMContentLoaded', function() {
+      const container = document.getElementById('ballsContainer');
+      const ballCount = 15;
+      const colors = ['#6495ed', '#7b68ee', '#4169e1', '#6a5acd', '#9370db'];
+      
+      for (let i = 0; i < ballCount; i++) {
+        const ball = document.createElement('div');
+        ball.classList.add('ball');
+        
+        // Random properties for each ball
+        const size = Math.random() * 60 + 20;
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        
+        ball.style.width = `${size}px`;
+        ball.style.height = `${size}px`;
+        ball.style.background = `radial-gradient(circle at 30% 30%, ${color}, ${color}00)`;
+        ball.style.left = `${Math.random() * 100}vw`;
+        ball.style.top = `${Math.random() * 100}vh`;
+        ball.style.animationDuration = `${Math.random() * 20 + 15}s`;
+        ball.style.animationDelay = `${Math.random() * 5}s`;
+        
+        container.appendChild(ball);
+      }
+    });
+  </script>
 </body>
-</html>
+</html>