73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
{{define "main"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Word Colors</title>
|
|
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
|
|
<script src="/assets/htmx.min.js"></script>
|
|
<script src="/assets/htmx.sse.js"></script>
|
|
<link rel="stylesheet" href="/assets/style.css"/>
|
|
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<link rel="icon" sizes="64x64" href="favicon.ico"/>
|
|
<style type="text/css">
|
|
body{
|
|
background-color: #0C1616FF;
|
|
color: #8896b2;
|
|
max-width: 800px;
|
|
min-width: 0;
|
|
margin: 2em auto !important;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.5;
|
|
font-size: 16px;
|
|
font-family: Open Sans,Arial;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
a{
|
|
color: #00a2e7;
|
|
}
|
|
a:visited{
|
|
color: #ca1a70;
|
|
}
|
|
table {
|
|
border-collapse: separate !important;
|
|
border-spacing: 10px 10px;
|
|
border: 1px solid white;
|
|
}
|
|
tr{
|
|
border: 1px solid white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id=ancestor>
|
|
{{template "login"}}
|
|
<div id="create-room" class="create-room-div">
|
|
<button button id="create-form-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/createform" hx-swap="outerHTML">SHOW ROOM CREATE FORM</button>
|
|
</div>
|
|
<!-- check if user in the room -->
|
|
{{template "room" .}}
|
|
<!-- <h1>Word Color Cards</h1> -->
|
|
<!-- <div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;"> -->
|
|
<!-- {{range $word, $color := .}} -->
|
|
<!-- <div id="card-{{$word}}" class="slide-it" style=" -->
|
|
<!-- background-color: beige; -->
|
|
<!-- padding: 1rem; -->
|
|
<!-- border-radius: 8px; -->
|
|
<!-- box-shadow: 0 2px 4px rgba(0,0,0,0.2); -->
|
|
<!-- min-width: 100px; -->
|
|
<!-- text-align: center; -->
|
|
<!-- color: white; -->
|
|
<!-- text-shadow: 0 2px 4px rgba(0,0,0,0.8); -->
|
|
<!-- cursor: pointer;" -->
|
|
<!-- hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s"> -->
|
|
<!-- {{$word}} -->
|
|
<!-- </div> -->
|
|
<!-- {{end}} -->
|
|
<!-- </div> -->
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{end}}
|