Spaces:

dnice1975
/

testing-story-time

Running

App Files Files Community

dnice1975 commited on Apr 7, 2025

Commit

1b61fc2

verified ·

1 Parent(s): 17c19d8

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: testing-story-time
+emoji: 🐳
 colorFrom: yellow
+colorTo: red
 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,462 @@
-<!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>Dreamy Tales - Interactive Bedtime Stories</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Fredoka+One&display=swap');
+        body {
+            font-family: 'Comic Neue', cursive;
+            background-color: #f0f9ff;
+            color: #1e3a8a;
+        }
+        .title-font {
+            font-family: 'Fredoka One', cursive;
+        }
+        .story-container {
+            background-image: url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg');
+            background-size: cover;
+            background-position: center;
+            min-height: 400px;
+        }
+        .character {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .character:hover {
+            transform: scale(1.1) rotate(5deg);
+        }
+        .page-turn {
+            animation: pageTurn 0.5s ease;
+        }
+        @keyframes pageTurn {
+            0% { transform: rotateY(0deg); }
+            50% { transform: rotateY(90deg); }
+            100% { transform: rotateY(0deg); }
+        }
+        .twinkle {
+            animation: twinkle 2s infinite alternate;
+        }
+        @keyframes twinkle {
+            0% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-500 to-purple-600 py-6 shadow-lg">
+        <div class="container mx-auto px-4">
+            <h1 class="title-font text-4xl md:text-5xl text-white text-center drop-shadow-lg">
+                <i class="fas fa-moon twinkle mr-2"></i> Dreamy Tales
+            </h1>
+            <p class="text-white text-center mt-2 text-lg">Where stories come to life at bedtime!</p>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Story Selection -->
+        <section class="mb-12">
+            <h2 class="title-font text-3xl text-center mb-8 text-blue-800">Choose Your Adventure</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Story Card 1 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="h-48 bg-gradient-to-br from-yellow-200 to-pink-300 flex items-center justify-center">
+                        <i class="fas fa-dragon text-6xl text-purple-700 floating"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="title-font text-xl mb-2">The Little Dragon's First Flight</h3>
+                        <p class="text-gray-700 mb-4">Help Spark the dragon overcome his fear of heights and learn to fly!</p>
+                        <button onclick="startStory(1)" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full w-full transition">
+                            Read Story <i class="fas fa-book-open ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Story Card 2 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="h-48 bg-gradient-to-br from-green-200 to-blue-300 flex items-center justify-center">
+                        <i class="fas fa-unicorn text-6xl text-pink-600 floating" style="animation-delay: 0.5s;"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="title-font text-xl mb-2">The Lost Unicorn's Secret</h3>
+                        <p class="text-gray-700 mb-4">Join Luna the unicorn on a magical journey through the Enchanted Forest.</p>
+                        <button onclick="startStory(2)" class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full w-full transition">
+                            Read Story <i class="fas fa-book-open ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Story Card 3 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="h-48 bg-gradient-to-br from-red-200 to-orange-300 flex items-center justify-center">
+                        <i class="fas fa-robot text-6xl text-blue-700 floating" style="animation-delay: 1s;"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="title-font text-xl mb-2">Bleep the Robot's Big Day</h3>
+                        <p class="text-gray-700 mb-4">Discover what happens when a curious robot learns about emotions.</p>
+                        <button onclick="startStory(3)" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-full w-full transition">
+                            Read Story <i class="fas fa-book-open ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Story Reader (Hidden by default) -->
+        <section id="storyReader" class="hidden">
+            <div class="flex justify-between items-center mb-6">
+                <button onclick="goBackToSelection()" class="bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 px-4 rounded-full transition">
+                    <i class="fas fa-arrow-left mr-2"></i> Back to Stories
+                </button>
+                <div class="flex space-x-2">
+                    <button id="prevBtn" onclick="prevPage()" class="bg-blue-300 hover:bg-blue-400 text-blue-800 py-2 px-4 rounded-full transition">
+                        <i class="fas fa-arrow-left"></i>
+                    </button>
+                    <button id="nextBtn" onclick="nextPage()" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full transition">
+                        <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+            <div id="storyContainer" class="story-container bg-white rounded-xl shadow-xl overflow-hidden p-8 md:p-12 relative">
+                <div id="storyContent" class="page-turn bg-white bg-opacity-80 rounded-lg p-6 md:p-8 max-w-3xl mx-auto">
+                    <!-- Story content will be inserted here by JavaScript -->
+                </div>
+                <!-- Interactive Elements -->
+                <div id="interactiveElements" class="mt-8 flex flex-wrap justify-center gap-4">
+                    <!-- Interactive buttons will be inserted here by JavaScript -->
+                </div>
+                <!-- Stars rating -->
+                <div id="ratingSection" class="hidden mt-8 text-center">
+                    <p class="text-lg mb-2">Did you like this story?</p>
+                    <div class="flex justify-center space-x-2">
+                        <i class="fas fa-star text-gray-300 text-2xl cursor-pointer hover:text-yellow-400" onclick="rateStory(1)"></i>
+                        <i class="fas fa-star text-gray-300 text-2xl cursor-pointer hover:text-yellow-400" onclick="rateStory(2)"></i>
+                        <i class="fas fa-star text-gray-300 text-2xl cursor-pointer hover:text-yellow-400" onclick="rateStory(3)"></i>
+                        <i class="fas fa-star text-gray-300 text-2xl cursor-pointer hover:text-yellow-400" onclick="rateStory(4)"></i>
+                        <i class="fas fa-star text-gray-300 text-2xl cursor-pointer hover:text-yellow-400" onclick="rateStory(5)"></i>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gradient-to-r from-blue-600 to-purple-700 py-6 text-white mt-12">
+        <div class="container mx-auto px-4 text-center">
+            <p class="mb-2">Made with <i class="fas fa-heart text-red-300"></i> for sweet dreams</p>
+            <p class="text-sm">© 2023 Dreamy Tales - All rights reserved</p>
+        </div>
+    </footer>
+    <script>
+        // Story data
+        const stories = {
+            1: {
+                title: "The Little Dragon's First Flight",
+                pages: [
+                    {
+                        content: `<h2 class="title-font text-2xl mb-4 text-center">Chapter 1: Meet Spark</h2>
+                        <p class="mb-4">Once upon a time, in a land of floating mountains, there lived a little dragon named Spark. He had bright red scales that shimmered in the sunlight and tiny wings that fluttered when he got excited.</p>
+                        <p class="mb-4">But Spark had a secret... he was afraid of heights! All the other young dragons could fly, but Spark stayed on the ground, watching from below.</p>`,
+                        image: '<i class="fas fa-dragon text-8xl text-red-500 mx-auto block my-6 character" onclick="dragonRoar()"></i>',
+                        interactive: [
+                            {text: "Roar like a dragon!", action: "dragonRoar()", icon: "fa-volume-up"},
+                            {text: "Flap your wings!", action: "flapWings()", icon: "fa-feather"}
+                        ]
+                    },
+                    {
+                        content: `<h2 class="title-font text-2xl mb-4 text-center">Chapter 2: The Wise Old Turtle</h2>
+                        <p class="mb-4">One day, Spark met a wise old turtle named Sheldon. Sheldon could see that Spark was sad about not being able to fly.</p>
+                        <p class="mb-4">"Little dragon," said Sheldon in his slow, wise voice, "everyone is afraid of something at first. The trick is to start small."</p>
+                        <p class="mb-4">Sheldon suggested that Spark try jumping from a small rock first, then gradually try higher places.</p>`,
+                        image: '<i class="fas fa-turtle text-8xl text-green-600 mx-auto block my-6 character" onclick="turtleWisdom()"></i>',
+                        interactive: [
+                            {text: "What advice would you give Spark?", action: "showAdvicePrompt()", icon: "fa-comment"},
+                            {text: "Move slowly like a turtle", action: "moveLikeTurtle()", icon: "fa-clock"}
+                        ]
+                    },
+                    {
+                        content: `<h2 class="title- font text-2xl mb-4 text-center">Chapter 3: The First Flight</h2>
+                        <p class="mb-4">Following Sheldon's advice, Spark started with small jumps from a low rock. Each day, he tried a slightly higher rock.</p>
+                        <p class="mb-4">One evening, as the sun painted the sky orange and pink, Spark climbed to the top of a medium-sized hill. He took a deep breath...</p>
+                        <p class="mb-4">And jumped! His wings caught the wind and for the first time, Spark flew! He soared over the treetops, his heart full of joy.</p>`,
+                        image: '<i class="fas fa-dragon text-8xl text-red-500 mx-auto block my-6 floating"></i>',
+                        interactive: [
+                            {text: "Cheer for Spark!", action: "cheerForSpark()", icon: "fa-hands-clapping"},
+                            {text: "Pretend to fly!", action: "pretendToFly()", icon: "fa-paper-plane"}
+                        ]
+                    },
+                    {
+                        content: `<h2 class="title-font text-2xl mb-4 text-center">The End</h2>
+                        <p class="mb-4">From that day on, Spark flew everywhere! He still remembered to be careful, but he wasn't afraid anymore.</p>
+                        <p class="mb-4">And sometimes, he would even give rides to his turtle friend Sheldon, who enjoyed seeing the world from above.</p>
+                        <p class="mb-4">The end.</p>`,
+                        image: '<div class="flex justify-center space-x-8 my-6"><i class="fas fa-dragon text-8xl text-red-500 floating"></i><i class="fas fa-turtle text-8xl text-green-600" style="animation-delay: 0.5s;"></i></div>',
+                        interactive: []
+                    }
+                ]
+            },
+            2: {
+                title: "The Lost Unicorn's Secret",
+                pages: [
+                    {
+                        content: `<h2 class="title-font text-2xl mb-4 text-center">Chapter 1: The Mysterious Unicorn</h2>
+                        <p class="mb-4">In the heart of the Enchanted Forest, where flowers sang and trees whispered secrets, a young unicorn named Luna appeared one morning.</p>
+                        <p class="mb-4">She had a silvery-white coat that glowed in the moonlight and a golden horn that sparkled like stardust. But Luna had no memory of where she came from.</p>`,
+                        image: '<i class="fas fa-unicorn text-8xl text-purple-400 mx-auto block my-6 twinkle" onclick="unicornGlow()"></i>',
+                        interactive: [
+                            {text: "Make Luna's horn glow!", action: "unicornGlow()", icon: "fa-magic"},
+                            {text: "Whisper like the trees", action: "whisperSecret()", icon: "fa-tree"}
+                        ]
+                    },
+                    // Additional pages would follow the same pattern
+                ]
+            },
+            3: {
+                title: "Bleep the Robot's Big Day",
+                pages: [
+                    {
+                        content: `<h2 class="title-font text-2xl mb-4 text-center">Chapter 1: Bleep Wakes Up</h2>
+                        <p class="mb-4">In a shiny metal city of the future, a small robot named Bleep powered up for another day. Bleep was different from other robots - he was curious about everything!</p>
+                        <p class="mb-4">While other robots followed their programming exactly, Bleep always asked "Why?" and wanted to learn new things.</p>`,
+                        image: '<i class="fas fa-robot text-8xl text-blue-500 mx-auto block my-6 character" onclick="robotSound()"></i>',
+                        interactive: [
+                            {text: "Make robot sounds!", action: "robotSound()", icon: "fa-robot"},
+                            {text: "Ask 'Why?' like Bleep", action: "askWhy()", icon: "fa-question"}
+                        ]
+                    },
+                    // Additional pages would follow the same pattern
+                ]
+            }
+        };
+        // Current story state
+        let currentStoryId = null;
+        let currentPage = 0;
+        let totalPages = 0;
+        // Start a new story
+        function startStory(storyId) {
+            currentStoryId = storyId;
+            currentPage = 0;
+            totalPages = stories[storyId].pages.length;
+            document.getElementById('storyReader').classList.remove('hidden');
+            document.querySelector('main > section:first-child').classList.add('hidden');
+            loadPage();
+        }
+        // Go back to story selection
+        function goBackToSelection() {
+            document.getElementById('storyReader').classList.add('hidden');
+            document.querySelector('main > section:first-child').classList.remove('hidden');
+            // Reset any animations or effects
+            document.getElementById('ratingSection').classList.add('hidden');
+        }
+        // Load the current page
+        function loadPage() {
+            const storyContent = document.getElementById('storyContent');
+            const interactiveElements = document.getElementById('interactiveElements');
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            const ratingSection = document.getElementById('ratingSection');
+            // Apply page turn animation
+            storyContent.classList.add('page-turn');
+            setTimeout(() => storyContent.classList.remove('page-turn'), 500);
+            // Update navigation buttons
+            prevBtn.disabled = currentPage === 0;
+            nextBtn.disabled = currentPage === totalPages - 1;
+            // Show rating only on last page
+            if (currentPage === totalPages - 1) {
+                ratingSection.classList.remove('hidden');
+            } else {
+                ratingSection.classList.add('hidden');
+            }
+            // Load page content
+            const page = stories[currentStoryId].pages[currentPage];
+            storyContent.innerHTML = `
+                ${page.content}
+                ${page.image || ''}
+            `;
+            // Load interactive elements
+            interactiveElements.innerHTML = '';
+            page.interactive.forEach(item => {
+                const button = document.createElement('button');
+                button.className = 'bg-yellow-400 hover:bg-yellow-500 text-blue-800 py-3 px-6 rounded-full transition flex items-center';
+                button.innerHTML = `
+                    <i class="fas ${item.icon} mr-2"></i> ${item.text}
+                `;
+                button.onclick = new Function(item.action);
+                interactiveElements.appendChild(button);
+            });
+            // Update document title
+            document.title = `${stories[currentStoryId].title} - Page ${currentPage + 1}`;
+        }
+        // Navigation functions
+        function nextPage() {
+            if (currentPage < totalPages - 1) {
+                currentPage++;
+                loadPage();
+            }
+        }
+        function prevPage() {
+            if (currentPage > 0) {
+                currentPage--;
+                loadPage();
+            }
+        }
+        // Interactive functions
+        function dragonRoar() {
+            alert('ROOOOOAR! 🐉');
+            const dragon = document.querySelector('.fa-dragon');
+            dragon.classList.add('animate-pulse', 'text-orange-500');
+            setTimeout(() => {
+                dragon.classList.remove('animate-pulse', 'text-orange-500');
+            }, 1000);
+            // Play roar sound if available
+            if (typeof Audio !== 'undefined') {
+                const roar = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-monster-dragon-roar-5.mp3');
+                roar.play().catch(e => console.log('Audio playback failed:', e));
+            }
+        }
+        function flapWings() {
+            const dragon = document.querySelector('.fa-dragon');
+            dragon.style.transform = 'rotate(10deg) scale(1.2)';
+            setTimeout(() => {
+                dragon.style.transform = '';
+            }, 300);
+            alert('Flap! Flap! Your wings are working!');
+        }
+        function turtleWisdom() {
+            const wisdom = [
+                "Slow and steady wins the race!",
+                "Big things start with small steps.",
+                "Don't compare your beginning to someone else's middle.",
+                "Every expert was once a beginner."
+            ];
+            alert(wisdom[Math.floor(Math.random() * wisdom.length)]);
+        }
+        function moveLikeTurtle() {
+            alert('Moving... very... slowly... 🐢');
+        }
+        function cheerForSpark() {
+            alert('Yay! Go Spark! 🎉');
+        }
+        function pretendToFly() {
+            alert('Whoosh! You're flying high in the sky! ✈️');
+        }
+        function unicornGlow() {
+            const unicorn = document.querySelector('.fa-unicorn');
+            unicorn.classList.add('text-yellow-300', 'twinkle');
+            setTimeout(() => {
+                unicorn.classList.remove('text-yellow-300');
+            }, 2000);
+            alert('✨ Your horn is glowing with magic! ✨');
+        }
+        function whisperSecret() {
+            const secret = prompt("What secret would you whisper to the trees?");
+            if (secret) {
+                alert(`The trees whisper back: "${secret.toUpperCase()}!"`);
+            }
+        }
+        function robotSound() {
+            const sounds = ['Bleep!', 'Blop!', 'Zzzzt!', 'Whirrr!'];
+            alert(sounds[Math.floor(Math.random() * sounds.length)]);
+        }
+        function askWhy() {
+            const questions = [
+                "Why is the sky blue?",
+                "Why do birds sing?",
+                "Why do we need to sleep?",
+                "Why are rainbows curved?"
+            ];
+            alert(questions[Math.floor(Math.random() * questions.length)]);
+        }
+        function showAdvicePrompt() {
+            const advice = prompt("What advice would you give to Spark about being brave?");
+            if (advice) {
+                alert(`Great advice! Spark says: "Thank you! I'll try that!"`);
+            }
+        }
+        // Rate the story
+        function rateStory(rating) {
+            const stars = document.querySelectorAll('#ratingSection .fa-star');
+            stars.forEach((star, index) => {
+                if (index < rating) {
+                    star.classList.add('text-yellow-400');
+                    star.classList.remove('text-gray-300');
+                } else {
+                    star.classList.add('text-gray-300');
+                    star.classList.remove('text-yellow-400');
+                }
+            });
+            alert(`Thank you for your ${rating} star rating! We're glad you enjoyed the story!`);
+        }
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (currentStoryId !== null) {
+                if (e.key === 'ArrowRight') {
+                    nextPage();
+                } else if (e.key === 'ArrowLeft') {
+                    prevPage();
+                }
+            }
+        });
+    </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=dnice1975/testing-story-time" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>