Spaces:

ThetaPhiPsi
/

noras-hangman

Running

App Files Files Community

ThetaPhiPsi commited on Apr 13

Commit

6a4c654

verified ·

1 Parent(s): 7dda9ee

Add 1 files

Browse files

Files changed (1) hide show

index.html +241 -19

index.html CHANGED Viewed

@@ -35,6 +35,15 @@
             background-color: #f00;
             opacity: 0;
         }
     </style>
 </head>
 <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans">
@@ -49,25 +58,26 @@
             <div class="flex flex-col md:flex-row gap-8">
                 <!-- Hangman Drawing -->
                 <div class="w-full md:w-1/2 flex flex-col items-center">
-                    <div class="relative w-48 h-48 mb-6">
                         <!-- Gallows -->
-                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800"></div>
-                        <div class="absolute top-0 left-1/4 w-1/2 h-1 bg-gray-800"></div>
-                        <div class="absolute top-0 left-1/4 w-1 h-48 bg-gray-800"></div>
-                        <div class="absolute bottom-0 left-0 w-32 h-1 bg-gray-800"></div>
                         <!-- Hangman Parts -->
-                        <div id="head" class="hangman-part absolute top-8 left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full border-4 border-gray-800"></div>
-                        <div id="body" class="hangman-part absolute top-18 left-1/2 transform -translate-x-1/2 w-1 h-12 bg-gray-800"></div>
-                        <div id="left-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top rotate-45"></div>
-                        <div id="right-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-45"></div>
-                        <div id="left-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top rotate-30"></div>
-                        <div id="right-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-30"></div>
-                        <div id="face" class="hangman-part absolute top-10 left-1/2 transform -translate-x-1/2 flex justify-between w-6">
-                            <div class="w-2 h-2 rounded-full bg-gray-800"></div>
-                            <div class="w-2 h-2 rounded-full bg-gray-800"></div>
                         </div>
-                        <div id="mouth" class="hangman-part absolute top-14 left-1/2 transform -translate-x-1/2 w-4 h-1 bg-gray-800 rounded-full"></div>
                     </div>
                     <div class="text-center">
@@ -107,6 +117,35 @@
             </div>
         </div>
         <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6">
             <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -141,6 +180,11 @@
         </div>
     </footer>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Game words with categories and hints (easy German words)
@@ -152,7 +196,12 @@
                         { word: "KATZE", hint: "Schnurrt und hat weiche Pfoten" },
                         { word: "FISCH", hint: "Schwimmt im Wasser und atmet durch Kiemen" },
                         { word: "VOGEL", hint: "Hat Federn und kann fliegen" },
-                        { word: "MAUS", hint: "Klein, schnell und mag Käse" }
                     ]
                 },
                 schule: {
@@ -162,7 +211,12 @@
                         { word: "STIFT", hint: "Damit schreibt oder malt man" },
                         { word: "TASCHE", hint: "Trägt man auf dem Rücken mit Schulmaterial" },
                         { word: "LEHRER", hint: "Bringt Kindern etwas bei" },
-                        { word: "KREIDE", hint: "Damit schreibt man an die Tafel" }
                     ]
                 },
                 spielzeug: {
@@ -172,7 +226,57 @@
                         { word: "PUPPE", hint: "Sieht aus wie ein Baby oder eine Person" },
                         { word: "AUTO", hint: "Hat Räder und man kann es schieben" },
                         { word: "BAUER", hint: "Damit kann man Türme und Häuser bauen" },
-                        { word: "PUZZLE", hint: "Viele Teile, die zusammengesetzt werden müssen" }
                     ]
                 }
             };
@@ -185,6 +289,9 @@
             let hintUsed = false;
             let currentCategory = "";
             let gameActive = true;
             // DOM elements
             const wordDisplay = document.getElementById('word-display');
@@ -197,10 +304,20 @@
             const hintArea = document.getElementById('hint-area');
             const hintText = document.getElementById('hint-text');
             const categoryDisplay = document.getElementById('category');
             const hangmanParts = [
                 'head', 'body', 'left-arm', 'right-arm',
-                'left-leg', 'right-leg', 'face', 'mouth'
             ];
             // Initialize the game
             function initGame() {
@@ -216,12 +333,17 @@
                 message.classList.add('hidden');
                 newGameButton.classList.add('hidden');
                 hintArea.classList.add('hidden');
                 // Reset hangman
                 hangmanParts.forEach(part => {
                     document.getElementById(part).classList.remove('visible');
                 });
                 // Select a random category
                 const categories = Object.keys(wordCategories);
                 currentCategory = categories[Math.floor(Math.random() * categories.length)];
@@ -237,6 +359,9 @@
                 updateMistakesDisplay();
                 createWordDisplay();
                 createKeyboard();
             }
             // Create the word display with blanks
@@ -294,6 +419,10 @@
                     button.classList.add('bounce');
                     setTimeout(() => button.classList.remove('bounce'), 500);
                     createWordDisplay();
                     checkWin();
                 } else {
@@ -303,6 +432,10 @@
                     button.classList.add('bounce');
                     setTimeout(() => button.classList.remove('bounce'), 500);
                     mistakes++;
                     updateMistakesDisplay();
                     showHangmanPart();
@@ -315,6 +448,12 @@
                 if (mistakes <= hangmanParts.length) {
                     const part = hangmanParts[mistakes - 1];
                     document.getElementById(part).classList.add('visible');
                 }
             }
@@ -345,6 +484,13 @@
                     message.classList.remove('hidden');
                     message.classList.add('bg-green-100', 'text-green-800');
                     newGameButton.classList.remove('hidden');
                     createConfetti();
                 }
             }
@@ -358,6 +504,13 @@
                     message.classList.add('bg-red-100', 'text-red-800');
                     newGameButton.classList.remove('hidden');
                     // Reveal the word
                     revealWord();
                 }
@@ -382,6 +535,63 @@
                 }
             }
             // Show hint
             hintButton.addEventListener('click', function() {
                 if (!hintUsed && gameActive) {
@@ -394,6 +604,17 @@
             // New game button
             newGameButton.addEventListener('click', initGame);
             // Create confetti effect
             function createConfetti() {
                 const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
@@ -425,6 +646,7 @@
             // Start the game
             initGame();
         });
     </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=ThetaPhiPsi/noras-hangman" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

             background-color: #f00;
             opacity: 0;
         }
+        .hangman-face {
+            transition: all 0.3s ease;
+        }
+        .happy-face {
+            transform: rotate(0deg);
+        }
+        .sad-face {
+            transform: rotate(180deg);
+        }
     </style>
 </head>
 <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans">
             <div class="flex flex-col md:flex-row gap-8">
                 <!-- Hangman Drawing -->
                 <div class="w-full md:w-1/2 flex flex-col items-center">
+                    <div class="relative w-64 h-64 mb-6">
                         <!-- Gallows -->
+                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-10 bg-gray-800 rounded"></div>
+                        <div class="absolute top-0 left-1/4 w-1/2 h-1 bg-gray-800 rounded"></div>
+                        <div class="absolute top-0 left-1/4 w-1 h-64 bg-gray-800 rounded"></div>
+                        <div class="absolute bottom-0 left-0 w-40 h-1 bg-gray-800 rounded"></div>
                         <!-- Hangman Parts -->
+                        <div id="head" class="hangman-part absolute top-10 left-1/2 transform -translate-x-1/2 w-12 h-12 rounded-full border-4 border-gray-800">
+                            <div id="face" class="hangman-face happy-face absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-4">
+                                <div class="absolute top-0 left-0 w-2 h-2 bg-gray-800 rounded-full"></div>
+                                <div class="absolute top-0 right-0 w-2 h-2 bg-gray-800 rounded-full"></div>
+                                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4 h-1 bg-gray-800 rounded-full"></div>
+                            </div>
                         </div>
+                        <div id="body" class="hangman-part absolute top-22 left-1/2 transform -translate-x-1/2 w-1 h-16 bg-gray-800 rounded"></div>
+                        <div id="left-arm" class="hangman-part absolute top-24 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-10 bg-gray-800 rounded origin-top rotate-45"></div>
+                        <div id="right-arm" class="hangman-part absolute top-24 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-10 bg-gray-800 rounded origin-top -rotate-45"></div>
+                        <div id="left-leg" class="hangman-part absolute top-38 left-1/2 transform -translate-x-1/2 w-1 h-10 bg-gray-800 rounded origin-top rotate-30"></div>
+                        <div id="right-leg" class="hangman-part absolute top-38 left-1/2 transform -translate-x-1/2 w-1 h-10 bg-gray-800 rounded origin-top -rotate-30"></div>
                     </div>
                     <div class="text-center">
             </div>
         </div>
+        <!-- Game History -->
+        <div id="game-history" class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 mb-8 hidden">
+            <h2 class="text-xl font-bold mb-4 text-center">Deine Spiele</h2>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="bg-gray-100">
+                            <th class="px-4 py-2 text-left">Datum</th>
+                            <th class="px-4 py-2 text-left">Wort</th>
+                            <th class="px-4 py-2 text-left">Ergebnis</th>
+                            <th class="px-4 py-2 text-left">Fehler</th>
+                        </tr>
+                    </thead>
+                    <tbody id="history-table">
+                        <!-- Filled by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+            <div class="mt-4 flex justify-between items-center">
+                <div>
+                    <p class="font-semibold">Statistik:</p>
+                    <p>Gewonnen: <span id="wins">0</span> | Verloren: <span id="losses">0</span></p>
+                </div>
+                <button id="toggle-history" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors">
+                    <i class="fas fa-eye-slash mr-2"></i>Verstecken
+                </button>
+            </div>
+        </div>
         <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6">
             <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         </div>
     </footer>
+    <audio id="correct-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3" preload="auto"></audio>
+    <audio id="wrong-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio>
+    <audio id="win-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio>
+    <audio id="lose-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-sad-game-over-675.mp3" preload="auto"></audio>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Game words with categories and hints (easy German words)
                         { word: "KATZE", hint: "Schnurrt und hat weiche Pfoten" },
                         { word: "FISCH", hint: "Schwimmt im Wasser und atmet durch Kiemen" },
                         { word: "VOGEL", hint: "Hat Federn und kann fliegen" },
+                        { word: "MAUS", hint: "Klein, schnell und mag Käse" },
+                        { word: "PFERD", hint: "Groß, hat eine Mähne und man kann darauf reiten" },
+                        { word: "KUH", hint: "Gibt Milch und sagt 'Muh'" },
+                        { word: "HASE", hint: "Hat lange Ohren und hoppelt" },
+                        { word: "ENTE", hint: "Schwimmt auf dem Teich und sagt 'Quak'" },
+                        { word: "SCHWEIN", hint: "Ist rosa und wühlt im Schlamm" }
                     ]
                 },
                 schule: {
                         { word: "STIFT", hint: "Damit schreibt oder malt man" },
                         { word: "TASCHE", hint: "Trägt man auf dem Rücken mit Schulmaterial" },
                         { word: "LEHRER", hint: "Bringt Kindern etwas bei" },
+                        { word: "KREIDE", hint: "Damit schreibt man an die Tafel" },
+                        { word: "LINEAL", hint: "Gerades Werkzeug zum Zeichnen von Linien" },
+                        { word: "RADIERER", hint: "Damit entfernt man Bleistiftstriche" },
+                        { word: "HEFT", hint: "Hat leere Seiten zum Schreiben" },
+                        { word: "FARBE", hint: "Damit malt man bunte Bilder" },
+                        { word: "SCHERE", hint: "Damit schneidet man Papier" }
                     ]
                 },
                 spielzeug: {
                         { word: "PUPPE", hint: "Sieht aus wie ein Baby oder eine Person" },
                         { word: "AUTO", hint: "Hat Räder und man kann es schieben" },
                         { word: "BAUER", hint: "Damit kann man Türme und Häuser bauen" },
+                        { word: "PUZZLE", hint: "Viele Teile, die zusammengesetzt werden müssen" },
+                        { word: "SEIL", hint: "Langes Ding zum Springen oder Klettern" },
+                        { word: "SPIELKARTEN", hint: "Damit kann man viele verschiedene Spiele spielen" },
+                        { word: "TEDDY", hint: "Weicher Bär zum Kuscheln" },
+                        { word: "SPIELUHR", hint: "Spielt Musik wenn man sie aufzieht" },
+                        { word: "KNETE", hint: "Weiches Material zum Formen von Figuren" }
+                    ]
+                },
+                essen: {
+                    name: "Essen",
+                    words: [
+                        { word: "APFEL", hint: "Rund, rot oder grün und sehr gesund" },
+                        { word: "BANANE", hint: "Länglich, gelb und kommt von Bäumen" },
+                        { word: "BROT", hint: "Wird aus Mehl gebacken und ist meistens braun" },
+                        { word: "KAESE", hint: "Kommt von der Kuh und ist oft gelb" },
+                        { word: "EI", hint: "Kommt von Hühnern und hat eine harte Schale" },
+                        { word: "SUPPE", hint: "Flüssiges Essen, das man löffelt" },
+                        { word: "NUDELN", hint: "Lange, dünne Teigwaren aus Italien" },
+                        { word: "EIS", hint: "Kalt, süß und schmilzt in der Sonne" },
+                        { word: "KEKS", hint: "Klein, knusprig und oft mit Schokolade" },
+                        { word: "MARMELADE", hint: "Süßer Brotaufstrich aus Früchten" }
+                    ]
+                },
+                familie: {
+                    name: "Familie",
+                    words: [
+                        { word: "MAMA", hint: "Die wichtigste Frau in deinem Leben" },
+                        { word: "PAPA", hint: "Der wichtigste Mann in deinem Leben" },
+                        { word: "OMA", hint: "Die Mutter deiner Mutter oder deines Vaters" },
+                        { word: "OPA", hint: "Der Vater deiner Mutter oder deines Vaters" },
+                        { word: "BRUDER", hint: "Ein männliches Geschwisterkind" },
+                        { word: "SCHWESTER", hint: "Ein weibliches Geschwisterkind" },
+                        { word: "TANTE", hint: "Die Schwester deiner Mutter oder deines Vaters" },
+                        { word: "ONKEL", hint: "Der Bruder deiner Mutter oder deines Vaters" },
+                        { word: "COUSIN", hint: "Der Sohn deiner Tante oder deines Onkels" },
+                        { word: "COUSINE", hint: "Die Tochter deiner Tante oder deines Onkels" }
+                    ]
+                },
+                natur: {
+                    name: "Natur",
+                    words: [
+                        { word: "BAUM", hint: "Große Pflanze mit Stamm und Blättern" },
+                        { word: "BLUME", hint: "Schöne Pflanze mit bunten Blüten" },
+                        { word: "GRAS", hint: "Grüne Pflanze, die auf Wiesen wächst" },
+                        { word: "SONNE", hint: "Großer, heißer Stern am Himmel" },
+                        { word: "WOLKE", hint: "Weiß und flauschig am Himmel" },
+                        { word: "REGEN", hint: "Wasser, das vom Himmel fällt" },
+                        { word: "SCHNEE", hint: "Weiß, kalt und fällt im Winter" },
+                        { word: "BERG", hint: "Sehr hoch und man kann ihn besteigen" },
+                        { word: "FLUSS", hint: "Langes, fließendes Gewässer" },
+                        { word: "MEER", hint: "Sehr großes Salzwasser" }
                     ]
                 }
             };
             let hintUsed = false;
             let currentCategory = "";
             let gameActive = true;
+            let gameHistory = JSON.parse(localStorage.getItem('norasGameHistory')) || [];
+            let wins = 0;
+            let losses = 0;
             // DOM elements
             const wordDisplay = document.getElementById('word-display');
             const hintArea = document.getElementById('hint-area');
             const hintText = document.getElementById('hint-text');
             const categoryDisplay = document.getElementById('category');
+            const gameHistorySection = document.getElementById('game-history');
+            const historyTable = document.getElementById('history-table');
+            const winsDisplay = document.getElementById('wins');
+            const lossesDisplay = document.getElementById('losses');
+            const toggleHistoryButton = document.getElementById('toggle-history');
             const hangmanParts = [
                 'head', 'body', 'left-arm', 'right-arm',
+                'left-leg', 'right-leg'
             ];
+            const face = document.getElementById('face');
+            const correctSound = document.getElementById('correct-sound');
+            const wrongSound = document.getElementById('wrong-sound');
+            const winSound = document.getElementById('win-sound');
+            const loseSound = document.getElementById('lose-sound');
             // Initialize the game
             function initGame() {
                 message.classList.add('hidden');
                 newGameButton.classList.add('hidden');
                 hintArea.classList.add('hidden');
+                hintButton.classList.remove('hidden');
                 // Reset hangman
                 hangmanParts.forEach(part => {
                     document.getElementById(part).classList.remove('visible');
                 });
+                // Reset face
+                face.classList.remove('sad-face');
+                face.classList.add('happy-face');
                 // Select a random category
                 const categories = Object.keys(wordCategories);
                 currentCategory = categories[Math.floor(Math.random() * categories.length)];
                 updateMistakesDisplay();
                 createWordDisplay();
                 createKeyboard();
+                // Update game history display
+                updateGameHistory();
             }
             // Create the word display with blanks
                     button.classList.add('bounce');
                     setTimeout(() => button.classList.remove('bounce'), 500);
+                    // Play correct sound
+                    correctSound.currentTime = 0;
+                    correctSound.play();
                     createWordDisplay();
                     checkWin();
                 } else {
                     button.classList.add('bounce');
                     setTimeout(() => button.classList.remove('bounce'), 500);
+                    // Play wrong sound
+                    wrongSound.currentTime = 0;
+                    wrongSound.play();
                     mistakes++;
                     updateMistakesDisplay();
                     showHangmanPart();
                 if (mistakes <= hangmanParts.length) {
                     const part = hangmanParts[mistakes - 1];
                     document.getElementById(part).classList.add('visible');
+                    // Make face sad when mistakes reach half
+                    if (mistakes >= maxMistakes / 2) {
+                        face.classList.remove('happy-face');
+                        face.classList.add('sad-face');
+                    }
                 }
             }
                     message.classList.remove('hidden');
                     message.classList.add('bg-green-100', 'text-green-800');
                     newGameButton.classList.remove('hidden');
+                    // Play win sound
+                    winSound.currentTime = 0;
+                    winSound.play();
+                    // Add to game history
+                    addToGameHistory(true);
                     createConfetti();
                 }
             }
                     message.classList.add('bg-red-100', 'text-red-800');
                     newGameButton.classList.remove('hidden');
+                    // Play lose sound
+                    loseSound.currentTime = 0;
+                    loseSound.play();
+                    // Add to game history
+                    addToGameHistory(false);
                     // Reveal the word
                     revealWord();
                 }
                 }
             }
+            // Add game result to history
+            function addToGameHistory(won) {
+                const gameResult = {
+                    date: new Date().toLocaleString(),
+                    word: currentWord,
+                    result: won ? 'Gewonnen' : 'Verloren',
+                    mistakes: mistakes,
+                    won: won
+                };
+                gameHistory.unshift(gameResult);
+                // Keep only last 20 games
+                if (gameHistory.length > 20) {
+                    gameHistory = gameHistory.slice(0, 20);
+                }
+                // Save to localStorage
+                localStorage.setItem('norasGameHistory', JSON.stringify(gameHistory));
+                // Update stats
+                updateStats();
+            }
+            // Update game history display
+            function updateGameHistory() {
+                if (gameHistory.length > 0) {
+                    gameHistorySection.classList.remove('hidden');
+                    historyTable.innerHTML = '';
+                    gameHistory.forEach(game => {
+                        const row = document.createElement('tr');
+                        row.className = 'border-b border-gray-200 hover:bg-gray-50';
+                        row.innerHTML = `
+                            <td class="px-4 py-2">${game.date}</td>
+                            <td class="px-4 py-2">${game.word}</td>
+                            <td class="px-4 py-2 ${game.won ? 'text-green-600' : 'text-red-600'}">${game.result}</td>
+                            <td class="px-4 py-2">${game.mistakes}</td>
+                        `;
+                        historyTable.appendChild(row);
+                    });
+                } else {
+                    gameHistorySection.classList.add('hidden');
+                }
+            }
+            // Update win/loss stats
+            function updateStats() {
+                wins = gameHistory.filter(game => game.won).length;
+                losses = gameHistory.filter(game => !game.won).length;
+                winsDisplay.textContent = wins;
+                lossesDisplay.textContent = losses;
+            }
             // Show hint
             hintButton.addEventListener('click', function() {
                 if (!hintUsed && gameActive) {
             // New game button
             newGameButton.addEventListener('click', initGame);
+            // Toggle game history visibility
+            toggleHistoryButton.addEventListener('click', function() {
+                if (gameHistorySection.classList.contains('hidden')) {
+                    gameHistorySection.classList.remove('hidden');
+                    toggleHistoryButton.innerHTML = '<i class="fas fa-eye-slash mr-2"></i>Verstecken';
+                } else {
+                    gameHistorySection.classList.add('hidden');
+                    toggleHistoryButton.innerHTML = '<i class="fas fa-eye mr-2"></i>Anzeigen';
+                }
+            });
             // Create confetti effect
             function createConfetti() {
                 const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
             // Start the game
             initGame();
+            updateStats();
         });
     </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=ThetaPhiPsi/noras-hangman" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>