282 lines
14 KiB
HTML
Executable File
282 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>U-site — Admin Control Center</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: #05090f;
|
|
color: #8eb02f;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── Animated dot grid ── */
|
|
.grid-bg {
|
|
position: fixed; inset: 0;
|
|
background-image:
|
|
radial-gradient(circle, rgba(142,176,47,0.12) 1px, transparent 1px);
|
|
background-size: 36px 36px;
|
|
animation: grid-drift 30s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes grid-drift {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 36px 36px; }
|
|
}
|
|
|
|
/* Vignette */
|
|
.vignette {
|
|
position: fixed; inset: 0;
|
|
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.85) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Scanline ── */
|
|
.scanline {
|
|
position: fixed; left: 0; right: 0; height: 3px;
|
|
background: linear-gradient(transparent, rgba(142,176,47,0.25), transparent);
|
|
animation: scan 5s linear infinite;
|
|
pointer-events: none; z-index: 100;
|
|
}
|
|
@keyframes scan { 0% { top: -3px; } 100% { top: 100vh; } }
|
|
|
|
/* ── Glow ── */
|
|
.glow { text-shadow: 0 0 18px rgba(142,176,47,0.9), 0 0 40px rgba(142,176,47,0.4); }
|
|
|
|
/* ── Glitch ── */
|
|
@keyframes glitch {
|
|
0%,90%,100% { clip-path: none; transform: none; }
|
|
91% { clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); transform: translateX(-5px); color: #a8cc38; }
|
|
92% { clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%); transform: translateX(5px); color: #6d8c24; }
|
|
93% { clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); transform: translateX(-2px); }
|
|
94% { clip-path: none; transform: none; }
|
|
}
|
|
.glitch { animation: glitch 7s infinite; }
|
|
|
|
/* ── Blink cursor ── */
|
|
.cursor {
|
|
display: inline-block; width: 9px; height: 1.1em;
|
|
background: #8eb02f;
|
|
animation: blink 1s step-end infinite; vertical-align: text-bottom;
|
|
}
|
|
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
|
|
/* ── Terminal ── */
|
|
.terminal {
|
|
border: 1px solid rgba(142,176,47,0.25);
|
|
background: rgba(0,0,0,0.55);
|
|
backdrop-filter: blur(12px);
|
|
position: relative;
|
|
}
|
|
/* corner brackets */
|
|
.terminal::before, .terminal::after {
|
|
content: '';
|
|
position: absolute; width: 18px; height: 18px;
|
|
border-color: rgba(142,176,47,0.6); border-style: solid;
|
|
}
|
|
.terminal::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
|
|
.terminal::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
|
|
|
|
/* ── Status blink ── */
|
|
@keyframes status { 0%,100%{opacity:1; box-shadow:0 0 7px #8eb02f} 50%{opacity:0.35; box-shadow:none} }
|
|
.status-dot { animation: status 1.6s ease-in-out infinite; }
|
|
|
|
/* ── CTA pulse ── */
|
|
@keyframes cta-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(142,176,47,0.45)} 50%{box-shadow:0 0 0 10px rgba(142,176,47,0)} }
|
|
.btn-cta { animation: cta-pulse 2.4s ease-in-out infinite; }
|
|
|
|
/* ── Horizontal scan on logo ── */
|
|
@keyframes logo-scan {
|
|
0% { left: -100%; }
|
|
100% { left: 200%; }
|
|
}
|
|
.logo-scan {
|
|
position: absolute; top: 0; bottom: 0; width: 40%;
|
|
background: linear-gradient(90deg, transparent, rgba(142,176,47,0.18), transparent);
|
|
animation: logo-scan 3s ease-in-out infinite; pointer-events: none;
|
|
}
|
|
|
|
/* ── Floating particles ── */
|
|
@keyframes float-up {
|
|
0% { transform: translateY(100vh) scale(0); opacity: 0; }
|
|
10% { opacity: 0.6; }
|
|
90% { opacity: 0.3; }
|
|
100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
|
|
}
|
|
.particle {
|
|
position: fixed; bottom: 0; width: 3px; height: 3px;
|
|
border-radius: 50%; background: #8eb02f;
|
|
animation: float-up linear infinite; pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Background layers -->
|
|
<div class="grid-bg"></div>
|
|
<div class="vignette"></div>
|
|
<div class="scanline"></div>
|
|
|
|
<!-- Particles -->
|
|
<div class="particle" style="left:8%; animation-duration:14s; animation-delay:0s; width:2px; height:2px;"></div>
|
|
<div class="particle" style="left:22%; animation-duration:19s; animation-delay:3s;"></div>
|
|
<div class="particle" style="left:40%; animation-duration:16s; animation-delay:7s; width:2px; height:2px;"></div>
|
|
<div class="particle" style="left:58%; animation-duration:21s; animation-delay:1s;"></div>
|
|
<div class="particle" style="left:72%; animation-duration:13s; animation-delay:5s; width:2px; height:2px;"></div>
|
|
<div class="particle" style="left:88%; animation-duration:18s; animation-delay:9s;"></div>
|
|
|
|
<!-- ── TOP BAR ── -->
|
|
<header class="fixed top-0 left-0 right-0 z-30 flex items-center justify-between px-5 py-2.5"
|
|
style="border-bottom:1px solid rgba(142,176,47,0.15); background:rgba(5,9,15,0.92); backdrop-filter:blur(8px)">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-6 h-6 rounded flex items-center justify-center flex-shrink-0"
|
|
style="background:#8eb02f">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="9"/>
|
|
<path stroke-linecap="round" d="M12 3v18M3 12h18"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs tracking-widest" style="color:rgba(142,176,47,0.85)">U-SITE // ADMIN SYSTEM</span>
|
|
</div>
|
|
<div class="flex items-center gap-5 text-xs" style="color:rgba(142,176,47,0.45); font-family:'JetBrains Mono',monospace">
|
|
<span>SYS <span style="color:#8eb02f">▲ ONLINE</span></span>
|
|
<span>SEC <span style="color:#8eb02f">▲ ACTIVE</span></span>
|
|
<span id="live-clock" style="color:rgba(142,176,47,0.7)">--:--:--</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ── MAIN ── -->
|
|
<main class="relative z-10 min-h-screen flex flex-col items-center justify-center px-6 pt-16 pb-20">
|
|
|
|
<!-- Logo block -->
|
|
<div class="text-center mb-10 select-none overflow-hidden relative" style="max-width:700px">
|
|
<div class="logo-scan"></div>
|
|
<!-- ASCII art (visible md+) -->
|
|
<pre class="text-xs leading-none mb-6 hidden md:block" style="color:rgba(142,176,47,0.2); letter-spacing:0.05em">
|
|
██╗ ██╗ ███████╗██╗████████╗███████╗
|
|
██║ ██║ ██╔════╝██║╚══██╔══╝██╔════╝
|
|
██║ ██║ ███████╗██║ ██║ █████╗
|
|
██║ ██║ ╚════██║██║ ██║ ██╔══╝
|
|
╚██████╔╝ ███████║██║ ██║ ███████╗
|
|
╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚══════╝</pre>
|
|
|
|
<h1 class="glitch glow font-bold leading-none"
|
|
style="font-size:clamp(2rem,8vw,5rem); letter-spacing:0.15em; color:#8eb02f">
|
|
CONTROL CENTER
|
|
</h1>
|
|
<p class="mt-3 text-xs tracking-widest" style="color:rgba(142,176,47,0.4)">
|
|
── SISTEMA ADMINISTRATIVO · ACCESO RESTRINGIDO ──
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Terminal window -->
|
|
<div class="terminal rounded-lg w-full mb-10" style="max-width:640px"
|
|
x-data="termapp()" x-init="boot()">
|
|
|
|
<!-- Titlebar -->
|
|
<div class="flex items-center gap-2 px-4 py-2.5 rounded-t-lg"
|
|
style="border-bottom:1px solid rgba(142,176,47,0.2); background:rgba(142,176,47,0.04)">
|
|
<span class="w-3 h-3 rounded-full" style="background:#ff5f57"></span>
|
|
<span class="w-3 h-3 rounded-full" style="background:#febc2e"></span>
|
|
<span class="w-3 h-3 rounded-full" style="background:#27c93f"></span>
|
|
<span class="ml-2 text-xs" style="color:rgba(142,176,47,0.45)">admin@usite-server:~</span>
|
|
<div class="ml-auto flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full status-dot" style="background:#8eb02f; display:inline-block"></span>
|
|
<span class="text-xs" style="color:rgba(142,176,47,0.45)">SECURE · TLS 1.3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="p-4 text-xs leading-6 rounded-b-lg" style="min-height:180px; font-family:'JetBrains Mono',monospace">
|
|
<template x-for="(ln, i) in lines" :key="i">
|
|
<div class="flex gap-1">
|
|
<span x-show="ln.prompt" style="color:rgba(142,176,47,0.4); flex-shrink:0">$ </span>
|
|
<span :style="'color:' + (ln.color || '#8eb02f')" x-text="ln.text"></span>
|
|
</div>
|
|
</template>
|
|
<div x-show="cursor" class="flex items-center gap-1">
|
|
<span style="color:rgba(142,176,47,0.4)">$ </span>
|
|
<span class="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex flex-col sm:flex-row items-center gap-4">
|
|
<a href="/login"
|
|
class="btn-cta rounded px-8 py-3 font-bold text-sm tracking-widest transition-all duration-200"
|
|
style="background:#8eb02f; color:#05090f; font-family:'JetBrains Mono',monospace"
|
|
onmouseover="this.style.background='#6d8c24'; this.style.letterSpacing='0.2em'"
|
|
onmouseout="this.style.background='#8eb02f'; this.style.letterSpacing='0.1em'">
|
|
[ ACCEDER AL PANEL → ]
|
|
</a>
|
|
<a href="https://u-site.app/" target="_blank" rel="noopener"
|
|
class="rounded px-6 py-3 text-sm tracking-widest transition-all duration-200"
|
|
style="border:1px solid rgba(142,176,47,0.25); color:rgba(142,176,47,0.55); font-family:'JetBrains Mono',monospace"
|
|
onmouseover="this.style.borderColor='#8eb02f'; this.style.color='#8eb02f'; this.style.background='rgba(142,176,47,0.06)'"
|
|
onmouseout="this.style.borderColor='rgba(142,176,47,0.25)'; this.style.color='rgba(142,176,47,0.55)'; this.style.background='transparent'">
|
|
[ u-site.app ↗ ]
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Stats row -->
|
|
<div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 mt-12 text-xs"
|
|
style="color:rgba(142,176,47,0.3); font-family:'JetBrains Mono',monospace">
|
|
<span>// Go 1.22</span>
|
|
<span>// Fiber v2</span>
|
|
<span>// PostgreSQL</span>
|
|
<span>// RBAC Casbin</span>
|
|
<span>// Uptime 99.97%</span>
|
|
<span>// U-site © 2026</span>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
/* Live clock */
|
|
(function tick() {
|
|
const el = document.getElementById('live-clock');
|
|
if (el) el.textContent = new Date().toTimeString().slice(0, 8);
|
|
setTimeout(tick, 1000);
|
|
})();
|
|
|
|
/* Terminal boot sequence */
|
|
function termapp() {
|
|
return {
|
|
lines: [],
|
|
cursor: false,
|
|
seq: [
|
|
{ text: 'usite-admin --init --env=production', prompt: true, delay: 200, color: '#8eb02f' },
|
|
{ text: ' Bootstrapping core services...', prompt: false, delay: 900, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: ' ├─ Config loader [OK]', prompt: false, delay: 1300, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: ' ├─ PostgreSQL connection [OK]', prompt: false, delay: 1700, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: ' ├─ RBAC / Casbin rules [OK]', prompt: false, delay: 2100, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: ' ├─ JWT auth layer [OK]', prompt: false, delay: 2500, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: ' └─ HTTP router (Fiber v2) [OK]', prompt: false, delay: 2900, color: 'rgba(142,176,47,0.55)' },
|
|
{ text: '', prompt: false, delay: 3200, color: '' },
|
|
{ text: ' ★ U-site Admin — ALL SYSTEMS READY', prompt: false, delay: 3400, color: '#8eb02f' },
|
|
{ text: '', prompt: false, delay: 3700, color: '' },
|
|
{ text: 'usite-admin status --report', prompt: true, delay: 4400, color: '#8eb02f' },
|
|
{ text: ' Region: US-EAST | Nodes: 3 | Up: 99.97%', prompt: false, delay: 5000, color: 'rgba(142,176,47,0.5)' },
|
|
],
|
|
boot() {
|
|
this.seq.forEach((item) => {
|
|
setTimeout(() => {
|
|
this.lines.push(item);
|
|
}, item.delay);
|
|
});
|
|
setTimeout(() => { this.cursor = true; }, 5600);
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|