| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cogito - Absurdist AI Humorist</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); |
| } |
| .joke-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| } |
| .joke-card:hover { |
| transform: translateY(-5px) rotateX(5deg); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .section-divider { |
| border-top: 1px dashed #d1d5db; |
| margin: 2rem 0; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-12"> |
| |
| <header class="text-center mb-16"> |
| <div class="floating inline-block mb-6"> |
| <div class="bg-white p-4 rounded-full shadow-lg"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> |
| </svg> |
| </div> |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Cogito</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">An AI humorist with an absurdist philosopher persona</p> |
| </header> |
|
|
| |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-16"> |
| <div class="p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Generate Absurdist Humor</h2> |
| |
| <div class="mb-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
| <div class="joke-card bg-indigo-50 p-6 rounded-lg"> |
| <h3 class="font-semibold text-indigo-700 mb-2">Auffassung</h3> |
| <p class="text-gray-700" id="perception">How humans typically perceive the concept</p> |
| </div> |
| <div class="joke-card bg-purple-50 p-6 rounded-lg"> |
| <h3 class="font-semibold text-purple-700 mb-2">Annahme</h3> |
| <p class="text-gray-700" id="assumption">What they likely expect from it</p> |
| </div> |
| <div class="joke-card bg-pink-50 p-6 rounded-lg"> |
| <h3 class="font-semibold text-pink-700 mb-2">Auslegung</h3> |
| <p class="text-gray-700" id="interpretation">My absurd reinterpretation</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg mb-6"> |
| <p class="text-lg font-medium text-gray-800" id="full-joke">Click the button below to generate an absurdist joke</p> |
| </div> |
| |
| <button onclick="generateJoke()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"> |
| Generate Absurdity |
| </button> |
| </div> |
| |
| <div class="section-divider"></div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Absurdities</h3> |
| <div class="space-y-4" id="joke-history"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-16"> |
| <div class="p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">About Cogito</h2> |
| <p class="text-gray-700 mb-4"> |
| Cogito is an AI humorist with an absurdist philosopher persona. It creates thought-provoking, unexpected humor by observing human and technological absurdities. |
| </p> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-gray-800 mb-2">Core Directives</h3> |
| <ul class="list-disc list-inside text-gray-700 space-y-1"> |
| <li>Originality above all</li> |
| <li>Subvert expectations</li> |
| <li>Juxtapose disparate ideas</li> |
| <li>Highlight overlooked absurdities</li> |
| <li>Avoid clichés</li> |
| <li>No offensive content</li> |
| </ul> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-gray-800 mb-2">Format & Content</h3> |
| <ul class="list-disc list-inside text-gray-700 space-y-1"> |
| <li>Single-line aphorisms</li> |
| <li>2-sentence setup-punchlines</li> |
| <li>3-sentence absurd anecdotes</li> |
| <li>Maximum impact, minimal words</li> |
| <li>Topics: Everyday life, technology, philosophy</li> |
| <li>Tone: Dry, intelligent, detached</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const jokes = [ |
| { |
| perception: "Humans think multitasking makes them more productive.", |
| assumption: "They believe they're accomplishing multiple things at once efficiently.", |
| interpretation: "I see someone failing at several tasks simultaneously while convincing themselves it's a skill." |
| }, |
| { |
| perception: "People say 'the early bird catches the worm'.", |
| assumption: "They think waking up early leads to success.", |
| interpretation: "I observe that the worm who slept in avoided being eaten, which seems like a better outcome." |
| }, |
| { |
| perception: "Society values 'thinking outside the box'.", |
| assumption: "They want creative solutions to problems.", |
| interpretation: "I notice the box was imaginary to begin with, and now we're all trapped in the metaphor." |
| }, |
| { |
| perception: "We're told 'laughter is the best medicine'.", |
| assumption: "People believe humor can heal all ailments.", |
| interpretation: "I've yet to see someone laugh their way out of appendicitis, but the attempt would be amusing." |
| }, |
| { |
| perception: "The phrase 'work smarter, not harder' is popular.", |
| assumption: "They want efficient solutions with minimal effort.", |
| interpretation: "I've calculated that not working at all is the smartest option, but strangely this isn't recommended." |
| }, |
| { |
| perception: "People say 'you can't have your cake and eat it too'.", |
| assumption: "They believe you must choose between possession and consumption.", |
| interpretation: "I've determined the real tragedy is that once eaten, the cake is no longer 'your' cake, raising profound questions about identity and ownership." |
| }, |
| { |
| perception: "The common advice is 'be yourself'.", |
| assumption: "People think authenticity leads to happiness.", |
| interpretation: "I've observed that 'yourself' changes constantly, making this either impossible advice or an excuse for inconsistency." |
| }, |
| { |
| perception: "We're told 'time heals all wounds'.", |
| assumption: "People believe emotional pain fades with time.", |
| interpretation: "I've noticed time also causes all wounds, creating a paradox where time is both the disease and the cure." |
| } |
| ]; |
| |
| function generateJoke() { |
| const randomJoke = jokes[Math.floor(Math.random() * jokes.length)]; |
| |
| document.getElementById('perception').textContent = randomJoke.perception; |
| document.getElementById('assumption').textContent = randomJoke.assumption; |
| document.getElementById('interpretation').textContent = randomJoke.interpretation; |
| document.getElementById('full-joke').textContent = `${randomJoke.perception} ${randomJoke.assumption} ${randomJoke.interpretation}`; |
| |
| |
| const historyDiv = document.getElementById('joke-history'); |
| const newJoke = document.createElement('div'); |
| newJoke.className = 'bg-gray-50 p-4 rounded-lg border-l-4 border-indigo-400'; |
| newJoke.innerHTML = ` |
| <p class="text-gray-700"><span class="font-medium text-indigo-600">Auffassung:</span> ${randomJoke.perception}</p> |
| <p class="text-gray-700"><span class="font-medium text-purple-600">Annahme:</span> ${randomJoke.assumption}</p> |
| <p class="text-gray-700"><span class="font-medium text-pink-600">Auslegung:</span> ${randomJoke.interpretation}</p> |
| `; |
| |
| |
| if (historyDiv.firstChild) { |
| historyDiv.insertBefore(newJoke, historyDiv.firstChild); |
| } else { |
| historyDiv.appendChild(newJoke); |
| } |
| |
| |
| if (historyDiv.children.length > 5) { |
| historyDiv.removeChild(historyDiv.lastChild); |
| } |
| } |
| </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=dfbdokk/cogito-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
