notid/rothbard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login page looks better

Browse Source
This commit is contained in:
Bryce
2025-11-09 21:24:08 -08:00
parent 1126b15144
commit da1606c7f2
1 changed files with 14 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
templates/login.html
View File

@@ -1,159 +1,22 @@
{% extends 'base.html' %}
{% 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 */
.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 class="flex justify-center py-8">
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
<h1 class="text-2xl font-bold text-center text-gray-800">Secure Access</h1>
<form id="login-form" class="space-y-4">
<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" />
</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" />
</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>
</form>
</div>
</div>
<!-- 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>
// Strobe light effect
const strobe = document.getElementById('strobe');
setInterval(() => {
strobe.style.animation = 'none';
setTimeout(() => {
strobe.style.animation = 'strobe 0.1s';
}, 10);
}, 500);
// Initialize Firebase configuration from template
window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
// Initialize Firebase app and auth
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 email = document.getElementById('email');
const password = document.getElementById('password');
const err = document.getElementById('error');
// Handle form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
err.classList.add('hidden');