Hugging Face's logo

Spaces:
UnknownUser0
/
my-webcite
Running

App Files Community
my-webcite / index.html
UnknownUser0's picture
UnknownUser0
Add 2 files
cfb1160 verified
Raw
History Blame Contribute Delete
51.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MoodMovie - Find Perfect Movies for Your Mood</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>
 .mood-btn {
 transition: all 0.3s ease;
 }
 .mood-btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 .movie-card {
 transition: all 0.3s ease;
 }
 .movie-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0,0,0,0.2);
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 .gradient-bg {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .pulse {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
 .dark {
 background-color: #1a202c;
 color: #f7fafc;
 }
 .dark .bg-white {
 background-color: #2d3748;
 }
 .dark .text-gray-800 {
 color: #f7fafc;
 }
 .dark .bg-gray-100 {
 background-color: #4a5568;
 }
 .dark .text-gray-600 {
 color: #e2e8f0;
 }
 .dark .bg-gray-800 {
 background-color: #1a202c;
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <div class="min-h-screen">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-8">
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-film text-3xl mr-3"></i>
 <h1 class="text-3xl font-bold">MoodMovie</h1>
 </div>
 <div>
 <button id="theme-toggle" class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
 <i class="fas fa-moon mr-2"></i> Dark Mode
 </button>
 </div>
 </div>
 <div class="mt-12 text-center">
 <h2 class="text-4xl font-bold mb-4">What's your mood today?</h2>
 <p class="text-xl opacity-90 max-w-2xl mx-auto">Select your current mood and we'll recommend the perfect movies to match it</p>
 </div>
 </div>
 </header>
<!-- Mood Selection -->
 <section class="container mx-auto px-4 py-12 -mt-16">
 <div class="bg-white rounded-xl shadow-xl p-8">
 <h3 class="text-2xl font-semibold mb-6 text-center">Choose your mood</h3>
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 <button data-mood="happy" class="mood-btn bg-yellow-100 text-yellow-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-yellow-200">
 <i class="fas fa-laugh-beam text-3xl mb-2"></i>
 Happy
 </button>
 <button data-mood="sad" class="mood-btn bg-blue-100 text-blue-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-blue-200">
 <i class="fas fa-sad-tear text-3xl mb-2"></i>
 Sad
 </button>
 <button data-mood="romantic" class="mood-btn bg-pink-100 text-pink-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-pink-200">
 <i class="fas fa-heart text-3xl mb-2"></i>
 Romantic
 </button>
 <button data-mood="adventurous" class="mood-btn bg-green-100 text-green-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-green-200">
 <i class="fas fa-mountain text-3xl mb-2"></i>
 Adventurous
 </button>
 <button data-mood="tired" class="mood-btn bg-gray-100 text-gray-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-gray-200">
 <i class="fas fa-bed text-3xl mb-2"></i>
 Tired
 </button>
 <button data-mood="thoughtful" class="mood-btn bg-indigo-100 text-indigo-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-indigo-200">
 <i class="fas fa-brain text-3xl mb-2"></i>
 Thoughtful
 </button>
 <button data-mood="emotional" class="mood-btn bg-purple-100 text-purple-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-purple-200">
 <i class="fas fa-theater-masks text-3xl mb-2"></i>
 Emotional
 </button>
 <button data-mood="bored" class="mood-btn bg-red-100 text-red-800 py-4 px-6 rounded-lg flex flex-col items-center hover:bg-red-200">
 <span class="text-3xl mb-2">💤</span>
 Bored
 </button>
 </div>
 </div>
 </section>
<!-- Results Section (Initially Hidden) -->
 <section id="results-section" class="container mx-auto px-4 py-12 hidden">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold">
 <span id="selected-mood-text" class="capitalize"></span>
<span>Movies</span>
 </h2>
 <button id="change-mood" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg flex items-center">
 <i class="fas fa-redo mr-2"></i> Change Mood
 </button>
 </div>
<!-- Genre Filters -->
 <div class="mb-8">
 <h3 class="text-xl font-semibold mb-4">Filter by Genre</h3>
 <div class="flex flex-wrap gap-2">
 <button data-genre="all" class="genre-filter active bg-purple-600 text-white px-4 py-2 rounded-full">All</button>
 <button data-genre="comedy" class="genre-filter bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full">Comedy</button>
 <button data-genre="drama" class="genre-filter bg-blue-100 text-blue-800 px-4 py-2 rounded-full">Drama</button>
 <button data-genre="romance" class="genre-filter bg-pink-100 text-pink-800 px-4 py-2 rounded-full">Romance</button>
 <button data-genre="action" class="genre-filter bg-red-100 text-red-800 px-4 py-2 rounded-full">Action</button>
 <button data-genre="sci-fi" class="genre-filter bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">Sci-Fi</button>
 <button data-genre="fantasy" class="genre-filter bg-green-100 text-green-800 px-4 py-2 rounded-full">Fantasy</button>
 <button data-genre="documentary" class="genre-filter bg-gray-100 text-gray-800 px-4 py-2 rounded-full">Documentary</button>
 </div>
 </div>
<!-- Movie Results -->
 <div id="movie-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Movie cards will be inserted here by JavaScript -->
 </div>
<!-- Load More Button -->
 <div class="text-center mt-10">
 <button id="load-more" class="bg-gray-800 text-white px-6 py-3 rounded-lg hover:bg-gray-900 transition flex items-center mx-auto">
 <i class="fas fa-plus-circle mr-2"></i> Load More Movies
 </button>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-12 mt-16">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between">
 <div class="mb-8 md:mb-0">
 <div class="flex items-center mb-4">
 <i class="fas fa-film text-2xl mr-3"></i>
 <h3 class="text-2xl font-bold">MoodMovie</h3>
 </div>
 <p class="text-gray-400 max-w-md">Find the perfect movie for your current mood. Our AI-powered recommendation system suggests films that match your emotional state.</p>
 </div>
 <div class="grid grid-cols-2 gap-8">
 <div>
 <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
 </ul>
 </div>
 <div>
 <h4 class="text-lg font-semibold mb-4">Connect</h4>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 <p>&copy; 2023 MoodMovie. All rights reserved.</p>
 </div>
 </div>
 </footer>
 </div>
<script>
 // Movie Database
 const movieDatabase = {
 happy: [
 {
title: "The Grand Budapest Hotel",
year: 2014,
duration: "1h 39m",
rating: 8.1,
genre: "comedy",
 description: "A whimsical adventure following a legendary concierge and his protégé at a famous European hotel between the wars.",
 image: "https://m.media-amazon.com/images/M/MV5BMzM5NjUxOTEyMl5BMl5BanBnXkFtZTgwNjEyMDM0MDE@._V1_.jpg"
 },
 {
title: "Paddington 2",
year: 2017,
duration: "1h 43m",
rating: 7.8,
genre: "comedy",
 description: "Paddington, now happily settled with the Brown family, picks up a series of odd jobs to buy the perfect present for his Aunt Lucy.",
 image: "https://m.media-amazon.com/images/M/MV5BMmYwNWZlNzEtNjE4Zi00NzQ4LWI2YmUtOWZhNzZhZDY2NGRiXkEyXkFqcGdeQXVyNzYzODM3Mzg@._V1_.jpg"
 },
 {
title: "Singin' in the Rain",
year: 1952,
duration: "1h 43m",
rating: 8.3,
genre: "musical",
 description: "A silent film production company and cast make a difficult transition to sound in this classic musical.",
 image: "https://m.media-amazon.com/images/M/MV5BZDRjNGViMjQtOThlMi00MTA3LThkYzQtNzJkYjBkMGE0YzE1XkEyXkFqcGdeQXVyNDYyMDk5MTU@._V1_.jpg"
 },
 {
title: "Amélie",
year: 2001,
duration: "2h 2m",
rating: 8.3,
genre: "romance",
 description: "A whimsical tale of a shy waitress who decides to change the lives of those around her for the better.",
 image: "https://m.media-amazon.com/images/M/MV5BNDg4NjM1YjMtYmNhZC00MjM0LWFiZmYtNGY1YjA3MzZmODc5XkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_.jpg"
 },
 {
title: "The Princess Bride",
year: 1987,
duration: "1h 38m",
rating: 8.1,
genre: "adventure",
 description: "A fairy tale adventure about a beautiful young woman and her one true love.",
 image: "https://m.media-amazon.com/images/M/MV5BMGM4M2Q5N2MtNThkZS00NTc1LTk1NTItNWEyZjJjNDRmNDk5XkEyXkFqcGdeQXVyMjA0MDQ0Mjc@._V1_.jpg"
 },
 {
title: "Legally Blonde",
year: 2001,
duration: "1h 36m",
rating: 6.3,
genre: "comedy",
 description: "Elle Woods, a fashionable sorority queen, is dumped by her boyfriend. She decides to follow him to law school.",
 image: "https://m.media-amazon.com/images/M/MV5BNTEyNjUwMTkxMV5BMl5BanBnXkFtZTcwNjk0NDk0NA@@._V1_.jpg"
 },
 {
title: "Ferris Bueller's Day Off",
year: 1986,
duration: "1h 43m",
rating: 7.8,
genre: "comedy",
 description: "A high school wise guy is determined to have a day off from school, despite what the principal thinks of that.",
 image: "https://m.media-amazon.com/images/M/MV5BMDA0NjZhZWUtNmI2NC00MmFjLTgwZDYtYzVjZmNhMDVmOTBkXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "The Intouchables",
year: 2011,
duration: "1h 52m",
rating: 8.5,
genre: "drama",
 description: "After he becomes a quadriplegic from a paragliding accident, an aristocrat hires a young man from the projects to be his caregiver.",
 image: "https://m.media-amazon.com/images/M/MV5BMTYxNDA3MDQwNl5BMl5BanBnXkFtZTcwNTU4Mzc1Nw@@._V1_.jpg"
 }
 ],
 sad: [
 {
title: "The Green Mile",
year: 1999,
duration: "3h 9m",
rating: 8.6,
genre: "drama",
 description: "The lives of guards on Death Row are affected by one of their charges who possesses a magical gift.",
 image: "https://m.media-amazon.com/images/M/MV5BMTUxMzQyNjA5MF5BMl5BanBnXkFtZTYwOTU2NTY3._V1_.jpg"
 },
 {
title: "Schindler's List",
year: 1993,
duration: "3h 15m",
rating: 9.0,
genre: "drama",
 description: "In German-occupied Poland during World War II, industrialist Oskar Schindler gradually becomes concerned for his Jewish workforce.",
 image: "https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTlkODY2XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg"
 },
 {
title: "The Fault in Our Stars",
year: 2014,
duration: "2h 6m",
rating: 7.7,
genre: "romance",
 description: "Two teenage cancer patients begin a life-affirming journey to visit a reclusive author in Amsterdam.",
 image: "https://m.media-amazon.com/images/M/MV5BMjA4NzkxNzc5Ml5BMl5BanBnXkFtZTgwNzQ3OTMxMTE@._V1_.jpg"
 },
 {
title: "Manchester by the Sea",
year: 2016,
duration: "2h 17m",
rating: 7.8,
genre: "drama",
 description: "A depressed uncle is asked to take care of his teenage nephew after the boy's father dies.",
 image: "https://m.media-amazon.com/images/M/MV5BMTEyNzc5NjczNDReQTJeQWpwZ15BbWU4MDYzODU2MTIx._V1_.jpg"
 },
 {
title: "Atonement",
year: 2007,
duration: "2h 3m",
rating: 7.8,
genre: "drama",
 description: "Thirteen-year-old fledgling writer Briony Tallis irrevocably changes the course of several lives when she accuses her older sister's lover of a crime.",
 image: "https://m.media-amazon.com/images/M/MV5BMTUzNTE2NTkzMV5BMl5BanBnXkFtZTgwMDAzNzU5MTI@._V1_.jpg"
 },
 {
title: "The Pianist",
year: 2002,
duration: "2h 30m",
rating: 8.5,
genre: "drama",
 description: "A Polish Jewish musician struggles to survive the destruction of the Warsaw ghetto during World War II.",
 image: "https://m.media-amazon.com/images/M/MV5BOWRiZDIxZjktMTA1NC00MDQ2LWEzMjUtMTliZmY3NjQ3ODJiXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg"
 },
 {
title: "Grave of the Fireflies",
year: 1988,
duration: "1h 29m",
rating: 8.5,
genre: "drama",
 description: "A young boy and his little sister struggle to survive in Japan during World War II.",
 image: "https://m.media-amazon.com/images/M/MV5BZmY2NjUzNDQtNTgxNC00M2Q4LTljOWQtMjNjNDBjNWUxNmJlXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg"
 },
 {
title: "Blue Valentine",
year: 2010,
duration: "1h 52m",
rating: 7.4,
genre: "drama",
 description: "The film centers on a contemporary married couple, charting their evolution over a span of years by cross-cutting between time periods.",
 image: "https://m.media-amazon.com/images/M/MV5BMTQ2NDM5MTI4NF5BMl5BanBnXkFtZTcwMjA3NzI5NQ@@._V1_.jpg"
 }
 ],
 romantic: [
 {
title: "The Notebook",
year: 2004,
duration: "2h 4m",
rating: 7.8,
genre: "romance",
 description: "A poor yet passionate young man falls in love with a rich young woman, giving her a sense of freedom.",
 image: "https://m.media-amazon.com/images/M/MV5BMTk3OTM5Njg5M15BMl5BanBnXkFtZTYwMzA0ODI3._V1_.jpg"
 },
 {
title: "Pride & Prejudice",
year: 2005,
duration: "2h 9m",
rating: 7.8,
genre: "romance",
 description: "Sparks fly when spirited Elizabeth Bennet meets single, rich, and proud Mr. Darcy in this adaptation of Jane Austen's novel.",
 image: "https://m.media-amazon.com/images/M/MV5BMTA1NDQ3NTcyOTNeQTJeQWpwZ15BbWU3MDA0MzE4MzE@._V1_.jpg"
 },
 {
title: "Before Sunrise",
year: 1995,
duration: "1h 41m",
rating: 8.1,
genre: "romance",
 description: "A young man and woman meet on a train in Europe, and wind up spending one evening together in Vienna.",
 image: "https://m.media-amazon.com/images/M/MV5BZDdiZTAwYzAtMDI3Ni00OTRjLTkzN2UtMGE1MDY5MzQ1MTg3XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg"
 },
 {
title: "La La Land",
year: 2016,
duration: "2h 8m",
rating: 8.0,
genre: "musical",
 description: "While navigating their careers in Los Angeles, a pianist and an actress fall in love while attempting to reconcile their aspirations.",
 image: "https://m.media-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_.jpg"
 },
 {
title: "Eternal Sunshine of the Spotless Mind",
year: 2004,
duration: "1h 48m",
rating: 8.3,
genre: "sci-fi",
 description: "When their relationship turns sour, a couple undergoes a medical procedure to have each other erased from their memories.",
 image: "https://m.media-amazon.com/images/M/MV5BMTY4NzcwODg3Nl5BMl5BanBnXkFtZTcwNTEwOTMyMw@@._V1_.jpg"
 },
 {
title: "Casablanca",
year: 1942,
duration: "1h 42m",
rating: 8.5,
genre: "drama",
 description: "A cynical expatriate American cafe owner struggles to decide whether or not to help his former lover and her fugitive husband escape.",
 image: "https://m.media-amazon.com/images/M/MV5BY2IzZGY2YmEtYzljNS00NWM5LThjNDQtMDIzM2UxN2JmNjY0XkEyXkFqcGdeQXVyNDYyMDk5MTU@._V1_.jpg"
 },
 {
title: "Call Me by Your Name",
year: 2017,
duration: "2h 12m",
rating: 7.9,
genre: "romance",
 description: "In 1980s Italy, romance blossoms between a seventeen-year-old student and the older man hired as his father's research assistant.",
 image: "https://m.media-amazon.com/images/M/MV5BNDk3NTEwNjc0MV5BMl5BanBnXkFtZTgwNzYxNTMwMzI@._V1_.jpg"
 },
 {
title: "Silver Linings Playbook",
year: 2012,
duration: "2h 2m",
rating: 7.7,
genre: "romance",
 description: "After a stint in a mental institution, former teacher Pat Solitano moves back in with his parents and tries to reconcile with his ex-wife.",
 image: "https://m.media-amazon.com/images/M/MV5BMTM2MTI5NzA3MF5BMl5BanBnXkFtZTcwODExNTc0OA@@._V1_.jpg"
 }
 ],
 adventurous: [
 {
title: "Indiana Jones: Raiders of the Lost Ark",
year: 1981,
duration: "1h 55m",
rating: 8.4,
genre: "action",
 description: "Archaeology professor Indiana Jones ventures to seize a biblical artefact known as the Ark of the Covenant.",
 image: "https://m.media-amazon.com/images/M/MV5BNTU2ODkyY2MtMjU1NC00NjE1LWEzYjgtMWQ3MzRhMTE0NDc0XkEyXkFqcGdeQXVyMjM4MzQ4OTQ@._V1_.jpg"
 },
 {
title: "The Lord of the Rings: The Fellowship of the Ring",
year: 2001,
duration: "2h 58m",
rating: 8.8,
genre: "fantasy",
 description: "A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring.",
 image: "https://m.media-amazon.com/images/M/MV5BN2EyZjM3NzUtNWUzMi00MTgxLWI0NTctMzY4M2VlOTdjZWRiXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_.jpg"
 },
 {
title: "Jurassic Park",
year: 1993,
duration: "2h 7m",
rating: 8.1,
genre: "sci-fi",
 description: "A pragmatic paleontologist touring an almost complete theme park is tasked with protecting a couple of kids.",
 image: "https://m.media-amazon.com/images/M/MV5BMjM2MDgxMDg0Nl5BMl5BanBnXkFtZTgwNTM2OTM5NDE@._V1_.jpg"
 },
 {
title: "Mad Max: Fury Road",
year: 2015,
duration: "2h",
rating: 8.1,
genre: "action",
 description: "In a post-apocalyptic wasteland, a woman rebels against a tyrannical ruler in search of her homeland.",
 image: "https://m.media-amazon.com/images/M/MV5BN2EwM2I5OWMtMGQyMi00Zjg1LWJkNTctZTdjYTA4OGUwZjMyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
 },
 {
title: "The Revenant",
year: 2015,
duration: "2h 36m",
rating: 8.0,
genre: "adventure",
 description: "A frontiersman on a fur trading expedition in the 1820s fights for survival after being mauled by a bear.",
 image: "https://m.media-amazon.com/images/M/MV5BMDE5OWMzM2QtOTU2ZS00NzAyLWI2MDEtOTRlYjIxZGM0OWRjXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_.jpg"
 },
 {
title: "Star Wars: Episode IV - A New Hope",
year: 1977,
duration: "2h 1m",
rating: 8.6,
genre: "sci-fi",
 description: "Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a Wookiee and two droids to save the galaxy.",
 image: "https://m.media-amazon.com/images/M/MV5BOTA5NjhiOTAtZWM0ZC00MWNhLThiMzEtZDFkOTk2OTM1ZDJkXkEyXkFqcGdeQXVyMTA4NDI1NTQx._V1_.jpg"
 },
 {
title: "The Martian",
year: 2015,
duration: "2h 24m",
rating: 8.0,
genre: "sci-fi",
 description: "An astronaut becomes stranded on Mars after his team assume him dead, and must rely on his ingenuity to find a way to signal to Earth.",
 image: "https://m.media-amazon.com/images/M/MV5BMTc2MTQ3MDA1Nl5BMl5BanBnXkFtZTgwODA3OTI4NjE@._V1_.jpg"
 },
 {
title: "Into the Wild",
year: 2007,
duration: "2h 28m",
rating: 8.1,
genre: "adventure",
 description: "After graduating from Emory University, top student and athlete Christopher McCandless abandons his possessions.",
 image: "https://m.media-amazon.com/images/M/MV5BMTAwNDEyODU1MjheQTJeQWpwZ15BbWU2MDc3NDQwNw@@._V1_.jpg"
 }
 ],
 tired: [
 {
title: "Lost in Translation",
year: 2003,
duration: "1h 42m",
rating: 7.7,
genre: "drama",
 description: "A faded movie star and a neglected young woman form an unlikely bond after crossing paths in Tokyo.",
 image: "https://m.media-amazon.com/images/M/MV5BMTI2NDI5ODk4N15BMl5BanBnXkFtZTYwMTI3NTE3._V1_.jpg"
 },
 {
title: "Her",
year: 2013,
duration: "2h 6m",
rating: 8.0,
genre: "sci-fi",
 description: "In a near future, a lonely writer develops an unlikely relationship with an operating system designed to meet his every need.",
 image: "https://m.media-amazon.com/images/M/MV5BMjA1Nzk0OTM2OF5BMl5BanBnXkFtZTgwNjU2NjEwMDE@._V1_.jpg"
 },
 {
title: "Paterson",
year: 2016,
duration: "1h 58m",
rating: 7.4,
genre: "drama",
 description: "A quiet observation of the triumphs and defeats of daily life, along with the poetry evident in its smallest details.",
 image: "https://m.media-amazon.com/images/M/MV5BMjU2OTQ5NTQ0NF5BMl5BanBnXkFtZTgwNjk3MDIyMDI@._V1_.jpg"
 },
 {
title: "The Secret Life of Walter Mitty",
year: 2013,
duration: "1h 54m",
rating: 7.3,
genre: "adventure",
 description: "When his job along with that of his co-worker are threatened, Walter takes action in the real world.",
 image: "https://m.media-amazon.com/images/M/MV5BODYwNDYxNDk1Nl5BMl5BanBnXkFtZTgwOTAwMTk2MDE@._V1_.jpg"
 },
 {
title: "Before Sunset",
year: 2004,
duration: "1h 20m",
rating: 8.1,
genre: "romance",
 description: "Nine years after their first meeting, Jesse and Celine encounter each other again on the French leg of Jesse's book tour.",
 image: "https://m.media-amazon.com/images/M/MV5BMTQ1MjAwNTM1Ml5BMl5BanBnXkFtZTYwNDM0MTc3._V1_.jpg"
 },
 {
title: "The Straight Story",
year: 1999,
duration: "1h 52m",
rating: 8.0,
genre: "drama",
 description: "An old man makes a long journey by lawn mower to mend his relationship with an ill brother.",
 image: "https://m.media-amazon.com/images/M/MV5BMTcwMTY3NzA2N15BMl5BanBnXkFtZTcwODQzNDU3OA@@._V1_.jpg"
 },
 {
title: "Columbus",
year: 2017,
duration: "1h 44m",
rating: 7.3,
genre: "drama",
 description: "A Korean-born man finds himself stuck in Columbus, Indiana, where his architect father is in a coma.",
 image: "https://m.media-amazon.com/images/M/MV5BOTY0MzA3NmQtMDQ2YS00MmIyLTkzNWItNDY0NjE0MjJlOTVjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
 },
 {
title: "A Ghost Story",
year: 2017,
duration: "1h 32m",
rating: 6.8,
genre: "drama",
 description: "In this singular exploration of legacy, love, loss, and the enormity of existence, a recently deceased, white-sheeted ghost returns to his suburban home.",
 image: "https://m.media-amazon.com/images/M/MV5BNzE3NjI0ODc0N15BMl5BanBnXkFtZTgwMjYzNjU2MTI@._V1_.jpg"
 }
 ],
 thoughtful: [
 {
title: "The Shawshank Redemption",
year: 1994,
duration: "2h 22m",
rating: 9.3,
genre: "drama",
 description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
 image: "https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
 },
 {
title: "Inception",
year: 2010,
duration: "2h 28m",
rating: 8.8,
genre: "sci-fi",
 description: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task.",
 image: "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_.jpg"
 },
 {
title: "The Matrix",
year: 1999,
duration: "2h 16m",
rating: 8.7,
genre: "sci-fi",
 description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war.",
 image: "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg"
 },
 {
title: "Interstellar",
year: 2014,
duration: "2h 49m",
rating: 8.6,
genre: "sci-fi",
 description: "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
 image: "https://m.media-amazon.com/images/M/MV5BZjdkOTU3MDktN2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
 },
 {
title: "The Social Network",
year: 2010,
duration: "2h",
rating: 7.7,
genre: "drama",
 description: "As Harvard student Mark Zuckerberg creates the social networking site that would become Facebook, he is sued by the twins.",
 image: "https://m.media-amazon.com/images/M/MV5BOGUyZDUxZjEtMmIzMC00MzlmLTg4MGItZWJmMzBhZjE0Mjc1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
 },
 {
title: "Gattaca",
year: 1997,
duration: "1h 46m",
rating: 7.8,
genre: "sci-fi",
 description: "A genetically inferior man assumes the identity of a superior one in order to pursue his lifelong dream of space travel.",
 image: "https://m.media-amazon.com/images/M/MV5BNDQxOTc0MzMtZmRlOS00OWQ5LWI2ZDctOTAwNmMwOTYxYzlhXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "Arrival",
year: 2016,
duration: "1h 56m",
rating: 7.9,
genre: "sci-fi",
 description: "A linguist works with the military to communicate with alien lifeforms after twelve mysterious spacecraft appear around the world.",
 image: "https://m.media-amazon.com/images/M/MV5BMTExMzU0ODcxNDheQTJeQWpwZ15BbWU4MDE1OTI4MzAy._V1_.jpg"
 },
 {
title: "Ex Machina",
year: 2014,
duration: "1h 48m",
rating: 7.7,
genre: "sci-fi",
 description: "A young programmer is selected to participate in a ground-breaking experiment in synthetic intelligence by evaluating the human qualities of a female A.I.",
 image: "https://m.media-amazon.com/images/M/MV5BMTUxNzc0OTIxMV5BMl5BanBnXkFtZTgwNDI3NzU2NDE@._V1_.jpg"
 }
 ],
 emotional: [
 {
title: "Forrest Gump",
year: 1994,
duration: "2h 22m",
rating: 8.8,
genre: "drama",
 description: "The presidencies of Kennedy and Johnson, the events of Vietnam, Watergate, and other historical events unfold.",
 image: "https://m.media-amazon.com/images/M/MV5BNWIwODRlZTUtY2U3ZS00Yzg1LWJhNzYtMmZiYmEyNmU1NjMzXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "Life is Beautiful",
year: 1997,
duration: "1h 56m",
rating: 8.6,
genre: "drama",
 description: "When an open-minded Jewish librarian and his son become victims of the Holocaust, he uses imagination to protect his son.",
 image: "https://m.media-amazon.com/images/M/MV5BYmJmM2Q4NmMtYThmNC00ZjRlLWEyZmItZTIwOTBlZDQ3NTQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "The Pursuit of Happyness",
year: 2006,
duration: "1h 57m",
rating: 8.0,
genre: "drama",
 description: "A struggling salesman takes custody of his son as he's poised to begin a life-changing professional career.",
 image: "https://m.media-amazon.com/images/M/MV5BMTQ5NjQ0NDI3NF5BMl5BanBnXkFtZTcwNDI0MjEzMw@@._V1_.jpg"
 },
 {
title: "Good Will Hunting",
year: 1997,
duration: "2h 6m",
rating: 8.3,
genre: "drama",
 description: "Will Hunting, a janitor at M.I.T., has a gift for mathematics but needs help from a psychologist to find direction.",
 image: "https://m.media-amazon.com/images/M/MV5BOTI0MzcxMTYtZDVkMy00NjY1LTgyMTYtZmUxN2M3NmQ2NWJhXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "The Perks of Being a Wallflower",
year: 2012,
duration: "1h 43m",
rating: 7.9,
genre: "drama",
 description: "An introvert freshman is taken under the wings of two seniors who welcome him to the real world.",
 image: "https://m.media-amazon.com/images/M/MV5BMTQyNjYxNDU5OV5BMl5BanBnXkFtZTcwNjI2NzQwOA@@._V1_.jpg"
 },
 {
title: "A Beautiful Mind",
year: 2001,
duration: "2h 15m",
rating: 8.2,
genre: "drama",
 description: "After John Nash, a brilliant mathematician, accepts secret work in cryptography, his life takes a turn for the nightmarish.",
 image: "https://m.media-amazon.com/images/M/MV5BMzcwYWFkYzktZjAzNC00OGY1LWI4YTgtNzc5MzVjMDVmNjY0XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"
 },
 {
title: "Moonlight",
year: 2016,
duration: "1h 51m",
rating: 7.4,
genre: "drama",
 description: "A young African-American man grapples with his identity and sexuality while experiencing the everyday struggles of childhood, adolescence, and burgeoning adulthood.",
 image: "https://m.media-amazon.com/images/M/MV5BNzQxNTIyODAxMV5BMl5BanBnXkFtZTgwNzQyMDA3OTE@._V1_.jpg"
 },
 {
title: "The Father",
year: 2020,
duration: "1h 37m",
rating: 8.3,
genre: "drama",
 description: "A man refuses all assistance from his daughter as he ages and begins to doubt his loved ones, his own mind and even the fabric of his reality.",
 image: "https://m.media-amazon.com/images/M/MV5BZGJhNWRiOWQtMjI4OS00ZjcxLTgwMTYtOWFkMzBlODY0ZjFhXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg"
 }
 ],
 bored: [
 {
title: "Pulp Fiction",
year: 1994,
duration: "2h 34m",
rating: 8.9,
genre: "crime",
 description: "The lives of two mob hitmen, a boxer, a gangster and his wife, and a pair of diner bandits intertwine in four tales.",
 image: "https://m.media-amazon.com/images/M/MV5BNGNhMDIzZTUtNTBlZi00MTRlLWFjM2ItYzViMjE3YzI5MjljXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg"
 },
 {
title: "Fight Club",
year: 1999,
duration: "2h 19m",
rating: 8.8,
genre: "drama",
 description: "An insomniac office worker and a devil-may-care soapmaker form an underground fight club that evolves into something much more.",
 image: "https://m.media-amazon.com/images/M/MV5BMmEzNTkxYjQtZTc0MC00YTVjLTg5ZTEtZWMwOWVlYzY0NWIwXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg"
 },
 {
title: "The Big Lebowski",
year: 1998,
duration: "1h 57m",
rating: 8.1,
genre: "comedy",
 description: "Jeff 'The Dude' Lebowski, mistaken for a millionaire of the same name, seeks restitution for his ruined rug.",
 image: "https://m.media-amazon.com/images/M/MV5BMTQ0NjUzMDMyOF5BMl5BanBnXkFtZTgwODA1OTU0MDE@._V1_.jpg"
 },
 {
title: "Snatch",
year: 2000,
duration: "1h 42m",
rating: 8.2,
genre: "crime",
 description: "Unscrupulous boxing promoters, violent bookmakers, a Russian gangster, and a Jewish jewelers plot to steal a priceless diamond.",
 image: "https://m.media-amazon.com/images/M/MV5BMTA2NDYxOGYtYjU1Mi00Y2QzLTgxMTQtMWI1MGI0ZGQ5MmU4XkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_.jpg"
 },
 {
title: "Kill Bill: Vol. 1",
year: 2003,
duration: "1h 51m",
rating: 8.2,
genre: "action",
 description: "After awakening from a four-year coma, a former assassin wreaks vengeance on the team of assassins who betrayed her.",
 image: "https://m.media-amazon.com/images/M/MV5BNzM3NDFhYTAtYmU5Mi00NGRmLTljYjgtMDkyODQ4MjNkMGY2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg"
 },
 {
title: "The Wolf of Wall Street",
year: 2013,
duration: "3h",
rating: 8.2,
genre: "crime",
 description: "Based on the true story of Jordan Belfort, from his rise to a wealthy stockbroker to his fall involving crime and corruption.",
 image: "https://m.media-amazon.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_.jpg"
 },
 {
title: "Inglourious Basterds",
year: 2009,
duration: "2h 33m",
rating: 8.3,
genre: "drama",
 description: "In Nazi-occupied France during World War II, a plan to assassinate Nazi leaders by a group of Jewish U.S. soldiers coincides with a theatre owner's vengeful plans.",
 image: "https://m.media-amazon.com/images/M/MV5BOTJiNDEzOWYtMTVjOC00ZjlmLWE0NGMtZmE1OWVmZDQ2OWJhXkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_.jpg"
 },
 {
title: "The Nice Guys",
year: 2016,
duration: "1h 56m",
rating: 7.4,
genre: "comedy",
 description: "In 1970s Los Angeles, a mismatched pair of private eyes investigate a missing girl and the mysterious death of a porn star.",
 image: "https://m.media-amazon.com/images/M/MV5BODNlNmU4MGItMzQwZi00NGQyLWEyZWItYjFkNmI0NWI4NjBhXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_.jpg"
 }
 ]
 };
 // DOM Elements
 const moodButtons = document.querySelectorAll('.mood-btn');
 const resultsSection = document.getElementById('results-section');
 const movieResults = document.getElementById('movie-results');
 const selectedMoodText = document.getElementById('selected-mood-text');
 const changeMoodBtn = document.getElementById('change-mood');
 const genreFilters = document.querySelectorAll('.genre-filter');
 const loadMoreBtn = document.getElementById('load-more');
 const themeToggle = document.getElementById('theme-toggle');
 // Variables
 let currentMood = '';
 let currentGenre = 'all';
 let displayedMovies = 6;
 const moviesPerLoad = 6;
 // Event Listeners
 moodButtons.forEach(button => {
 button.addEventListener('click', () => {
 currentMood = button.dataset.mood;
 displayedMovies = 6; // Reset displayed movies count when mood changes
 showMovies(currentMood);
 });
 });
 changeMoodBtn.addEventListener('click', () => {
 resultsSection.classList.add('hidden');
 window.scrollTo({ top: 0, behavior: 'smooth' });
 });
 genreFilters.forEach(filter => {
 filter.addEventListener('click', () => {
 // Remove active class from all filters
 genreFilters.forEach(f => f.classList.remove('active', 'bg-purple-600', 'text-white'));
// Add active class to clicked filter
 filter.classList.add('active', 'bg-purple-600', 'text-white');
currentGenre = filter.dataset.genre;
 displayedMovies = 6; // Reset displayed movies count when genre changes
 showMovies(currentMood);
 });
 });
 loadMoreBtn.addEventListener('click', () => {
 displayedMovies += moviesPerLoad;
 showMovies(currentMood);
 });
 themeToggle.addEventListener('click', () => {
 document.body.classList.toggle('dark');
 if (document.body.classList.contains('dark')) {
 themeToggle.innerHTML = '<i class="fas fa-sun mr-2"></i> Light Mode';
 themeToggle.classList.remove('bg-white', 'text-purple-700');
 themeToggle.classList.add('bg-gray-800', 'text-white');
 } else {
 themeToggle.innerHTML = '<i class="fas fa-moon mr-2"></i> Dark Mode';
 themeToggle.classList.add('bg-white', 'text-purple-700');
 themeToggle.classList.remove('bg-gray-800', 'text-white');
 }
 });
 // Functions
 function showMovies(mood) {
 // Update UI
 selectedMoodText.textContent = mood;
 resultsSection.classList.remove('hidden');
// Filter movies by genre if needed
 let filteredMovies = movieDatabase[mood];
 if (currentGenre !== 'all') {
 filteredMovies = movieDatabase[mood].filter(movie => movie.genre === currentGenre);
 }
// Clear previous results
 movieResults.innerHTML = '';
// Display movies (up to displayedMovies count)
 const moviesToShow = filteredMovies.slice(0, displayedMovies);
if (moviesToShow.length === 0) {
 movieResults.innerHTML = `
 <div class="col-span-full text-center py-12">
 <i class="fas fa-film text-5xl text-gray-400 mb-4"></i>
 <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">No movies found</h3>
 <p class="text-gray-500 dark:text-gray-400 mt-2">Try selecting a different genre</p>
 </div>
 `;
 loadMoreBtn.classList.add('hidden');
 } else {
 moviesToShow.forEach(movie => {
 const movieCard = createMovieCard(movie);
 movieResults.appendChild(movieCard);
 });
// Show/hide load more button
 if (filteredMovies.length > displayedMovies) {
 loadMoreBtn.classList.remove('hidden');
 } else {
 loadMoreBtn.classList.add('hidden');
 }
 }
// Scroll to results
 setTimeout(() => {
 resultsSection.scrollIntoView({ behavior: 'smooth' });
 }, 100);
 }
 function createMovieCard(movie) {
 const card = document.createElement('div');
 card.className = 'movie-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg fade-in';
 card.innerHTML = `
 <div class="h-48 overflow-hidden">
 <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover">
 </div>
 <div class="p-6">
 <div class="flex justify-between items-start mb-2">
 <h3 class="text-xl font-bold text-gray-800 dark:text-white">${movie.title}</h3>
 <span class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-sm font-semibold px-2.5 py-0.5 rounded-full">${movie.rating}/10</span>
 </div>
 <div class="flex items-center text-gray-600 dark:text-gray-300 text-sm mb-4">
 <span class="mr-4"><i class="far fa-calendar-alt mr-1"></i> ${movie.year}</span>
 <span><i class="far fa-clock mr-1"></i> ${movie.duration}</span>
 </div>
 <p class="text-gray-600 dark:text-gray-300 mb-4">${movie.description}</p>
 <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">${movie.genre}</span>
 </div>
 `;
 return card;
 }
 // Initialize
 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 document.body.classList.add('dark');
 themeToggle.innerHTML = '<i class="fas fa-sun mr-2"></i> Light Mode';
 themeToggle.classList.remove('bg-white', 'text-purple-700');
 themeToggle.classList.add('bg-gray-800', 'text-white');
 }
 </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=UnknownUser0/my-webcite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>