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