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

strobe lights

Browse Source
This commit is contained in:
Bryce
2025-11-03 14:01:50 -08:00
parent c7cd6a0117
commit 77f1d9bf77
1 changed files with 159 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
templates/login.html
View File

@@ -1,17 +1,157 @@
{% extends 'base.html' %}
{% block content %}
<div class="max-w-md mx-auto bg-white shadow rounded-2xl p-6">
<h1 class="text-xl font-semibold mb-4">Sign in</h1>
<!-- 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>
<label class="block text-sm mb-1">Email</label>
<input id="email" type="email" required class="w-full border rounded-lg p-2" />
<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 login-input" />
</div>
<div>
<label class="block text-sm mb-1">Password</label>
<input id="password" type="password" required class="w-full border rounded-lg p-2" />
<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 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 %}