From f473ec66d447f795b4b9c3f42118463e41f68ce6 Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Mon, 27 Apr 2026 02:54:49 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20503-Seite=20auf=20altes=20Layout=20zur?=
 =?UTF-8?q?=C3=BCck=20+=20CluBird-Icon=20+=203s=20Auto-Refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/errors/503.blade.php | 211 +++++++++++----------------
 1 file changed, 83 insertions(+), 128 deletions(-)
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 61b033f..885210e 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -3,165 +3,120 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="refresh" content="8">
+<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 {
     height: 100%;
-    background: #0d0f14;
+    background: #0f1117;
+    color: #e2e4ea;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  .wrap {
+  .card {
     width: 100%;
     max-width: 400px;
-    padding: 0 16px;
-    text-align: center;
-  }
-  .icon-ring {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    margin: 0 auto 28px;
-  }
-  .icon-ring svg.bird {
-    position: relative;
-    z-index: 1;
-    width: 64px;
-    height: 64px;
-    background: linear-gradient(135deg, #6366f1, #4338ca);
+    padding: 44px 36px;
+    background: #181c24;
+    border: 1px solid #252938;
     border-radius: 18px;
-    padding: 14px;
-    box-shadow: 0 0 28px rgba(99,102,241,.45);
+    text-align: center;
+    margin: 16px;
+    animation: fadein .4s ease;
   }
-  .icon-ring::after {
-    content: '';
-    position: absolute;
-    inset: -6px;
-    border-radius: 24px;
-    border: 1.5px solid rgba(99,102,241,.35);
-    animation: ringpulse 2s ease-in-out infinite;
-  }
-  @keyframes ringpulse {
-    0%, 100% { opacity: .3; transform: scale(1); }
-    50%       { opacity: 1;  transform: scale(1.07); }
-  }
-  .brand {
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: .4px;
-    color: #6b7280;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-  }
-  .brand span { color: #6366f1; }
-  h1 {
-    font-size: 20px;
-    font-weight: 700;
-    color: #e8eaf0;
-    letter-spacing: -.3px;
-    margin-bottom: 8px;
-  }
-  p {
-    font-size: 13px;
-    color: #4b5563;
-    line-height: 1.65;
+  @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+  .logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
     margin-bottom: 32px;
   }
+  .logo-icon {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    background: linear-gradient(135deg, #6366f1, #4338ca);
+    border-radius: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 20px rgba(99,102,241,.4);
+  }
+  .logo-icon::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border-radius: 15px;
+    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: 16px; font-weight: 700; letter-spacing: -.2px; }
+  .logo-text span { color: #6366f1; }
+  .spinner {
+    width: 44px;
+    height: 44px;
+    margin: 0 auto 24px;
+    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; }
   .bar-track {
-    height: 3px;
-    background: #1e2130;
+    height: 2px;
+    background: #252938;
     border-radius: 99px;
     overflow: hidden;
-    margin-bottom: 20px;
+    margin: 24px 0 20px;
   }
   .bar-fill {
     height: 100%;
-    width: 40%;
-    background: linear-gradient(90deg, #4338ca, #818cf8, #4338ca);
-    background-size: 200% 100%;
-    border-radius: 99px;
-    animation: slide 1.6s ease-in-out infinite, shimmer 2s linear infinite;
-  }
-  @keyframes slide {
-    0%   { transform: translateX(-200%); }
-    100% { transform: translateX(400%); }
-  }
-  @keyframes shimmer {
-    0%   { background-position: 200% center; }
-    100% { background-position: -200% center; }
-  }
-  .steps {
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-    text-align: left;
-    background: #13151d;
-    border: 1px solid #1e2130;
-    border-radius: 12px;
-    padding: 14px 16px;
-  }
-  .step {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 12px;
-    color: #374151;
-  }
-  .step.active { color: #9ca3af; }
-  .step-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #1e2130;
-    flex-shrink: 0;
-  }
-  .step.active .step-dot {
+    width: 35%;
     background: #6366f1;
-    box-shadow: 0 0 6px rgba(99,102,241,.6);
-    animation: dotpulse 1.2s ease-in-out infinite;
+    border-radius: 99px;
+    animation: sweep 1.4s ease-in-out infinite;
   }
-  @keyframes dotpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
+  @keyframes sweep { 0% { transform: translateX(-180%); } 100% { transform: translateX(400%); } }
+  .dot-row { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
+  .dot {
+    width: 5px; height: 5px; border-radius: 50%;
+    background: #6366f1; opacity: .25;
+    animation: pulse 1.4s ease-in-out infinite;
+  }
+  .dot:nth-child(2) { animation-delay: .2s; }
+  .dot:nth-child(3) { animation-delay: .4s; }
+  @keyframes pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
 </style>
 </head>
 <body>
-<div class="wrap">
-  <div class="icon-ring">
-    <svg class="bird" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
-      <path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
-      <circle cx="19" cy="8" r="2" fill="white"/>
-    </svg>
+<div class="card">
+  <div class="logo">
+    <div class="logo-icon">
+      <svg viewBox="0 0 28 28" width="20" height="20" fill="none">
+        <path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+        <path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+        <circle cx="19" cy="8" r="2" fill="white"/>
+      </svg>
+    </div>
+    <span class="logo-text">Clu<span>Bird</span></span>
   </div>
 
-  <div class="brand">Clu<span>Bird</span></div>
-  <h1>Update läuft</h1>
-  <p>Das System wird aktualisiert und ist<br>gleich wieder verfügbar.</p>
+  <div class="spinner"></div>
+  <h1>Update wird durchgeführt</h1>
+  <p>Das System wird aktualisiert.<br>Diese Seite lädt automatisch neu.</p>
 
-  <div class="bar-track">
-    <div class="bar-fill"></div>
-  </div>
+  <div class="bar-track"><div class="bar-fill"></div></div>
 
-  <div class="steps">
-    <div class="step active">
-      <div class="step-dot"></div>
-      Code wird eingespielt
-    </div>
-    <div class="step active">
-      <div class="step-dot"></div>
-      Abhängigkeiten &amp; Assets werden gebaut
-    </div>
-    <div class="step">
-      <div class="step-dot"></div>
-      Dienste werden neu gestartet
-    </div>
-    <div class="step">
-      <div class="step-dot"></div>
-      Seite lädt automatisch neu
-    </div>
+  <div class="dot-row">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
   </div>
 </div>
 </body>
