Feat: styles and session

This commit is contained in:
Grail Finder
2025-05-02 12:34:58 +03:00
parent d18855cd49
commit cd1100d4b1
10 changed files with 164 additions and 13 deletions

View File

@ -0,0 +1,24 @@
{{define "createform"}}
<div class="create-room-div">
Create a room <br/>
or<br/>
@CustomBtn(templ.Attributes{"hx-get": "/room/hideform", "hx-target": ".create-room-div"}, "Hide Form")
<form hx-post="/room/create" hx-target="#ancestor">
<label For="room_name">Room Name</label><br/>
<input type="text" id="room_name" name="room_name" class="text-center text-black" value={utils.MakeDefaultRoomName(utils.GetUsername(c))}/><br/>
<label For="game_time">Game Time:</label><br/>
<input type="number" id="game_time" name="game_time" class="text-center text-black" value="300"/><br/>
<label For="minority_number">Minority Number:</label><br/>
<input type="number" id="minority_number" name="minority_number" class="text-center text-black" value="1"/><br/>
<label For="language">Language:</label><br/>
/* <input type="text" id="language" name="language" class="text-center text-black" value="en"/><br/> */
@base.LangOption()<br/>
<label For="password">Password:</label><br/>
<input type="text" id="password" name="room_pass" class="text-center text-black" value="" placeholder="Leave empty for open room"/><br/>
@CustomBtn(templ.Attributes{"type": "submit"}, "Create Room")
</form>
</div>
<div class="create-room-div">
Hello, you should login.
</div>
{{end}}

View File

@ -2,14 +2,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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"}}
<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>
<h1>Word Color Cards</h1>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
{{range $word, $color := .}}