Spaces:
Running
Running
File size: 4,861 Bytes
bd9d750 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<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> |