Spaces:
Running
Running
| <html lang="en"> | |
| <meta charset="UTF-8" /> | |
| <title>Stable Diffusion Multiplayer</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script> | |
| <script src="//unpkg.com/alpinejs" defer></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <body> | |
| <!-- UI --> | |
| <div class="absolute z-10 p-8"> | |
| <h1 class="text-4xl font-bold">Stable Diffusion together</h1> | |
| <p class="text-xl text-gray-500"> | |
| Infinite multiplayer canvas for Stable Diffusion | |
| </p> | |
| </div> | |
| <div | |
| class="fixed bottom-16 inset-x-0 flex items-center justify-center z-50 space-x-2" | |
| > | |
| <button | |
| class="text-2xl bg-black text-white py-2 px-5 rounded-2xl hover:bg-gradient-to-br from-red-700 to-blue-700 shadow-2xl font-bold" | |
| > | |
| <span class="mr-2">✋</span> Move | |
| </button> | |
| <button | |
| class="text-2xl bg-gray-400 text-gray-200 py-2 px-5 rounded-2xl hover:bg-gradient-to-br from-red-700 to-blue-700 shadow-2xl font-bold" | |
| > | |
| <span class="mr-2">✏️</span> Paint | |
| </button> | |
| </div> | |
| <!-- BOARD --> | |
| <div class="h-screen w-screen overflow-hidden bg-gray-200 relative"> | |
| <svg | |
| class="cursor absolute" | |
| id="cursor-template" | |
| width="48" | |
| height="72" | |
| viewBox="0 0 24 36" | |
| fill="transparent" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z" | |
| /> | |
| </svg> | |
| <div | |
| id="cursors-container" | |
| class="w-[2560px] h-[2560px] absolute inset-0 z-20" | |
| ></div> | |
| <div id="text" class="absolute bg-black z-30 text-white"></div> | |
| <div | |
| id="board" | |
| class="w-[2560px] bg-white h-[2560px] bg-whtie relative border-gray-300 border" | |
| > | |
| <div | |
| class="top-[256px] left-[256px] h-[512px] w-[512px] absolute border-2 border-indigo-300 bg-gradient-to-t from-indigo-500/50 z-10 to-transparent text-indigo-600 text-2xl flex flex-col justify-between p-4" | |
| > | |
| <div class="self-end">User 12</div> | |
| <div class="self-center font-semibold">Click to paint</div> | |
| <div>a rabbit eating a red carrot aezaze azeaezaza aze azae</div> | |
| </div> | |
| <div | |
| class="bg-[url('http://placekitten.com/300/300')] bg-cover top-[512px] left-[512px] h-[512px] w-[512px] absolute border-2 border-red-600 text-red-700 text-2xl flex flex-col justify-between overflow-hidden" | |
| > | |
| <!-- <img | |
| @click="open = true" | |
| src="http://placekitten.com/300/300" | |
| class="w-full h-full" | |
| /> --> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="./app.js"></script> | |
| <script src="./multiplayer.js" type="module"></script> | |
| </body> | |
| </html> | |