shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Rediseño de interfaz con temática de Halloween

Browse Source 
- Actualización de estilos CSS en pixel-sections.css para reflejar una paleta de colores suave de Halloween, incluyendo cambios en gradientes, bordes y sombras.
- Modificación de elementos en index.ejs para incluir decoraciones de Halloween como calabazas y fantasmas.
- Ajustes en layout.ejs y navbar.ejs para incorporar iconos y tooltips relacionados con Halloween.
- Creación de un nuevo archivo README para documentar los cambios y la nueva paleta de colores.
This commit is contained in:
shni
2025-10-09 21:47:18 -05:00
parent 36aeb5573a
commit dbb098e2bf
6 changed files with 767 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/server/views/index.ejs
View File

@@ -7,13 +7,13 @@
<header class="relative overflow-hidden py-20 sm:py-28">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="max-w-5xl mx-auto text-center space-y-12">
<!-- Badge Pixel Art con decoración -->
<!-- Badge Pixel Art con decoración de Halloween -->
<div class="inline-block relative">
<span class="pixel-star absolute -left-8 top-0"></span>
<span class="pixel-pumpkin absolute -left-12 top-0"></span>
<div class="pixel-badge">
<%= appName %> • v<%= version %>
</div>
<span class="pixel-star absolute -right-8 top-0" style="animation-delay: 1s;"></span>
<span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
</div>
<!-- Título Principal -->
@@ -26,11 +26,13 @@
</h2>
</div>
<!-- Decoración con velas -->
<div class="flex justify-center gap-8">
<span class="pixel-candle"></span>
<span class="pixel-candle" style="animation-delay: 0.5s;"></span>
<span class="pixel-candle" style="animation-delay: 1s;"></span>
<!-- Decoración de Halloween con murciélagos y estrellas -->
<div class="flex justify-center gap-8 items-center">
<span class="pixel-bat"></span>
<span class="pixel-star-halloween">✦</span>
<span class="pixel-pumpkin" style="animation-delay: 0.5s;"></span>
<span class="pixel-star-halloween" style="animation-delay: 0.8s;">✦</span>
<span class="pixel-ghost" style="animation-delay: 1s;"></span>
</div>
<!-- Descripción -->

10
src/server/views/layouts/layout.ejs
View File

@@ -48,25 +48,25 @@
<div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
<div class="pixel-status-bar justify-center">
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
<span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
<span>VER <%= version %></span>
<span>✦</span>
<span>DJS <%= djsVersion %></span>
<span>✦</span>
<span><%= currentDateHuman %></span>
<span class="pixel-star" style="width: 12px; height: 12px; animation-delay: 1.5s;"></span>
<span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
</div>
</div>
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
<span class="pixel-coin" style="width: 16px; height: 16px;"></span>
<span class="pixel-bat" style="width: 24px; height: 12px;"></span>
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
<span class="pixel-candle" style="width: 8px; height: 12px;"></span>
<span class="pixel-star-halloween">✦</span>
</p>
<div class="text-center">
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
<span aria-hidden="true">✦</span> Volver arriba <span aria-hidden="true">✦</span>
<span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
</a>
</div>
</div>

10
src/server/views/partials/navbar.ejs
View File

@@ -1,15 +1,15 @@
<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
<a href="#" class="flex items-center gap-3">
<div class="pixel-coin" style="width: 20px; height: 20px;"></div>
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-accent-3);"><%= appName %></span>
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
<div class="pixel-pumpkin" style="width: 20px; height: 20px;"></div>
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-pumpkin);"><%= appName %></span>
<span class="pixel-star-halloween">✦</span>
</a>
<div class="hidden md:flex items-center gap-6">
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="✨ Empieza aquí">Guía</a>
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="🎃 Empieza aquí">Guía</a>
<a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
<a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
<a href="#faq" class="pixel-tooltip" data-tooltip="❓ Ayuda">FAQ</a>
<a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">FAQ</a>
</div>
<button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">