login page looks better
This commit is contained in:
@@ -1,159 +1,22 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<!-- Cyberpunk Theme Background with Lasers, Strobe Lights and Disco Balls -->
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: #000;
|
|
||||||
color: #0ff;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Laser effects */
|
<div class="flex justify-center py-8">
|
||||||
.laser {
|
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
|
||||||
position: absolute;
|
<h1 class="text-2xl font-bold text-center text-gray-800">Secure Access</h1>
|
||||||
width: 2px;
|
<form id="login-form" class="space-y-4">
|
||||||
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>
|
<div>
|
||||||
<label class="block text-sm mb-1 neon-text">USER IDENTIFICATION</label>
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
||||||
<input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
|
<input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm mb-1 neon-text">SECURITY CODE</label>
|
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||||
<input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
|
<input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="w-full py-2 rounded-lg login-button">INITIATE AUTHENTICATION</button>
|
<button type="submit" class="w-full bg-blue-500 text-blue-100 py-2 rounded-lg login-button">Sign In</button>
|
||||||
<p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
|
<p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Firebase App (the core Firebase SDK) -->
|
<!-- Firebase App (the core Firebase SDK) -->
|
||||||
@@ -163,25 +26,20 @@
|
|||||||
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>
|
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Strobe light effect
|
// Initialize Firebase configuration from template
|
||||||
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 }};
|
window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
|
||||||
|
|
||||||
|
// Initialize Firebase app and auth
|
||||||
const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
|
const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
|
||||||
const auth = firebase.auth()
|
const auth = firebase.auth();
|
||||||
|
|
||||||
|
// Get form and input elements
|
||||||
const form = document.getElementById('login-form');
|
const form = document.getElementById('login-form');
|
||||||
const email = document.getElementById('email');
|
const email = document.getElementById('email');
|
||||||
const password = document.getElementById('password');
|
const password = document.getElementById('password');
|
||||||
const err = document.getElementById('error');
|
const err = document.getElementById('error');
|
||||||
|
|
||||||
|
// Handle form submission
|
||||||
form.addEventListener('submit', async (e) => {
|
form.addEventListener('submit', async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
err.classList.add('hidden');
|
err.classList.add('hidden');
|
||||||
|
|||||||
Reference in New Issue
Block a user