feat: add modern design for Amayo Bot guide with animated elements and responsive layout
This commit is contained in:
@@ -1,407 +1,43 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
/* Solo estilos mínimos que Tailwind no puede hacer - TODO LO DEMÁS es Tailwind */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Optimizaciones de renderizado */
|
||||
body {
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-feature-settings: "calt" 0;
|
||||
}:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #0f172a;
|
||||
--bg-soft: rgba(15, 23, 42, 0.6);
|
||||
--bg-card: rgba(15, 23, 42, 0.85);
|
||||
--bg-card-light: #f8fafc;
|
||||
--text: #0f172a;
|
||||
--text-light: #f8fafc;
|
||||
--accent: #6366f1;
|
||||
--accent-soft: rgba(99, 102, 241, 0.15);
|
||||
--border: rgba(148, 163, 184, 0.2);
|
||||
--success: #22c55e;
|
||||
--warning: #f59e0b;
|
||||
--info: #0ea5e9;
|
||||
--card-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45);
|
||||
/* Animación personalizada para glassmorphism */
|
||||
@keyframes glow {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
.animate-glow {
|
||||
animation: glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
background: linear-gradient(180deg, #020617 0%, #0f172a 55%, #111827 100%);
|
||||
color: var(--text-light);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Scrollbar personalizado (opcional, moderno) */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #6366f1, #8b5cf6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 4rem);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.35), transparent 55%),
|
||||
radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.25), transparent 60%),
|
||||
radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.15), transparent 65%);
|
||||
opacity: 0.75;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
max-width: 60rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 4vw, 3.8rem);
|
||||
margin-bottom: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
max-width: 45rem;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(248, 250, 252, 0.85);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero__cta {
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: clamp(1.5rem, 5vw, 3rem);
|
||||
padding: 0 clamp(1.5rem, 6vw, 4rem) 4rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.75rem 1.6rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(90deg, var(--accent) 0%, #7c3aed 100%);
|
||||
color: white;
|
||||
box-shadow: 0 18px 36px -18px rgba(99, 102, 241, 0.85);
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
border: 1px solid rgba(148, 163, 184, 0.4);
|
||||
color: rgba(248, 250, 252, 0.9);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 22px 40px -24px rgba(99, 102, 241, 0.9);
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
margin: 2rem auto;
|
||||
padding: 1.5rem;
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1.25rem;
|
||||
backdrop-filter: blur(24px);
|
||||
width: min(90vw, 22rem);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.toc__title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(148, 163, 184, 0.85);
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
text-decoration: none;
|
||||
color: rgba(226, 232, 240, 0.95);
|
||||
font-size: 0.95rem;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 2rem auto 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
width: min(1100px, calc(100% - 4rem));
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(1.8rem, 3vw, 2.4rem);
|
||||
border-radius: 1.5rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
box-shadow: var(--card-shadow);
|
||||
width: min(100%, 960px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: clamp(1.8rem, 2.8vw, 2.2rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
margin-bottom: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.card li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.card__sub {
|
||||
padding: 1.4rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.grid.two {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
pre {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
color: rgba(244, 244, 255, 0.95);
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 1rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(99, 102, 241, 0.25);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 auto 1rem;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, SFMono,
|
||||
"Segoe UI Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(99, 102, 241, 0.18);
|
||||
color: #cbd5f5;
|
||||
}
|
||||
|
||||
.card details {
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 1rem;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card details + details {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.card details summary {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.card details[open] summary {
|
||||
color: rgba(129, 140, 248, 0.95);
|
||||
}
|
||||
|
||||
.callout {
|
||||
border-radius: 1.2rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border: 1px solid transparent;
|
||||
margin-top: 1.25rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.callout strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.callout.info {
|
||||
background: rgba(14, 165, 233, 0.12);
|
||||
border-color: rgba(14, 165, 233, 0.32);
|
||||
color: rgba(125, 211, 252, 0.95);
|
||||
}
|
||||
|
||||
.callout.success {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border-color: rgba(34, 197, 94, 0.32);
|
||||
color: rgba(134, 239, 172, 0.95);
|
||||
}
|
||||
|
||||
.callout.warning {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border-color: rgba(245, 158, 11, 0.35);
|
||||
color: rgba(253, 224, 71, 0.95);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding: 3rem 1.5rem;
|
||||
text-align: center;
|
||||
color: rgba(203, 213, 225, 0.7);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: inline-block;
|
||||
margin-top: 0.75rem;
|
||||
color: rgba(129, 140, 248, 0.9);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
body {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
z-index: 99;
|
||||
transform: translateY(-110%);
|
||||
transition: transform 0.25s ease;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toc.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto 4rem;
|
||||
width: min(1100px, calc(100% - 2.5rem));
|
||||
}
|
||||
|
||||
.layout {
|
||||
padding: 0 clamp(1.25rem, 8vw, 3rem) 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero__cta {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card__sub {
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, #818cf8, #a78bfa);
|
||||
}
|
||||
|
||||
@@ -1,49 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Amayo Bot | Guía Completa para Usuarios</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Guía completa de Amayo Bot para usuarios de Discord: comandos de juego, economía, misiones, logros y mucho más."
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'sans-serif'],
|
||||
mono: [
|
||||
'JetBrains Mono',
|
||||
'ui-monospace',
|
||||
'SFMono-Regular',
|
||||
'SFMono',
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
'Liberation Mono',
|
||||
'Courier New',
|
||||
'monospace'
|
||||
]
|
||||
<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 para Usuarios de Discord</title>
|
||||
<meta name="description" content="Guía completa de Amayo Bot: comandos, minijuegos, economía, misiones, logros, creación de contenido y más">
|
||||
<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',
|
||||
},
|
||||
keyframes: {
|
||||
gradient: {
|
||||
'0%, 100%': { backgroundPosition: '0% 50%' },
|
||||
'50%': { backgroundPosition: '100% 50%' },
|
||||
},
|
||||
boxShadow: {
|
||||
glow: '0 40px 120px -45px rgba(99, 102, 241, 0.45)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<link rel="stylesheet" href="./assets/css/styles.css" />
|
||||
</head>
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
glow: {
|
||||
'0%, 100%': { opacity: '0.4' },
|
||||
'50%': { opacity: '0.8' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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">
|
||||
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">
|
||||
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 • Creación de Contenido Incluida
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
||||
<body class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100 antialiased">
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<header class="relative overflow-hidden">
|
||||
@@ -129,8 +203,8 @@
|
||||
<div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
||||
|
||||
<!-- PRIMEROS PASOS -->
|
||||
<section id="primeros-pasos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🚀 Primeros Pasos</h2>
|
||||
<section id="primeros-pasos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🚀 Primeros Pasos</h2>
|
||||
<p class="text-slate-200">
|
||||
¡Bienvenido a <strong class="text-white">Amayo Bot</strong>! Este bot transforma tu servidor de Discord en una experiencia de juego completa con economía, minijuegos, misiones y mucho más.
|
||||
</p>
|
||||
@@ -170,8 +244,8 @@
|
||||
</section>
|
||||
|
||||
<!-- COMANDOS BÁSICOS -->
|
||||
<section id="comandos-basicos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">⚡ Comandos Básicos</h2>
|
||||
<section id="comandos-basicos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⚡ Comandos Básicos</h2>
|
||||
<p class="text-slate-200">
|
||||
Estos son los comandos esenciales que necesitas conocer para empezar.
|
||||
</p>
|
||||
@@ -198,8 +272,8 @@
|
||||
</section>
|
||||
|
||||
<!-- SISTEMA DE JUEGO -->
|
||||
<section id="sistema-juego" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🎮 Sistema de Juego</h2>
|
||||
<section id="sistema-juego" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎮 Sistema de Juego</h2>
|
||||
<p class="text-slate-200">
|
||||
El sistema de juego de Amayo incluye <strong class="text-white">HP (puntos de vida)</strong>, <strong class="text-white">estadísticas de combate</strong>, <strong class="text-white">niveles de progresión</strong> y más.
|
||||
</p>
|
||||
@@ -236,8 +310,8 @@
|
||||
</section>
|
||||
|
||||
<!-- MINIJUEGOS -->
|
||||
<section id="minijuegos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🎯 Minijuegos y Actividades</h2>
|
||||
<section id="minijuegos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎯 Minijuegos y Actividades</h2>
|
||||
<p class="text-slate-200">
|
||||
Los minijuegos son la forma principal de ganar recursos, monedas y experiencia. Cada uno tiene su propio estilo y recompensas.
|
||||
</p>
|
||||
@@ -331,8 +405,8 @@
|
||||
</section>
|
||||
|
||||
<!-- INVENTARIO Y EQUIPO -->
|
||||
<section id="inventario-equipo" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🎒 Inventario y Equipo</h2>
|
||||
<section id="inventario-equipo" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎒 Inventario y Equipo</h2>
|
||||
<p class="text-slate-200">
|
||||
Gestiona todos tus items y equipa armas, armaduras y capas para mejorar tus estadísticas.
|
||||
</p>
|
||||
@@ -395,8 +469,8 @@
|
||||
</section>
|
||||
|
||||
<!-- ECONOMÍA -->
|
||||
<section id="economia" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">💰 Sistema de Economía</h2>
|
||||
<section id="economia" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">💰 Sistema de Economía</h2>
|
||||
<p class="text-slate-200">
|
||||
Gana y gestiona monedas para comprar items, participar en eventos y mejorar tu progreso.
|
||||
</p>
|
||||
@@ -430,8 +504,8 @@
|
||||
</section>
|
||||
|
||||
<!-- TIENDA -->
|
||||
<section id="tienda" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🛒 Tienda y Compras</h2>
|
||||
<section id="tienda" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🛒 Tienda y Compras</h2>
|
||||
<p class="text-slate-200">
|
||||
La tienda ofrece items especiales, herramientas, consumibles y más. Compra con tus monedas ganadas.
|
||||
</p>
|
||||
@@ -476,8 +550,8 @@
|
||||
</section>
|
||||
|
||||
<!-- CRAFTEO -->
|
||||
<section id="crafteo" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🔨 Crafteo y Creación</h2>
|
||||
<section id="crafteo" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔨 Crafteo y Creación</h2>
|
||||
<p class="text-slate-200">
|
||||
Transforma materiales crudos en items útiles usando el sistema de crafteo.
|
||||
</p>
|
||||
@@ -517,8 +591,8 @@
|
||||
</section>
|
||||
|
||||
<!-- LOGROS -->
|
||||
<section id="logros" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🏆 Logros</h2>
|
||||
<section id="logros" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🏆 Logros</h2>
|
||||
<p class="text-slate-200">
|
||||
Desbloquea logros completando objetivos y recibe recompensas especiales. Los logros son permanentes y demuestran tus hazañas.
|
||||
</p>
|
||||
@@ -565,8 +639,8 @@
|
||||
</section>
|
||||
|
||||
<!-- MISIONES -->
|
||||
<section id="misiones" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">📜 Misiones</h2>
|
||||
<section id="misiones" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">📜 Misiones</h2>
|
||||
<p class="text-slate-200">
|
||||
Completa misiones para obtener grandes recompensas. Las misiones se renuevan periódicamente y ofrecen objetivos variados.
|
||||
</p>
|
||||
@@ -623,8 +697,8 @@
|
||||
</section>
|
||||
|
||||
<!-- RACHA DIARIA -->
|
||||
<section id="racha-diaria" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🔥 Racha Diaria</h2>
|
||||
<section id="racha-diaria" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔥 Racha Diaria</h2>
|
||||
<p class="text-slate-200">
|
||||
Mantén tu racha diaria activa para recibir recompensas progresivas cada día. ¡Cuanto más larga sea tu racha, mejores serán las recompensas!
|
||||
</p>
|
||||
@@ -676,8 +750,8 @@
|
||||
</section>
|
||||
|
||||
<!-- CONSUMIBLES Y POCIONES -->
|
||||
<section id="consumibles" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🍖 Consumibles y Pociones</h2>
|
||||
<section id="consumibles" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🍖 Consumibles y Pociones</h2>
|
||||
<p class="text-slate-200">
|
||||
Usa pociones y comida para recuperar HP durante tus aventuras. Los consumibles tienen cooldowns individuales.
|
||||
</p>
|
||||
@@ -720,8 +794,8 @@
|
||||
</section>
|
||||
|
||||
<!-- COFRES -->
|
||||
<section id="cofres" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🎁 Cofres y Recompensas</h2>
|
||||
<section id="cofres" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎁 Cofres y Recompensas</h2>
|
||||
<p class="text-slate-200">
|
||||
Los cofres contienen recompensas aleatorias que pueden incluir items raros, monedas y hasta roles especiales de Discord.
|
||||
</p>
|
||||
@@ -767,8 +841,8 @@
|
||||
</section>
|
||||
|
||||
<!-- ENCANTAMIENTOS -->
|
||||
<section id="encantamientos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">✨ Encantamientos y Mutaciones</h2>
|
||||
<section id="encantamientos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">✨ Encantamientos y Mutaciones</h2>
|
||||
<p class="text-slate-200">
|
||||
Mejora tus items aplicándoles encantamientos o mutaciones especiales que les otorgan poderes adicionales.
|
||||
</p>
|
||||
@@ -815,8 +889,8 @@
|
||||
</section>
|
||||
|
||||
<!-- FUNDICIÓN -->
|
||||
<section id="fundicion" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🔥 Sistema de Fundición</h2>
|
||||
<section id="fundicion" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔥 Sistema de Fundición</h2>
|
||||
<p class="text-slate-200">
|
||||
La fundición te permite transformar materiales en lingotes y otros items, pero toma tiempo. Programa tus fundiciones y reclama cuando estén listas.
|
||||
</p>
|
||||
@@ -868,8 +942,8 @@
|
||||
</section>
|
||||
|
||||
<!-- INTELIGENCIA ARTIFICIAL -->
|
||||
<section id="ia" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🤖 Inteligencia Artificial</h2>
|
||||
<section id="ia" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🤖 Inteligencia Artificial</h2>
|
||||
<p class="text-slate-200">
|
||||
Chatea con Gemini AI directamente desde Discord. Haz preguntas, pide ayuda o simplemente conversa.
|
||||
</p>
|
||||
@@ -911,8 +985,8 @@
|
||||
</section>
|
||||
|
||||
<!-- RECORDATORIOS -->
|
||||
<section id="recordatorios" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">⏰ Sistema de Recordatorios</h2>
|
||||
<section id="recordatorios" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⏰ Sistema de Recordatorios</h2>
|
||||
<p class="text-slate-200">
|
||||
Programa recordatorios para que el bot te avise en el futuro. Perfecto para no olvidar eventos, tareas o actividades.
|
||||
</p>
|
||||
@@ -964,8 +1038,8 @@
|
||||
</section>
|
||||
|
||||
<!-- SISTEMA DE ALIANZAS -->
|
||||
<section id="alianzas" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🤝 Sistema de Alianzas</h2>
|
||||
<section id="alianzas" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🤝 Sistema de Alianzas</h2>
|
||||
<p class="text-slate-200">
|
||||
El sistema de alianzas permite a los servidores compartir enlaces de invitación y ganar puntos. <strong class="text-amber-300">Requiere permisos de Administrador.</strong>
|
||||
</p>
|
||||
@@ -1013,7 +1087,7 @@
|
||||
<!-- ADMINISTRACIÓN -->
|
||||
<section id="admin" class="space-y-6 rounded-3xl border border-red-500/20 bg-slate-900/80 p-8 shadow-2xl shadow-red-500/10 backdrop-blur">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<h2 class="text-3xl font-semibold text-white">⚙️ Panel de Administración</h2>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⚙️ Panel de Administración</h2>
|
||||
<span class="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-200">ADMIN ONLY</span>
|
||||
</div>
|
||||
<p class="text-slate-200">
|
||||
@@ -1088,9 +1162,292 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECCIÓN EXPANDIDA: CREACIÓN DE CONTENIDO -->
|
||||
<section id="creacion-contenido" class="group">
|
||||
<div class="rounded-3xl bg-gradient-to-br from-red-900/20 to-orange-900/20 backdrop-blur-xl border border-red-500/30 p-8 shadow-2xl">
|
||||
<div class="mb-8">
|
||||
<div class="inline-flex items-center gap-3 mb-4">
|
||||
<h2 class="text-4xl sm:text-5xl font-black bg-clip-text text-transparent bg-gradient-to-r from-red-200 to-orange-200">
|
||||
🎨 Creación de Contenido
|
||||
</h2>
|
||||
<span class="px-3 py-1 rounded-full bg-red-500/20 text-red-200 text-xs font-bold uppercase border border-red-500/30">
|
||||
Admin/Usuarios Avanzados
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1 w-32 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-slate-300 mb-10 leading-relaxed">
|
||||
Esta sección está diseñada tanto para <strong class="text-white">administradores</strong> que crean contenido como para <strong class="text-white">usuarios que quieren entender</strong> cómo funciona el sistema completo del bot.
|
||||
</p>
|
||||
|
||||
<!-- Tabla de Contenidos Interna -->
|
||||
<div class="rounded-2xl bg-gradient-to-br from-slate-800/60 to-slate-900/60 border border-white/10 p-6 mb-10">
|
||||
<h3 class="text-xl font-bold text-white mb-4">📑 En esta Sección</h3>
|
||||
<div class="grid md:grid-cols-2 gap-3">
|
||||
<a href="#crear-items" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>📦</span> Crear Items
|
||||
</a>
|
||||
<a href="#crear-mobs" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>👾</span> Crear Enemigos
|
||||
</a>
|
||||
<a href="#crear-areas" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>🗺️</span> Crear Áreas
|
||||
</a>
|
||||
<a href="#crear-niveles" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>📊</span> Configurar Niveles
|
||||
</a>
|
||||
<a href="#crear-ofertas" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>🏪</span> Crear Ofertas
|
||||
</a>
|
||||
<a href="#sistema-pesos" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
|
||||
<span>⚖️</span> Sistema de Pesos
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Crear Items -->
|
||||
<div id="crear-items" class="mb-12">
|
||||
<div class="rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 p-8">
|
||||
<h3 class="text-2xl font-bold text-blue-200 mb-6 flex items-center gap-3">
|
||||
<span class="text-3xl">📦</span>
|
||||
Crear Items (EconomyItem)
|
||||
</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Comando Principal -->
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-white mb-3">Comando Principal</h4>
|
||||
<div class="bg-slate-900/50 border border-blue-500/30 rounded-xl p-4">
|
||||
<code class="text-blue-200 font-mono">!item-crear <key-única></code>
|
||||
<p class="text-sm text-slate-400 mt-2">Ejemplo: <code class="text-xs bg-slate-800 px-2 py-1 rounded">!item-crear iron_sword</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Interactivo -->
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-white mb-3">🎛️ Editor Interactivo</h4>
|
||||
<p class="text-slate-300 mb-4">El comando abre un editor con botones interactivos:</p>
|
||||
<div class="grid md:grid-cols-2 gap-3">
|
||||
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
|
||||
<h5 class="font-bold text-white mb-2">📝 Base</h5>
|
||||
<p class="text-sm text-slate-400">Configuración básica: nombre, descripción, categoría, stackable</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
|
||||
<h5 class="font-bold text-white mb-2">🏷️ Tags</h5>
|
||||
<p class="text-sm text-slate-400">Etiquetas separadas por coma (weapon, rare, crafteable)</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
|
||||
<h5 class="font-bold text-white mb-2">⚙️ Props (JSON)</h5>
|
||||
<p class="text-sm text-slate-400">Propiedades avanzadas en formato JSON</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
|
||||
<h5 class="font-bold text-white mb-2">💾 Guardar/Cancelar</h5>
|
||||
<p class="text-sm text-slate-400">Confirma o cancela la creación</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Base -->
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-white mb-3">📋 Modal "Base"</h4>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="text-blue-400">•</span>
|
||||
<div>
|
||||
<strong class="text-white">Nombre:</strong>
|
||||
<span class="text-slate-300"> (requerido) Nombre visible del item</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="text-blue-400">•</span>
|
||||
<div>
|
||||
<strong class="text-white">Descripción:</strong>
|
||||
<span class="text-slate-300"> Texto descriptivo del item</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="text-blue-400">•</span>
|
||||
<div>
|
||||
<strong class="text-white">Categoría:</strong>
|
||||
<span class="text-slate-300"> Agrupa items (weapons, tools, consumables, etc.)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="text-blue-400">•</span>
|
||||
<div>
|
||||
<strong class="text-white">Icon URL:</strong>
|
||||
<span class="text-slate-300"> URL de imagen (opcional)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start">
|
||||
<span class="text-blue-400">•</span>
|
||||
<div>
|
||||
<strong class="text-white">Stackable y Máx:</strong>
|
||||
<span class="text-slate-300"> Formato: <code class="bg-slate-800 px-1.5 py-0.5 rounded text-xs">true,10</code> o <code class="bg-slate-800 px-1.5 py-0.5 rounded text-xs">false,1</code></span>
|
||||
<ul class="ml-4 mt-2 space-y-1 text-xs text-slate-400">
|
||||
<li>• <code>true,10</code> = Apilable hasta 10 unidades</li>
|
||||
<li>• <code>false,1</code> = Solo 1 unidad (armas/herramientas)</li>
|
||||
<li>• <code>true,</code> = Apilable sin límite</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Props Disponibles -->
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-white mb-4">⚙️ Props (JSON) Disponibles</h4>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Tool -->
|
||||
<details class="group/details bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
|
||||
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
|
||||
<span class="text-xl">🔧</span>
|
||||
<span>tool - Herramientas</span>
|
||||
</summary>
|
||||
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
|
||||
<p class="text-sm text-slate-300 mb-3">Define el tipo de actividad que habilita tu item.</p>
|
||||
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
|
||||
"tool": {
|
||||
"type": "pickaxe|rod|sword|bow|halberd|net",
|
||||
"tier": 1
|
||||
}
|
||||
}</code></pre>
|
||||
<ul class="text-sm text-slate-400 space-y-1 mt-3">
|
||||
<li>• <code class="text-xs">type</code>: Tipo de herramienta (determina en qué minijuego se usa)</li>
|
||||
<li>• <code class="text-xs">tier</code>: Nivel/calidad (usado en requisitos de niveles)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Breakable -->
|
||||
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
|
||||
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
|
||||
<span class="text-xl">💥</span>
|
||||
<span>breakable - Durabilidad</span>
|
||||
</summary>
|
||||
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
|
||||
<p class="text-sm text-slate-300 mb-3">Para items no apilables que se desgastan con el uso.</p>
|
||||
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
|
||||
"breakable": {
|
||||
"enabled": true,
|
||||
"maxDurability": 100,
|
||||
"durabilityPerUse": 1
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Chest -->
|
||||
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
|
||||
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
|
||||
<span class="text-xl">📦</span>
|
||||
<span>chest - Cofres</span>
|
||||
</summary>
|
||||
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
|
||||
<p class="text-sm text-slate-300 mb-3">Permite definir loot tables, recompensas de monedas, items o roles.</p>
|
||||
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
|
||||
"chest": {
|
||||
"enabled": true,
|
||||
"rewards": [
|
||||
{ "type": "coins", "amount": 100 },
|
||||
{ "type": "item", "itemKey": "iron_ore", "qty": 5 },
|
||||
{ "type": "role", "roleId": "1234567890" }
|
||||
],
|
||||
"consumeOnOpen": true
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Food -->
|
||||
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
|
||||
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
|
||||
<span class="text-xl">🍖</span>
|
||||
<span>food - Comida/Pociones</span>
|
||||
</summary>
|
||||
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
|
||||
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
|
||||
"food": {
|
||||
"healHp": 50,
|
||||
"healPercent": 25,
|
||||
"cooldownKey": "healing_potion",
|
||||
"cooldownSeconds": 60
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Combat Stats -->
|
||||
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
|
||||
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
|
||||
<span class="text-xl">⚔️</span>
|
||||
<span>Stats de Combate</span>
|
||||
</summary>
|
||||
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
|
||||
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
|
||||
"damage": 10,
|
||||
"defense": 5,
|
||||
"maxHpBonus": 20
|
||||
}</code></pre>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ejemplo Completo -->
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-white mb-3"><EFBFBD><EFBFBD> Ejemplo Completo: Pico de Hierro</h4>
|
||||
<div class="bg-emerald-500/10 border border-emerald-500/30 rounded-lg p-4">
|
||||
<p class="text-sm text-emerald-200 mb-3"><strong>Comando:</strong> <code>!item-crear iron_pickaxe</code></p>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div>
|
||||
<p class="text-white font-semibold mb-1">Modal Base:</p>
|
||||
<ul class="text-slate-300 space-y-1 ml-4">
|
||||
<li>• Nombre: <code>Pico de Hierro</code></li>
|
||||
<li>• Descripción: <code>Un pico resistente para minar minerales</code></li>
|
||||
<li>• Categoría: <code>tools</code></li>
|
||||
<li>• Stackable: <code>false,1</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-semibold mb-1">Props (JSON):</p>
|
||||
<pre class="bg-slate-900 rounded p-2 text-xs text-cyan-200"><code>{
|
||||
"tool": { "type": "pickaxe", "tier": 2 },
|
||||
"breakable": {
|
||||
"enabled": true,
|
||||
"maxDurability": 150,
|
||||
"durabilityPerUse": 1
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Más secciones continuarán... -->
|
||||
<div class="rounded-2xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 p-6 text-center">
|
||||
<p class="text-lg font-semibold text-indigo-200 mb-2">📚 Documentación Completa</p>
|
||||
<p class="text-sm text-slate-300">
|
||||
Para información detallada sobre la creación de Mobs, Áreas, Niveles, Ofertas, Logros y Misiones,
|
||||
consulta el archivo <code class="bg-slate-800 px-2 py-1 rounded text-xs">CREACION_DE_CONTENIDO.md</code>
|
||||
en el repositorio del bot.
|
||||
</p>
|
||||
<p class="text-xs text-slate-400 mt-3">
|
||||
Esta sección te da una introducción. El archivo MD contiene ejemplos completos,
|
||||
todas las propiedades disponibles y guías paso a paso.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONFIGURACIÓN -->
|
||||
<section id="configuracion" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">🔧 Configuración del Servidor</h2>
|
||||
<section id="configuracion" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔧 Configuración del Servidor</h2>
|
||||
<p class="text-slate-200">
|
||||
Los administradores pueden personalizar el comportamiento del bot en su servidor.
|
||||
</p>
|
||||
@@ -1121,8 +1478,8 @@
|
||||
</section>
|
||||
|
||||
<!-- ESTADÍSTICAS -->
|
||||
<section id="estadisticas" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">📊 Estadísticas y Progreso</h2>
|
||||
<section id="estadisticas" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">📊 Estadísticas y Progreso</h2>
|
||||
<p class="text-slate-200">
|
||||
Revisa tus estadísticas detalladas y cooldowns activos para planificar tu progreso.
|
||||
</p>
|
||||
@@ -1165,8 +1522,8 @@
|
||||
</section>
|
||||
|
||||
<!-- TIPS Y TRUCOS -->
|
||||
<section id="tips" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">💡 Tips y Trucos</h2>
|
||||
<section id="tips" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">💡 Tips y Trucos</h2>
|
||||
<p class="text-slate-200">
|
||||
Consejos para aprovechar al máximo Amayo Bot y progresar más rápido.
|
||||
</p>
|
||||
@@ -1215,8 +1572,8 @@
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl font-semibold text-white">❓ Preguntas Frecuentes</h2>
|
||||
<section id="faq" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">❓ Preguntas Frecuentes</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<details class="rounded-2xl border border-white/5 bg-slate-900/60 p-4 text-slate-200">
|
||||
|
||||
1323
src/server/public/index.html.v2.backup
Normal file
1323
src/server/public/index.html.v2.backup
Normal file
File diff suppressed because it is too large
Load Diff
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