From e46cd9a6b184b93b6898c5944ea99ac01dfcb820 Mon Sep 17 00:00:00 2001
From: Eduard Iten <eduard@iten.pro>
Date: Wed, 1 Apr 2026 10:46:38 +0200
Subject: [PATCH] Animation Fehler

---
 public/.htaccess                    |  2 +-
 src/components/ErrorComponent.astro | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/.htaccess b/public/.htaccess
index 208c898..7cc47fe 100644
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -1,3 +1,3 @@
 ErrorDocument 403 /403.html
 ErrorDocument 404 /404.html
-ErrorDocument 500 /500.html
\ No newline at end of file
+ErrorDocument 500 /500.html
diff --git a/src/components/ErrorComponent.astro b/src/components/ErrorComponent.astro
index 9670d6f..ea187a7 100644
--- a/src/components/ErrorComponent.astro
+++ b/src/components/ErrorComponent.astro
@@ -18,9 +18,19 @@ const { title = "404" } = Astro.props;
         <h1
             class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
         >
-            <Icon name="tabler:alert-triangle" class="size-9" />
+            <span class="relative grid h-9 w-9">
+                <Icon
+                    name="tabler:triangle-filled"
+                    class="col-start-1 row-start-1 size-9 animate-ping opacity-75 translate-x-[-0.25px] translate-y-[-1.5px] blur-[1px]"
+                />
+                <Icon
+                    name="tabler:alert-triangle"
+                    class="col-start-1 row-start-1 size-9 relative"
+                />
+            </span>
             Fehler {title}
         </h1>
+
         <p class="mb-4 text-red-500 py-2 px-4 text-lg">
             <slot />
             <a
@@ -38,4 +48,8 @@ const { title = "404" } = Astro.props;
     .error-component :global(br) {
         @apply mb-3;
     }
+
+    .error-component .animate-ping {
+        animation-duration: 2s;
+    }
 </style>
-- 
2.39.5