Spaces:
Running
Running
make there be like 10x more Elmore texts and make this more transparent and in the bottom left, make it says nathan's sister so fine... - Initial Deployment
a77bf5d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Harris.org - The Frog Clicker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .elmore-text { | |
| position: absolute; | |
| color: rgba(255, 255, 255, 0.02); | |
| font-size: 1.5rem; | |
| user-select: none; | |
| pointer-events: none; | |
| transform: rotate(var(--rotation)); | |
| } | |
| .nathan-sister { | |
| position: fixed; | |
| bottom: 10px; | |
| left: 10px; | |
| color: rgba(255, 255, 255, 0.3); | |
| font-size: 0.8rem; | |
| font-style: italic; | |
| user-select: none; | |
| } | |
| .frog-button { | |
| transition: all 0.1s ease; | |
| } | |
| .frog-button:active { | |
| transform: scale(0.95); | |
| } | |
| .points-display { | |
| text-shadow: 0 0 10px rgba(74, 222, 128, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen overflow-hidden relative"> | |
| <!-- Background Elmore texts --> | |
| <div id="elmore-container"></div> | |
| <!-- Main content --> | |
| <div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen relative z-10"> | |
| <header class="mb-12 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-4 text-green-400">Harris.org</h1> | |
| <p class="text-xl text-gray-300">The official frog clicking experience</p> | |
| </header> | |
| <div class="flex flex-col items-center"> | |
| <div class="points-display mb-8 text-center"> | |
| <h2 class="text-3xl font-semibold mb-2">Your 3A Points:</h2> | |
| <p id="points-counter" class="text-6xl font-bold text-green-400">0</p> | |
| </div> | |
| <button id="frog-button" class="frog-button bg-green-600 hover:bg-green-500 rounded-full p-8 shadow-2xl hover:shadow-green-500/30 transition-all duration-300"> | |
| <div class="w-32 h-32 md:w-48 md:h-48 flex items-center justify-center"> | |
| <i data-feather="github" class="w-full h-full"></i> <!-- Using github icon as placeholder for frog --> | |
| </div> | |
| </button> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-400">Click the frog to earn 3A points!</p> | |
| <p id="click-counter" class="text-gray-500 mt-2">Clicks: 0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Generate random Elmore texts in background | |
| const elmoreContainer = document.getElementById('elmore-container'); | |
| const elmoreQuotes = [ | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE", | |
| "ELMORE" | |
| ]; | |
| for (let i = 0; i < 200; i++) { | |
| const elmore = document.createElement('div'); | |
| elmore.className = 'elmore-text'; | |
| elmore.textContent = elmoreQuotes[Math.floor(Math.random() * elmoreQuotes.length)]; | |
| elmore.style.left = `${Math.random() * 100}%`; | |
| elmore.style.top = `${Math.random() * 100}%`; | |
| elmore.style.setProperty('--rotation', `${Math.random() * 30 - 15}deg`); | |
| elmoreContainer.appendChild(elmore); | |
| } | |
| // Clicker game logic | |
| let points = 0; | |
| let clicks = 0; | |
| const pointsCounter = document.getElementById('points-counter'); | |
| const clickCounter = document.getElementById('click-counter'); | |
| const frogButton = document.getElementById('frog-button'); | |
| frogButton.addEventListener('click', () => { | |
| clicks++; | |
| points += 3; // 3A points per click | |
| pointsCounter.textContent = points; | |
| clickCounter.textContent = `Clicks: ${clicks}`; | |
| // Add visual feedback | |
| frogButton.classList.add('bg-green-400'); | |
| setTimeout(() => { | |
| frogButton.classList.remove('bg-green-400'); | |
| }, 100); | |
| // Create floating +3A text | |
| const plusText = document.createElement('div'); | |
| plusText.className = 'absolute text-green-400 font-bold text-xl animate-float'; | |
| plusText.textContent = '+3A'; | |
| plusText.style.left = `${Math.random() * 60 + 20}%`; | |
| frogButton.appendChild(plusText); | |
| setTimeout(() => { | |
| plusText.remove(); | |
| }, 1000); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Add Nathan's sister text | |
| const nathanSister = document.createElement('div'); | |
| nathanSister.className = 'nathan-sister'; | |
| nathanSister.textContent = "nathan's sister so fine..."; | |
| document.body.appendChild(nathanSister); | |
| </script> | |
| </body> | |
| </html> | |