neu

programmieren/spiele/Flappy-Witch/index.html

@@ -4,11 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Creative Crafter</title>
+    <!-- Ladeanimation -->
     <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
-    <!-- Entferne leeren Link zum Stylesheet -->
+    <!-- Stylesheet -->
-    <!-- <link href="" rel="stylesheet"> -->
     <style>
         @font-face { font-family: "Titillium"; src: url("/Titillium-Web-Regular.ttf"); }
+
         body, html {
             font-family: 'Titillium';
             height: 100%;
@@ -19,7 +20,10 @@
             text-align: center;
             background-color: #e6f7ff;
         }
+
         h1, h2 { text-align: center; }
+
+        /* Ladeanimation */
         .loader-container {
             display: none;
             justify-content: center;
@@ -32,7 +36,10 @@
             background-color: rgba(173, 216, 230, 0.8);
             z-index: 9999;
         }
+
         .loading .loader-container { display: flex; }
+
+        /* Button-Stile */
         .button {
             --white: #fff;
             cursor: pointer;
@@ -50,18 +57,153 @@
             gap: 8px;
             margin-top: 20px;
         }
-        /* Icon- und Animationsstile bleiben unverändert */
+
-        .icon path.bm { /* ... */ }
+        .icon path.bm {
-        /* ... weitere vorhandene CSS-Stile ... */
+            stroke-dasharray: 3;
-        /* Anpassungen für den Teilen-Button */
+            stroke-dashoffset: 3;
-        .button .icon-container .icon {
+            stroke-width: 1px;
+            transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
+        }
+
+        .icon-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 10px;
+            background-color: #fff;
+            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;
+        }
+
+        .icon-container .icon {
             width: 25px;
             height: 30px;
             stroke: #592cd6;
             margin-top: -2px;
             z-index: 4;
-            /* Entferne die Rotation für das Teilen-Icon */
+            /* Für das Teilen-Icon die Rotation entfernen */
-            /* transform: rotate(180deg); */
+        }
+
+        .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;
+            transition: all 0.3s ease;
+        }
+
+        .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;
+            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 .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); }
+        }
+
+        /* Modal-Stile */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.5);
+        }
+
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 400px;
+            text-align: center;
+            border-radius: 10px;
+        }
+
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: black;
+        }
+
+        .social-icons {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .social-icons a img {
+            width: 60px;
+            height: 60px;
+            transition: transform 0.2s;
+        }
+
+        .social-icons a img:hover {
+            transform: scale(1.1);
         }
     </style>
 </head>
@@ -71,20 +213,20 @@
         <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><img src="/icons/Controller.png" height="150"><br/>Creative Crafter</h1>
     <h1>Flappy Witch</h1>
     <div align='center'>
-        <img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250vh">
+        <img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250">
     </div>
     <br/>
     <div align='center'>
         <!-- Spielen-Button -->
         <a href="/programmieren/spiele/Flappy-Witch/FlappyWitch.html">
-            <img src="/icons/spielen-button.png" width="500vh">
+            <img src="/icons/spielen-button.png" width="500">
         </a>
         <br/><br/>
         <!-- Neuer Teilen-Button -->
-        <button class="button" onclick="shareText()">
+        <button class="button" onclick="openSharePopup()">
             <div class="icon-container">
                 <svg viewBox="0 0 24 24" fill="none" class="icon">
                     <!-- Teilen-Icon -->
@@ -105,11 +247,33 @@
             </div>
         </button>
     </div>
+
+    <!-- Popup-Fenster zum Teilen -->
+    <div id="shareModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeSharePopup()">&times;</span>
+            <h2>Teilen über:</h2>
+            <div class="social-icons">
+                <a href="#" onclick="shareViaWhatsApp()">
+                    <img src="/icons/whatsapp-icon.png" alt="WhatsApp" />
+                </a>
+                <a href="#" onclick="shareViaTelegram()">
+                    <img src="/icons/telegram-icon.png" alt="Telegram" />
+                </a>
+                <a href="#" onclick="shareViaEmail()">
+                    <img src="/icons/email-icon.png" alt="E-Mail" />
+                </a>
+                <!-- Weitere Sharing-Optionen kannst du hier hinzufügen -->
+            </div>
+        </div>
+    </div>
+
     <br/><br/><br/>
     <div align='center'>
-        <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch1.png" width="250vh">
+        <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch1.png" width="250">
-        <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch2.png" width="250vh">
+        <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch2.png" width="250">
     </div>
+
     <!-- JavaScript für Ladeanimation und Teilen-Funktion -->
     <script>
         // Ladeanimation beim Laden der Seite anzeigen
@@ -118,24 +282,43 @@
         window.addEventListener('load', () => {
             document.body.classList.remove('loading');
         });
-s
-        // Teilen-Funktion
-        function shareText() {
-            const shareData = {
-                title: 'Flappy Witch',
-                text: 'Schau dir dieses fantastische Spiel an!',
-                url: 'https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'
-            };
 
-            if (navigator.share) {
+        // Funktion zum Öffnen des Popup-Fensters
-                navigator.share(shareData)
+        function openSharePopup() {
-                    .then(() => console.log('Erfolgreich geteilt'))
+            document.getElementById("shareModal").style.display = "block";
-                    .catch((error) => console.log('Fehler beim Teilen', error));
+        }
-            } else {
+
-                // Fallback für Browser ohne Web Share API
+        // Funktion zum Schließen des Popup-Fensters
-                // Öffnet den WhatsApp-Share-Link
+        function closeSharePopup() {
-                const whatsappUrl = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(shareData.text + ' ' + shareData.url);
+            document.getElementById("shareModal").style.display = "none";
-                window.open(whatsappUrl, '_blank');
+        }
+
+        // Teilen via WhatsApp
+        function shareViaWhatsApp() {
+            const text = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/');
+            const url = 'https://api.whatsapp.com/send?text=' + text;
+            window.open(url, '_blank');
+        }
+
+        // Teilen via Telegram
+        function shareViaTelegram() {
+            const text = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/');
+            const url = 'https://t.me/share/url?url=' + text;
+            window.open(url, '_blank');
+        }
+
+        // Teilen via E-Mail
+        function shareViaEmail() {
+            const subject = encodeURIComponent('Flappy Witch');
+            const body = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/');
+            window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
+        }
+
+        // Schließt das Popup bei Klick außerhalb des Inhalts
+        window.onclick = function(event) {
+            const modal = document.getElementById('shareModal');
+            if (event.target == modal) {
+                closeSharePopup();
             }
         }
     </script>