From 2e6267e7b4794f9e2c5e4bb96f855ee382987c00 Mon Sep 17 00:00:00 2001
From: Arindy <dietmar.roth.23@gmail.com>
Date: Mon, 10 Feb 2025 16:55:33 +0100
Subject: [PATCH] adds button icons

---
 src/main/resources/templates/pub/index.html | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index b8aa961..d584cd9 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -33,6 +33,10 @@
 
         button {
             padding: 10px;
+            border: #333333 3px solid;
+            border-radius: 5px;
+            background: #333333;
+            color: #fff
         }
         input {
             margin: 10px;
@@ -98,6 +102,7 @@
             width: 5px;
             height: 5px;
             font-size: large;
+            color: #000
         }
 
         .tooltip {
@@ -130,7 +135,7 @@
     <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>
+        <button id="start" onclick="start()" style="align-self: center">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>
@@ -139,13 +144,13 @@
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
                 <label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label>
                 <input type="text" readonly id="overlayId" style="flex-grow: 1"/>
-                <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button>
+                <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">?</button>
+                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">?</button>
+                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
         </div>
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice  <a>🞃</a></button>
@@ -166,13 +171,13 @@
             <color-picker id="themeColor"></color-picker><br/>
             <div id="dice-box"></div>
 
-            <button style="margin-bottom: 20px" id="preview">Preview</button>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save</button>
-            <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
+            <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
+            <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
+            <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
-        <button hidden id="roll" onclick="roll()">Roll</button><br/><br/>
+        <button hidden id="roll" onclick="roll()">Roll 🞂</button><br/><br/>
         <label for="resultSwitch">Show all results </label>
         <label class="switch">
             <input type="checkbox" id="resultSwitch">