<!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">$&nbsp;</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)">$&nbsp;</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 &nbsp;→ ]
            </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 &nbsp;↗ ]
            </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>
