Hugging Face's logo

Spaces:
NewtonLaw
/
test1
Running

App Files Community
test1 / index.html
NewtonLaw's picture
NewtonLaw
Add 2 files
a1fb671 verified
raw
history blame contribute delete
28.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>StoryLand - Kids AI Book Reading App</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Fredoka+One&display=swap" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 <style>
 body {
 font-family: 'Comic Neue', cursive;
 background-color: #f6f9ff;
 overflow-x: hidden;
 }
.title {
 font-family: 'Fredoka One', cursive;
 text-shadow: 3px 3px 0 #f8c8dc;
 }
.book {
 perspective: 2500px;
 transform-style: preserve-3d;
 }
.book-cover {
 box-shadow: 0 20px 50px rgba(0,0,0,0.3);
 transform-style: preserve-3d;
 transform: rotateY(-15deg);
 transition: all 0.3s ease;
 }
.book-cover:hover {
 transform: rotateY(0deg);
 }
.book-spine {
 position: absolute;
 left: 0;
 width: 15px;
 height: 100%;
 background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
 transform: rotateY(90deg) translateX(-15px) translateZ(3px);
 }
.character {
 transition: all 0.3s ease;
 }
.character:hover {
 transform: scale(1.1);
 filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
 }
.bounce {
 animation: bounce 3s infinite;
 }
@keyframes bounce {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-15px);
 }
 }
.float {
 animation: float 6s ease-in-out infinite;
 }
@keyframes float {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-25px);
 }
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% {
 transform: scale(1);
 }
 50% {
 transform: scale(1.05);
 }
 100% {
 transform: scale(1);
 }
 }
.twinkle {
 animation: twinkle 4s infinite;
 }
@keyframes twinkle {
 0%, 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.7;
 }
 }
.slide-in {
 animation: slideIn 0.8s forwards;
 opacity: 0;
 transform: translateX(-50px);
 }
@keyframes slideIn {
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
.category-card {
 transition: all 0.3s ease;
 transform-style: preserve-3d;
 }
.category-card:hover {
 transform: translateY(-10px) rotateY(10deg);
 box-shadow: 0 15px 30px rgba(0,0,0,0.2);
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Floating clouds background -->
 <div class="fixed top-0 left-0 w-full h-full pointer-events-none z-0 overflow-hidden">
 <div class="cloud absolute top-20 left-10 w-24 h-16 bg-white rounded-full float" style="animation-delay: 0s;"></div>
 <div class="cloud absolute top-40 right-20 w-32 h-20 bg-white rounded-full float" style="animation-delay: 1s;"></div>
 <div class="cloud absolute top-80 left-1/4 w-20 h-14 bg-white rounded-full float" style="animation-delay: 2s;"></div>
 <div class="cloud absolute bottom-40 right-1/3 w-28 h-18 bg-white rounded-full float" style="animation-delay: 1.5s;"></div>
 </div>
<!-- Header -->
 <header class="relative z-10">
 <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 </svg>
 </div>
 <h1 class="title text-3xl text-indigo-600">StoryLand</h1>
 </div>
<div class="hidden md:flex items-center space-x-6">
 <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Home</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Categories</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Favorites</a>
 <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">My Books</a>
 </div>
<button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full shadow-lg transition-all transform hover:scale-105">
 Start Reading
 </button>
 </nav>
 </header>
<!-- Hero Section -->
 <section class="relative z-10 mt-10 md:mt-16 container mx-auto px-6">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-12 md:mb-0 slide-in" style="animation-delay: 0.2s;">
 <h2 class="title text-4xl md:text-6xl text-indigo-600 mb-6">
 Magical Stories<br>
 <span class="text-pink-500">Come to Life</span>
 </h2>
 <p class="text-gray-600 text-lg mb-8 max-w-lg">
 Our AI-powered book reader transforms story time into an interactive adventure with engaging animations, fun characters, and exciting activities.
 </p>
 <div class="flex space-x-4">
 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-full shadow-lg transition-all transform hover:scale-105 pulse">
 Explore Stories
 </button>
 <button class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-full shadow transition-all transform hover:scale-105">
 Try Demo
 </button>
 </div>
 </div>
<div class="md:w-1/2 flex justify-center relative">
 <!-- Animated book -->
 <div class="book relative w-64 h-80 md:w-80 md:h-96">
 <div class="book-cover w-full h-full bg-gradient-to-br from-pink-400 to-indigo-500 rounded-lg relative overflow-hidden">
 <div class="absolute inset-0 flex flex-col items-center justify-center p-8 text-center text-white">
 <div class="bounce absolute top-1/4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 </svg>
 </div>
 <h3 class="title text-2xl mt-16">StoryLand</h3>
 <p class="mt-2 opacity-90">Open for adventure!</p>
 </div>
 <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
 <div class="w-3 h-3 bg-white rounded-full bounce" style="animation-delay: 0.2s;"></div>
 <div class="w-3 h-3 bg-white rounded-full bounce" style="animation-delay: 0.4s;"></div>
 <div class="w-3 h-3 bg-white rounded-full bounce" style="animation-delay: 0.6s;"></div>
 </div>
 <div class="book-spine"></div>
 </div>
 </div>
<!-- Floating characters around the book -->
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694712.png" alt="Dragon" class="character absolute w-16 h-16 top-0 left-0 md:-left-16 animate-bounce twinkle" style="animation-delay: 0.1s;">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694548.png" alt="Unicorn" class="character absolute w-16 h-16 top-0 right-0 md:-right-16 animate-bounce twinkle" style="animation-delay: 0.3s;">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694709.png" alt="Wizard" class="character absolute w-16 h-16 bottom-0 left-0 md:-left-16 animate-bounce twinkle" style="animation-delay: 0.5s;">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694522.png" alt="Fairy" class="character absolute w-16 h-16 bottom-0 right-0 md:-right-16 animate-bounce twinkle" style="animation-delay: 0.7s;">
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="relative z-10 mt-24 container mx-auto px-6">
 <h2 class="title text-3xl md:text-4xl text-center text-indigo-600 mb-12 slide-in">Why Kids Love StoryLand</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Feature 1 -->
 <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 slide-in" style="animation-delay: 0.3s;">
 <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mb-4 mx-auto">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold text-center text-indigo-600 mb-3">Interactive Characters</h3>
 <p class="text-gray-600 text-center">
 Story characters come alive with animations and voice acting that respond to your child's interactions.
 </p>
 </div>
<!-- Feature 2 -->
 <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 slide-in" style="animation-delay: 0.5s;">
 <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4 mx-auto">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold text-center text-indigo-600 mb-3">AI Voice Reading</h3>
 <p class="text-gray-600 text-center">
 Our friendly AI reads stories aloud with expressive voices and can even pronounce your child's name in the story!
 </p>
 </div>
<!-- Feature 3 -->
 <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 slide-in" style="animation-delay: 0.7s;">
 <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4 mx-auto">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
 </svg>
 </div>
 <h3 class="text-xl font-bold text-center text-indigo-600 mb-3">Learning Activities</h3>
 <p class="text-gray-600 text-center">
 Each story includes fun educational games and quizzes to help develop reading comprehension and vocabulary.
 </p>
 </div>
 </div>
 </section>
<!-- Categories Section -->
 <section class="relative z-10 mt-24 container mx-auto px-6">
 <h2 class="title text-3xl md:text-4xl text-center text-indigo-600 mb-12 slide-in">Explore Story Categories</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 <!-- Category 1 -->
 <div class="category-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl">
 <div class="relative h-40 bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694705.png" alt="Fairy Tales" class="w-24 h-24 object-contain">
 <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-30 backdrop-blur-sm rounded-full py-1 px-3">
 <h3 class="text-white font-bold text-center">Fairy Tales</h3>
 </div>
 </div>
 <div class="p-4">
 <p class="text-gray-600">Classic stories with princesses, knights, and magical creatures!</p>
 </div>
 </div>
<!-- Category 2 -->
 <div class="category-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl">
 <div class="relative h-40 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694697.png" alt="Animals" class="w-24 h-24 object-contain">
 <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-30 backdrop-blur-sm rounded-full py-1 px-3">
 <h3 class="text-white font-bold text-center">Animal Friends</h3>
 </div>
 </div>
 <div class="p-4">
 <p class="text-gray-600">Adventures with furry, feathery, and scaly friends!</p>
 </div>
 </div>
<!-- Category 3 -->
 <div class="category-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl">
 <div class="relative h-40 bg-gradient-to-r from-red-400 to-pink-500 flex items-center justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694527.png" alt="Space" class="w-24 h-24 object-contain">
 <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-30 backdrop-blur-sm rounded-full py-1 px-3">
 <h3 class="text-white font-bold text-center">Space Adventures</h3>
 </div>
 </div>
 <div class="p-4">
 <p class="text-gray-600">Journey through the stars and discover alien worlds!</p>
 </div>
 </div>
<!-- Category 4 -->
 <div class="category-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl">
 <div class="relative h-40 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/4694/4694524.png" alt="Dinosaurs" class="w-24 h-24 object-contain">
 <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-30 backdrop-blur-sm rounded-full py-1 px-3">
 <h3 class="text-white font-bold text-center">Dino World</h3>
 </div>
 </div>
 <div class="p-4">
 <p class="text-gray-600">Travel back in time to meet prehistoric creatures!</p>
 </div>
 </div>
 </div>
 </section>
<!-- CTA Section -->
 <section class="relative z-10 mt-24 bg-gradient-to-r from-indigo-500 to-pink-500 rounded-3xl overflow-hidden shadow-2xl mx-6 md:mx-10 lg:mx-20 slide-in" style="animation-delay: 0.4s;">
 <div class="container mx-auto px-6 py-12 md:py-16 text-center">
 <div class="max-w-3xl mx-auto">
 <h2 class="title text-3xl md:text-4xl text-white mb-6">Ready for a Storytime Adventure?</h2>
 <p class="text-white text-lg md:text-xl mb-8 opacity3-90">
 Download StoryLand now and unlock hundreds of interactive stories for your child!
 </p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <button class="bg-white text-indigo-600 hover:bg-gray-100 font-bold px-8 py-3 rounded-full shadow-lg transition-all transform hover:scale-105">
 <div class="flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
 <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
 </svg>
 Download Now
 </div>
 </button>
 <button class="border-2 border-white text-white hover:bg-white hover:bg-opacity-20 font-bold px-8 py-3 rounded-full shadow-lg transition-all transform hover:scale-105">
 Learn More
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="relative z-10 mt-24 bg-indigo-700 text-white py-12">
 <div class="container mx-auto px-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 </svg>
 </div>
 <h2 class="title text-2xl">StoryLand</h2>
 </div>
 <p class="mt-4 text-indigo-200 max-w-xs">
 Making reading fun and interactive for kids of all ages.
 </p>
 </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
 <div>
 <h3 class="font-bold text-lg mb-4">Quick Links</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-indigo-200 hover:text-white">Home</a></li>
 <li><a href="#" class="text-indigo-200 hover:text-white">Stories</a></li>
 <li><a href="#" class="text-indigo-200 hover:text-white">Categories</a></li>
 <li><a href="#" class="text-indigo-200 hover:text-white">Pricing</a></li>
 </ul>
 </div>
<div>
 <h3 class="font-bold text-lg mb-4">Legal</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-indigo-200 hover:text-white">Privacy Policy</a></li>
 <li><a href="#" class="text-indigo-200 hover:text-white">Terms of Service</a></li>
 <li><a href="#" class="text-indigo-200 hover:text-white">Cookie Policy</a></li>
 </ul>
 </div>
<div>
 <h3 class="font-bold text-lg mb-4">Connect</h3>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-500 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
 </svg>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-500 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/>
 </svg>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-500 flex items-center justify-center">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
 </svg>
 </a>
 </div>
 </div>
 </div>
 </div>
<div class="border-t border-indigo-600 mt-8 pt-8 text-center text-indigo-300">
 <p>© 2023 StoryLand. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- Floating stars -->
 <div class="fixed top-0 left-0 w-full h-full pointer-events-none z-0 overflow-hidden">
 <div class="star absolute top-1/4 left-1/5 w-2 h-2 bg-white rounded-full twinkle" style="animation-delay: 0.2s;"></div>
 <div class="star absolute top-1/3 right-1/6 w-3 h-3 bg-yellow-200 rounded-full twinkle" style="animation-delay: 0.5s;"></div>
 <div class="star absolute bottom-1/3 left-1/4 w-2 h-2 bg-yellow-100 rounded-full twinkle" style="animation-delay: 0.3s;"></div>
 <div class="star absolute top-1/2 right-1/3 w-2.5 h-2.5 bg-white rounded-full twinkle" style="animation-delay: 0.7s;"></div>
 </div>
<script>
 // Initialize animations
 document.addEventListener('DOMContentLoaded', function() {
 // Animate elements with the slide-in class
 anime({
 targets: '.slide-in',
 opacity: [0, 1],
 translateX: [-50, 0],
 delay: anime.stagger(100),
 easing: 'easeOutExpo'
 });
// Make clouds larger and more cloud-like
 document.querySelectorAll('.cloud').forEach(cloud => {
 cloud.style.width = `${Math.random() * 50 + 50}px`;
 cloud.style.height = `${Math.random() * 30 + 20}px`;
 });
// Add parallax effect to background elements
 if (window.innerWidth > 768) {
 window.addEventListener('mousemove', function(e) {
 const x = e.clientX / window.innerWidth;
 const y = e.clientY / window.innerHeight;
document.querySelector('.book').style.transform = `
 rotateY(${-15 + x * 10}deg)
 rotateX(${y * 5}deg)
 `;
document.querySelectorAll('.character').forEach((char, index) => {
 const moveX = (x - 0.5) * 20 * (index % 2 ? -1 : 1);
 const moveY = (y - 0.5) * 20 * (index % 2 ? -1 : 1);
 char.style.transform = `translate(${moveX}px, ${moveY}px)`;
 });
 });
 }
 });
 </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=NewtonLaw/test1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>