| <!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> |
