better error.html

pyoneerC · pyoneerC · commit 119684143185 · 2025-04-19T01:36:49.000Z
diff --git a/templates/error.html b/templates/error.html
@@ -6,28 +6,84 @@
    <title>Error - Algo salió mal</title>
    <!-- Font Awesome for icons -->
    <link
-           rel="stylesheet"
-           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
+   <style>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+      
+      body {
+         font-family: 'Poppins', sans-serif;
+      }
+      
+      .animate-pulse-slow {
+         animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      
+      @keyframes pulse {
+         0%, 100% {
+            opacity: 1;
+         }
+         50% {
+            opacity: 0.6;
+         }
+      }
+      
+      .blob {
+         position: absolute;
+         border-radius: 50%;
+         filter: blur(60px);
+         z-index: -1;
+      }
+   </style>
 </head>
-<body class="bg-red-100 flex items-center justify-center min-h-screen">
-<div class="bg-white p-8 rounded-lg shadow-lg text-center max-w-md w-full">
-   <div class="text-red-700 mb-4">
-      <i class="fas fa-exclamation-triangle text-5xl"></i>
+<body class="bg-gradient-to-b from-red-50 to-white flex items-center justify-center min-h-screen p-4 overflow-hidden relative">
+   <!-- Animated background blobs -->
+   <div class="blob bg-red-200/50 w-96 h-96 top-0 left-0 -translate-x-1/2 -translate-y-1/2"></div>
+   <div class="blob bg-blue-200/50 w-96 h-96 bottom-0 right-0 translate-x-1/3 translate-y-1/3"></div>
+   
+   <div class="bg-white/90 backdrop-blur-sm p-8 md:p-10 rounded-2xl shadow-2xl max-w-lg w-full border border-red-100 relative z-10">
+      <div class="flex flex-col items-center">
+         <!-- Error icon with animation -->
+         <div class="mb-6 animate-float">
+            <div class="h-28 w-28 bg-red-50 flex items-center justify-center rounded-full border-4 border-red-100 shadow-md">
+               <i class="fas fa-exclamation-circle text-6xl text-red-500 animate-pulse-slow"></i>
+            </div>
+         </div>
+         
+         <!-- Error heading -->
+         <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-center">¡Oops! Ocurrió un error</h1>
+         
+         <!-- Red line divider -->
+         <div class="w-16 h-1 bg-red-500 rounded-full mb-6"></div>
+         
+         <!-- Error message with enhanced styling -->
+         <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-8 w-full rounded-r-lg shadow-sm">
+            <p class="text-gray-700 text-center">{{ error_message }}</p>
+         </div>
+         
+         <!-- Suggestions -->
+         <div class="text-sm text-gray-500 mb-8 text-center">
+            <p class="mb-2">¿Qué puedes hacer?</p>
+            <ul class="space-y-1">
+               <li><i class="fas fa-redo-alt mr-2"></i>Intentar nuevamente más tarde</li>
+               <li><i class="fas fa-search mr-2"></i>Verificar el término de búsqueda</li>
+               <li><i class="fas fa-home mr-2"></i>Volver a la página de inicio</li>
+            </ul>
+         </div>
+         
+         <!-- Back button with hover effects -->
+         <a
+            href="{{ url_for('index') }}"
+            class="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium px-8 py-3 rounded-lg hover:shadow-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-300 flex items-center gap-2 group"
+         >
+            <i class="fas fa-arrow-left transform group-hover:-translate-x-1 transition-transform"></i>
+            Volver al inicio
+         </a>
+      </div>
    </div>
-   <h1 class="text-3xl font-bold text-red-700 mb-2">Oops! Ocurrió un error</h1>
-   <p class="text-red-700 mb-6">{{ error_message }}</p>
-   <div>
-      <a
-              href="{{ url_for('index') }}"
-              class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200"
-      >
-         Volver
-      </a>
-   </div>
-</div>
 </body>
 </html>
