<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HAPPY BIRTHDAYAYAYAY DYLAN</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .container { text-align: center; background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 500px; width: 100%; } h1 { color: #e91e63; } #clue { font-size: 1.2rem; margin-bottom: 1rem; } input[type="text"] { width: 100%; padding: 0.5rem; font-size: 1rem; margin-bottom: 1rem; } button { padding: 0.5rem 1rem; font-size: 1rem; background-color: #e91e63; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #c2185b; } #message { margin-top: 1rem; font-weight: bold; color: #e91e63; } </style> </head> <body> <div class="container"> <h1>Happy birthday Dylan!!!!!</h1> <p id="clue"></p> <input type="text" id="answer" placeholder="Your answer plz"> <button onclick="checkAnswer()">Submit</button> <p id="message"></p> </div> <script> const clues = [ "Spicy Seoul-mate (5)", "Where a curious fox lives (9)", "American rock band, known for covering Gloria Gaynor's I Will Survive (4)" ]; const answers = ["kimchi", "bookstore", "cake"]; let currentClue = 0; function displayClue() { document.getElementById('clue').textContent = clues[currentClue]; document.getElementById('answer').value = ''; document.getElementById('message').textContent = ''; } function checkAnswer() { const userAnswer = document.getElementById('answer').value.toLowerCase().trim(); const messageElement = document.getElementById('message'); if (userAnswer === answers[currentClue]) { messageElement.textContent = "Correct! Well done!"; currentClue++; if (currentClue < clues.length) { setTimeout(() => { displayClue(); }, 1500); } else { setTimeout(() => { messageElement.textContent = "WOWOWOWO congrats :-) too easy huh??? Okay come get your presents you deserve it"; setTimeout(() => { window.location.href = "map.html"; }, 3000); }, 1500); } } else { messageElement.textContent = "Oops! Try again maybe?"; } } displayClue(); </script> </body> </html>