<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ashadu | sovereign vault</title>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;700&display=swap" rel="stylesheet">
<style>
:root { --crimson: #DC143C; --gold: #d4af37; }
body, html {
margin: 0; padding: 0; width: 100%; height: 100%;
overflow: hidden; background-color: #050505;
font-family: 'Comfortaa', cursive; color: #e0e0e0;
}
#starfield { position: absolute; top: 0; left: 0; z-index: 1; }
/* HEADER & LOGIN */
nav { position: absolute; top: 30px; right: 40px; z-index: 100; }
.login-btn {
background: none; border: 1px solid #444; color: #888;
cursor: pointer; padding: 5px 15px; border-radius: 50px;
font-family: 'Comfortaa'; text-transform: lowercase;
}
/* MAIN CONTENT CONTAINER */
.content-wrapper {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center; z-index: 10; width: 100%;
}
/* TITLES LOOP */
.title {
font-size: 60px; font-weight: 300; position: absolute;
width: 100%; left: 0; opacity: 0; top: -100px;
transition: opacity 1.5s ease-in-out; text-transform: lowercase;
}
.white-title { color: white; }
.red-title { color: var(--crimson); }
/* THE VAULT UI */
.vault-container { max-width: 400px; margin: 0 auto; }
h1 { font-size: 42px; font-weight: 700; color: #fff; text-transform: lowercase; margin-bottom: 10px; }
input {
background: rgba(26, 26, 26, 0.8); border: 1px solid #333; color: #fff;
padding: 15px; width: 100%; margin: 15px 0; border-radius: 50px;
font-family: 'Comfortaa'; text-align: center; outline: none;
}
button.enter-vault {
background: var(--gold); color: #000; border: none;
padding: 15px; cursor: pointer; font-weight: bold;
width: 100%; border-radius: 50px; font-family: 'Comfortaa';
text-transform: lowercase;
}
/* MANAGEMENT ZONE (The Dash) */
#management-zone { display: none; padding: 40px; background: rgba(0,0,0,0.9); border-radius: 30px; border: 1px solid var(--gold); }
.search-bar { width: 80%; border: 2px solid var(--gold); background: white; color: black; }
.status { font-size: 11px; color: #666; letter-spacing: 2px; margin-top: 20px; text-transform: uppercase; }
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<nav><button class="login-btn" onclick="showVault()">login</button></nav>
<div class="content-wrapper">
<div id="text-ashadu" class="title white-title">ashadu</div>
<div id="text-witness" class="title red-title">bear witness</div>
<div class="vault-container" id="vault-access">
<h1>the vault</h1>
<p style="color: #888; font-size: 14px;">enter director key</p>
<input type="password" id="directorKey" placeholder="••••••••">
<button class="enter-vault" onclick="unlockVault()">enter</button>
<div class="status">100% ownership verified</div>
</div>
<div id="management-zone" class="vault-container">
<h1 style="color: var(--gold);">access granted</h1>
<p>Welcome, Director ABEDIN.</p>
<p style="font-size: 14px; opacity: 0.7;">Ashadu & Zayana are standing by.</p>
<input type="text" class="search-bar" placeholder="talk to zayana...">
<p style="font-size: 12px; color: var(--gold); margin-top: 15px;">Membership: $1.00 (Active)</p>
</div>
</div>
<script>
// Starfield Engine
const canvas = document.getElementById('starfield');
const ctx = canvas.getContext('2d');
let stars = [];
function initStars() {
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
stars = []; for (let i = 0; i < 200; i++) {
stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 1.5, opacity: Math.random(), speed: Math.random() * 0.015 });
}
}
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(s => {
s.opacity += s.speed; if (s.opacity > 1 || s.opacity < 0) s.speed *= -1;
ctx.fillStyle = `rgba(255, 255, 255, ${Math.abs(s.opacity)})`;
ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2); ctx.fill();
});
requestAnimationFrame(drawStars);
}
// Looping Titles (2s each)
const ashadu = document.getElementById('text-ashadu');
const witness = document.getElementById('text-witness');
function runLoop() {
ashadu.style.opacity = "1";
setTimeout(() => {
ashadu.style.opacity = "0";
setTimeout(() => {
witness.style.opacity = "1";
setTimeout(() => {
witness.style.opacity = "0";
setTimeout(runLoop, 1500);
}, 2000);
}, 1500);
}, 2000);
}
// Vault Logic
function unlockVault() {
const key = document.getElementById('directorKey').value;
const secretKey = "MASTER_KEY_2026";
if (key === secretKey) {
document.getElementById('vault-access').style.display = 'none';
document.getElementById('management-zone').style.display = 'block';
// Hide the looping titles for clarity once in management zone
ashadu.style.display = 'none';
witness.style.display = 'none';
} else {
alert("Access Denied. Identity not verified.");
}
}
window.addEventListener('resize', initStars);
initStars(); drawStars(); runLoop();
</script>
</body>
</html>