mailwolt/resources/views/errors/503.blade.php

71 lines
2.0 KiB
PHP

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="3">
<title>Update läuft · CluBird</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
min-height: 100vh;
background: #0f1117;
color: #e2e4ea;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.card {
width: 100%;
max-width: 480px;
padding: 44px 40px;
background: #181c24;
border: 1px solid #252938;
border-radius: 18px;
text-align: center;
animation: fadein .4s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.logo {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 40px;
}
.logo-icon {
position: relative;
width: 42px;
height: 42px;
background: linear-gradient(135deg, #6366f1, #4338ca);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 22px rgba(99,102,241,.45);
}
.logo-icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 16px;
border: 1px solid rgba(99,102,241,.3);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.logo-text { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.logo-text span { color: #6366f1; }
.spinner {
width: 54px; height: 54px;
margin: 0 auto 28px;
border-radius: 50%;
border: 3px solid #252938;
border-top-color: #6366f1;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
h1 { font-size: 17px; font-weight: 600; color: #e2e4ea; margin-bottom: 8px; letter-spacing: -.2px; }
p { font-size: 13px; color: #4b5563; line-height: 1.65; }