arindy/dice-tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

adds a dice preview #15

Merged
arindy merged 3 commits from fix-color-picker into main 2025-02-10 17:20:27 +01:00
Conversation 0 Commits 3 Files Changed 1 +13 -8
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2e6267e7b4 - Show all commits

21
src/main/resources/templates/pub/index.html
View File

@ -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">