<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BONDREC001 | ARCHIVE</title>
<style>
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; color: #fff; font-family: monospace; overflow: hidden; }
#canvas-bg { position: fixed; top: 0; left: 0; z-index: 1; }
.ui { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; }
.logo { font-size: 2rem; border: 2px solid #fff; padding: 15px 30px; cursor: pointer; background: #000; transition: 0.3s; pointer-events: auto; }
.logo:hover { background: #fff; color: #000; }
#capture { display: none; margin-top: 30px; pointer-events: auto; }
input { background: transparent; border: 1px solid #333; color: #fff; padding: 10px; font-family: monospace; text-align: center; width: 250px; outline: none; }
.btn { background: #fff; color: #000; border: none; padding: 10px 20px; margin-top: 10px; cursor: pointer; font-weight: bold; }
</style>
</head>
<body>
<canvas id="canvas-bg"></canvas>
<audio id="bg-loop" loop><source src="Output 1-2.mp3" type="audio/mpeg"></audio>
<div class="ui">
<div class="logo" onclick="start()">BONDREC001</div>
<div id="capture">
<form action="capture.php" method="POST">
<input type="email" name="visitor_email" placeholder="ENTER_EMAIL" required><br>
<button type="submit" class="btn">REGISTER_ENTRY</button>
</form>
</div>
</div>
<script>
const canvas = document.getElementById('canvas-bg');
const ctx = canvas.getContext('2d');
let stars = [];
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
window.addEventListener('resize', resize);
resize();
for(let i=0; i<150; i++) { stars.push({x:Math.random()*canvas.width, y:Math.random()*canvas.height, s:Math.random()*2}); }
function draw() {
ctx.fillStyle = '#000'; ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#fff';
stars.forEach(s => { ctx.beginPath(); ctx.arc(s.x, s.y, s.s, 0, Math.PI*2); ctx.fill(); s.y += 0.5; if(s.y > canvas.height) s.y = 0; });
requestAnimationFrame(draw);
}
draw();
function start() {
document.getElementById('bg-loop').play().catch(e => console.log("Audio blocked"));
document.getElementById('capture').style.display = 'block';
}
</script>
</body>
</html>