| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MindFrame - Discover films that resonate with your spirit</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .vanta-bg { |
| min-height: 100vh; |
| width: 100%; |
| position: relative; |
| } |
| |
| .hero-content { |
| position: relative; |
| z-index: 10; |
| } |
| |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| |
| .movie-card { |
| transition: all 0.3s ease; |
| } |
| |
| .movie-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .quiz-container { |
| min-height: 70vh; |
| } |
| |
| .archetype-badge { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.8s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .loading-dots:after { |
| content: ''; |
| animation: dots 1.5s steps(5, end) infinite; |
| } |
| |
| @keyframes dots { |
| 0%, 20% { content: '.'; } |
| 40% { content: '..'; } |
| 60%, 100% { content: '...'; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <div id="homepage"> |
| <div id="vanta-bg" class="vanta-bg flex items-center justify-center"> |
| <div class="hero-content text-center px-6 max-w-3xl"> |
| <h1 class="text-5xl md:text-6xl font-bold text-white mb-4 font-['Playfair_Display']" data-aos="fade-down">MindFrame</h1> |
| <p class="text-xl md:text-2xl text-white mb-8 italic" data-aos="fade-down" data-aos-delay="200">"Discover films that resonate with your spirit."</p> |
| <p class="text-lg text-gray-200 mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="400">Your personality shapes the stories you love. Let's find yours.</p> |
| <button onclick="startQuiz()" class="bg-white text-indigo-700 px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg" data-aos="zoom-in" data-aos-delay="600"> |
| Begin Your Analysis |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="quiz-page" class="hidden min-h-screen py-16 px-4"> |
| <div class="max-w-3xl mx-auto quiz-container flex flex-col justify-center"> |
| <div class="mb-10"> |
| <div class="h-2 bg-gray-200 rounded-full"> |
| <div id="progress-bar" class="progress-bar h-2 bg-indigo-600 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div id="question-container" class="text-center mb-12"> |
| <h2 id="question-title" class="text-2xl md:text-3xl font-semibold mb-8"></h2> |
| <div id="answers-container" class="grid gap-4 max-w-xl mx-auto"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="loading-screen" class="hidden min-h-screen flex items-center justify-center bg-gray-900"> |
| <div class="text-center text-white"> |
| <div class="w-24 h-24 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-8"></div> |
| <h2 class="text-2xl font-semibold mb-4">Calibrating your profile<span class="loading-dots"></span></h2> |
| <p class="text-gray-300">Mapping your cinematic DNA</p> |
| </div> |
| </div> |
|
|
| |
| <div id="results-page" class="hidden min-h-screen py-12 px-4 bg-gray-50"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Your Movie Personality</h2> |
| <div id="archetype-badge" class="archetype-badge inline-block px-6 py-2 rounded-full text-white font-semibold text-xl mb-6"></div> |
| <p id="archetype-description" class="text-lg text-gray-700 max-w-2xl mx-auto"></p> |
| </div> |
| |
| <div class="mb-16"> |
| <h3 class="text-2xl font-semibold mb-6 text-center">Your Top Movie Match</h3> |
| <div id="top-movie" class="bg-white rounded-xl shadow-lg overflow-hidden max-w-2xl mx-auto movie-card"> |
| <div class="md:flex"> |
| <div id="movie-poster" class="md:w-2/5 h-80 bg-cover bg-center"></div> |
| <div class="p-6 md:w-3/5"> |
| <h4 id="movie-title" class="text-2xl font-bold mb-2"></h4> |
| <div class="flex items-center mb-4"> |
| <span id="movie-genre" class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full mr-3"></span> |
| <span id="movie-rating" class="flex items-center text-yellow-500"> |
| <i data-feather="star" class="w-4 h-4 mr-1 fill-current"></i> |
| <span></span> |
| </span> |
| </div> |
| <p id="movie-match-reason" class="text-gray-700 mb-4 italic"></p> |
| <div class="mt-6"> |
| <p class="text-sm text-gray-500 mb-2">Where to watch:</p> |
| <div id="streaming-links" class="flex space-x-3"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-12"> |
| <h3 class="text-2xl font-semibold mb-6 text-center">More For Your Archetype</h3> |
| <div id="recommended-movies" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"></div> |
| </div> |
| |
| <div class="text-center"> |
| <button onclick="restartQuiz()" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition-colors"> |
| Retake the Analysis |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| feather.replace(); |
| |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x5f6eea, |
| backgroundColor: 0x0a0e2a, |
| size: 0.8 |
| }); |
| }); |
| |
| |
| const questions = [ |
| { |
| title: "The Worldview", |
| question: "You find a mysterious, locked door in an old library. What is your first instinct?", |
| answers: [ |
| { text: "Find the key at all costs. Every secret must be uncovered.", archetype: "explorer" }, |
| { text: "Imagine the incredible worlds that could lie behind it.", archetype: "dreamer" }, |
| { text: "Consider the potential dangers and warn others to stay away.", archetype: "guardian" }, |
| { text: "Assume it's just a forgotten closet and move on.", archetype: "realist" } |
| ] |
| }, |
| { |
| title: "The Driving Force", |
| question: "Which quote speaks to you the most?", |
| answers: [ |
| { text: "\"The only true wisdom is in knowing you know nothing.\"", archetype: "sage" }, |
| { text: "\"Fortune favors the bold.\"", archetype: "hero" }, |
| { text: "\"The heart has its reasons, of which reason knows nothing.\"", archetype: "lover" }, |
| { text: "\"Chaos is a ladder.\"", archetype: "rebel" } |
| ] |
| }, |
| { |
| title: "The Emotional Core", |
| question: "A sudden storm washes away a bridge, leaving a village isolated. What do you focus on?", |
| answers: [ |
| { text: "The engineering challenge of rebuilding it stronger than before.", archetype: "realist" }, |
| { text: "The stories of the villagers and how they are coping together.", archetype: "lover" }, |
| { text: "The raw, untamed power of nature itself.", archetype: "dreamer" }, |
| { text: "The opportunity this creates for someone to rise as a leader.", archetype: "hero" } |
| ] |
| } |
| ]; |
| |
| |
| const archetypes = { |
| explorer: { |
| name: "The Explorer", |
| description: "As an Explorer, you are driven by curiosity and a desire for the unknown. You crave stories that challenge your intellect, uncover hidden truths, and journey to the very edge of the map.", |
| keywords: "conspiracy,investigation,ancient-mystery", |
| genres: "Mystery,Sci-Fi" |
| }, |
| dreamer: { |
| name: "The Dreamer", |
| description: "As a Dreamer, you see beyond the ordinary and find magic in the mundane. You're drawn to stories that explore imagination, alternate realities, and the boundless possibilities of the human spirit.", |
| keywords: "surrealism,alternate-reality,magic", |
| genres: "Fantasy,Drama" |
| }, |
| guardian: { |
| name: "The Guardian", |
| description: "As a Guardian, you value safety, stability, and protection. You appreciate stories about loyalty, sacrifice, and the courage to stand up for what's right against overwhelming odds.", |
| keywords: "protection,honor,sacrifice", |
| genres: "Drama,Action" |
| }, |
| realist: { |
| name: "The Realist", |
| description: "As a Realist, you're grounded, practical, and solution-oriented. You prefer stories that reflect the complexities of real life, with logical progression and tangible outcomes.", |
| keywords: "pragmatism,problem-solving,truth", |
| genres: "Drama,Thriller" |
| }, |
| sage: { |
| name: "The Sage", |
| description: "As a Sage, you seek knowledge, wisdom, and understanding. You're drawn to stories that explore profound truths, philosophical questions, and the pursuit of enlightenment.", |
| keywords: "wisdom,philosophy,enlightenment", |
| genres: "Drama,History" |
| }, |
| hero: { |
| name: "The Hero", |
| description: "As a Hero, you value courage, determination, and overcoming challenges. You're inspired by stories of redemption, underdogs triumphing against the odds, and epic journeys of self-discovery.", |
| keywords: "redemption,underdog,last-stand", |
| genres: "Action,Adventure,War" |
| }, |
| lover: { |
| name: "The Lover", |
| description: "As a Lover, you're guided by emotion, connection, and passion. You're drawn to stories that explore the depths of human relationships, soulmate connections, and the transformative power of love.", |
| keywords: "soulmate,forbidden-love,sacrifice", |
| genres: "Romance,Drama" |
| }, |
| rebel: { |
| name: "The Rebel", |
| description: "As a Rebel, you challenge conventions, question authority, and embrace chaos as opportunity. You're drawn to stories about revolution, anti-heroes, and disrupting the status quo.", |
| keywords: "revolution,anti-hero,anarchy", |
| genres: "Action,Thriller" |
| } |
| }; |
| |
| |
| const mockMovies = { |
| explorer: { |
| topMatch: { |
| title: "Blade Runner 2049", |
| poster: "http://static.photos/technology/640x360/42", |
| genre: "Sci-Fi, Mystery", |
| rating: "8.0", |
| reason: "Like you, Blade Runner 2049 is a meticulous and philosophical journey into a great mystery. It will satisfy your need to uncover secrets and question the nature of reality.", |
| streaming: ["Netflix", "Amazon Prime", "HBO Max"] |
| }, |
| recommendations: [ |
| { title: "Inception", poster: "http://static.photos/abstract/320x240/101" }, |
| { title: "The Da Vinci Code", poster: "http://static.photos/mystery/320x240/102" }, |
| { title: "Interstellar", poster: "http://static.photos/space/320x240/103" }, |
| { title: "Shutter Island", poster: "http://static.photos/thriller/320x240/104" } |
| ] |
| }, |
| dreamer: { |
| topMatch: { |
| title: "The Fall", |
| poster: "http://static.photos/fantasy/640x360/43", |
| genre: "Fantasy, Drama", |
| rating: "7.9", |
| reason: "This visually stunning film mirrors your imaginative spirit, blending reality with fantasy in a way that celebrates the power of storytelling and imagination.", |
| streaming: ["Amazon Prime", "Apple TV"] |
| }, |
| recommendations: [ |
| { title: "Pan's Labyrinth", poster: "http://static.photos/fantasy/320x240/105" }, |
| { title: "The Secret Life of Walter Mitty", poster: "http://static.photos/adventure/320x240/106" }, |
| { title: "Big Fish", poster: "http://static.photos/fantasy/320x240/107" }, |
| { title: "The Science of Sleep", poster: "http://static.photos/abstract/320x240/108" } |
| ] |
| }, |
| |
| hero: { |
| topMatch: { |
| title: "The Lord of the Rings: The Fellowship of the Ring", |
| poster: "http://static.photos/adventure/640x360/44", |
| genre: "Adventure, Fantasy", |
| rating: "8.8", |
| reason: "This epic tale of courage against overwhelming odds resonates with your heroic spirit and belief in fighting for what's right, no matter the cost.", |
| streaming: ["HBO Max", "Amazon Prime"] |
| }, |
| recommendations: [ |
| { title: "Braveheart", poster: "http://static.photos/historical/320x240/109" }, |
| { title: "Gladiator", poster: "http://static.photos/historical/320x240/110" }, |
| { title: "Rocky", poster: "http://static.photos/sport/320x240/111" }, |
| { title: "300", poster: "http://static.photos/action/320x240/112" } |
| ] |
| } |
| }; |
| |
| let currentQuestion = 0; |
| let userArchetypeScores = {}; |
| let userArchetype = ""; |
| |
| function startQuiz() { |
| document.getElementById('homepage').classList.add('hidden'); |
| document.getElementById('quiz-page').classList.remove('hidden'); |
| showQuestion(0); |
| } |
| |
| function showQuestion(index) { |
| if (index >= questions.length) { |
| calculateResult(); |
| return; |
| } |
| |
| currentQuestion = index; |
| const question = questions[index]; |
| |
| |
| const progressPercent = ((index + 1) / questions.length) * 100; |
| document.getElementById('progress-bar').style.width = `${progressPercent}%`; |
| |
| |
| document.getElementById('question-title').innerHTML = ` |
| <span class="text-indigo-600">${question.title}</span><br> |
| ${question.question} |
| `; |
| |
| |
| const answersContainer = document.getElementById('answers-container'); |
| answersContainer.innerHTML = ''; |
| |
| question.answers.forEach((answer, i) => { |
| const answerElement = document.createElement('button'); |
| answerElement.className = 'bg-white p-4 rounded-lg border border-gray-200 text-left hover:border-indigo-400 hover:shadow-md transition-all duration-300'; |
| answerElement.innerHTML = answer.text; |
| answerElement.onclick = () => selectAnswer(answer.archetype); |
| answersContainer.appendChild(answerElement); |
| }); |
| } |
| |
| function selectAnswer(archetype) { |
| |
| if (!userArchetypeScores[archetype]) { |
| userArchetypeScores[archetype] = 0; |
| } |
| userArchetypeScores[archetype]++; |
| |
| |
| showQuestion(currentQuestion + 1); |
| } |
| |
| function calculateResult() { |
| |
| let maxScore = 0; |
| for (const archetype in userArchetypeScores) { |
| if (userArchetypeScores[archetype] > maxScore) { |
| maxScore = userArchetypeScores[archetype]; |
| userArchetype = archetype; |
| } |
| } |
| |
| |
| const topArchetypes = []; |
| for (const archetype in userArchetypeScores) { |
| if (userArchetypeScores[archetype] === maxScore) { |
| topArchetypes.push(archetype); |
| } |
| } |
| |
| if (topArchetypes.length > 1) { |
| userArchetype = topArchetypes[Math.floor(Math.random() * topArchetypes.length)]; |
| } |
| |
| |
| document.getElementById('quiz-page').classList.add('hidden'); |
| document.getElementById('loading-screen').classList.remove('hidden'); |
| |
| |
| setTimeout(showResults, 2500); |
| } |
| |
| function showResults() { |
| document.getElementById('loading-screen').classList.add('hidden'); |
| document.getElementById('results-page').classList.remove('hidden'); |
| |
| const archetypeData = archetypes[userArchetype]; |
| const movieData = mockMovies[userArchetype] || mockMovies.explorer; |
| |
| |
| document.getElementById('archetype-badge').textContent = archetypeData.name; |
| document.getElementById('archetype-description').textContent = archetypeData.description; |
| |
| |
| document.getElementById('movie-poster').style.backgroundImage = `url('${movieData.topMatch.poster}')`; |
| document.getElementById('movie-title').textContent = movieData.topMatch.title; |
| document.getElementById('movie-genre').textContent = movieData.topMatch.genre; |
| document.getElementById('movie-rating').querySelector('span').textContent = movieData.topMatch.rating; |
| document.getElementById('movie-match-reason').textContent = movieData.topMatch.reason; |
| |
| |
| const streamingLinks = document.getElementById('streaming-links'); |
| streamingLinks.innerHTML = ''; |
| movieData.topMatch.streaming.forEach(service => { |
| const link = document.createElement('span'); |
| link.className = 'bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full'; |
| link.textContent = service; |
| streamingLinks.appendChild(link); |
| }); |
| |
| |
| const recommendedContainer = document.getElementById('recommended-movies'); |
| recommendedContainer.innerHTML = ''; |
| movieData.recommendations.forEach(movie => { |
| const movieElement = document.createElement('div'); |
| movieElement.className = 'bg-white rounded-lg overflow-hidden shadow-md movie-card'; |
| movieElement.innerHTML = ` |
| <div class="h-48 bg-cover bg-center" style="background-image: url('${movie.poster}')"></div> |
| <div class="p-3"> |
| <h4 class="font-semibold text-sm truncate">${movie.title}</h4> |
| </div> |
| `; |
| recommendedContainer.appendChild(movieElement); |
| }); |
| |
| |
| feather.replace(); |
| } |
| |
| function restartQuiz() { |
| currentQuestion = 0; |
| userArchetypeScores = {}; |
| userArchetype = ""; |
| |
| document.getElementById('results-page').classList.add('hidden'); |
| document.getElementById('quiz-page').classList.remove('hidden'); |
| showQuestion(0); |
| } |
| </script> |
| </body> |
| </html> |
|
|
