Spaces:

flausch
/

tossi

Running

App Files Files Community

flausch commited on 26 days ago

Commit

221dc88

verified ·

1 Parent(s): a39f388

überdenke die komplette page nocheinmal und versuche einen anderen ansatz - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +320 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tossi
-emoji: 🏢
-colorFrom: green
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tossi
+emoji: 🐳
+colorFrom: pink
 colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,320 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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">
+        <!-- Tossi's Portrait -->
+        <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>
+        <!-- Activities Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            <!-- Schädelsuppe -->
+            <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>
+            <!-- Holz schnitzen -->
+            <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>
+            <!-- Schokolade mampfen -->
+            <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>
+        <!-- Tossi's Zitate -->
+        <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 Elements -->
+    <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>
+        // Counters
+        let eggCount = 0;
+        let woodCount = 0;
+        let chocolateCount = 0;
+        // DOM Elements
+        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');
+        // Audio Elements
+        const voiceAudio = document.getElementById('voiceAudio');
+        const huerdenAudio = document.getElementById('huerdenAudio');
+        const eatAudio = document.getElementById('eatAudio');
+        const carveAudio = document.getElementById('carveAudio');
+        // Event Listeners
+        eggBtn.addEventListener('click', eatEgg);
+        woodBtn.addEventListener('click', carveWood);
+        chocolateBtn.addEventListener('click', eatChocolate);
+        voiceBtn.addEventListener('click', playVoice);
+        huerdenBtn.addEventListener('click', playHuerden);
+        // Functions
+        function eatEgg() {
+            eggCount++;
+            document.getElementById('eggCounter').textContent = `${eggCount} Eierlasat gegessen`;
+            // Animation
+            eggImage.classList.add('egg-spin');
+            setTimeout(() => eggImage.classList.remove('egg-spin'), 500);
+            // Sound
+            eatAudio.currentTime = 0;
+            eatAudio.play();
+            // Change egg image after 3 clicks
+            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`;
+            // Sound
+            carveAudio.currentTime = 0;
+            carveAudio.play();
+            // Create wood chips
+            for (let i = 0; i < 5; i++) {
+                const chip = document.createElement('div');
+                chip.classList.add('wood-chip');
+                // Random position around the wood
+                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);
+                // Remove chip after animation
+                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`;
+            // Sound
+            eatAudio.currentTime = 0;
+            eatAudio.play();
+            // Bite effect
+            const biteSize = 10 + Math.random() * 20;
+            chocolateImage.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, ${100 - biteSize}% 100%, ${100 - biteSize}% ${biteSize}%, 0 ${biteSize}%)`;
+            // Reset after delay
+            setTimeout(() => {
+                chocolateImage.style.clipPath = '';
+            }, 300);
+        }
+        function playVoice() {
+            voiceAudio.currentTime = 0;
+            voiceAudio.play();
+            // Show notification
+            showNotification("Stimmen im Kopf: 'Tossi, du bist der Beste!'");
+        }
+        function playHuerden() {
+            huerdenAudio.currentTime = 0;
+            huerdenAudio.play();
+            // Show notification
+            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>