From cb077b50de86640cfbf733d4708af8be0a2d55aa Mon Sep 17 00:00:00 2001
From: Arindy <dietmar.roth.23@gmail.com>
Date: Mon, 10 Feb 2025 18:19:54 +0100
Subject: [PATCH] adds how-to

---
 src/main/resources/templates/pub/index.html | 26 +++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index f52f7a5..399813a 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -145,10 +145,10 @@
 <body class="w3-theme-l1">
 <div class="w3-container w3-content" style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between;  padding: 25px">
     <h1 style="text-align: center">Dice-Tower</h1>
-    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
-        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <button id="start" onclick="start()" style="align-self: center">Start 🞂</button>
+    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto;">
+        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/><br/>
+        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/><br/>
+        <button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</button>
     </div>
     <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs  <a>🞃</a></button>
@@ -239,6 +239,23 @@
     <div popover id="command-hint" class="tooltip">
         Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
     </div>
+
+    <div style="margin-top: 20px; flex-grow: 1" id="how-to">
+        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
+            <h2 style="text-align: center">How-To</h2>
+            <ul>
+                <li>Join a room by entering your character name and the name of the room</li>
+                <li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
+                <ul>
+                    <li>Only open your Dice-Overlay once!</li>
+                    <li>You can configure your Overlay with query parameters (more information at the info element next to the link)</li>
+                </ul>
+                <li>Configure your dice</li>
+                <li>Save your dice configuration</li>
+                <li>Start rolling</li>
+            </ul>
+        </div>
+    </div>
 </div>
 <script>
     function addDice() {
@@ -266,6 +283,7 @@
             document.getElementById('dice-tower').hidden = false;
             document.getElementById('name').hidden = true;
             document.getElementById('room').hidden = true;
+            document.getElementById('how-to').hidden = true;
             document.getElementById('results').hidden = false;
             document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
             document.getElementById('roomLabel').innerHTML = '<strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
