Spaces:
Running
Running
File size: 3,048 Bytes
41372f5 3f5af45 41372f5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html>
<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>
|