From 7705f132970d8b4fde51ff6a615fd6f31475c040 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 01:55:13 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20p=C3=A1ginas=20personalizadas?=
 =?UTF-8?q?=20de=20error=20y=20offline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Crear error.vue para manejar errores 404 y otros errores de routing
- Crear pages/offline.vue para estado offline
- Ambas páginas incluyen fondo Aurora y diseño glass morphism
- Opciones para volver al menú principal o ir a Authentik
- Agregar /offline a rutas de prerender
- Detección automática de estado de conexión en página offline
---
 error.vue         | 355 ++++++++++++++++++++++++++++++++++++
 nuxt.config.ts    |   2 +-
 pages/offline.vue | 445 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 801 insertions(+), 1 deletion(-)
 create mode 100644 error.vue
 create mode 100644 pages/offline.vue

diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..37694c3
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="error-page">
+    <!-- Aurora Background -->
+    <div class="aurora-bg">
+      <div class="aurora-gradient aurora-1"></div>
+      <div class="aurora-gradient aurora-2"></div>
+      <div class="aurora-gradient aurora-3"></div>
+    </div>
+
+    <!-- Error Container -->
+    <div class="error-container glass">
+      <div class="error-icon">
+        <component :is="errorIcon" :size="80" />
+      </div>
+
+      <h1 class="error-title">{{ errorTitle }}</h1>
+      <p class="error-message">{{ errorMessage }}</p>
+
+      <div class="error-details" v-if="showDetails">
+        <code>{{ error }}</code>
+      </div>
+
+      <div class="error-actions">
+        <button @click="goHome" class="btn btn-primary">
+          <Home :size="20" />
+          <span>Ir al Menú Principal</span>
+        </button>
+
+        <button @click="goAuth" class="btn btn-secondary">
+          <LogIn :size="20" />
+          <span>Autenticación Authentik</span>
+        </button>
+      </div>
+
+      <button @click="toggleDetails" class="btn-text">
+        {{ showDetails ? 'Ocultar' : 'Ver' }} detalles técnicos
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { AlertCircle, Wifi, WifiOff, Home, LogIn } from 'lucide-vue-next'
+
+const props = defineProps({
+  error: {
+    type: Object,
+    required: true
+  }
+})
+
+const showDetails = ref(false)
+
+const errorIcon = computed(() => {
+  const statusCode = props.error?.statusCode
+  if (statusCode === 404) return AlertCircle
+  if (statusCode >= 500) return Wifi
+  if (!navigator.onLine) return WifiOff
+  return AlertCircle
+})
+
+const errorTitle = computed(() => {
+  const statusCode = props.error?.statusCode
+  if (statusCode === 404) return '404 - Página No Encontrada'
+  if (statusCode === 403) return '403 - Acceso Denegado'
+  if (statusCode === 401) return '401 - No Autorizado'
+  if (statusCode >= 500) return '500 - Error del Servidor'
+  if (!navigator.onLine) return 'Sin Conexión'
+  return `Error ${statusCode || 'Desconocido'}`
+})
+
+const errorMessage = computed(() => {
+  const statusCode = props.error?.statusCode
+  if (statusCode === 404) {
+    return 'La página que buscas no existe o ha sido movida.'
+  }
+  if (statusCode === 403 || statusCode === 401) {
+    return 'Necesitas autenticarte para acceder a esta página. Por favor, inicia sesión con Authentik.'
+  }
+  if (statusCode >= 500) {
+    return 'Ocurrió un error en el servidor. Por favor, intenta más tarde.'
+  }
+  if (!navigator.onLine) {
+    return 'No hay conexión a Internet. Verifica tu conexión y vuelve a intentar.'
+  }
+  return props.error?.message || 'Ha ocurrido un error inesperado.'
+})
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value
+}
+
+const goHome = () => {
+  clearError({ redirect: '/' })
+}
+
+const goAuth = () => {
+  window.location.href = 'https://authentik.nucleoriofrio.com'
+}
+</script>
+
+<style scoped>
+.error-page {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+  overflow: auto;
+}
+
+/* Aurora Background */
+.aurora-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.aurora-gradient {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.4;
+  animation: float 20s ease-in-out infinite;
+}
+
+.aurora-1 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.aurora-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, transparent 70%);
+  bottom: -10%;
+  right: -10%;
+  animation-delay: 7s;
+}
+
+.aurora-3 {
+  width: 550px;
+  height: 550px;
+  background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-delay: 14s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(50px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-50px, 50px) scale(0.9);
+  }
+}
+
+/* Error Container */
+.error-container {
+  position: relative;
+  z-index: 1;
+  max-width: 600px;
+  width: 100%;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  animation: slideIn 0.6s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.error-icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+  color: var(--accent-primary, #3b82f6);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+.error-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.error-message {
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.6;
+  margin: 0 0 32px 0;
+}
+
+.error-details {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 24px;
+  max-height: 200px;
+  overflow: auto;
+  text-align: left;
+}
+
+.error-details code {
+  font-family: 'Courier New', monospace;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.9);
+  word-break: break-all;
+}
+
+.error-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  color: white;
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.12);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.18);
+  transform: translateY(-2px);
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: color 0.3s ease;
+  font-family: inherit;
+  padding: 8px;
+}
+
+.btn-text:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .error-container {
+    padding: 30px 20px;
+  }
+
+  .error-icon :deep(svg) {
+    width: 60px;
+    height: 60px;
+  }
+
+  .error-title {
+    font-size: 1.5rem;
+  }
+
+  .error-message {
+    font-size: 1rem;
+  }
+
+  .error-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Theme support */
+:root {
+  --accent-primary: #3b82f6;
+  --accent-secondary: #8b5cf6;
+}
+
+[data-theme="dark"] {
+  --accent-primary: #60a5fa;
+  --accent-secondary: #a78bfa;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9bdd6e8..aa54ddb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -235,7 +235,7 @@ export default defineNuxtConfig({
     },
     prerender: {
       crawlLinks: true,
-      routes: ['/']
+      routes: ['/', '/offline']
     },
     // Development configuration for proxy
     devProxy: process.env.NODE_ENV === 'development' ? {} : undefined
diff --git a/pages/offline.vue b/pages/offline.vue
new file mode 100644
index 0000000..5698f15
--- /dev/null
+++ b/pages/offline.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="offline-page">
+    <!-- Aurora Background -->
+    <div class="aurora-bg">
+      <div class="aurora-gradient aurora-1"></div>
+      <div class="aurora-gradient aurora-2"></div>
+      <div class="aurora-gradient aurora-3"></div>
+    </div>
+
+    <!-- Offline Container -->
+    <div class="offline-container glass">
+      <div class="offline-icon">
+        <WifiOff :size="80" :stroke-width="1.5" />
+      </div>
+
+      <h1 class="offline-title">Sin Conexión</h1>
+      <p class="offline-message">
+        No se puede conectar al servidor. Verifica tu conexión a Internet y vuelve a intentar.
+      </p>
+
+      <div class="connection-status">
+        <div class="status-indicator" :class="{ online: isOnline, offline: !isOnline }">
+          <div class="status-dot"></div>
+          <span>{{ isOnline ? 'Conectado' : 'Desconectado' }}</span>
+        </div>
+      </div>
+
+      <div class="offline-actions">
+        <button @click="retry" class="btn btn-primary" :disabled="!isOnline">
+          <RefreshCw :size="20" :class="{ spinning: isRetrying }" />
+          <span>{{ isRetrying ? 'Reintentando...' : 'Reintentar' }}</span>
+        </button>
+
+        <button @click="goHome" class="btn btn-secondary">
+          <Home :size="20" />
+          <span>Menú Principal</span>
+        </button>
+
+        <button @click="goAuth" class="btn btn-secondary">
+          <LogIn :size="20" />
+          <span>Autenticación</span>
+        </button>
+      </div>
+
+      <div class="offline-tips">
+        <p class="tips-title">Consejos:</p>
+        <ul class="tips-list">
+          <li>Verifica que tu dispositivo esté conectado a Internet</li>
+          <li>Comprueba que el servidor esté accesible</li>
+          <li>Si usaste el modo offline, algunas canciones en caché seguirán disponibles</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { WifiOff, RefreshCw, Home, LogIn } from 'lucide-vue-next'
+
+// Disable SSR for this page
+definePageMeta({
+  ssr: false
+})
+
+const isOnline = ref(navigator.onLine)
+const isRetrying = ref(false)
+
+const updateOnlineStatus = () => {
+  isOnline.value = navigator.onLine
+  if (isOnline.value && isRetrying.value) {
+    // If we're back online and retrying, redirect to home
+    setTimeout(() => {
+      navigateTo('/')
+    }, 500)
+  }
+}
+
+const retry = async () => {
+  if (!isOnline.value) return
+
+  isRetrying.value = true
+
+  try {
+    // Try to fetch the main page to verify connection
+    const response = await fetch('/', {
+      method: 'HEAD',
+      cache: 'no-cache'
+    })
+
+    if (response.ok) {
+      // Connection is back, redirect to home
+      await navigateTo('/')
+    } else {
+      throw new Error('Server not responding')
+    }
+  } catch (error) {
+    console.error('Retry failed:', error)
+    // Show error message or keep trying
+  } finally {
+    isRetrying.value = false
+  }
+}
+
+const goHome = () => {
+  navigateTo('/')
+}
+
+const goAuth = () => {
+  window.location.href = 'https://authentik.nucleoriofrio.com'
+}
+
+onMounted(() => {
+  window.addEventListener('online', updateOnlineStatus)
+  window.addEventListener('offline', updateOnlineStatus)
+
+  // Auto-retry when coming back online
+  if (isOnline.value) {
+    retry()
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('online', updateOnlineStatus)
+  window.removeEventListener('offline', updateOnlineStatus)
+})
+</script>
+
+<style scoped>
+.offline-page {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+  overflow: auto;
+}
+
+/* Aurora Background */
+.aurora-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.aurora-gradient {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.4;
+  animation: float 20s ease-in-out infinite;
+}
+
+.aurora-1 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.aurora-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, transparent 70%);
+  bottom: -10%;
+  right: -10%;
+  animation-delay: 7s;
+}
+
+.aurora-3 {
+  width: 550px;
+  height: 550px;
+  background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-delay: 14s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(50px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-50px, 50px) scale(0.9);
+  }
+}
+
+/* Offline Container */
+.offline-container {
+  position: relative;
+  z-index: 1;
+  max-width: 600px;
+  width: 100%;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  animation: slideIn 0.6s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.offline-icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+  color: rgba(239, 68, 68, 0.9);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+.offline-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  background: linear-gradient(45deg, #ef4444, #f97316);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.offline-message {
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.6;
+  margin: 0 0 24px 0;
+}
+
+.connection-status {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: blink 2s ease-in-out infinite;
+}
+
+.status-indicator.offline .status-dot {
+  background: #ef4444;
+}
+
+.status-indicator.online .status-dot {
+  background: #22c55e;
+}
+
+.status-indicator.offline span {
+  color: rgba(239, 68, 68, 0.9);
+}
+
+.status-indicator.online span {
+  color: rgba(34, 197, 94, 0.9);
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.offline-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  color: white;
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.12);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.18);
+  transform: translateY(-2px);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.offline-tips {
+  text-align: left;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.tips-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.tips-list {
+  margin: 0;
+  padding-left: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.8;
+}
+
+.tips-list li {
+  margin-bottom: 8px;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .offline-container {
+    padding: 30px 20px;
+  }
+
+  .offline-icon :deep(svg) {
+    width: 60px;
+    height: 60px;
+  }
+
+  .offline-title {
+    font-size: 1.5rem;
+  }
+
+  .offline-message {
+    font-size: 1rem;
+  }
+
+  .offline-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .offline-tips {
+    padding: 16px;
+  }
+}
+
+/* Theme support */
+:root {
+  --accent-primary: #3b82f6;
+  --accent-secondary: #8b5cf6;
+}
+
+[data-theme="dark"] {
+  --accent-primary: #60a5fa;
+  --accent-secondary: #a78bfa;
+}
+</style>