up
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,281 @@
|
||||
<!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>
|
||||
|
||||
@@ -6,17 +6,9 @@ import (
|
||||
)
|
||||
|
||||
func Landing(c *fiber.Ctx) error {
|
||||
user, err := auth.User(c)
|
||||
if err != nil {
|
||||
auth.Logout(c)
|
||||
}
|
||||
view := "index"
|
||||
|
||||
if err := c.Render(view, fiber.Map{
|
||||
"auth": user != nil,
|
||||
"user": user,
|
||||
}, "layouts/main"); err != nil {
|
||||
panic(err.Error())
|
||||
// Página principal del admin: pantalla hacker sin layout adicional
|
||||
if err := c.Render("landing", fiber.Map{}); err != nil {
|
||||
return c.Status(fiber.StatusInternalServerError).SendString(err.Error())
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import (
|
||||
)
|
||||
|
||||
func RutasPublicas(web fiber.Router) {
|
||||
//web.Get("/", controllers.Landing)
|
||||
web.Get("/", controllers.Landing)
|
||||
web.Get("/index", controllers.Index)
|
||||
//web.Get("/login", controllers.Login)
|
||||
web.Get("/ping", Pong)
|
||||
|
||||
Reference in New Issue
Block a user