<!DOCTYPE html>
<html lang="de">
<head>
<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>
<!-- 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; }
/* Ladeanimation */
.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-Stile */
.button {
--white: #fff;
cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff);
color: #fff;
border: 1px solid #af93ff;
border-radius: 8px;
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;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.icon path.bm {
stroke-dasharray: 3;
stroke-dashoffset: 3;
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;
/* Für das Teilen-Icon die Rotation entfernen */
}
.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>
<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="150"><br/>Creative Crafter</h1>
<h1>Flappy Witch</h1>
<div align='center'>
<img src="/programmieren/spiele/Flappy-Witch/logo.png" width="250">
</div>
<br/>
<div align='center'>
<!-- Spielen-Button -->
<style>
/* Stil für den Button mit eindeutiger Klasse */
.unique-button {
transform: scale(4);
background: linear-gradient(to bottom, #606060, #505050); /* Grau Hintergrund */
border-radius: 12px;
padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
transition: all 200ms;
}
.unique-button:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
.unique-button:active {
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.8);
transform: scale(0.995);
}
/* Stil für den inneren Button-Text */
.unique-button .button-inner {
background: linear-gradient(to bottom, #0000FF, #0000CD); /* Blau Hintergrund für den inneren Bereich */
border-radius: 8px;
padding: 10px 20px;
}
.unique-button .button-text {
color: white;
font-size: 16px;
font-weight: bold;
}
</style>
<div class="flex justify-center items-center gap-12 h-full">
<div class="bg-gradient-to-b from-gray-800/40 to-transparent p-[4px] rounded-[16px]">
<button class="unique-button" onclick="window.location.href='/programmieren/spiele/Flappy-Witch/FlappyWitch.html'">
<div class="button-inner">
<span class="button-text">Get Started</span>
</div>
</button>
</div>
</div>
</button>
</a>
<br/><br/>
<!-- Neuer Teilen-Button -->
<button class="button" onclick="openSharePopup()">
<div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Teilen-Icon -->
<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>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
</div>
<div class="content">
<div class="letters">
<span data-label="S" style="--i:0;">S</span>
<span data-label="h" style="--i:1;">h</span>
<span data-label="a" style="--i:2;">a</span>
<span data-label="r" style="--i:3;">r</span>
<span data-label="e" style="--i:4;">e</span>
</div>
</div>
</button>
</div>
<!-- Popup-Fenster zum Teilen -->
<div id="shareModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeSharePopup()">×</span>
<h2>Share with:</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="250">
<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
document.body.classList.add('loading');
// Ladeanimation entfernen, wenn die Seite vollständig geladen ist
window.addEventListener('load', () => {
document.body.classList.remove('loading');
});
// Funktion zum Öffnen des Popup-Fensters
function openSharePopup() {
document.getElementById("shareModal").style.display = "block";
}
// Funktion zum Schließen des Popup-Fensters
function closeSharePopup() {
document.getElementById("shareModal").style.display = "none";
}
// Teilen via WhatsApp
function shareViaWhatsApp() {
const text = encodeURIComponent('Schau dir dieses fantastische Spiel an! https://test.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://test.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://test.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>
</body>
</html>