feat: add modern design for Amayo Bot guide with animated elements and responsive layout
This commit is contained in:
210
src/server/public/index_modern_test.html
Normal file
210
src/server/public/index_modern_test.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Amayo Bot | Guía Completa - Diseño Moderno</title>
|
||||
<meta name="description" content="Guía completa ultra moderna de Amayo Bot para Discord">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
animation: {
|
||||
'gradient': 'gradient 8s linear infinite',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'glow': 'glow 3s ease-in-out infinite',
|
||||
'slide-in': 'slideIn 0.5s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
gradient: {
|
||||
'0%, 100%': { backgroundPosition: '0% 50%' },
|
||||
'50%': { backgroundPosition: '100% 50%' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
glow: {
|
||||
'0%, 100%': { opacity: '0.4' },
|
||||
'50%': { opacity: '0.8' },
|
||||
},
|
||||
slideIn: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<link rel="stylesheet" href="./assets/css/styles.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased">
|
||||
|
||||
<!-- Animated Background Blobs -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float"></div>
|
||||
<div class="absolute top-1/3 right-1/4 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute bottom-0 left-1/3 w-96 h-96 bg-pink-500/15 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 4s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- Hero Ultra Moderno -->
|
||||
<header class="relative overflow-hidden border-b border-white/5">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 via-purple-500/5 to-transparent"></div>
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 relative">
|
||||
<div class="max-w-5xl mx-auto text-center space-y-8">
|
||||
<!-- Badge con Pulse -->
|
||||
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm">
|
||||
<span class="relative flex h-2.5 w-2.5">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-gradient-to-r from-indigo-400 to-purple-400"></span>
|
||||
</span>
|
||||
<span class="text-sm font-bold tracking-wider uppercase bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-purple-200">
|
||||
Amayo Bot • v0.11.20
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Título con Gradiente Animado -->
|
||||
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-tight">
|
||||
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-100 to-purple-100 animate-gradient bg-[length:200%_auto]">
|
||||
Guía Completa
|
||||
</span>
|
||||
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 animate-gradient bg-[length:200%_auto]">
|
||||
Amayo Bot
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<!-- Descripción -->
|
||||
<p class="text-xl sm:text-2xl text-slate-300 max-w-3xl mx-auto leading-relaxed font-light">
|
||||
Sistema completo de <span class="font-semibold text-indigo-300">economía</span>, <span class="font-semibold text-purple-300">minijuegos</span>, <span class="font-semibold text-pink-300">misiones</span> y <span class="font-semibold text-blue-300">IA</span> para Discord
|
||||
</p>
|
||||
|
||||
<!-- CTA Buttons Modernos -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<a href="#primeros-pasos" class="group relative px-10 py-4 text-lg font-bold text-white overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 transition-transform duration-300 group-hover:scale-110"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<span class="relative flex items-center gap-2">
|
||||
Comenzar ahora
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button id="toggle-nav" class="group px-10 py-4 text-lg font-bold text-white backdrop-blur-xl bg-white/5 border-2 border-white/10 rounded-2xl hover:bg-white/10 hover:border-white/20 hover:scale-105 transition-all duration-300">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
Ver índice
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Meta Info Ultra Moderno -->
|
||||
<div class="flex flex-wrap justify-center gap-3 pt-6">
|
||||
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
|
||||
Discord.js 15.0-dev
|
||||
</span>
|
||||
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
|
||||
Enero 2025
|
||||
</span>
|
||||
<span class="px-5 py-2 rounded-xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 text-sm font-bold text-indigo-200 hover:from-indigo-500/20 hover:to-purple-500/20 transition-all">
|
||||
23 Secciones Completas
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- TEST: Una sección moderna para ver el estilo -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="rounded-3xl bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-2xl border border-white/10 p-8 sm:p-12 shadow-2xl hover:shadow-indigo-500/10 transition-all duration-500 hover:border-indigo-500/30 animate-slide-in">
|
||||
<div class="mb-8">
|
||||
<div class="inline-block">
|
||||
<h2 class="text-4xl sm:text-5xl font-black mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">
|
||||
🚀 Primeros Pasos
|
||||
</h2>
|
||||
<div class="h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg sm:text-xl text-slate-300 leading-relaxed mb-10">
|
||||
¡Bienvenido a <span class="font-bold text-white">Amayo Bot</span>! Este bot transforma tu servidor en una experiencia de juego completa.
|
||||
</p>
|
||||
|
||||
<!-- Feature Grid Moderno -->
|
||||
<div class="rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 p-8 mb-8">
|
||||
<h3 class="text-2xl font-bold text-indigo-200 mb-6 flex items-center gap-3">
|
||||
<span class="text-3xl">✨</span>
|
||||
Características Principales
|
||||
</h3>
|
||||
<div class="grid gap-4">
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-indigo-500/50 hover:bg-slate-800/50 transition-all duration-300">
|
||||
<span class="text-2xl">🎮</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">Minijuegos Épicos</h4>
|
||||
<p class="text-sm text-slate-400">Mina, pesca, pelea y cultiva recursos</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-purple-500/50 hover:bg-slate-800/50 transition-all duration-300">
|
||||
<span class="text-2xl">💰</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">Economía Completa</h4>
|
||||
<p class="text-sm text-slate-400">Tienda, crafteo e inventario</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-pink-500/50 hover:bg-slate-800/50 transition-all duration-300">
|
||||
<span class="text-2xl">🏆</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">Progresión & Logros</h4>
|
||||
<p class="text-sm text-slate-400">Misiones, logros y rachas diarias</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Cards -->
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:border-indigo-500/50 hover:bg-slate-800/70 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-indigo-500/10">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-4xl">⚡</span>
|
||||
<h3 class="text-xl font-bold text-white">Prefix: <code class="px-3 py-1 rounded-lg bg-indigo-500/20 text-indigo-200 border border-indigo-500/30">!</code></h3>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400">Personalizable con <code class="px-2 py-0.5 rounded bg-slate-700/50 text-slate-300">!configuracion</code></p>
|
||||
</div>
|
||||
|
||||
<div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:border-purple-500/50 hover:bg-slate-800/70 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-purple-500/10">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-4xl">❓</span>
|
||||
<h3 class="text-xl font-bold text-white">Ayuda</h3>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400">Usa <code class="px-2 py-0.5 rounded bg-purple-500/20 text-purple-200 border border-purple-500/30">!ayuda</code> para ver comandos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje para el usuario -->
|
||||
<div class="mt-12 p-8 rounded-3xl bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm text-center">
|
||||
<p class="text-2xl font-bold text-white mb-3">✨ Este es el nuevo diseño ultra moderno ✨</p>
|
||||
<p class="text-lg text-slate-300">¿Te gusta este estilo? Todas las 23 secciones tendrán este diseño con:</p>
|
||||
<div class="flex flex-wrap justify-center gap-3 mt-6">
|
||||
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Glassmorphism</span>
|
||||
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Hover Effects</span>
|
||||
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Gradientes</span>
|
||||
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Animaciones</span>
|
||||
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">100% Tailwind</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./assets/js/main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user