strobe lights

templates/login.html

@@ -1,17 +1,157 @@
 {% extends 'base.html' %}
 {% block content %}
-<div class="max-w-md mx-auto bg-white shadow rounded-2xl p-6">
+<!-- Cyberpunk Theme Background with Lasers, Strobe Lights and Disco Balls -->
-  <h1 class="text-xl font-semibold mb-4">Sign in</h1>
+<style>
+  body {
+    background: #000;
+    color: #0ff;
+    font-family: 'Courier New', monospace;
+    overflow: hidden;
+    position: relative;
+    height: 100vh;
+  }
+
+  /* Laser effects */
+  .laser {
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(to bottom, #ff00ff, #00ffff);
+    box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
+    animation: laser 0.5s infinite alternate;
+  }
+
+  @keyframes laser {
+    from { opacity: 0.3; }
+    to { opacity: 1; }
+  }
+
+  /* Strobe effect */
+  .strobe {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  @keyframes strobe {
+    0% { opacity: 0; }
+    5% { opacity: 0.8; }
+    10% { opacity: 0; }
+  }
+
+  /* Disco ball effect */
+  .disco-ball {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #ff00ff, #00ffff);
+    box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
+    animation: spin 10s linear infinite;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @keyframes spin {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+  }
+
+  /* Scanline effect */
+  .scanline {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: rgba(0, 255, 255, 0.3);
+    animation: scan 8s linear infinite;
+    z-index: 999;
+  }
+
+  @keyframes scan {
+    0% { top: 0; }
+    100% { top: 100%; }
+  }
+
+  /* Neon text effects */
+  .neon-text {
+    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff;
+  }
+
+  .login-container {
+    position: relative;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid #0ff;
+    box-shadow: 0 0 15px #0ff;
+    border-radius: 10px;
+    padding: 2rem;
+    margin-top: 5rem;
+  }
+
+  .login-input {
+    background: rgba(0, 20, 30, 0.7);
+    border: 1px solid #0ff;
+    color: #0ff;
+    box-shadow: 0 0 5px #0ff;
+  }
+
+  .login-input:focus {
+    outline: none;
+    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
+  }
+
+  .login-button {
+    background: linear-gradient(45deg, #0ff, #f0f);
+    border: none;
+    color: #000;
+    font-weight: bold;
+    box-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
+  }
+
+  .login-button:hover {
+    box-shadow: 0 0 15px #0ff, 0 0 30px #f0f;
+  }
+</style>
+
+<!-- Laser effects -->
+<div class="laser" style="left: 10%;"></div>
+<div class="laser" style="left: 20%;"></div>
+<div class="laser" style="left: 30%;"></div>
+<div class="laser" style="left: 40%;"></div>
+<div class="laser" style="left: 50%;"></div>
+<div class="laser" style="left: 60%;"></div>
+<div class="laser" style="left: 70%;"></div>
+<div class="laser" style="left: 80%;"></div>
+<div class="laser" style="left: 90%;"></div>
+
+<!-- Strobe light effect -->
+<div id="strobe" class="strobe"></div>
+
+<!-- Disco ball -->
+<div class="disco-ball"></div>
+
+<!-- Scanline effect -->
+<div class="scanline"></div>
+
+<div class="login-container max-w-md mx-auto">
+  <h1 class="text-2xl font-bold mb-4 neon-text">SECURE ACCESS TERMINAL</h1>
   <form id="login-form" class="space-y-3">
     <div>
-      <label class="block text-sm mb-1">Email</label>
+      <label class="block text-sm mb-1 neon-text">USER IDENTIFICATION</label>
-      <input id="email" type="email" required class="w-full border rounded-lg p-2" />
+      <input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
     </div>
     <div>
-      <label class="block text-sm mb-1">Password</label>
+      <label class="block text-sm mb-1 neon-text">SECURITY CODE</label>
-      <input id="password" type="password" required class="w-full border rounded-lg p-2" />
+      <input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
     </div>
-    <button type="submit" class="w-full py-2 rounded-lg bg-slate-900 text-white">Sign in</button>
+    <button type="submit" class="w-full py-2 rounded-lg login-button">INITIATE AUTHENTICATION</button>
     <p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
   </form>
 </div>
@@ -22,22 +162,20 @@
 <!-- Firebase Auth -->
 <script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>
 
-  <script>
+<script>
+  // Strobe light effect
+  const strobe = document.getElementById('strobe');
+  setInterval(() => {
+    strobe.style.animation = 'none';
+    setTimeout(() => {
+      strobe.style.animation = 'strobe 0.1s';
+    }, 10);
+  }, 500);
+
   window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
-    // import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.4.0/firebase-app.js'
-
-    // // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
-    // import { getAnalytics } from 'https://www.gstatic.com/firebasejs/12.4.0/firebase-analytics.js'
-
-    // // Add Firebase products that you want to use
-    // import { getAuth } from 'https://www.gstatic.com/firebasejs/12.4.0/firebase-auth.js'
-    // import { getFirestore } from 'https://www.gstatic.com/firebasejs/12.4.0/firebase-firestore.js'
 
   const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
   const auth = firebase.auth()
-  console.log(app)
-  console.log(auth)
-  console.log(auth.signInWithEmailAndPassword)
 
   const form = document.getElementById('login-form');
   const email = document.getElementById('email');
@@ -60,10 +198,10 @@
       }
       window.location.href = '/';
     } catch (e) {
-      err.textContent = e.message || 'Login failed';
+      err.textContent = e.message || 'Authentication failed';
       err.classList.remove('hidden');
     }
   });
-  </script>
+</script>
 
 {% endblock %}