Spaces:
Running
Running
| <html><head><base href="https://websim.ai/c/jokegenerator" /> | |
| <title>AI Joke Generator Pro</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f0f8ff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .container { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| max-width: 600px; | |
| width: 100%; | |
| } | |
| h1 { | |
| color: #4a4a4a; | |
| margin-bottom: 1rem; | |
| } | |
| #joke-display { | |
| font-size: 1.2rem; | |
| margin: 1rem 0; | |
| min-height: 3em; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| .mood-selector { | |
| margin: 1rem 0; | |
| } | |
| select { | |
| padding: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(0,0,0,.3); | |
| border-radius: 50%; | |
| border-top-color: #4CAF50; | |
| animation: spin 1s ease-in-out infinite; | |
| margin-left: 10px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>AI Joke Generator Pro</h1> | |
| <div class="mood-selector"> | |
| <label for="mood">Select joke mood:</label> | |
| <select id="mood"> | |
| <option value="funny">Funny</option> | |
| <option value="dad">Dad Joke</option> | |
| <option value="nerdy">Nerdy</option> | |
| <option value="pun">Pun</option> | |
| <option value="dark">Dark Humor</option> | |
| </select> | |
| </div> | |
| <div id="joke-display">Click the button to generate a joke!</div> | |
| <button onclick="generateJoke()">Generate Joke</button> | |
| <div id="loading" class="loading" style="display: none;"></div> | |
| </div> | |
| <script> | |
| const jokes = { | |
| funny: [ | |
| "Why don't scientists trust atoms? Because they make up everything!", | |
| "Why did the scarecrow win an award? He was outstanding in his field!", | |
| "Why don't eggs tell jokes? They'd crack each other up!", | |
| "What do you call a fake noodle? An impasta!", | |
| "Why did the math book look so sad? Because it had too many problems!" | |
| ], | |
| dad: [ | |
| "I'm afraid for the calendar. Its days are numbered.", | |
| "What do you call a fish wearing a bowtie? Sofishticated.", | |
| "How do you make a tissue dance? Put a little boogie in it!", | |
| "Why did the cookie go to the doctor? Because it was feeling crumbly!", | |
| "What do you call cheese that isn't yours? Nacho cheese!" | |
| ], | |
| nerdy: [ | |
| "There are 10 types of people in the world: those who understand binary, and those who don't.", | |
| "Why do programmers prefer dark mode? Because light attracts bugs!", | |
| "A photon checks into a hotel. The bellhop asks, 'Can I help you with your luggage?' The photon replies, 'No thanks, I'm traveling light.'", | |
| "Why was the math book sad? Because it had too many problems!", | |
| "What do you get when you cross a snowman with a vampire? Frostbite!" | |
| ], | |
| pun: [ | |
| "I wondered why the baseball was getting bigger. Then it hit me.", | |
| "What do you call a can opener that doesn't work? A can't opener!", | |
| "I used to be addicted to soap, but I'm clean now.", | |
| "A bicycle can't stand on its own because it's two-tired.", | |
| "What do you call a fake noodle? An impasta!" | |
| ], | |
| dark: [ | |
| "I have a stepladder because my real ladder left when I was just a kid.", | |
| "Light travels faster than sound, which is why some people appear bright until you hear them speak.", | |
| "I was going to tell a dead baby joke. But I decided to abort.", | |
| "What's the difference between a tire and 365 used condoms? One's a Goodyear. The other's a great year.", | |
| "Give a man a match, and he'll be warm for a few hours. Set a man on fire, and he will be warm for the rest of his life." | |
| ] | |
| }; | |
| function generateJoke() { | |
| const mood = document.getElementById('mood').value; | |
| const jokeDisplay = document.getElementById('joke-display'); | |
| const loadingSpinner = document.getElementById('loading'); | |
| jokeDisplay.textContent = ''; | |
| loadingSpinner.style.display = 'inline-block'; | |
| setTimeout(() => { | |
| const randomJoke = jokes[mood][Math.floor(Math.random() * jokes[mood].length)]; | |
| jokeDisplay.textContent = randomJoke; | |
| loadingSpinner.style.display = 'none'; | |
| }, 1000); | |
| } | |
| </script> | |
| </body></html> |