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

---
 programmieren/spiele/Flappy-Witch/index.html | 284 +++++++------------
 1 file changed, 100 insertions(+), 184 deletions(-)

diff --git a/programmieren/spiele/Flappy-Witch/index.html b/programmieren/spiele/Flappy-Witch/index.html
index 4cca962..32c5b21 100644
--- a/programmieren/spiele/Flappy-Witch/index.html
+++ b/programmieren/spiele/Flappy-Witch/index.html
@@ -7,197 +7,113 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
     <link href="" rel="stylesheet">
     <style>
-        @font-face { font-family: "Titillium"; src: url("/Titillium-Web-Regular.ttf"); }
-        body, html { font-family: 'Titillium'; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #e6f7ff; }
-        h1, h2 { text-align: center; }
-        .loader-container { display: none; justify-content: center; align-items: center; height: 100%; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(173, 216, 230, 0.8); z-index: 9999; }
-        .loading .loader-container { display: flex; }
-        .button { padding: 16px 32px; border-radius: 8px; background: linear-gradient(to bottom, #007bff, #0056b3); box-shadow: 0 2px 4px rgba(0,0,0,0.7); transition: all 0.2s; display: flex; align-items: center; gap: 8px; margin-top: 20px; }
-        .button:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.6); }
-        .button:active { box-shadow: 0 0px 1px rgba(0,0,0,0.8); transform: scale(0.995); }
-        .button-text { font-weight: 600; color: white; font-size: 1.5em; }
-        .tooltip-container {
-            position: relative;
-            display: inline-block;
-            font-family: "Arial", sans-serif;
-            overflow: visible;
+        @font-face {
+            font-family: "Titillium";
+            src: url("/Titillium-Web-Regular.ttf");
         }
-        .button-content {
+        body, html {
+            font-family: 'Titillium';
+            height: 100%;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            background-color: #e6f7ff; /* Leichtes Blau */
+        }
+        h1 {
+            text-align: center;
+        }
+        h2 {
+            text-align: center;
+        }
+        .loader-container {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: rgba(173, 216, 230, 0.8); /* Halbtransparenter bläulicher Hintergrund */
+            z-index: 9999; /* Sicherstellen, dass die Ladeanimation immer im Vordergrund ist */
+        }
+        .loading .loader-container {
+            display: flex;
+        }
+        .button {
+            padding: 16px 32px; /* Doppelte Größe */
+            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;
             display: flex;
             align-items: center;
-            justify-content: center;
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
-            color: white;
-            padding: 14px 28px;
-            border-radius: 50px;
-            cursor: pointer;
-            transition:
-                background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
-                transform 0.3s ease,
-                box-shadow 0.4s ease;
-            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
-            position: relative;
-            z-index: 10;
-            overflow: hidden;
+            gap: 8px;
+            margin-top: 20px; /* Abstand zum oberen Inhalt */
         }
-        .button-content::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: linear-gradient(
-                135deg,
-                rgba(110, 142, 251, 0.4),
-                rgba(167, 119, 227, 0.4)
-            );
-            filter: blur(15px);
-            opacity: 0;
-            transition: opacity 0.5s ease;
-            z-index: -1;
+        .button:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
         }
-        .button-content::after {
-            content: "";
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(
-                circle,
-                rgba(255, 255, 255, 0.3) 0%,
-                rgba(255, 255, 255, 0) 70%
-            );
-            transform: scale(0);
-            transition: transform 0.6s ease-out;
-            z-index: -1;
+        .button:active {
+            box-shadow: 0 0px 1px rgba(0,0,0,0.8);
+            transform: scale(0.995);
         }
-        .button-content:hover::before {
-            opacity: 1;
-        }
-        .button-content:hover::after {
-            transform: scale(1);
-        }
-        .button-content:hover {
-            background: linear-gradient(135deg, #a777e3, #6e8efb);
-            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-            transform: translateY(-4px) scale(1.03);
-        }
-        .button-content:active {
-            transform: translateY(-2px) scale(0.98);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
-        }
-        .text {
-            font-size: 18px;
+        .button-text {
             font-weight: 600;
-            margin-right: 12px;
-            white-space: nowrap;
-            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-            transition: letter-spacing 0.3s ease;
-        }
-        .button-content:hover .text {
-            letter-spacing: 1px;
-        }
-        .share-icon {
-            fill: white;
-            transition:
-                transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-                fill 0.3s ease;
-            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-        }
-        .button-content:hover .share-icon {
-            transform: rotate(180deg) scale(1.1);
-            fill: #ffffff;
-        }
-        .tooltip-content {
-            position: absolute;
-            top: 102%;
-            left: 50%;
-            transform: translateX(-50%) scale(0.8);
-            background: white;
-            border-radius: 15px;
-            padding: 22px;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
-            opacity: 0;
-            visibility: hidden;
-            transition:
-                opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-                transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-                visibility 0.5s ease;
-            z-index: 100;
-            pointer-events: none;
-            backdrop-filter: blur(10px);
-            background: rgba(255, 255, 255, 0.9);
-        }
-        .tooltip-container:hover .tooltip-content {
-            opacity: 1;
-            visibility: visible;
-            transform: translateX(-50%) scale(1);
-            pointer-events: auto;
-        }
-        .social-icons {
-            display: flex;
-            justify-content: space-between;
-            gap: 12px;
-        }
-        .social-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-            background: #f0f0f0;
-            transition:
-                transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-                background 0.3s ease,
-                box-shadow 0.4s ease;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            position: relative;
-            overflow: hidden;
-        }
-        .social-icon::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            background: radial-gradient(
-                circle at center,
-                rgba(255, 255, 255, 0.8) 0%,
-                rgba(255, 255, 255, 0) 70%
-            );
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .social-icon:hover::before {
-            opacity: 1;
-        }
-        .social-icon svg {
-            width: 24px;
-            height: 24px;
-            fill: #333;
-            transition:
-                transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
-                fill 0.3s ease;
-            z-index: 1;
-        }
-        .social-icon:hover {
-            transform: translateY(-5px) scale(1.1);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
-        }
-        .social-icon:active {
-            transform: translateY(-2px) scale(1.05);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-        }
-        .social-icon:hover svg {
-            transform: scale(1.2);
-            fill: white;
+            color: white;
+            font-size: 1.5em; /* Textgröße anpassen */
         }
     </style>
+</head>
+<body>
+    <!-- Ladeanimation -->
+    <div class="loader-container">
+        <l-quantum
+            size="90"
+            speed="1.75"
+            color="black" 
+        ></l-quantum>
+    </div>
+
+    <h1><img src="/icons/Controller.png" height="150svh"><br/>Creative Crafter</h1>
+    <h1>Flappy Witch</h1>
+    <div align='center'><img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250vh"></div>
+    <br/>
+    <div align='center'><a href="/programmieren/spiele/Flappy-Witch/FlappyWitch.html">
+        <button class="button">
+            <span class="button-text">Play</span>
+        </button>
+    </a>
+    <br/><br/>
+    <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/>
+    <div align='center'><img src="/programmieren/spiele/Flappy-Witch/FlappyWitch1.png" width="250vh"> <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch2.png" width="250vh"></div>
     <script>
-        function openPopup() {
-            document.getElementById('popup').style.display = 'block';
-        }
-        function closePopup() {
-            document.getElementById('popup').style.display = 'none';
-        }
-        function shareText(app) {
-            const text = 'www.creative-crafter.de[_{{{CITATION{{{_1{](https://github.com/hd-code/pandoc-docker/tree/07f83c6deeafbff1710c5f7992a97955c298ad61/example%2Fexample.md)[_{{{CITATION{{{_2{](https://github.com/AndreasHeine/opcua-sub-to-websocket/tree/b272dca8c8abf371e5e35f05ce93949bdb775723/README.md)
\ No newline at end of file
+        // Ladeanimation beim Laden der Seite anzeigen
+        document.body.classList.add('loading');
+        // Ladeanimation entfernen, wenn die Seite vollständig geladen ist
+        window.addEventListener('load', () => {
+            document.body.classList.remove('loading');
+        });
+    </script>
+</body>
+</html>
+```[_{{{CITATION{{{_1{](https://github.com/hd-code/pandoc-docker/tree/07f83c6deeafbff1710c5f7992a97955c298ad61/example%2Fexample.md)[_{{{CITATION{{{_2{](https://github.com/AndreasHeine/opcua-sub-to-websocket/tree/b272dca8c8abf371e5e35f05ce93949bdb775723/README.md)
\ No newline at end of file