Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fun English Adventure - Grade 2</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> | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .bounce-animation { | |
| animation: bounce 1s infinite; | |
| } | |
| .card-flip { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .card-flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .card-front, .card-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-100 to-purple-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-purple-600 mb-2"> | |
| <i class="fas fa-book-open mr-2"></i>Fun English Adventure | |
| </h1> | |
| <p class="text-lg text-gray-600">Let's learn English in a fun way!</p> | |
| </header> | |
| <!-- Game Selection --> | |
| <div id="gameSelection" class="bg-white rounded-xl shadow-lg p-6 mb-8 max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-center text-blue-600 mb-6">Choose a Game</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <button onclick="startGame('vocabulary')" class="game-option bg-gradient-to-r from-green-100 to-blue-100 hover:from-green-200 hover:to-blue-200 rounded-lg p-4 shadow-md transition-all hover:scale-105"> | |
| <div class="text-center"> | |
| <i class="fas fa-spell-check text-4xl text-green-600 mb-2"></i> | |
| <h3 class="font-bold text-gray-700">Vocabulary Match</h3> | |
| <p class="text-sm text-gray-500">Match words with pictures</p> | |
| </div> | |
| </button> | |
| <button onclick="startGame('spelling')" class="game-option bg-gradient-to-r from-yellow-100 to-orange-100 hover:from-yellow-200 hover:to-orange-200 rounded-lg p-4 shadow-md transition-all hover:scale-105"> | |
| <div class="text-center"> | |
| <i class="fas fa-pencil-alt text-4xl text-yellow-600 mb-2"></i> | |
| <h3 class="font-bold text-gray-700">Spelling Bee</h3> | |
| <p class="text-sm text-gray-500">Practice spelling words</p> | |
| </div> | |
| </button> | |
| <button onclick="startGame('sentence')" class="game-option bg-gradient-to-r from-purple-100 to-pink-100 hover:from-purple-200 hover:to-pink-200 rounded-lg p-4 shadow-md transition-all hover:scale-105"> | |
| <div class="text-center"> | |
| <i class="fas fa-comment-dots text-4xl text-purple-600 mb-2"></i> | |
| <h3 class="font-bold text-gray-700">Sentence Builder</h3> | |
| <p class="text-sm text-gray-500">Make correct sentences</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div id="gameArea" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8 max-w-3xl mx-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <button onclick="backToMenu()" class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-arrow-left mr-1"></i> Back to Menu | |
| </button> | |
| <div class="flex items-center"> | |
| <div class="mr-4"> | |
| <span class="font-bold text-gray-700">Score:</span> | |
| <span id="score" class="ml-1 font-bold text-green-600">0</span> | |
| </div> | |
| <div class="w-32 bg-gray-200 rounded-full h-4"> | |
| <div id="progressBar" class="progress-bar bg-green-500 h-4 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="gameContent" class="text-center"> | |
| <!-- Content will be loaded here by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Feedback Modal --> | |
| <div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center relative"> | |
| <button onclick="hideFeedback()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div id="feedbackIcon" class="text-6xl mb-4"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <h3 id="feedbackTitle" class="text-2xl font-bold mb-2">Great Job!</h3> | |
| <p id="feedbackMessage" class="text-gray-600 mb-4">You got it right!</p> | |
| <button onclick="nextQuestion()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full"> | |
| Continue <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Completion Screen --> | |
| <div id="completionScreen" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center relative"> | |
| <div class="confetti-container absolute inset-0 overflow-hidden"></div> | |
| <i class="fas fa-trophy text-6xl text-yellow-500 mb-4 bounce-animation"></i> | |
| <h2 class="text-3xl font-bold text-purple-600 mb-2">Congratulations!</h2> | |
| <p class="text-gray-600 mb-4">You completed the game with a score of <span id="finalScore" class="font-bold text-green-600">0</span>!</p> | |
| <div class="flex justify-center space-x-4"> | |
| <button onclick="backToMenu()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-full"> | |
| <i class="fas fa-home mr-1"></i> Menu | |
| </button> | |
| <button onclick="restartGame()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full"> | |
| <i class="fas fa-redo mr-1"></i> Play Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game data | |
| const gameData = { | |
| vocabulary: { | |
| title: "Vocabulary Match", | |
| icon: "fas fa-spell-check", | |
| questions: [ | |
| { word: "Apple", image: "🍎", options: ["🍎", "🐶", "🏠", "🚗"] }, | |
| { word: "Dog", image: "🐶", options: ["🐱", "🐶", "🐦", "🐠"] }, | |
| { word: "House", image: "🏠", options: ["🏠", "🌳", "🚗", "📚"] }, | |
| { word: "Car", image: "🚗", options: ["🚲", "🚗", "✈️", "🚢"] }, | |
| { word: "Book", image: "📚", options: ["📚", "✏️", "🎨", "🎮"] }, | |
| { word: "Tree", image: "🌳", options: ["🌳", "🌼", "☀️", "⛅"] }, | |
| { word: "Sun", image: "☀️", options: ["☀️", "🌙", "⭐", "☁️"] }, | |
| { word: "Cat", image: "🐱", options: ["🐱", "🐭", "🐹", "🐰"] } | |
| ] | |
| }, | |
| spelling: { | |
| title: "Spelling Bee", | |
| icon: "fas fa-pencil-alt", | |
| questions: [ | |
| { word: "Apple", image: "🍎", scrambled: "A P P L E" }, | |
| { word: "Dog", image: "🐶", scrambled: "D O G" }, | |
| { word: "Happy", image: "😊", scrambled: "H A P P Y" }, | |
| { word: "Sun", image: "☀️", scrambled: "S U N" }, | |
| { word: "Book", image: "📚", scrambled: "B O O K" }, | |
| { word: "Tree", image: "🌳", scrambled: "T R E E" }, | |
| { word: "Cat", image: "🐱", scrambled: "C A T" }, | |
| { word: "Ball", image: "⚽", scrambled: "B A L L" } | |
| ] | |
| }, | |
| sentence: { | |
| title: "Sentence Builder", | |
| icon: "fas fa-comment-dots", | |
| questions: [ | |
| { sentence: "I like apples.", words: ["apples", "I", "like", "."] }, | |
| { sentence: "The dog is happy.", words: ["The", "happy", "dog", "is", "."] }, | |
| { sentence: "We play together.", words: ["together", "We", "play", "."] }, | |
| { sentence: "She reads a book.", words: ["a", "She", "reads", "book", "."] }, | |
| { sentence: "My cat is small.", words: ["My", "small", "cat", "is", "."] }, | |
| { sentence: "The sun is bright.", words: ["The", "sun", "is", "bright", "."] }, | |
| { sentence: "I see a big tree.", words: ["a", "I", "see", "big", "tree", "."] }, | |
| { sentence: "We go to school.", words: ["to", "We", "go", "school", "."] } | |
| ] | |
| } | |
| }; | |
| // Game state | |
| let currentGame = null; | |
| let currentQuestion = 0; | |
| let score = 0; | |
| let selectedOptions = []; | |
| // Start a game | |
| function startGame(gameType) { | |
| currentGame = gameType; | |
| currentQuestion = 0; | |
| score = 0; | |
| document.getElementById('score').textContent = score; | |
| document.getElementById('progressBar').style.width = '0%'; | |
| document.getElementById('gameSelection').classList.add('hidden'); | |
| document.getElementById('gameArea').classList.remove('hidden'); | |
| loadQuestion(); | |
| } | |
| // Back to menu | |
| function backToMenu() { | |
| document.getElementById('gameSelection').classList.remove('hidden'); | |
| document.getElementById('gameArea').classList.add('hidden'); | |
| document.getElementById('completionScreen').classList.add('hidden'); | |
| document.getElementById('feedbackModal').classList.add('hidden'); | |
| } | |
| // Load question | |
| function loadQuestion() { | |
| const gameContent = document.getElementById('gameContent'); | |
| gameContent.innerHTML = ''; | |
| const game = gameData[currentGame]; | |
| const question = game.questions[currentQuestion]; | |
| // Game header | |
| const header = document.createElement('div'); | |
| header.className = 'mb-6'; | |
| header.innerHTML = ` | |
| <div class="flex items-center justify-center mb-2"> | |
| <i class="${game.icon} text-3xl text-purple-500 mr-2"></i> | |
| <h2 class="text-2xl font-bold text-gray-700">${game.title}</h2> | |
| </div> | |
| <p class="text-gray-500">Question ${currentQuestion + 1} of ${game.questions.length}</p> | |
| `; | |
| gameContent.appendChild(header); | |
| // Question content based on game type | |
| if (currentGame === 'vocabulary') { | |
| loadVocabularyQuestion(question); | |
| } else if (currentGame === 'spelling') { | |
| loadSpellingQuestion(question); | |
| } else if (currentGame === 'sentence') { | |
| loadSentenceQuestion(question); | |
| } | |
| } | |
| // Load vocabulary question | |
| function loadVocabularyQuestion(question) { | |
| const gameContent = document.getElementById('gameContent'); | |
| // Question display | |
| const questionDisplay = document.createElement('div'); | |
| questionDisplay.className = 'mb-8'; | |
| questionDisplay.innerHTML = ` | |
| <div class="bg-blue-50 rounded-xl p-4 inline-block"> | |
| <p class="text-3xl font-bold text-blue-700">${question.word}</p> | |
| </div> | |
| <p class="mt-2 text-gray-600">Which picture matches this word?</p> | |
| `; | |
| gameContent.appendChild(questionDisplay); | |
| // Options | |
| const optionsContainer = document.createElement('div'); | |
| optionsContainer.className = 'grid grid-cols-2 gap-4 max-w-md mx-auto'; | |
| question.options.forEach((option, index) => { | |
| const optionButton = document.createElement('button'); | |
| optionButton.className = 'bg-white hover:bg-blue-50 border-2 border-blue-100 rounded-xl p-4 text-4xl transition-all hover:scale-105'; | |
| optionButton.innerHTML = option; | |
| optionButton.onclick = () => checkVocabularyAnswer(option, question.image); | |
| optionsContainer.appendChild(optionButton); | |
| }); | |
| gameContent.appendChild(optionsContainer); | |
| } | |
| // Check vocabulary answer | |
| function checkVocabularyAnswer(selected, correct) { | |
| const isCorrect = selected === correct; | |
| showFeedback(isCorrect, isCorrect ? `Correct! ${selected} matches the word.` : `Oops! ${selected} doesn't match. Try again!`); | |
| if (isCorrect) { | |
| score += 10; | |
| document.getElementById('score').textContent = score; | |
| } | |
| } | |
| // Load spelling question | |
| function loadSpellingQuestion(question) { | |
| const gameContent = document.getElementById('gameContent'); | |
| // Question display | |
| const questionDisplay = document.createElement('div'); | |
| questionDisplay.className = 'mb-8'; | |
| questionDisplay.innerHTML = ` | |
| <div class="flex flex-col items-center"> | |
| <div class="text-6xl mb-4">${question.image}</div> | |
| <p class="text-gray-600 mb-2">Spell this word:</p> | |
| <div class="bg-blue-50 rounded-xl p-4"> | |
| <p class="text-xl font-mono text-blue-700">${question.scrambled}</p> | |
| </div> | |
| </div> | |
| `; | |
| gameContent.appendChild(questionDisplay); | |
| // Input field | |
| const inputContainer = document.createElement('div'); | |
| inputContainer.className = 'max-w-md mx-auto mb-4'; | |
| inputContainer.innerHTML = ` | |
| <input type="text" id="spellingInput" class="w-full px-4 py-2 border-2 border-blue-200 rounded-lg focus:outline-none focus:border-blue-400 text-center text-xl" placeholder="Type the word here"> | |
| `; | |
| gameContent.appendChild(inputContainer); | |
| // Submit button | |
| const submitButton = document.createElement('button'); | |
| submitButton.className = 'bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full'; | |
| submitButton.innerHTML = 'Check <i class="fas fa-check ml-1"></i>'; | |
| submitButton.onclick = () => { | |
| const input = document.getElementById('spellingInput').value.trim(); | |
| checkSpellingAnswer(input, question.word); | |
| }; | |
| gameContent.appendChild(submitButton); | |
| } | |
| // Check spelling answer | |
| function checkSpellingAnswer(selected, correct) { | |
| const isCorrect = selected.toLowerCase() === correct.toLowerCase(); | |
| showFeedback( | |
| isCorrect, | |
| isCorrect ? `Perfect! You spelled it correctly.` : `Almost! The correct spelling is "${correct}".` | |
| ); | |
| if (isCorrect) { | |
| score += 10; | |
| document.getElementById('score').textContent = score; | |
| } | |
| } | |
| // Load sentence question | |
| function loadSentenceQuestion(question) { | |
| const gameContent = document.getElementById('gameContent'); | |
| // Question display | |
| const questionDisplay = document.createElement('div'); | |
| questionDisplay.className = 'mb-8'; | |
| questionDisplay.innerHTML = ` | |
| <p class="text-gray-600 mb-4">Arrange these words to make a correct sentence:</p> | |
| `; | |
| gameContent.appendChild(questionDisplay); | |
| // Words container | |
| const wordsContainer = document.createElement('div'); | |
| wordsContainer.className = 'flex flex-wrap justify-center gap-2 mb-6'; | |
| wordsContainer.id = 'wordsContainer'; | |
| // Shuffle the words | |
| const shuffledWords = [...question.words]; | |
| for (let i = shuffledWords.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [shuffledWords[i], shuffledWords[j]] = [shuffledWords[j], shuffledWords[i]]; | |
| } | |
| shuffledWords.forEach((word, index) => { | |
| const wordButton = document.createElement('button'); | |
| wordButton.className = 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-full transition-all'; | |
| wordButton.innerHTML = word; | |
| wordButton.onclick = () => selectWord(word, wordButton); | |
| wordsContainer.appendChild(wordButton); | |
| }); | |
| gameContent.appendChild(wordsContainer); | |
| // Selected words display | |
| const selectedContainer = document.createElement('div'); | |
| selectedContainer.className = 'min-h-16 bg-gray-50 rounded-lg p-4 mb-6 max-w-md mx-auto'; | |
| selectedContainer.id = 'selectedContainer'; | |
| gameContent.appendChild(selectedContainer); | |
| // Submit button | |
| const submitButton = document.createElement('button'); | |
| submitButton.className = 'bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full'; | |
| submitButton.innerHTML = 'Check <i class="fas fa-check ml-1"></i>'; | |
| submitButton.onclick = () => { | |
| const selectedSentence = selectedOptions.join(' '); | |
| checkSentenceAnswer(selectedSentence, question.sentence); | |
| }; | |
| gameContent.appendChild(submitButton); | |
| // Reset button | |
| const resetButton = document.createElement('button'); | |
| resetButton.className = 'ml-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-full'; | |
| resetButton.innerHTML = 'Reset <i class="fas fa-undo ml-1"></i>'; | |
| resetButton.onclick = resetSentenceSelection; | |
| gameContent.appendChild(resetButton); | |
| } | |
| // Select word for sentence builder | |
| function selectWord(word, button) { | |
| if (!selectedOptions.includes(word)) { | |
| selectedOptions.push(word); | |
| button.classList.add('hidden'); | |
| const selectedContainer = document.getElementById('selectedContainer'); | |
| const wordSpan = document.createElement('span'); | |
| wordSpan.className = 'inline-block bg-white border border-gray-200 rounded px-3 py-1 mr-2 mb-2'; | |
| wordSpan.textContent = word; | |
| wordSpan.onclick = () => { | |
| selectedOptions = selectedOptions.filter(w => w !== word); | |
| selectedContainer.removeChild(wordSpan); | |
| button.classList.remove('hidden'); | |
| }; | |
| selectedContainer.appendChild(wordSpan); | |
| } | |
| } | |
| // Reset sentence selection | |
| function resetSentenceSelection() { | |
| selectedOptions = []; | |
| document.getElementById('selectedContainer').innerHTML = ''; | |
| const wordButtons = document.querySelectorAll('#wordsContainer button'); | |
| wordButtons.forEach(button => button.classList.remove('hidden')); | |
| } | |
| // Check sentence answer | |
| function checkSentenceAnswer(selected, correct) { | |
| // Remove extra spaces and compare | |
| const normalizedSelected = selected.replace(/\s+/g, ' ').trim(); | |
| const normalizedCorrect = correct.replace(/\s+/g, ' ').trim(); | |
| const isCorrect = normalizedSelected === normalizedCorrect; | |
| showFeedback( | |
| isCorrect, | |
| isCorrect ? `Great job! That's the correct sentence.` : `Not quite. The correct sentence is "${correct}".` | |
| ); | |
| if (isCorrect) { | |
| score += 10; | |
| document.getElementById('score').textContent = score; | |
| } | |
| } | |
| // Show feedback | |
| function showFeedback(isCorrect, message) { | |
| const modal = document.getElementById('feedbackModal'); | |
| const icon = document.getElementById('feedbackIcon'); | |
| const title = document.getElementById('feedbackTitle'); | |
| const feedbackMessage = document.getElementById('feedbackMessage'); | |
| if (isCorrect) { | |
| icon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>'; | |
| title.textContent = 'Great Job!'; | |
| title.className = 'text-2xl font-bold mb-2 text-green-600'; | |
| } else { | |
| icon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>'; | |
| title.textContent = 'Try Again!'; | |
| title.className = 'text-2xl font-bold mb-2 text-red-600'; | |
| } | |
| feedbackMessage.textContent = message; | |
| modal.classList.remove('hidden'); | |
| } | |
| // Hide feedback | |
| function hideFeedback() { | |
| document.getElementById('feedbackModal').classList.add('hidden'); | |
| } | |
| // Next question | |
| function nextQuestion() { | |
| document.getElementById('feedbackModal').classList.add('hidden'); | |
| const game = gameData[currentGame]; | |
| currentQuestion++; | |
| // Update progress | |
| const progress = (currentQuestion / game.questions.length) * 100; | |
| document.getElementById('progressBar').style.width = `${progress}%`; | |
| if (currentQuestion < game.questions.length) { | |
| loadQuestion(); | |
| } else { | |
| showCompletion(); | |
| } | |
| } | |
| // Show completion screen | |
| function showCompletion() { | |
| document.getElementById('finalScore').textContent = score; | |
| document.getElementById('completionScreen').classList.remove('hidden'); | |
| createConfetti(); | |
| } | |
| // Restart game | |
| function restartGame() { | |
| document.getElementById('completionScreen').classList.add('hidden'); | |
| startGame(currentGame); | |
| } | |
| // Create confetti effect | |
| function createConfetti() { | |
| const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722']; | |
| const container = document.querySelector('.confetti-container'); | |
| // Clear previous confetti | |
| container.innerHTML = ''; | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = Math.random() * 100 + '%'; | |
| confetti.style.top = -10 + 'px'; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| // Random size | |
| const size = Math.random() * 10 + 5; | |
| confetti.style.width = size + 'px'; | |
| confetti.style.height = size + 'px'; | |
| // Random shape | |
| if (Math.random() > 0.5) { | |
| confetti.style.borderRadius = '50%'; | |
| } | |
| container.appendChild(confetti); | |
| // Animate | |
| setTimeout(() => { | |
| confetti.style.opacity = '1'; | |
| confetti.style.top = '100%'; | |
| confetti.style.left = confetti.style.left.split('%')[0] * 1 + (Math.random() * 40 - 20) + '%'; | |
| confetti.style.transition = `all ${Math.random() * 3 + 2}s ease-out`; | |
| // Remove after animation | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 5000); | |
| }, i * 100); | |
| } | |
| } | |
| </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=echo3700/english-study-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |