| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| | <title>Opus :3</title> |
| |
|
| | <script src="https://cdn.tailwindcss.com"></script> |
| | </head> |
| |
|
| | <body class="bg-gradient-to-b from-orange-900 to-black text-white select-none"> |
| | <div class="flex sm:justify-center sm:items-center min-h-screen"> |
| | <div class="sm:w-1/2 p-4"> |
| | <div> |
| | <style> |
| | .blink-container { |
| | display: inline-block; |
| | position: relative; |
| | width: 1em; |
| | height: 1em; |
| | } |
| | |
| | .blink-container::before, |
| | .blink-container::after { |
| | content: '😗'; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | } |
| | |
| | .blink-container::after { |
| | content: '😙'; |
| | opacity: 0; |
| | animation: blink 3s infinite; |
| | } |
| | |
| | .blink-container:hover::before, |
| | .blink-container:hover::after { |
| | content: '😚'; |
| | } |
| | |
| | @keyframes blink { |
| | |
| | 0%, |
| | 90% { |
| | opacity: 0; |
| | } |
| | |
| | 91%, |
| | 100% { |
| | opacity: 1; |
| | } |
| | } |
| | </style> |
| | <h1 class="text-4xl font-bold tracking-wider"> |
| | dumb-<span class="blink-container mx-1 -mb-1"></span>pus |
| | </h1> |
| |
|
| | <p class="mt-4"> |
| | Claude 3 Opus is a language model developed by Anthropic that is considered to be their most |
| | capable. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="mt-8"> |
| | <p class="font-bold">Riddle <sup class="bg-white/10 px-1 rounded">{{ riddle_expire }}</sup> :</p> |
| | |
| | <div class="mt-2 flex gap-4"> |
| | <label class="flex items-center"> |
| | <input type="radio" class="mr-2" name="language" value="id" /> |
| | ID |
| | </label> |
| | <label class="flex items-center"> |
| | <input type="radio" class="mr-2" name="language" value="en" checked /> |
| | EN |
| | </label> |
| | </div> |
| | <script> |
| | const radioButtons = document.querySelectorAll('input[name="language"]'); |
| | radioButtons.forEach((radio) => { |
| | radio.addEventListener('change', (event) => { |
| | if (event.target.value === 'id') { |
| | document.getElementById('riddle_id').classList.remove('hidden'); |
| | document.getElementById('riddle_en').classList.add('hidden'); |
| | } else { |
| | document.getElementById('riddle_id').classList.add('hidden'); |
| | document.getElementById('riddle_en').classList.remove('hidden'); |
| | } |
| | }); |
| | }); |
| | </script> |
| |
|
| | <div class="mt-4 cursor-help"> |
| | <span class="text-xs text-white/30 flex items-center gap-1 py-2"> |
| | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" |
| | stroke="currentColor" class="w-4 h-4"> |
| | <path stroke-linecap="round" stroke-linejoin="round" |
| | d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /> |
| | </svg> |
| | AI Generated |
| | </span> |
| | <pre id="riddle_id" class="font-sans hidden">{{ riddle[0] }}</pre> |
| | <pre id="riddle_en" class="font-sans">{{ riddle[1] }}</pre> |
| | </div> |
| | </div> |
| |
|
| | {% if song.url %} |
| | <div class="mt-4 max-w-2xl relative"> |
| | <button class="absolute top-0 -right-1.5 p-2 bg-white text-black rounded-full" |
| | onclick="this.parentElement.remove()"> |
| | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| | stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"> |
| | <line x1="18" y1="6" x2="6" y2="18"></line> |
| | <line x1="6" y1="6" x2="18" y2="18"></line> |
| | </svg> |
| | </button> |
| | <fieldset class="border rounded-lg p-4"> |
| | <legend class="mx-2 px-2">ads</legend> |
| | <p class="text-center">{{ song.title }}</p> |
| | <audio controls autoplay class="w-full my-2"> |
| | <source src="{{ song.url }}" type="audio/mpeg"> |
| | </audio> |
| | </fieldset> |
| | </div> |
| | {% endif %} |
| |
|
| | <div class="mt-8 select-text"> |
| | <pre id="prompt" class="text-white"> |
| | {%- if prompt -%} |
| | {{ prompt }} |
| | {%- endif -%} |
| | </pre> |
| | </div> |
| |
|
| | <footer class="mt-6"> |
| | <p class="text-sm text-white/50"> |
| | made with 🐈 by <span class="font-bold">dakunesu</span>, support me on |
| | <a class="font-bold" target="_blank" href="https://sociabuzz.com/dakunesu/support"> |
| | <span class="text-green-500">socia</span><span class="text-blue-500">buzz</span> |
| | </a> |
| | </p> |
| | </footer> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const url = new URL(window.location.href); |
| | |
| | setInterval(() => { |
| | fetch(url, { headers: { "accept": "application/json" } }) |
| | .then((res) => res.text()) |
| | .then((text) => { |
| | document.getElementById("prompt").innerHTML = text; |
| | }) |
| | .catch((err) => { |
| | console.log(err); |
| | }); |
| | }, 10000); |
| | </script> |
| | </body> |
| |
|
| | </html> |
