| <!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 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 class="container mx-auto px-4 py-8"> |
| |
| <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"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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"> |
| |
| </div> |
| |
| |
| <div id="interactiveElements" class="mt-8 flex flex-wrap justify-center gap-4"> |
| |
| </div> |
| |
| |
| <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 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> |
