-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
94 lines (84 loc) · 4.81 KB
/
index.html
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
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NATS Whiteboard</title>
</head>
<body
class="touch-none"
x-data="{
room: (new URLSearchParams(window.location.search)).get('room'),
goToRoom() {
window.location.replace(`?room=${Math.random().toString(36).slice(2, 10)}`)
}
}">
<script type="module" src="/main.js"></script>
<template x-if="!room">
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-white py-6 sm:py-12">
<div class="mx-auto max-w-4xl p-10 text-center">
<h2 class="text-5xl font-bold leading-tight text-slate-800">NATS Whiteboard</h2>
<p class="mt-5 text-xl leading-8 text-slate-800">This demo showcases how NATS+Jetstream can help frontend developers create realtime, persisted experiences: no backend code needed.</p>
<p class="mt-5 text-xl leading-8 text-slate-800">Create a whiteboard and share the URL with others to start collaborating in real time!</p>
<div class="mt-6 flex items-center justify-center gap-4">
<button @click="goToRoom()" class="flex items-center justify-center gap-2 rounded-full bg-violet-500 px-5 py-3 text-lg font-medium text-white">
<span>Start a whiteboard</span>
<span
><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.00156 13.4016L4.60156 12.0016L8.60156 8.00156L4.60156 4.00156L6.00156 2.60156L11.4016 8.00156L6.00156 13.4016Z" fill="white" /></svg
></span>
</button>
<a href="https://github.com/connecteverything/nats-whiteboard"
class="flex items-center justify-center gap-2 rounded-full bg-black px-5 py-3 text-lg font-medium text-white">
<span>
<svg width="24" height="24" fill="currentColor" class="text-violet-500 transform"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.606 9.606 0 0112 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48C19.137 20.107 22 16.373 22 11.969 22 6.463 17.522 2 12 2z"></path></svg>
</span>
<span>View the code</span>
</a>
</div>
</div>
</div>
</template>
<template x-if="room">
<div x-data="whiteboard('whiteboard.' + room)" class="container">
<div class="absolute w-full">
<div class="p-4 relative gap-3 flex">
<div class="pr-4 gap-3 flex border-r border-slate-300">
<template x-for="c in ['black', 'red', 'green', 'blue', 'white']">
<div class="w-8 h-8 transition-all rounded-full block hover:ring-2 ring-offset-1 border border-slate-300"
:class="color===c ? 'ring-2' : ''"
:style="`background:${c};`"
@click="color = c"
></div>
</template>
</div>
<div class="pr-4 gap-4 flex border-r border-slate-300">
<select class="bg-white" x-model="thickness">
<template x-for="n in [5,10,15,20]">
<option :value="n" x-text="`${n}pt`"></option>
</template>
</select>
</div>
<button type="button" @click="clear()" class="stroke-slate-600 fill-transparent">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<canvas
class="w-screen h-screen"
x-init="sizeCanvas($el)"
@mousedown="startDrawing($event)"
@mouseup="drawing=false"
@mousemove="drawing && draw($event)"
@touchstart="startDrawing($event)"
@touchend="drawing=false"
@touchmove="drawing && draw($event)"
>
</canvas>
</div>
</template>
</body>
</html>