94 lines
3.4 KiB
Plaintext
94 lines
3.4 KiB
Plaintext
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<title>Should be set in base template</title>
|
|
<meta name="description" content="" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<script src="/static/dist/htmx.min.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/out.css"
|
|
type="text/css"
|
|
media="screen"
|
|
/>
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<!-- Place favicon.ico in the root directory -->
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
your experience.
|
|
</p>
|
|
<![endif]-->
|
|
{{ define "main-content" }}
|
|
<main class="h-screen">
|
|
<div class="h-full w-full flex flex-row">
|
|
<script src="/static/dist/ext/sse.js"></script>
|
|
{{/* This is dynamic table, updated from SSE */}}
|
|
<div
|
|
id="roomTextContainer"
|
|
class="grid place-content-center grow"
|
|
hx-ext="sse"
|
|
sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
|
|
>
|
|
{{ block "simpleRoomShow" .Room }}
|
|
<!-- TODO use template, not block, have only 'loader' in base place -->
|
|
<!-- use different template based on 'mobile' query param -->
|
|
<div sse-swap="message">
|
|
<div>
|
|
{{ template "roomPeople" . }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{/* This is personal hand controls */}}
|
|
<div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
|
|
{{ range .Gestures }}
|
|
|
|
{{ if not .IsSelected }}
|
|
{{/* expects routes.GestureData */}}
|
|
{{ block "inactiveButton" . }}
|
|
<button
|
|
hx-get="{{ .Url }}"
|
|
hx-swap="outerHTML"
|
|
class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
|
|
style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
|
|
--text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
|
|
">
|
|
<img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
|
|
class="h-full"
|
|
/>
|
|
<p class="px-5 text-l">{{ .Gesture.String }} </p>
|
|
</button>
|
|
{{ end }}
|
|
{{ else }}
|
|
{{/* expects routes.GestureData */}}
|
|
{{ block "activeButton" . }}
|
|
<button
|
|
hx-get="/rooms/releaseHand?gesture={{ printf "%d" .Gesture}}"
|
|
hx-swap="outerHTML"
|
|
class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
|
|
style="--color: var({{.Gesture.GetGestureInfo.Color}});
|
|
--color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
|
|
">
|
|
<img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
|
|
class="h-full"
|
|
/>
|
|
<p class="px-5 text-l">{{ .Gesture.String }} </p>
|
|
</button>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{{ end }}
|
|
</body>
|
|
</html>
|