PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<!-- resources/views/errors/500.blade.php -->
<x-guest-layout>
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-6 flex items-center justify-center">
<div class="max-w-2xl w-full">
<!-- Main Error Container -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all hover:scale-105">
<!-- Top Decorative Bar -->
<div class="h-2 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500"></div>
<!-- Content Section -->
<div class="p-8">
<!-- Server Icon -->
<div class="mb-8 flex justify-center">
<div class="relative">
<div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center animate-pulse">
<svg class="w-12 h-12 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
<div class="absolute -right-2 -bottom-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center animate-bounce">
<span class="text-lg">!</span>
</div>
</div>
</div>
<!-- Error Message -->
<div class="text-center space-y-4">
<h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">500</h1>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300">Server Hiccup Detected</h2>
<p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
Our servers are currently taking an unexpected coffee break. Don't worry, we've sent our best engineers to wake them up!
</p>
</div>
<!-- Interactive Elements -->
<div class="mt-8 space-y-4">
<!-- Progress Bar -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
<div class="bg-gradient-to-r from-red-500 to-orange-500 h-full w-3/4 animate-loading"></div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center mt-6">
<a href="{{ url('/') }}"
class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-white bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transform transition-all hover:-translate-y-1">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Return Home
</a>
<button onclick="window.location.reload()"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-base font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition-all hover:-translate-y-1">
<svg class="w-5 h-5 mr-2 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
Try Again
</button>
</div>
</div>
</div>
<!-- Bottom Decorative Elements -->
<div class="px-8 py-4 bg-gray-50 dark:bg-gray-700/50 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
<span>Error Code: SERVER_NEEDS_COFFEE</span>
<button x-on:click="darkMode = !darkMode"
class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
<template x-if="!darkMode">
<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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</template>
<template x-if="darkMode">
<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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</template>
</button>
</div>
</div>
<!-- Additional Help Text -->
<div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
<p>If the problem persists, please contact our support team</p>
</div>
</div>
</div>
<style>
@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.animate-loading {
animation: loading 2s linear infinite;
}
.animate-spin-slow {
animation: spin 3s linear infinite;
}
</style>
</x-guest-layout>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E