|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tossi's Nuttenhürden Welt</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
@keyframes flicker { |
|
|
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
20%, 22%, 24%, 55% { |
|
|
opacity: 0.7; |
|
|
} |
|
|
} |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) rotate(-2deg); } |
|
|
50% { transform: translateY(-10px) rotate(2deg); } |
|
|
} |
|
|
.tossi-animation { |
|
|
animation: tossiDance 2s infinite; |
|
|
} |
|
|
.egg-spin { |
|
|
transition: transform 0.5s; |
|
|
} |
|
|
.egg-spin:hover { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
.chocolate-bite { |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.chocolate-bite:active { |
|
|
transform: scale(0.9); |
|
|
} |
|
|
.wood-chip { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #8B4513; |
|
|
opacity: 0; |
|
|
transition: all 1s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-b from-gray-900 to-gray-800 min-h-screen font-sans bg-[url('https://i.imgur.com/JQ1ZQ9j.png')] bg-blend-overlay"> |
|
|
<header class="bg-gradient-to-b from-black to-gray-900 text-gray-100 p-6 shadow-xl border-b border-gray-700 backdrop-blur-lg"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-red-900 rounded-full flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-skull text-2xl text-yellow-400"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-yellow-500 font-serif tracking-wider"> |
|
|
Tossi's Katakomben |
|
|
</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4 mt-4 md:mt-0"> |
|
|
<button id="voiceBtn" class="bg-gradient-to-br from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 px-6 py-3 rounded-lg flex items-center border border-gray-700 shadow-lg transition-all duration-300 hover:shadow-red-900/30"> |
|
|
<i class="fas fa-skull mr-3 text-lg text-red-500"></i> Stimmen der Toten |
|
|
</button> |
|
|
<button id="huerdenBtn" class="bg-gradient-to-br from-red-900 to-red-800 hover:from-red-800 hover:to-red-700 px-6 py-3 rounded-lg flex items-center border border-yellow-600/50 shadow-lg transition-all duration-300 hover:shadow-yellow-600/30"> |
|
|
<i class="fas fa-bone mr-3 text-lg text-yellow-400"></i> Hürden sie mal! |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto p-6 max-w-7xl"> |
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="relative group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-red-900/30 to-yellow-600/20 rounded-3xl blur-lg group-hover:blur-xl transition-all duration-500 -z-10"></div> |
|
|
<div class="relative overflow-hidden rounded-3xl border-2 border-gray-700/50 shadow-2xl"> |
|
|
<img src="https://i.imgur.com/JQ1ZQ9j.png" alt="Tossi" |
|
|
class="w-full max-w-2xl object-cover grayscale hover:grayscale-0 transition-all duration-700 transform group-hover:scale-105"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 text-center"> |
|
|
<h2 class="text-3xl font-bold text-yellow-400 mb-2">Der Schädelkönig</h2> |
|
|
<p class="text-gray-300 font-medium">Herrscher der Katakomben</p> |
|
|
</div> |
|
|
<div class="absolute top-6 right-6 bg-gradient-to-br from-red-900 to-yellow-600 p-3 rounded-full shadow-lg"> |
|
|
<i class="fas fa-crown text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-900/80 to-black/80 p-8 rounded-xl shadow-2xl hover:shadow-red-900/30 transition-all duration-500 border border-gray-800/50 hover:border-red-900/50 backdrop-blur-lg group"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-red-500"> |
|
|
<i class="fas fa-skull mr-3 text-red-500"></i> Schädelsuppe |
|
|
</h2> |
|
|
<button id="eatEgg" class="bg-gradient-to-br from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-yellow-400 px-4 py-2 rounded-lg text-sm border border-gray-700 shadow-md hover:shadow-red-500/20 transition-all"> |
|
|
Jetzt schlürfen |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-center relative mb-6"> |
|
|
<div class="absolute inset-0 bg-red-900/10 rounded-xl blur-md group-hover:blur-lg transition-all duration-500"></div> |
|
|
<img id="eggImage" src="https://i.imgur.com/JQ1ZQ9j.png" |
|
|
alt="Schädelsuppe" class="egg-spin w-40 h-40 object-contain grayscale group-hover:grayscale-0 transition-all duration-700 transform group-hover:scale-110"> |
|
|
</div> |
|
|
<p id="eggCounter" class="text-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-red-500"> |
|
|
0 Schädel geleert |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-amber-900"> |
|
|
<i class="fas fa-tree mr-2"></i> Holz schnitzen |
|
|
</h2> |
|
|
<button id="carveWood" class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded-full text-sm"> |
|
|
Schnitzen |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative h-32 flex justify-center items-center"> |
|
|
<img id="woodImage" src="https://placeholder.pics/svg/100x100/DEDEDE/555555/HOLZ" |
|
|
alt="Holz" class="w-24 h-24 object-contain"> |
|
|
<div id="woodChips"></div> |
|
|
</div> |
|
|
<p id="woodCounter" class="text-center mt-2 text-amber-800 font-semibold">0 Mal geschnitzt</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-amber-900"> |
|
|
<i class="fas fa-candy-cane mr-2"></i> Schoki mampfen |
|
|
</h2> |
|
|
<button id="eatChocolate" class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded-full text-sm"> |
|
|
Mampfen |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<img id="chocolateImage" src="https://placeholder.pics/svg/150x150/DEDEDE/555555/SCHOKI" |
|
|
alt="Schokolade" class="chocolate-bite w-32 h-32 object-contain"> |
|
|
</div> |
|
|
<p id="chocolateCounter" class="text-center mt-2 text-amber-800 font-semibold">0 Schokis gemampft</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black/80 text-white p-6 rounded-lg shadow-lg border border-gray-800 backdrop-blur-sm"> |
|
|
<h2 class="text-2xl font-bold mb-4 text-center text-red-700 font-serif tracking-wider"> |
|
|
<i class="fas fa-skull mr-2 text-gray-400"></i> Tossi's Totenflüstern |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg border border-yellow-600"> |
|
|
<p class="italic text-red-300">"Hürden sie mal - ins Grab!"</p> |
|
|
<p class="text-right text-yellow-400 mt-2">- Tossi, im Totenreich</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg border border-yellow-600"> |
|
|
<p class="italic text-red-300">"Ihr könnt mich mal am verwesten Tösschen lecken!"</p> |
|
|
<p class="text-right text-yellow-400 mt-2">- Tossi, aus dem Jenseits</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg md:col-span-2 border border-yellow-600"> |
|
|
<p class="italic text-red-300">"Erstmal Schädelsuppe schlürfen, Knochen schnitzen und Blut mampfen - dann folgt ihr mir ins Reich der Toten!"</p> |
|
|
<p class="text-right text-yellow-400 mt-2">- Tossi's Todesmotto</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="bg-black/90 text-gray-500 p-4 mt-8 border-t border-gray-800 text-sm"> |
|
|
<div class="container mx-auto text-center"> |
|
|
<p>© 2023 Tossi's Schädelhürden GmbH - Alle Rechte verwest, besonders das Recht auf Totenschädel</p> |
|
|
<p class="text-sm mt-2">Made with <i class="fas fa-heart text-red-600"></i> and <i class="fas fa-skull text-yellow-400"></i> by Tossi's Toten Hürden</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<audio id="voiceAudio" src="https://www.soundjay.com/mechanical/sounds/cuckoo-clock-01.mp3"></audio> |
|
|
<audio id="huerdenAudio" src="https://www.soundjay.com/mechanical/sounds/cuckoo-clock-02.mp3"></audio> |
|
|
<audio id="eatAudio" src="https://www.soundjay.com/human/sounds/bite-01.mp3"></audio> |
|
|
<audio id="carveAudio" src="https://www.soundjay.com/mechanical/sounds/axe-chop-01.mp3"></audio> |
|
|
|
|
|
<script> |
|
|
|
|
|
let eggCount = 0; |
|
|
let woodCount = 0; |
|
|
let chocolateCount = 0; |
|
|
|
|
|
|
|
|
const eggBtn = document.getElementById('eatEgg'); |
|
|
const woodBtn = document.getElementById('carveWood'); |
|
|
const chocolateBtn = document.getElementById('eatChocolate'); |
|
|
const voiceBtn = document.getElementById('voiceBtn'); |
|
|
const huerdenBtn = document.getElementById('huerdenBtn'); |
|
|
const eggImage = document.getElementById('eggImage'); |
|
|
const woodImage = document.getElementById('woodImage'); |
|
|
const chocolateImage = document.getElementById('chocolateImage'); |
|
|
const woodChips = document.getElementById('woodChips'); |
|
|
|
|
|
|
|
|
const voiceAudio = document.getElementById('voiceAudio'); |
|
|
const huerdenAudio = document.getElementById('huerdenAudio'); |
|
|
const eatAudio = document.getElementById('eatAudio'); |
|
|
const carveAudio = document.getElementById('carveAudio'); |
|
|
|
|
|
|
|
|
eggBtn.addEventListener('click', eatEgg); |
|
|
woodBtn.addEventListener('click', carveWood); |
|
|
chocolateBtn.addEventListener('click', eatChocolate); |
|
|
voiceBtn.addEventListener('click', playVoice); |
|
|
huerdenBtn.addEventListener('click', playHuerden); |
|
|
|
|
|
|
|
|
function eatEgg() { |
|
|
eggCount++; |
|
|
document.getElementById('eggCounter').textContent = `${eggCount} Eierlasat gegessen`; |
|
|
|
|
|
|
|
|
eggImage.classList.add('egg-spin'); |
|
|
setTimeout(() => eggImage.classList.remove('egg-spin'), 500); |
|
|
|
|
|
|
|
|
eatAudio.currentTime = 0; |
|
|
eatAudio.play(); |
|
|
|
|
|
|
|
|
if (eggCount === 3) { |
|
|
eggImage.src = "https://placeholder.pics/svg/150x150/DEDEDE/555555/LEER"; |
|
|
setTimeout(() => { |
|
|
eggImage.src = "https://placeholder.pics/svg/150x150/DEDEDE/555555/EIERLASAT"; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
function carveWood() { |
|
|
woodCount++; |
|
|
document.getElementById('woodCounter').textContent = `${woodCount} Mal geschnitzt`; |
|
|
|
|
|
|
|
|
carveAudio.currentTime = 0; |
|
|
carveAudio.play(); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
|
const chip = document.createElement('div'); |
|
|
chip.classList.add('wood-chip'); |
|
|
|
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
|
const distance = 30 + Math.random() * 30; |
|
|
const x = Math.cos(angle) * distance; |
|
|
const y = Math.sin(angle) * distance; |
|
|
|
|
|
chip.style.left = `calc(50% + ${x}px)`; |
|
|
chip.style.top = `calc(50% + ${y}px)`; |
|
|
chip.style.opacity = '1'; |
|
|
chip.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
|
|
|
woodChips.appendChild(chip); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
chip.style.opacity = '0'; |
|
|
chip.style.transform += ' translateY(-20px)'; |
|
|
setTimeout(() => chip.remove(), 1000); |
|
|
}, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
function eatChocolate() { |
|
|
chocolateCount++; |
|
|
document.getElementById('chocolateCounter').textContent = `${chocolateCount} Schokis gemampft`; |
|
|
|
|
|
|
|
|
eatAudio.currentTime = 0; |
|
|
eatAudio.play(); |
|
|
|
|
|
|
|
|
const biteSize = 10 + Math.random() * 20; |
|
|
chocolateImage.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, ${100 - biteSize}% 100%, ${100 - biteSize}% ${biteSize}%, 0 ${biteSize}%)`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
chocolateImage.style.clipPath = ''; |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
function playVoice() { |
|
|
voiceAudio.currentTime = 0; |
|
|
voiceAudio.play(); |
|
|
|
|
|
|
|
|
showNotification("Stimmen im Kopf: 'Tossi, du bist der Beste!'"); |
|
|
} |
|
|
|
|
|
function playHuerden() { |
|
|
huerdenAudio.currentTime = 0; |
|
|
huerdenAudio.play(); |
|
|
|
|
|
|
|
|
showNotification("Tossi sagt: 'Hürden sie mal! Ihr könnt mich mal am Tösschen lecken!'"); |
|
|
} |
|
|
|
|
|
function showNotification(message) { |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed bottom-4 right-4 bg-amber-700 text-white px-4 py-2 rounded-lg shadow-lg animate-bounce'; |
|
|
notification.textContent = message; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('animate-bounce'); |
|
|
notification.classList.add('opacity-0', 'transition-opacity', 'duration-500'); |
|
|
setTimeout(() => notification.remove(), 500); |
|
|
}, 3000); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flausch/tossi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
