br0tkasten/test.creative-crafter.de
1
0
Fork 0
Code

neu

Browse Source
This commit is contained in:
matt 2025-02-01 15:40:06 +01:00
parent 5268934bac
commit a37c35edca
4 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/email-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
icons/telegram-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
icons/whatsapp-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 73 KiB

77
programmieren/spiele/Flappy-Witch/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <!-- Changed language to English --> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Crafter</title> <title>Creative Crafter</title>
<!-- Loading Animation --> <!-- Ladeanimation -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
<!-- Stylesheet --> <!-- Stylesheet -->
<style> <style>
@ -23,7 +23,7 @@
h1, h2 { text-align: center; } h1, h2 { text-align: center; }
/* Loading Animation */ /* Ladeanimation */
.loader-container { .loader-container {
display: none; display: none;
justify-content: center; justify-content: center;
@ -39,7 +39,7 @@
.loading .loader-container { display: flex; } .loading .loader-container { display: flex; }
/* Button Styles */ /* Button-Stile */
.button { .button {
--white: #fff; --white: #fff;
cursor: pointer; cursor: pointer;
@ -83,7 +83,7 @@
stroke: #592cd6; stroke: #592cd6;
margin-top: -2px; margin-top: -2px;
z-index: 4; z-index: 4;
/* Removed rotation for the share icon */ /* Für das Teilen-Icon die Rotation entfernen */
} }
.content { .content {
@ -152,7 +152,7 @@
100% { transform: translateY(-70%); opacity: 0; filter: blur(3px); } 100% { transform: translateY(-70%); opacity: 0; filter: blur(3px); }
} }
/* Modal Styles */ /* Modal-Stile */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@ -208,28 +208,28 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Loading Animation --> <!-- Ladeanimation -->
<div class="loader-container"> <div class="loader-container">
<l-quantum size="90" speed="1.75" color="black"></l-quantum> <l-quantum size="90" speed="1.75" color="black"></l-quantum>
</div> </div>
<h1><img src="/icons/Controller.png" height="150" alt="Controller Icon"><br/>Creative Crafter</h1> <h1><img src="/icons/Controller.png" height="150"><br/>Creative Crafter</h1>
<h1>Flappy Witch</h1> <h1>Flappy Witch</h1>
<div align='center'> <div align='center'>
<img src="/programming/games/Flappy-Witch/logo.png" width="250" alt="Flappy Witch Logo"> <img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250">
</div> </div>
<br/> <br/>
<div align='center'> <div align='center'>
<!-- Play Button --> <!-- Spielen-Button -->
<a href="/programming/games/Flappy-Witch/FlappyWitch.html"> <a href="/programmieren/spiele/Flappy-Witch/FlappyWitch.html">
<img src="/icons/play-button.png" width="500" alt="Play Button"> <img src="/icons/spielen-button.png" width="500">
</a> </a>
<br/><br/> <br/><br/>
<!-- New Share Button --> <!-- Neuer Teilen-Button -->
<button class="button" onclick="openSharePopup()"> <button class="button" onclick="openSharePopup()">
<div class="icon-container"> <div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon"> <svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Share Icon --> <!-- Teilen-Icon -->
<path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"></path> <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"></path>
<polyline points="16 6 12 2 8 6"></polyline> <polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line> <line x1="12" y1="2" x2="12" y2="15"></line>
@ -237,83 +237,84 @@
</div> </div>
<div class="content"> <div class="content">
<div class="letters"> <div class="letters">
<span data-label="S" style="--i:0;">S</span> <span data-label="T" style="--i:0;">T</span>
<span data-label="h" style="--i:1;">h</span> <span data-label="e" style="--i:1;">e</span>
<span data-label="a" style="--i:2;">a</span> <span data-label="i" style="--i:2;">i</span>
<span data-label="r" style="--i:3;">r</span> <span data-label="l" style="--i:3;">l</span>
<span data-label="e" style="--i:4;">e</span> <span data-label="e" style="--i:4;">e</span>
<span data-label="n" style="--i:5;">n</span>
</div> </div>
</div> </div>
</button> </button>
</div> </div>
<!-- Share Modal Popup --> <!-- Popup-Fenster zum Teilen -->
<div id="shareModal" class="modal"> <div id="shareModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close" onclick="closeSharePopup()">&times;</span> <span class="close" onclick="closeSharePopup()">&times;</span>
<h2>Share via:</h2> <h2>Share with:</h2>
<div class="social-icons"> <div class="social-icons">
<a href="#" onclick="shareViaWhatsApp()"> <a href="#" onclick="shareViaWhatsApp()">
<img src="/icons/whatsapp-icon.png" alt="WhatsApp"> <img src="/icons/whatsapp-icon.png" alt="WhatsApp" />
</a> </a>
<a href="#" onclick="shareViaTelegram()"> <a href="#" onclick="shareViaTelegram()">
<img src="/icons/telegram-icon.png" alt="Telegram"> <img src="/icons/telegram-icon.png" alt="Telegram" />
</a> </a>
<a href="#" onclick="shareViaEmail()"> <a href="#" onclick="shareViaEmail()">
<img src="/icons/email-icon.png" alt="Email"> <img src="/icons/email-icon.png" alt="E-Mail" />
</a> </a>
<!-- Add more sharing options here --> <!-- Weitere Sharing-Optionen kannst du hier hinzufügen -->
</div> </div>
</div> </div>
</div> </div>
<br/><br/><br/> <br/><br/><br/>
<div align='center'> <div align='center'>
<img src="/programming/games/Flappy-Witch/FlappyWitch1.png" width="250" alt="Flappy Witch Screenshot 1"> <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch1.png" width="250">
<img src="/programming/games/Flappy-Witch/FlappyWitch2.png" width="250" alt="Flappy Witch Screenshot 2"> <img src="/programmieren/spiele/Flappy-Witch/FlappyWitch2.png" width="250">
</div> </div>
<!-- JavaScript for Loading Animation and Sharing Functions --> <!-- JavaScript für Ladeanimation und Teilen-Funktion -->
<script> <script>
// Show loading animation when the page is loading // Ladeanimation beim Laden der Seite anzeigen
document.body.classList.add('loading'); document.body.classList.add('loading');
// Remove loading animation when the page is fully loaded // Ladeanimation entfernen, wenn die Seite vollständig geladen ist
window.addEventListener('load', () => { window.addEventListener('load', () => {
document.body.classList.remove('loading'); document.body.classList.remove('loading');
}); });
// Function to open the share popup // Funktion zum Öffnen des Popup-Fensters
function openSharePopup() { function openSharePopup() {
document.getElementById("shareModal").style.display = "block"; document.getElementById("shareModal").style.display = "block";
} }
// Function to close the share popup // Funktion zum Schließen des Popup-Fensters
function closeSharePopup() { function closeSharePopup() {
document.getElementById("shareModal").style.display = "none"; document.getElementById("shareModal").style.display = "none";
} }
// Share via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/Flappy-Witch/'); 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; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Share via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/Flappy-Witch/'); 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; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Share via Email // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Flappy Witch'); const subject = encodeURIComponent('Flappy Witch');
const body = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/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; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
// Close the popup when clicking outside of it // Schließt das Popup bei Klick außerhalb des Inhalts
window.onclick = function(event) { window.onclick = function(event) {
const modal = document.getElementById('shareModal'); const modal = document.getElementById('shareModal');
if (event.target == modal) { if (event.target == modal) {