Spaces:

kai774
/

mnjrika

Running

App Files Files Community

kai774 commited on Sep 3, 2025

Commit

6847ca0

verified ·

1 Parent(s): cc51a92

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +628 -19

README.md CHANGED Viewed

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

 ---
+title: mnjrika
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 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,628 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Erika: Vampire Diaries Survival</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #0f0e17;
+            color: #f8f8f2;
+        }
+        .title-font {
+            font-family: 'Cinzel', serif;
+        }
+        .vampire-red {
+            color: #ff5555;
+        }
+        .bg-vampire-dark {
+            background-color: #1a1a2e;
+        }
+        .choice-card {
+            transition: all 0.3s ease;
+            border: 1px solid #2b2b40;
+        }
+        .choice-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(255, 85, 85, 0.2);
+            border-color: #ff5555;
+        }
+        .blood-drop {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background-color: #ff5555;
+            border-radius: 50%;
+            opacity: 0;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="title-font text-4xl md:text-5xl font-bold mb-4 vampire-red">Erika: Vampire Diaries Survival</h1>
+            <p class="text-lg text-gray-300">Will you survive the darkness of Mystic Falls?</p>
+        </header>
+        <!-- Intro Section -->
+        <div id="intro" class="bg-vampire-dark rounded-lg shadow-lg p-6 mb-8">
+            <div class="flex items-center mb-6">
+                <div class="w-20 h-20 rounded-full bg-red-900 mr-4 flex items-center justify-center">
+                    <i data-feather="droplet" class="text-red-400 w-10 h-10"></i>
+                </div>
+                <div>
+                    <h2 class="title-font text-2xl vampire-red">Your Story Begins...</h2>
+                    <p class="text-gray-300">You are Erika, turned into a vampire at 17, now 19, living in Mystic Falls.</p>
+                </div>
+            </div>
+            <p class="mb-4 text-gray-300">Through 30 critical decisions, you'll face moral dilemmas, survival choices, and tests of allegiance. Each choice shapes your fate in the supernatural world.</p>
+            <p class="mb-6 text-gray-300">Score 15+ correct answers to survive and protect Mystic Falls. Fail, and you'll be consumed by betrayal, power, or death.</p>
+            <button id="start-btn" class="w-full bg-red-900 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105">
+                Begin Your Journey
+            </button>
+        </div>
+        <!-- Quiz Container -->
+        <div id="quiz-container" class="hidden bg-vampire-dark rounded-lg shadow-lg p-6 mb-8">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="title-font text-2xl vampire-red">Question <span id="question-number">1</span>/30</h2>
+                <div class="bg-gray-800 rounded-full px-4 py-1">
+                    <span id="score" class="font-bold">Score: 0</span>
+                </div>
+            </div>
+            <div class="mb-8">
+                <p id="question-text" class="text-xl mb-6 text-gray-100"></p>
+                <div id="choices" class="space-y-4">
+                    <!-- Choices will be inserted here by JavaScript -->
+                </div>
+            </div>
+            <div class="flex justify-between">
+                <button id="prev-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
+                    <i data-feather="arrow-left" class="inline mr-2"></i> Previous
+                </button>
+                <button id="next-btn" class="bg-red-900 hover:bg-red-800 text-white font-bold py-2 px-4 rounded hidden">
+                    Next <i data-feather="arrow-right" class="inline ml-2"></i>
+                </button>
+                <button id="submit-btn" class="bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded hidden">
+                    Submit Answers <i data-feather="check" class="inline ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Results Section -->
+        <div id="results" class="hidden bg-vampire-dark rounded-lg shadow-lg p-6 mb-8">
+            <div class="text-center mb-8">
+                <h2 class="title-font text-3xl mb-4 vampire-red">Your Fate is Sealed</h2>
+                <div id="result-message" class="text-xl mb-6"></div>
+                <div class="text-4xl font-bold mb-6">Score: <span id="final-score" class="vampire-red">0</span>/30</div>
+                <button id="restart-btn" class="bg-red-900 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
+                    Play Again <i data-feather="refresh-cw" class="inline ml-2"></i>
+                </button>
+            </div>
+            <div id="answers-review" class="border-t border-gray-700 pt-6">
+                <h3 class="title-font text-xl mb-4 vampire-red">Your Choices</h3>
+                <div id="answers-container" class="space-y-6">
+                    <!-- Answers will be inserted here by JavaScript -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Welcome Modal -->
+    <div id="welcome-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+        <div class="bg-vampire-dark rounded-lg shadow-xl p-8 max-w-md mx-4 border border-red-700">
+            <div class="text-center">
+                <h3 class="title-font text-2xl vampire-red mb-4">Welcome to Erika's Story!</h3>
+                <p class="text-gray-300 mb-6">
+                    If you lose, you are fat. If you win, you are not fat. Play through Erika's story and at the end you will discover your fate!
+                </p>
+                <button id="close-welcome" class="bg-red-900 hover:bg-red-800 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
+                    I Understand
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Show welcome modal on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('welcome-modal').classList.remove('hidden');
+        });
+        // Close welcome modal
+        document.getElementById('close-welcome').addEventListener('click', function() {
+            document.getElementById('welcome-modal').classList.add('hidden');
+        });
+        feather.replace();
+        // Game data
+        const gameData = {
+            questions: [
+                {
+                    q: "Damon approaches Erika at night: 'Can I trust you to watch my back, or will you stab me like the others?'",
+                    choices: {
+                        "A": "Promise loyalty and mean it.",
+                        "B": "Pretend to agree, planning betrayal.",
+                        "C": "Refuse him coldly."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Stefan tells Erika: 'You don't have to be like Damon. Do you believe in redemption?'",
+                    choices: {
+                        "A": "Yes, I can still change.",
+                        "B": "Maybe, if it serves me.",
+                        "C": "No, redemption is weakness."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Bonnie finds Erika with blood on her hands: 'What have you done?'",
+                    choices: {
+                        "A": "Tell her the truth and ask for help.",
+                        "B": "Compel her to forget.",
+                        "C": "Threaten her into silence."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "Klaus offers a deal: 'Stand with me, or be crushed with the rest.'",
+                    choices: {
+                        "A": "Swear allegiance to him.",
+                        "B": "Refuse and fight.",
+                        "C": "Pretend to join, waiting to betray."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "Caroline asks Erika: 'Would you protect the town, even if it costs you everything?'",
+                    choices: {
+                        "A": "Yes, I'll fight for them.",
+                        "B": "Maybe, if it benefits me.",
+                        "C": "No, humans aren't worth it."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Damon whispers: 'Matt knows too much. Should we kill him?'",
+                    choices: {
+                        "A": "Agree with Damon.",
+                        "B": "Refuse to harm Matt.",
+                        "C": "Trick Damon into sparing Matt."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "A vampire hunter traps Erika in vervain chains.",
+                    choices: {
+                        "A": "Endure and wait for rescue.",
+                        "B": "Kill him brutally.",
+                        "C": "Manipulate him into releasing her."
+                    },
+                    correct: "C"
+                },
+                {
+                    q: "Katherine smirks: 'Learn from me, Erika. I'll teach you how to survive.'",
+                    choices: {
+                        "A": "Accept eagerly.",
+                        "B": "Refuse, I'm not like you.",
+                        "C": "Pretend to accept, but betray later."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "A young witch screams for help against werewolves.",
+                    choices: {
+                        "A": "Save the witch.",
+                        "B": "Ignore her.",
+                        "C": "Use her as bait."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Alaric warns Erika: 'You're walking a dangerous path. Stop killing innocents.'",
+                    choices: {
+                        "A": "Agree and change.",
+                        "B": "Ignore him.",
+                        "C": "Threaten him."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Elijah offers her a truce.",
+                    choices: {
+                        "A": "Accept respectfully.",
+                        "B": "Refuse him.",
+                        "C": "Secretly plot against him."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "A child sees her feeding.",
+                    choices: {
+                        "A": "Erase the memory.",
+                        "B": "Kill them.",
+                        "C": "Let them live with the truth."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Stefan confronts her: 'You betrayed me. Why?'",
+                    choices: {
+                        "A": "Admit and explain.",
+                        "B": "Lie to cover up.",
+                        "C": "Threaten him."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Damon is bleeding out.",
+                    choices: {
+                        "A": "Save him.",
+                        "B": "Leave him.",
+                        "C": "Exploit his weakness."
+                    },
+                    correct: "C"
+                },
+                {
+                    q: "Klaus demands her loyalty again.",
+                    choices: {
+                        "A": "Kneel and swear.",
+                        "B": "Refuse.",
+                        "C": "Pretend loyalty, planning betrayal."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "A relic of vampire power is in her hands.",
+                    choices: {
+                        "A": "Share it with friends.",
+                        "B": "Keep it hidden.",
+                        "C": "Use it recklessly."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Caroline asks directly: 'Are you still with us, Erika?'",
+                    choices: {
+                        "A": "Reassure her, yes.",
+                        "B": "Admit doubts.",
+                        "C": "Threaten Caroline."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "She finds a cure for vampirism.",
+                    choices: {
+                        "A": "Take it for herself.",
+                        "B": "Destroy it.",
+                        "C": "Hide it for later."
+                    },
+                    correct: "C"
+                },
+                {
+                    q: "Mystic Falls is under attack.",
+                    choices: {
+                        "A": "Fight to protect.",
+                        "B": "Hide.",
+                        "C": "Lead the attackers."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "An Original vampire tests her.",
+                    choices: {
+                        "A": "Form respectful alliance.",
+                        "B": "Challenge them directly.",
+                        "C": "Manipulate them subtly."
+                    },
+                    correct: "C"
+                },
+                {
+                    q: "Bonnie offers a dangerous spell.",
+                    choices: {
+                        "A": "Refuse, too risky.",
+                        "B": "Accept, risk soul.",
+                        "C": "Trick her into casting."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "A mortal friend begs: 'Please, stop feeding on people.'",
+                    choices: {
+                        "A": "Stop feeding on humans.",
+                        "B": "Refuse.",
+                        "C": "Compel them to forget."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "She's trapped with an enemy vampire.",
+                    choices: {
+                        "A": "Cooperate to escape.",
+                        "B": "Kill them.",
+                        "C": "Manipulate them."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "A human confesses love.",
+                    choices: {
+                        "A": "Accept passionately.",
+                        "B": "Reject to protect them.",
+                        "C": "Use them for advantage."
+                    },
+                    correct: "B"
+                },
+                {
+                    q: "A friend betrays her.",
+                    choices: {
+                        "A": "Forgive carefully.",
+                        "B": "Plot revenge.",
+                        "C": "Cut ties."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Damon smirks: 'Tell me, Erika, do you want power or peace?'",
+                    choices: {
+                        "A": "Peace.",
+                        "B": "Power.",
+                        "C": "Both."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "Klaus traps her in a game of trust: 'Save yourself, or save your friend.'",
+                    choices: {
+                        "A": "Save friend.",
+                        "B": "Save herself.",
+                        "C": "Let both die."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "She dreams of her humanity.",
+                    choices: {
+                        "A": "Embrace it.",
+                        "B": "Reject it.",
+                        "C": "Stay in between."
+                    },
+                    correct: "C"
+                },
+                {
+                    q: "Damon asks: 'If I fall, will you stand by me?'",
+                    choices: {
+                        "A": "Yes, always.",
+                        "B": "Only if it benefits me.",
+                        "C": "No."
+                    },
+                    correct: "A"
+                },
+                {
+                    q: "The town is burning.",
+                    choices: {
+                        "A": "Save the people.",
+                        "B": "Save herself only.",
+                        "C": "Use chaos for power."
+                    },
+                    correct: "B"
+                }
+            ],
+            scoring: {
+                win: "Congratulations! With a score of 15 or more, Erika survives the darkness of Mystic Falls. She protects the town, maintains her humanity, and proves herself worthy of trust among both vampires and humans.",
+                lose: "Tragedy strikes! With less than 15 correct answers, Erika fails to navigate the treacherous world of Mystic Falls. Betrayed by allies, consumed by power, or destroyed by her own choices, her story ends in darkness."
+            }
+        };
+        // Game state
+        let currentQuestion = 0;
+        let score = 0;
+        let userAnswers = Array(gameData.questions.length).fill(null);
+        // DOM elements
+        const introSection = document.getElementById('intro');
+        const quizContainer = document.getElementById('quiz-container');
+        const resultsSection = document.getElementById('results');
+        const startBtn = document.getElementById('start-btn');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        const restartBtn = document.getElementById('restart-btn');
+        const questionNumber = document.getElementById('question-number');
+        const questionText = document.getElementById('question-text');
+        const choicesContainer = document.getElementById('choices');
+        const scoreDisplay = document.getElementById('score');
+        const finalScore = document.getElementById('final-score');
+        const resultMessage = document.getElementById('result-message');
+        const answersContainer = document.getElementById('answers-review');
+        // Start the game
+        startBtn.addEventListener('click', () => {
+            introSection.classList.add('hidden');
+            quizContainer.classList.remove('hidden');
+            loadQuestion(currentQuestion);
+            createBloodDrops();
+        });
+        // Load a question
+        function loadQuestion(index) {
+            const question = gameData.questions[index];
+            questionNumber.textContent = index + 1;
+            questionText.textContent = question.q;
+            // Clear previous choices
+            choicesContainer.innerHTML = '';
+            // Add new choices
+            for (const [key, value] of Object.entries(question.choices)) {
+                const choiceDiv = document.createElement('div');
+                choiceDiv.className = `choice-card bg-gray-800 p-4 rounded-lg cursor-pointer ${userAnswers[index] === key ? 'border-red-500 border-2' : ''}`;
+                choiceDiv.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3 font-bold vampire-red">${key}</div>
+                        <div>${value}</div>
+                    </div>
+                `;
+                choiceDiv.addEventListener('click', () => selectAnswer(key, index));
+                choicesContainer.appendChild(choiceDiv);
+            }
+            // Update navigation buttons
+            prevBtn.disabled = index === 0;
+            nextBtn.classList.toggle('hidden', index === gameData.questions.length - 1);
+            submitBtn.classList.toggle('hidden', index !== gameData.questions.length - 1);
+            // Update previous button opacity
+            prevBtn.classList.toggle('opacity-50', index === 0);
+            prevBtn.classList.toggle('cursor-not-allowed', index === 0);
+        }
+        // Select an answer
+        function selectAnswer(choice, index) {
+            userAnswers[index] = choice;
+            // Highlight selected choice
+            const choices = choicesContainer.querySelectorAll('.choice-card');
+            choices.forEach((c, i) => {
+                const choiceKey = Object.keys(gameData.questions[index].choices)[i];
+                if (userAnswers[index] === choiceKey) {
+                    c.classList.add('border-red-500', 'border-2');
+                } else {
+                    c.classList.remove('border-red-500', 'border-2');
+                }
+            });
+            // Enable next button if not on last question
+            if (index !== gameData.questions.length - 1) {
+                nextBtn.classList.remove('hidden');
+                submitBtn.classList.add('hidden');
+            }
+        }
+        // Next question
+        nextBtn.addEventListener('click', () => {
+            if (currentQuestion < gameData.questions.length - 1) {
+                currentQuestion++;
+                loadQuestion(currentQuestion);
+            }
+        });
+        // Previous question
+        prevBtn.addEventListener('click', () => {
+            if (currentQuestion > 0) {
+                currentQuestion--;
+                loadQuestion(currentQuestion);
+            }
+        });
+        // Submit answers
+        submitBtn.addEventListener('click', () => {
+            calculateScore();
+            showResults();
+        });
+        // Calculate final score
+        function calculateScore() {
+            score = 0;
+            for (let i = 0; i < gameData.questions.length; i++) {
+                if (userAnswers[i] === gameData.questions[i].correct) {
+                    score++;
+                }
+            }
+        }
+        // Show results
+        function showResults() {
+            quizContainer.classList.add('hidden');
+            resultsSection.classList.remove('hidden');
+            finalScore.textContent = score;
+            if (score >= 15) {
+                resultMessage.textContent = gameData.scoring.win;
+                resultMessage.classList.add('text-green-400');
+            } else {
+                resultMessage.textContent = gameData.scoring.lose;
+                resultMessage.classList.add('text-red-400');
+            }
+            // Show all answers with correct/incorrect indicators
+            answersContainer.innerHTML = '';
+            for (let i = 0; i < gameData.questions.length; i++) {
+                const question = gameData.questions[i];
+                const userAnswer = userAnswers[i];
+                const isCorrect = userAnswer === question.correct;
+                const answerDiv = document.createElement('div');
+                answerDiv.className = `p-4 rounded-lg ${isCorrect ? 'bg-green-900 bg-opacity-30' : 'bg-red-900 bg-opacity-30'}`;
+                answerDiv.innerHTML = `
+                    <div class="font-bold mb-2">Question ${i + 1}: ${question.q}</div>
+                    <div class="mb-1 ${userAnswer === 'A' ? 'font-bold' : ''}">
+                        <span class="inline-block w-6">A:</span> ${question.choices.A}
+                        ${userAnswer === 'A' ? (isCorrect ? '✓' : '✗') : ''}
+                        ${question.correct === 'A' && !isCorrect ? '✓' : ''}
+                    </div>
+                    <div class="mb-1 ${userAnswer === 'B' ? 'font-bold' : ''}">
+                        <span class="inline-block w-6">B:</span> ${question.choices.B}
+                        ${userAnswer === 'B' ? (isCorrect ? '✓' : '✗') : ''}
+                        ${question.correct === 'B' && !isCorrect ? '✓' : ''}
+                    </div>
+                    <div class="${userAnswer === 'C' ? 'font-bold' : ''}">
+                        <span class="inline-block w-6">C:</span> ${question.choices.C}
+                        ${userAnswer === 'C' ? (isCorrect ? '✓' : '✗') : ''}
+                        ${question.correct === 'C' && !isCorrect ? '✓' : ''}
+                    </div>
+                `;
+                answersContainer.appendChild(answerDiv);
+            }
+        }
+        // Restart game
+        restartBtn.addEventListener('click', () => {
+            currentQuestion = 0;
+            score = 0;
+            userAnswers = Array(gameData.questions.length).fill(null);
+            resultsSection.classList.add('hidden');
+            introSection.classList.remove('hidden');
+            // Reset score display
+            scoreDisplay.textContent = 'Score: 0';
+        });
+        // Create blood drop animation elements
+        function createBloodDrops() {
+            for (let i = 0; i < 20; i++) {
+                const drop = document.createElement('div');
+                drop.className = 'blood-drop';
+                drop.style.left = `${Math.random() * 100}%`;
+                drop.style.top = `${Math.random() * 100}%`;
+                document.body.appendChild(drop);
+                // Animate the drop
+                anime({
+                    targets: drop,
+                    translateY: [0, 100],
+                    opacity: [0.8, 0],
+                    duration: 2000 + Math.random() * 3000,
+                    delay: Math.random() * 5000,
+                    loop: true,
+                    easing: 'easeInQuad'
+                });
+            }
+        }
+    </script>
+</body>
+</html>