| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>MemeFrenzy - The Addictive Meme Experience</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> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background-color: #f0f4ff; |
| | overflow-x: hidden; |
| | } |
| | |
| | .meme-card:hover .meme-overlay { |
| | opacity: 1; |
| | } |
| | |
| | .meme-overlay { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .reaction-game { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | |
| | .target { |
| | transition: all 0.1s ease; |
| | } |
| | |
| | .pulse { |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0% { transform: scale(1); } |
| | 50% { transform: scale(1.05); } |
| | 100% { transform: scale(1); } |
| | } |
| | |
| | .shake { |
| | animation: shake 0.5s; |
| | } |
| | |
| | @keyframes shake { |
| | 0% { transform: translateX(0); } |
| | 25% { transform: translateX(-5px); } |
| | 50% { transform: translateX(5px); } |
| | 75% { transform: translateX(-5px); } |
| | 100% { transform: translateX(0); } |
| | } |
| | |
| | .fade-in { |
| | animation: fadeIn 0.5s; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | |
| | |
| | .high-contrast { |
| | filter: contrast(200%); |
| | } |
| | |
| | .text-large { |
| | font-size: 1.25rem; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | |
| | <div class="bg-indigo-900 text-white p-2 flex flex-wrap gap-2 justify-center items-center"> |
| | <button id="highContrastBtn" class="px-3 py-1 bg-indigo-700 rounded-lg hover:bg-indigo-600 transition"> |
| | <i class="fas fa-adjust mr-1"></i> High Contrast |
| | </button> |
| | <button id="textSizeBtn" class="px-3 py-1 bg-indigo-700 rounded-lg hover:bg-indigo-600 transition"> |
| | <i class="fas fa-text-height mr-1"></i> Larger Text |
| | </button> |
| | <button id="darkModeBtn" class="px-3 py-1 bg-indigo-700 rounded-lg hover:bg-indigo-600 transition"> |
| | <i class="fas fa-moon mr-1"></i> Dark Mode |
| | </button> |
| | </div> |
| |
|
| | |
| | <header class="bg-white shadow-md py-4 sticky top-0 z-10"> |
| | <div class="container mx-auto px-4 flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-fire text-3xl text-red-500 mr-2"></i> |
| | <h1 class="text-2xl font-bold text-gray-800">MemeFrenzy</h1> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <div class="relative"> |
| | <span id="pointsCounter" class="bg-yellow-400 text-yellow-900 font-bold px-3 py-1 rounded-full">0</span> |
| | <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">🔥</span> |
| | </div> |
| | <button id="leaderboardBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> |
| | <i class="fas fa-trophy mr-1"></i> Leaderboard |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="container mx-auto px-4 py-8"> |
| | |
| | <section class="text-center mb-12"> |
| | <h2 class="text-4xl font-bold text-gray-800 mb-4">Create. React. Go Viral.</h2> |
| | <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">The most addictive meme experience on the web. Generate memes, test your reaction time, and climb the leaderboard!</p> |
| | |
| | <div class="flex justify-center space-x-4"> |
| | <button id="startGameBtn" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-bold hover:from-purple-600 hover:to-pink-600 transition transform hover:scale-105"> |
| | <i class="fas fa-play mr-2"></i> Quick Game |
| | </button> |
| | <button id="createMemeBtn" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-cyan-400 text-white rounded-lg font-bold hover:from-blue-600 hover:to-cyan-500 transition transform hover:scale-105"> |
| | <i class="fas fa-plus mr-2"></i> Create Meme |
| | </button> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="memeGenerator" class="hidden bg-white rounded-xl shadow-lg p-6 mb-12"> |
| | <div class="flex flex-col md:flex-row gap-6"> |
| | <div class="md:w-1/2"> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-4">Create Your Meme</h3> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2">Meme Template</label> |
| | <select id="memeTemplate" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| | <option value="drake">Drake Hotline Bling</option> |
| | <option value="distracted">Distracted Boyfriend</option> |
| | <option value="changemind">Change My Mind</option> |
| | <option value="batman">Batman Slapping Robin</option> |
| | <option value="yodawg">Yo Dawg</option> |
| | </select> |
| | </div> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2">Top Text</label> |
| | <input type="text" id="topText" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter top text"> |
| | </div> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2">Bottom Text</label> |
| | <input type="text" id="bottomText" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter bottom text"> |
| | </div> |
| | <div class="flex space-x-3"> |
| | <button id="generateMemeBtn" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition flex-1"> |
| | <i class="fas fa-magic mr-1"></i> Generate |
| | </button> |
| | <button id="randomMemeBtn" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition flex-1"> |
| | <i class="fas fa-random mr-1"></i> Random |
| | </button> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 flex flex-col items-center justify-center"> |
| | <div id="memePreview" class="bg-gray-100 rounded-lg w-full max-w-md h-64 flex items-center justify-center text-gray-400"> |
| | <p>Your meme will appear here</p> |
| | </div> |
| | <button id="shareMemeBtn" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition hidden"> |
| | <i class="fas fa-share-alt mr-1"></i> Share Meme |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="reactionGame" class="hidden reaction-game rounded-xl shadow-lg p-6 mb-12 text-white"> |
| | <div class="text-center mb-6"> |
| | <h3 class="text-2xl font-bold mb-2">Reaction Time Challenge</h3> |
| | <p>Click the targets as fast as you can! 30 seconds on the clock.</p> |
| | </div> |
| | |
| | <div class="flex justify-between items-center mb-6"> |
| | <div class="text-xl"> |
| | <span id="gameTimer" class="font-bold">30</span>s remaining |
| | </div> |
| | <div class="text-xl"> |
| | Score: <span id="gameScore" class="font-bold">0</span> |
| | </div> |
| | </div> |
| | |
| | <div id="gameArea" class="bg-white bg-opacity-20 rounded-lg h-96 relative overflow-hidden"> |
| | <div id="gameTarget" class="target absolute hidden h-16 w-16 bg-red-500 rounded-full cursor-pointer flex items-center justify-center text-white font-bold shadow-lg"> |
| | <i class="fas fa-bolt"></i> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-6"> |
| | <button id="startGameBtn2" class="px-6 py-3 bg-white text-indigo-700 rounded-lg font-bold hover:bg-gray-100 transition"> |
| | <i class="fas fa-play mr-2"></i> Start Game |
| | </button> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-12"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h3 class="text-2xl font-bold text-gray-800">🔥 Trending Today</h3> |
| | <button id="refreshMemesBtn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> |
| | <i class="fas fa-sync-alt mr-1"></i> Refresh |
| | </button> |
| | </div> |
| | |
| | <div id="memeGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| | |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-xl shadow-lg p-6 mb-12"> |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-2/3 mb-6 md:mb-0 md:pr-6"> |
| | <h3 class="text-2xl font-bold mb-3">24-Hour Viral Challenge</h3> |
| | <p class="mb-4">Can you create a meme that gets 100+ reactions in 24 hours? Top creators get featured on our leaderboard!</p> |
| | <button id="joinChallengeBtn" class="px-6 py-2 bg-white text-pink-600 rounded-lg font-bold hover:bg-gray-100 transition"> |
| | <i class="fas fa-bolt mr-2"></i> Join Challenge |
| | </button> |
| | </div> |
| | <div class="md:w-1/3 flex justify-center"> |
| | <div class="bg-white bg-opacity-20 rounded-full h-32 w-32 flex items-center justify-center text-4xl"> |
| | <i class="fas fa-stopwatch"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| |
|
| | |
| | <div id="leaderboardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| | <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h3 class="text-2xl font-bold text-gray-800">🏆 Top Creators</h3> |
| | <button id="closeLeaderboardBtn" class="text-gray-500 hover:text-gray-700"> |
| | <i class="fas fa-times text-2xl"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="overflow-x-auto"> |
| | <table class="w-full"> |
| | <thead class="bg-gray-100"> |
| | <tr> |
| | <th class="px-4 py-2 text-left">Rank</th> |
| | <th class="px-4 py-2 text-left">Creator</th> |
| | <th class="px-4 py-2 text-left">Points</th> |
| | <th class="px-4 py-2 text-left">Memes</th> |
| | </tr> |
| | </thead> |
| | <tbody id="leaderboardBody"> |
| | |
| | </tbody> |
| | </table> |
| | </div> |
| | |
| | <div class="mt-6 text-center"> |
| | <p class="text-gray-600">Play games and create viral memes to climb the leaderboard!</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="gameOverModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| | <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6"> |
| | <div class="text-center"> |
| | <div class="text-6xl mb-4">🎉</div> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-2">Game Over!</h3> |
| | <p class="text-xl mb-4">Your score: <span id="finalScore" class="font-bold text-indigo-600">0</span></p> |
| | <p class="text-gray-600 mb-6" id="gameFeedback">Nice try! Keep practicing to improve your reaction time.</p> |
| | |
| | <div class="flex justify-center space-x-4"> |
| | <button id="playAgainBtn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 transition"> |
| | <i class="fas fa-redo mr-2"></i> Play Again |
| | </button> |
| | <button id="shareScoreBtn" class="px-6 py-2 bg-green-500 text-white rounded-lg font-bold hover:bg-green-600 transition"> |
| | <i class="fas fa-share-alt mr-2"></i> Share |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-4 md:mb-0"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-fire text-2xl text-red-500 mr-2"></i> |
| | <span class="text-xl font-bold">MemeFrenzy</span> |
| | </div> |
| | <p class="text-gray-400 mt-1">The most addictive meme experience</p> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| | <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| | <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-tiktok"></i></a> |
| | <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-discord"></i></a> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400"> |
| | <p>© 2023 MemeFrenzy. All rights reserved. | <a href="#" class="hover:text-white transition">Privacy Policy</a> | <a href="#" class="hover:text-white transition">Terms of Service</a></p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | // Sample meme data |
| | const memeTemplates = { |
| | drake: 'https://api.memegen.link/images/drake/', |
| | distracted: 'https://api.memegen.link/images/distractedbf/', |
| | changemind: 'https://api.memegen.link/images/changemymind/', |
| | batman: 'https://api.memegen.link/images/batman/', |
| | yodawg: 'https://api.memegen.link/images/yodawg/' |
| | }; |
| | |
| | const trendingMemes = [ |
| | { |
| | id: 1, |
| | image: 'https://api.memegen.link/images/drake/YOLO_When you have work tomorrow/But stay up late anyway.png', |
| | likes: 1245, |
| | shares: 342, |
| | creator: 'MemeMaster42' |
| | }, |
| | { |
| | id: 2, |
| | image: 'https://api.memegen.link/images/distractedbf/Me trying to focus/My brain/Everything else.png', |
| | likes: 892, |
| | shares: 210, |
| | creator: 'FunnyBones' |
| | }, |
| | { |
| | id: 3, |
| | image: 'https://api.memegen.link/images/changemymind/Coffee is basically/Bean soup/Change my mind.png', |
| | likes: 1567, |
| | shares: 489, |
| | creator: 'CaffeineQueen' |
| | }, |
| | { |
| | id: 4, |
| | image: 'https://api.memegen.link/images/batman/When someone says/They don't like memes/Robin.png', |
| | likes: 2034, |
| | shares: 721, |
| | creator: 'DarkKnightMemer' |
| | }, |
| | { |
| | id: 5, |
| | image: 'https://api.memegen.link/images/yodawg/I heard you like memes/So I put a meme/In your meme.png', |
| | likes: 1789, |
| | shares: 532, |
| | creator: 'MemeCeption' |
| | }, |
| | { |
| | id: 6, |
| | image: 'https://api.memegen.link/images/drake/No_When someone says/Let's go out/Yes_When they say/Netflix and chill.png', |
| | likes: 987, |
| | shares: 321, |
| | creator: 'NetflixAndChill' |
| | }, |
| | { |
| | id: 7, |
| | image: 'https://api.memegen.link/images/distractedbf/My productivity/My phone/Me.png', |
| | likes: 2456, |
| | shares: 843, |
| | creator: 'ProcrastinatorPro' |
| | }, |
| | { |
| | id: 8, |
| | image: 'https://api.memegen.link/images/changemymind/Pineapple belongs/On pizza/Change my mind.png', |
| | likes: 3120, |
| | shares: 1024, |
| | creator: 'PizzaLover' |
| | } |
| | ]; |
| | |
| | // Sample leaderboard data |
| | const leaderboardData = [ |
| | { rank: 1, name: 'MemeLord3000', points: 12500, memes: 42 }, |
| | { rank: 2, name: 'DankMaster', points: 11200, memes: 38 }, |
| | { rank: 3, name: 'ViralQueen', points: 9800, memes: 35 }, |
| | { rank: 4, name: 'LOLGenerator', points: 8750, memes: 31 }, |
| | { rank: 5, name: 'FunnyBones', points: 8200, memes: 29 }, |
| | { rank: 6, name: 'Jokester', points: 7650, memes: 27 }, |
| | { rank: 7, name: 'HahaHero', points: 7200, memes: 25 }, |
| | { rank: 8, name: 'GiggleGuru', points: 6800, memes: 23 }, |
| | { rank: 9, name: 'ChuckleChamp', points: 6400, memes: 21 }, |
| | { rank: 10, name: 'SmirkSultan', points: 6000, memes: 20 } |
| | ]; |
| | |
| | // Game variables |
| | let gameScore = 0; |
| | let gameTime = 30; |
| | let gameInterval; |
| | let timerInterval; |
| | let points = 0; |
| | let userPoints = localStorage.getItem('memeFrenzyPoints') || 0; |
| | |
| | // DOM elements |
| | const pointsCounter = document.getElementById('pointsCounter'); |
| | const leaderboardBtn = document.getElementById('leaderboardBtn'); |
| | const leaderboardModal = document.getElementById('leaderboardModal'); |
| | const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn'); |
| | const leaderboardBody = document.getElementById('leaderboardBody'); |
| | const startGameBtn = document.getElementById('startGameBtn'); |
| | const startGameBtn2 = document.getElementById('startGameBtn2'); |
| | const createMemeBtn = document.getElementById('createMemeBtn'); |
| | const memeGenerator = document.getElementById('memeGenerator'); |
| | const reactionGame = document.getElementById('reactionGame'); |
| | const gameTimer = document.getElementById('gameTimer'); |
| | const gameScoreDisplay = document.getElementById('gameScore'); |
| | const gameArea = document.getElementById('gameArea'); |
| | const gameTarget = document.getElementById('gameTarget'); |
| | const gameOverModal = document.getElementById('gameOverModal'); |
| | const finalScore = document.getElementById('finalScore'); |
| | const gameFeedback = document.getElementById('gameFeedback'); |
| | const playAgainBtn = document.getElementById('playAgainBtn'); |
| | const shareScoreBtn = document.getElementById('shareScoreBtn'); |
| | const memeGrid = document.getElementById('memeGrid'); |
| | const refreshMemesBtn = document.getElementById('refreshMemesBtn'); |
| | const memeTemplate = document.getElementById('memeTemplate'); |
| | const topText = document.getElementById('topText'); |
| | const bottomText = document.getElementById('bottomText'); |
| | const generateMemeBtn = document.getElementById('generateMemeBtn'); |
| | const randomMemeBtn = document.getElementById('randomMemeBtn'); |
| | const memePreview = document.getElementById('memePreview'); |
| | const shareMemeBtn = document.getElementById('shareMemeBtn'); |
| | const joinChallengeBtn = document.getElementById('joinChallengeBtn'); |
| | |
| | // Accessibility buttons |
| | const highContrastBtn = document.getElementById('highContrastBtn'); |
| | const textSizeBtn = document.getElementById('textSizeBtn'); |
| | const darkModeBtn = document.getElementById('darkModeBtn'); |
| | |
| | // Initialize |
| | document.addEventListener('DOMContentLoaded', function() { |
| | pointsCounter.textContent = userPoints; |
| | loadTrendingMemes(); |
| | populateLeaderboard(); |
| | |
| | // Add confetti effect to points counter on load |
| | setTimeout(() => { |
| | pointsCounter.classList.add('pulse'); |
| | }, 1000); |
| | }); |
| | |
| | // Load trending memes |
| | function loadTrendingMemes() { |
| | memeGrid.innerHTML = ''; |
| | |
| | trendingMemes.forEach(meme => { |
| | const memeCard = document.createElement('div'); |
| | memeCard.className = 'meme-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1 relative'; |
| | |
| | memeCard.innerHTML = ` |
| | <img src="${meme.image}" alt="Trending meme" class="w-full h-48 object-cover"> |
| | <div class="meme-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 flex items-center justify-center space-x-4"> |
| | <button class="like-btn px-3 py-1 bg-white bg-opacity-90 text-red-500 rounded-full hover:bg-opacity-100 transition"> |
| | <i class="fas fa-heart mr-1"></i> ${meme.likes} |
| | </button> |
| | <button class="share-btn px-3 py-1 bg-white bg-opacity-90 text-blue-500 rounded-full hover:bg-opacity-100 transition"> |
| | <i class="fas fa-share-alt mr-1"></i> ${meme.shares} |
| | </button> |
| | </div> |
| | <div class="p-3"> |
| | <p class="text-gray-600 text-sm">by @${meme.creator}</p> |
| | </div> |
| | `; |
| | |
| | memeGrid.appendChild(memeCard); |
| | }); |
| | } |
| | |
| | // Populate leaderboard |
| | function populateLeaderboard() { |
| | leaderboardBody.innerHTML = ''; |
| | |
| | leaderboardData.forEach(user => { |
| | const row = document.createElement('tr'); |
| | row.className = 'border-b border-gray-200 hover:bg-gray-50'; |
| | |
| | row.innerHTML = ` |
| | <td class="px-4 py-3 font-bold">${user.rank}</td> |
| | <td class="px-4 py-3">${user.name}</td> |
| | <td class="px-4 py-3">${user.points.toLocaleString()}</td> |
| | <td class="px-4 py-3">${user.memes}</td> |
| | `; |
| | |
| | leaderboardBody.appendChild(row); |
| | }); |
| | } |
| | |
| | // Add points to user |
| | function addPoints(amount) { |
| | userPoints = parseInt(userPoints) + amount; |
| | pointsCounter.textContent = userPoints; |
| | localStorage.setItem('memeFrenzyPoints', userPoints); |
| | |
| | // Animation |
| | pointsCounter.classList.add('shake'); |
| | setTimeout(() => { |
| | pointsCounter.classList.remove('shake'); |
| | }, 500); |
| | } |
| | |
| | // Start reaction game |
| | function startReactionGame() { |
| | memeGenerator.classList.add('hidden'); |
| | reactionGame.classList.remove('hidden'); |
| | |
| | gameScore = 0; |
| | gameTime = 30; |
| | gameScoreDisplay.textContent = gameScore; |
| | gameTimer.textContent = gameTime; |
| | |
| | // Scroll to game |
| | reactionGame.scrollIntoView({ behavior: 'smooth' }); |
| | } |
| | |
| | // Start game timer |
| | function startGameTimer() { |
| | gameTime = 30; |
| | gameTimer.textContent = gameTime; |
| | |
| | timerInterval = setInterval(() => { |
| | gameTime--; |
| | gameTimer.textContent = gameTime; |
| | |
| | if (gameTime <= 0) { |
| | endGame(); |
| | } |
| | }, 1000); |
| | } |
| | |
| | // Start target spawning |
| | function startTargetSpawning() { |
| | gameInterval = setInterval(spawnTarget, 1000); |
| | } |
| | |
| | // Spawn target |
| | function spawnTarget() { |
| | // Remove any existing target |
| | if (gameTarget.parentNode) { |
| | gameTarget.parentNode.removeChild(gameTarget); |
| | } |
| | |
| | // Create new target |
| | const target = gameTarget.cloneNode(true); |
| | target.classList.remove('hidden'); |
| | |
| | // Random position |
| | const gameWidth = gameArea.offsetWidth - 64; |
| | const gameHeight = gameArea.offsetHeight - 64; |
| | |
| | const randomX = Math.floor(Math.random() * gameWidth); |
| | const randomY = Math.floor(Math.random() * gameHeight); |
| | |
| | target.style.left = `${randomX}px`; |
| | target.style.top = `${randomY}px`; |
| | |
| | // Random size for variety (50-100px) |
| | const randomSize = 50 + Math.floor(Math.random() * 50); |
| | target.style.width = `${randomSize}px`; |
| | target.style.height = `${randomSize}px`; |
| | |
| | // Click handler |
| | target.addEventListener('click', function() { |
| | gameScore++; |
| | gameScoreDisplay.textContent = gameScore; |
| | this.classList.add('hidden'); |
| | |
| | // Add small animation |
| | const explosion = document.createElement('div'); |
| | explosion.className = 'absolute bg-yellow-400 rounded-full opacity-70'; |
| | explosion.style.width = `${randomSize * 1.5}px`; |
| | explosion.style.height = `${randomSize * 1.5}px`; |
| | explosion.style.left = `${randomX - (randomSize * 0.25)}px`; |
| | explosion.style.top = `${randomY - (randomSize * 0.25)}px`; |
| | explosion.style.transform = 'scale(0)'; |
| | explosion.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out'; |
| | |
| | gameArea.appendChild(explosion); |
| | |
| | setTimeout(() => { |
| | explosion.style.transform = 'scale(1)'; |
| | explosion.style.opacity = '0'; |
| | }, 10); |
| | |
| | setTimeout(() => { |
| | gameArea.removeChild(explosion); |
| | }, 310); |
| | }); |
| | |
| | gameArea.appendChild(target); |
| | } |
| | |
| | // End game |
| | function endGame() { |
| | clearInterval(gameInterval); |
| | clearInterval(timerInterval); |
| | |
| | // Calculate points earned (1 point per click + bonus for high scores) |
| | const pointsEarned = gameScore + Math.floor(gameScore / 10); |
| | addPoints(pointsEarned); |
| | |
| | // Show game over modal |
| | finalScore.textContent = gameScore; |
| | |
| | // Set feedback based on score |
| | if (gameScore >= 50) { |
| | gameFeedback.textContent = 'Legendary! You have lightning-fast reflexes!'; |
| | } else if (gameScore >= 30) { |
| | gameFeedback.textContent = 'Great job! You're faster than most!'; |
| | } else if (gameScore >= 15) { |
| | gameFeedback.textContent = 'Nice try! Keep practicing to improve.'; |
| | } else { |
| | gameFeedback.textContent = 'Good start! Try again to beat your score.'; |
| | } |
| | |
| | gameOverModal.classList.remove('hidden'); |
| | } |
| | |
| | // Generate meme |
| | function generateMeme() { |
| | const template = memeTemplate.value; |
| | const top = encodeURIComponent(topText.value); |
| | const bottom = encodeURIComponent(bottomText.value); |
| | |
| | let memeUrl = memeTemplates[template]; |
| | |
| | if (template === 'drake') { |
| | // Drake template uses a different format |
| | memeUrl += `${top}/${bottom}.png`; |
| | } else { |
| | memeUrl += `${top}/${bottom}.png`; |
| | } |
| | |
| | memePreview.innerHTML = `<img src="${memeUrl}" alt="Your meme" class="w-full h-full object-contain">`; |
| | shareMemeBtn.classList.remove('hidden'); |
| | |
| | // Add points for creating a meme |
| | addPoints(5); |
| | |
| | // Add animation |
| | memePreview.classList.add('fade-in'); |
| | setTimeout(() => { |
| | memePreview.classList.remove('fade-in'); |
| | }, 500); |
| | } |
| | |
| | // Generate random meme |
| | function generateRandomMeme() { |
| | const templates = Object.keys(memeTemplates); |
| | const randomTemplate = templates[Math.floor(Math.random() * templates.length)]; |
| | |
| | // Set random template |
| | memeTemplate.value = randomTemplate; |
| | |
| | // Random texts |
| | const randomTexts = [ |
| | ['When you find money in old pants', 'But then remember it's your own money'], |
| | ['Me trying to be productive', 'My brain', 'Everything else'], |
| | ['Pineapple on pizza is fine', 'Change my mind'], |
| | ['When someone says they don't like memes', 'Me', 'Preparing to fight'], |
| | ['Yo dawg', 'I heard you like memes', 'So I put a meme in your meme'], |
| | ['No', 'Healthy sleep schedule', 'Yes', 'Staying up until 3am'], |
| | ['My plans for the weekend', 'Nothing', 'Me', 'Happy'], |
| | ['When you're about to sneeze', 'But then it goes away'] |
| | ]; |
| | |
| | const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)]; |
| | |
| | if (randomTemplate === 'drake') { |
| | topText.value = randomText[0]; |
| | bottomText.value = randomText[1]; |
| | } else if (randomTemplate === 'distracted') { |
| | topText.value = randomText[0]; |
| | bottomText.value = randomText[1]; |
| | // For distracted boyfriend, we'd need a third text box in a real implementation |
| | } else { |
| | topText.value = randomText[0]; |
| | if (randomText.length > 1) { |
| | bottomText.value = randomText[1]; |
| | } else { |
| | bottomText.value = ''; |
| | } |
| | } |
| | |
| | generateMeme(); |
| | } |
| | |
| | // Event listeners |
| | leaderboardBtn.addEventListener('click', () => { |
| | leaderboardModal.classList.remove('hidden'); |
| | }); |
| | |
| | closeLeaderboardBtn.addEventListener('click', () => { |
| | leaderboardModal.classList.add('hidden'); |
| | }); |
| | |
| | startGameBtn.addEventListener('click', startReactionGame); |
| | startGameBtn2.addEventListener('click', () => { |
| | startGameTimer(); |
| | startTargetSpawning(); |
| | startGameBtn2.disabled = true; |
| | }); |
| | |
| | createMemeBtn.addEventListener('click', () => { |
| | reactionGame.classList.add('hidden'); |
| | memeGenerator.classList.remove('hidden'); |
| | memeGenerator.scrollIntoView({ behavior: 'smooth' }); |
| | }); |
| | |
| | playAgainBtn.addEventListener('click', () => { |
| | gameOverModal.classList.add('hidden'); |
| | startGameTimer(); |
| | startTargetSpawning(); |
| | gameScore = 0; |
| | gameScoreDisplay.textContent = gameScore; |
| | startGameBtn2.disabled = true; |
| | }); |
| | |
| | shareScoreBtn.addEventListener('click', () => { |
| | alert(`I scored ${gameScore} points in MemeFrenzy Reaction Game! Can you beat me? 🚀`); |
| | }); |
| | |
| | refreshMemesBtn.addEventListener('click', () => { |
| | refreshMemesBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Refreshing'; |
| | setTimeout(() => { |
| | loadTrendingMemes(); |
| | refreshMemesBtn.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Refresh'; |
| | addPoints(1); // Small reward for refreshing |
| | }, 800); |
| | }); |
| | |
| | generateMemeBtn.addEventListener('click', generateMeme); |
| | randomMemeBtn.addEventListener('click', generateRandomMeme); |
| | |
| | shareMemeBtn.addEventListener('click', () => { |
| | alert('Meme shared to your social media! (This would connect to social APIs in a real app)'); |
| | addPoints(10); // Bonus for sharing |
| | }); |
| | |
| | joinChallengeBtn.addEventListener('click', () => { |
| | alert('Challenge accepted! Create a meme now to start your 24-hour timer.'); |
| | addPoints(5); // Small reward for joining |
| | }); |
| | |
| | // Accessibility features |
| | highContrastBtn.addEventListener('click', () => { |
| | document.body.classList.toggle('high-contrast'); |
| | }); |
| | |
| | textSizeBtn.addEventListener('click', () => { |
| | document.body.classList.toggle('text-large'); |
| | }); |
| | |
| | darkModeBtn.addEventListener('click', () => { |
| | document.body.classList.toggle('bg-gray-900'); |
| | document.body.classList.toggle('text-white'); |
| | document.body.classList.toggle('f0f4ff'); |
| | |
| | // Toggle dark mode for specific elements |
| | const elements = document.querySelectorAll('.bg-white, .text-gray-800'); |
| | elements.forEach(el => { |
| | el.classList.toggle('bg-gray-800'); |
| | el.classList.toggle('text-white'); |
| | el.classList.toggle('bg-white'); |
| | el.classList.toggle('text-gray-800'); |
| | }); |
| | }); |
| | |
| | // Close modals when clicking outside |
| | window.addEventListener('click', (e) => { |
| | if (e.target === leaderboardModal) { |
| | leaderboardModal.classList.add('hidden'); |
| | } |
| | if (e.target === gameOverModal) { |
| | gameOverModal.classList.add('hidden'); |
| | } |
| | }); |
| | </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=arthhh1/memef" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
