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

neu

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

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

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="en"> <!-- Changed language to English -->
<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>
<!-- Ladeanimation --> <!-- Loading Animation -->
<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; }
/* Ladeanimation */ /* Loading Animation */
.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-Stile */ /* Button Styles */
.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;
/* Für das Teilen-Icon die Rotation entfernen */ /* Removed rotation for the share icon */
} }
.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-Stile */ /* Modal Styles */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@ -208,28 +208,28 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Ladeanimation --> <!-- Loading Animation -->
<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"><br/>Creative Crafter</h1> <h1><img src="/icons/Controller.png" height="150" alt="Controller Icon"><br/>Creative Crafter</h1>
<h1>Flappy Witch</h1> <h1>Flappy Witch</h1>
<div align='center'> <div align='center'>
<img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250"> <img src="/programming/games/Flappy-Witch/logo.png" width="250" alt="Flappy Witch Logo">
</div> </div>
<br/> <br/>
<div align='center'> <div align='center'>
<!-- Spielen-Button --> <!-- Play Button -->
<a href="/programmieren/spiele/Flappy-Witch/FlappyWitch.html"> <a href="/programming/games/Flappy-Witch/FlappyWitch.html">
<img src="/icons/spielen-button.png" width="500"> <img src="/icons/play-button.png" width="500" alt="Play Button">
</a> </a>
<br/><br/> <br/><br/>
<!-- Neuer Teilen-Button --> <!-- New Share 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">
<!-- Teilen-Icon --> <!-- Share 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,84 +237,83 @@
</div> </div>
<div class="content"> <div class="content">
<div class="letters"> <div class="letters">
<span data-label="T" style="--i:0;">T</span> <span data-label="S" style="--i:0;">S</span>
<span data-label="e" style="--i:1;">e</span> <span data-label="h" style="--i:1;">h</span>
<span data-label="i" style="--i:2;">i</span> <span data-label="a" style="--i:2;">a</span>
<span data-label="l" style="--i:3;">l</span> <span data-label="r" style="--i:3;">r</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>
<!-- Popup-Fenster zum Teilen --> <!-- Share Modal Popup -->
<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>Teilen über:</h2> <h2>Share via:</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="E-Mail" /> <img src="/icons/email-icon.png" alt="Email">
</a> </a>
<!-- Weitere Sharing-Optionen kannst du hier hinzufügen --> <!-- Add more sharing options here -->
</div> </div>
</div> </div>
</div> </div>
<br/><br/><br/> <br/><br/><br/>
<div align='center'> <div align='center'>
<img src="/programmieren/spiele/Flappy-Witch/FlappyWitch1.png" width="250"> <img src="/programming/games/Flappy-Witch/FlappyWitch1.png" width="250" alt="Flappy Witch Screenshot 1">
<img src="/programmieren/spiele/Flappy-Witch/FlappyWitch2.png" width="250"> <img src="/programming/games/Flappy-Witch/FlappyWitch2.png" width="250" alt="Flappy Witch Screenshot 2">
</div> </div>
<!-- JavaScript für Ladeanimation und Teilen-Funktion --> <!-- JavaScript for Loading Animation and Sharing Functions -->
<script> <script>
// Ladeanimation beim Laden der Seite anzeigen // Show loading animation when the page is loading
document.body.classList.add('loading'); document.body.classList.add('loading');
// Ladeanimation entfernen, wenn die Seite vollständig geladen ist // Remove loading animation when the page is fully loaded
window.addEventListener('load', () => { window.addEventListener('load', () => {
document.body.classList.remove('loading'); document.body.classList.remove('loading');
}); });
// Funktion zum Öffnen des Popup-Fensters // Function to open the share popup
function openSharePopup() { function openSharePopup() {
document.getElementById("shareModal").style.display = "block"; document.getElementById("shareModal").style.display = "block";
} }
// Funktion zum Schließen des Popup-Fensters // Function to close the share popup
function closeSharePopup() { function closeSharePopup() {
document.getElementById("shareModal").style.display = "none"; document.getElementById("shareModal").style.display = "none";
} }
// Teilen via WhatsApp // Share via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'); const text = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/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');
} }
// Teilen via Telegram // Share via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'); const text = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/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');
} }
// Teilen via E-Mail // Share via Email
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Flappy Witch'); const subject = encodeURIComponent('Flappy Witch');
const body = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://www.creative-crafter.de/programmieren/spiele/Flappy-Witch/'); const body = encodeURIComponent('Check out this fantastic game! https://www.creative-crafter.de/programming/games/Flappy-Witch/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
// Schließt das Popup bei Klick außerhalb des Inhalts // Close the popup when clicking outside of it
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) {