From 14f4be2456aa2c0d9894ecb6e261615abb2bfe44 Mon Sep 17 00:00:00 2001
From: matt <matt@creative-crafter.de>
Date: Sat, 1 Feb 2025 11:02:29 +0100
Subject: [PATCH] NEU

---
 programmieren/spiele/Flappy-Witch/index.html | 216 +++++++++++++++++--
 1 file changed, 193 insertions(+), 23 deletions(-)

diff --git a/programmieren/spiele/Flappy-Witch/index.html b/programmieren/spiele/Flappy-Witch/index.html
index f92a36f..c19eb7a 100644
--- a/programmieren/spiele/Flappy-Witch/index.html
+++ b/programmieren/spiele/Flappy-Witch/index.html
@@ -20,27 +20,189 @@
             text-align: center;
         }
         .button {
-            padding: 16px 32px; /* Doppelte Größe */
+            --white: #ffffff;
+            cursor: pointer;
+            background: linear-gradient(to bottom, #6e3bff, #7e51ff);
+            color: #ffffff;
+            border: 1px solid #af93ff;
             border-radius: 8px;
-            background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */
-            box-shadow: 0 2px 4px rgba(0,0,0,0.7);
-            transition: all 0.2s;
+            position: relative;
+            font-family: Arial, Helvetica, sans-serif;
+            text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
+            box-shadow: 0 8px 10px -4px #503b89, 0 0 0 2px #562cce;
+            font-size: 25px;
+        }
+        .icon path.bm {
+            stroke-dasharray: 3;
+            stroke-dashoffset: 3;
+            stroke-width: 1px;
+            transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
+        }
+        .toggle-checkbox {
+            display: none;
+        }
+        .toggle-checkbox:checked + .button .icon path.bm {
+            animation: bump 1s ease forwards;
+        }
+        .toggle-checkbox:checked + .button .icon {
+            animation: beat 1s ease-in-out forwards;
+        }
+        .letters span:nth-child(5) {
+            margin-left: 5px;
+        }
+        .letters span:nth-child(6) {
+            margin-left: 1px;
+        }
+        .button:active .content {
+            box-shadow: inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4), inset 0px -3px 8px 0px #d190ff;
+        }
+        @keyframes bump {
+            20% {
+                stroke-dasharray: 3;
+                stroke-dashoffset: 3;
+            }
+            30% {
+                stroke-dasharray: 5;
+                stroke-dashoffset: 3;
+            }
+            30.1% {
+                stroke-dasharray: 3;
+                stroke-dashoffset: 6;
+            }
+            75% {
+                stroke-dasharray: 3;
+                stroke-dashoffset: 3;
+            }
+            100% {
+                stroke-dasharray: 3;
+                stroke-dashoffset: 3;
+            }
+        }
+        @keyframes beat {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.1);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+        .icon-container {
             display: flex;
             align-items: center;
-            gap: 8px;
-            margin-top: 20px; /* Abstand zum oberen Inhalt */
+            justify-content: center;
+            padding: 8px 10px;
+            background-color: #ffffff;
+            border-radius: 50%;
+            box-shadow: inset 0 -2px 4px 0 #c6c6c6, 0 3px 6px rgba(0, 0, 0, 0.25);
+            text-align: center;
+            z-index: 10;
         }
-        .button:hover {
-            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
+        .icon-container .icon {
+            width: 25px;
+            height: 30px;
+            stroke: #592cd6;
+            margin-top: -2px;
+            z-index: 4;
+            transform: rotate(180deg);
         }
-        .button:active {
-            box-shadow: 0 0px 1px rgba(0,0,0,0.8);
-            transform: scale(0.995);
-        }
-        .button-text {
+        .content {
+            pointer-events: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+            position: relative;
+            height: 100%;
+            width: 100%;
+            padding: 4px;
+            gap: 16px;
+            border-radius: 7px;
             font-weight: 600;
-            color: white;
-            font-size: 1.5em; /* Textgröße anpassen */
+            transition: all 0.3s ease;
+        }
+        .content::before {
+            content: "";
+            inset: 0;
+            position: absolute;
+            z-index: 10;
+            width: 80%;
+            top: 45%;
+            bottom: 35%;
+            opacity: 0.7;
+            margin: auto;
+            background: linear-gradient(to bottom, transparent, var(--purple-400));
+            filter: brightness(1.3) blur(5px);
+        }
+        .letters {
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 4px;
+        }
+        .letters span {
+            display: block;
+            color: transparent;
+            position: relative;
+            left: 6px;
+        }
+        .letters span {
+            animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
+        }
+        .letters span::before, .letters span::after {
+            content: attr(data-label);
+            position: absolute;
+            color: var(--white);
+            text-shadow: -1px 1px 2px var(--purple-500);
+            left: 0;
+        }
+        .letters span::before {
+            opacity: 0;
+            transform: translateY(-100%);
+        }
+        .button:hover .words {
+            opacity: 1;
+        }
+        .button:hover .letters span::before {
+            animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
+        }
+        .button:hover .letters span::after {
+            opacity: 1;
+            animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
+        }
+        @keyframes letterShow {
+            0% {
+                transform: translateY(50%);
+                opacity: 0;
+                filter: blur(20px);
+            }
+            20% {
+                transform: translateY(70%);
+                opacity: 1;
+            }
+            50% {
+                transform: translateY(-15%);
+                opacity: 1;
+                filter: blur(0);
+            }
+            100% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        @keyframes letterHide {
+            0% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-70%);
+                opacity: 0;
+                filter: blur(3px);
+            }
         }
     </style>
 </head>
@@ -54,7 +216,22 @@
     <br/>
     <div align='center'><a href="/programmieren/spiele/Flappy-Witch/FlappyWitch.html"><img src="/icons/spielen-button.png" width="500vh"></a>
         <br/><br/>
-        <img src="/icons/link1.png" width= "75vh" onclick="navigator.clipboard.writeText('www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'); alert ('copy')">
+        <button class="button" onclick="navigator.clipboard.writeText('www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'); alert('copied')">
+            <div class="icon-container">
+                <svg viewBox="0 0 24 24" fill="none" class="icon">
+                    <path d="M12 2v20m10-10H2" stroke="currentColor" stroke-width="2"/>
+                    <path class="bm" d="M3 3h18v18H3z" stroke="currentColor"/>
+                </svg>
+            </div>
+            <div class="content">
+                <div class="letters">
+                    <span data-label="C" style="--i:0;">C</span>
+                    <span data-label="o" style="--i:1;">o</span>
+                    <span data-label="p" style="--i:2;">p</span>
+                    <span data-label="y" style="--i:3;">y</span>
+                </div>
+            </div>
+        </button>
     </div>
 
     <br/><br/><br/>
@@ -64,12 +241,5 @@
         <br/>
         Creative Crafter</h1></div>
     <div style="float:right;"></div>
-    
-    <!-- Button hinzufügen -->
-    <button class="button" onclick="window.location.href='/programmieren/spiele/Flappy-Witch/FlappyWitch.html'">
-        <div class="button-inner">
-            <span class="button-text">Games</span>
-        </div>
-    </button>
 </body>
 </html>