162 lines
4.5 KiB
HTML
162 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Edge Glow Test</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #0a0a14;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
/* EDGE GLOW - EXACT COPY FROM style.css lines 28-61 */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 99999;
|
|
border: 3px solid rgba(80, 80, 80, 0.3);
|
|
}
|
|
|
|
body.playing-A::before {
|
|
border: 15px solid #00f3ff;
|
|
box-shadow:
|
|
0 0 80px rgba(0, 243, 255, 1),
|
|
inset 0 0 80px rgba(0, 243, 255, 0.8);
|
|
animation: pulse-cyan 3s ease-in-out infinite;
|
|
}
|
|
|
|
body.playing-B::before {
|
|
border: 15px solid #bc13fe;
|
|
box-shadow:
|
|
0 0 80px rgba(188, 19, 254, 1),
|
|
inset 0 0 80px rgba(188, 19, 254, 0.8);
|
|
animation: pulse-magenta 3s ease-in-out infinite;
|
|
}
|
|
|
|
body.playing-A.playing-B::before {
|
|
border: 15px solid #00f3ff;
|
|
box-shadow:
|
|
0 0 80px rgba(0, 243, 255, 1),
|
|
0 0 120px rgba(188, 19, 254, 1),
|
|
inset 0 0 80px rgba(0, 243, 255, 0.6),
|
|
inset 0 0 120px rgba(188, 19, 254, 0.6);
|
|
animation: pulse-both 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-cyan {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-magenta {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-both {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
text-align: center;
|
|
z-index: 100000;
|
|
}
|
|
|
|
button {
|
|
padding: 20px 40px;
|
|
margin: 10px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
border: 2px solid #fff;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.status {
|
|
color: #fff;
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="controls">
|
|
<h1 style="color: #fff;">Edge Glow Test</h1>
|
|
<button onclick="testDeckA()">Test Deck A (Cyan)</button>
|
|
<button onclick="testDeckB()">Test Deck B (Magenta)</button>
|
|
<button onclick="testBoth()">Test Both</button>
|
|
<button onclick="testOff()">Turn Off</button>
|
|
<div class="status" id="status">Status: No glow</div>
|
|
</div>
|
|
|
|
<script>
|
|
function testDeckA() {
|
|
document.body.className = 'playing-A';
|
|
document.getElementById('status').textContent = 'Status: Deck A (Cyan) - body class: ' + document.body.className;
|
|
console.log('Body classes:', document.body.classList.toString());
|
|
}
|
|
|
|
function testDeckB() {
|
|
document.body.className = 'playing-B';
|
|
document.getElementById('status').textContent = 'Status: Deck B (Magenta) - body class: ' + document.body.className;
|
|
console.log('Body classes:', document.body.classList.toString());
|
|
}
|
|
|
|
function testBoth() {
|
|
document.body.className = 'playing-A playing-B';
|
|
document.getElementById('status').textContent = 'Status: Both (Cyan + Magenta) - body class: ' + document.body.className;
|
|
console.log('Body classes:', document.body.classList.toString());
|
|
}
|
|
|
|
function testOff() {
|
|
document.body.className = '';
|
|
document.getElementById('status').textContent = 'Status: No glow - body class: (empty)';
|
|
console.log('Body classes:', document.body.classList.toString());
|
|
}
|
|
|
|
// Auto-test on load
|
|
setTimeout(() => {
|
|
console.log('=== EDGE GLOW TEST ===');
|
|
console.log('If you see a CYAN border around the screen, the glow is working!');
|
|
testDeckA();
|
|
}, 500);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |