Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MoodFlix - Movie Recommendations Based on 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:hover .mood-icon { | |
| transform: scale(1.2); | |
| transition: all 0.3s ease; | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| } | |
| .movie-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .rating-stars { | |
| color: #fbbf24; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .genre-tab { | |
| transition: all 0.2s ease; | |
| } | |
| .genre-tab:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .genre-tab.active { | |
| border-bottom: 3px solid #f59e0b; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-2 bg-gradient-to-r from-yellow-400 via-red-500 to-purple-600 bg-clip-text text-transparent"> | |
| MoodFlix | |
| </h1> | |
| <p class="text-lg text-gray-300">Find the perfect movie for your current mood</p> | |
| </header> | |
| <!-- Mood Selection --> | |
| <section id="mood-selection" class="mb-16"> | |
| <h2 class="text-2xl font-semibold mb-6 text-center">How are you feeling today?</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <!-- Happy --> | |
| <button onclick="selectMood('happy')" class="mood-btn bg-yellow-500/10 hover:bg-yellow-500/20 rounded-xl p-4 flex flex-col items-center justify-center h-32"> | |
| <div class="mood-icon text-3xl mb-2 text-yellow-400"> | |
| <i class="fas fa-laugh-beam"></i> | |
| </div> | |
| <span class="font-medium">Happy</span> | |
| </button> | |
| <!-- Sad --> | |
| <button onclick="selectMood('sad')" class="mood-btn bg-blue-500/10 hover:bg-blue-500/20 rounded-xl p-4 flex flex-col items-center justify-center h-32"> | |
| <div class="mood-icon text-3xl mb-2 text-blue-400"> | |
| <i class="fas fa-sad-tear"></i> | |
| </div> | |
| <span class="font-medium">Sad</span> | |
| </button | |
| </html> |