fixes color-picker and icons
This commit is contained in:
@@ -3,9 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dice-Tower</title>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="/META-INF/resources/vendor/color-picker.js"></script>
|
||||
<link rel="stylesheet" href="/vendor/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
|
||||
<link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
|
||||
<script src="/vendor/color-picker.js"></script>
|
||||
<style>
|
||||
.w3-theme-l6 {
|
||||
color: #000 !important;
|
||||
@@ -257,7 +258,7 @@
|
||||
<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>
|
||||
<h1 style="text-align: center"><i class="fa-solid fa-dice-d20"></i> Dice-Tower <i class="fa-solid fa-dice-d20"></i></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: 50%; margin-top: 20px"
|
||||
@@ -265,7 +266,8 @@
|
||||
<label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required
|
||||
onkeyup="start(event)"/><br/>
|
||||
<div>
|
||||
<button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</button>
|
||||
<button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Join <i
|
||||
class="fa-solid fa-right-to-bracket"></i></button>
|
||||
<label class="checkbox" id="gm-container">Join as GM
|
||||
<input type="checkbox" id="gm" style="margin-left: 50px">
|
||||
<span class="checkmark"></span>
|
||||
@@ -274,7 +276,8 @@
|
||||
</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>
|
||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a><i
|
||||
class="fa-solid fa-chevron-down"></i></a></button>
|
||||
|
||||
<div class="content">
|
||||
<div id="overlay-urls">
|
||||
@@ -282,7 +285,7 @@
|
||||
<label for="overlayId" id="overlayLabel">Dice-Overlay </label>
|
||||
<input type="text" readonly id="overlayId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
|
||||
<button id="overlay-hint-button" popovertarget="overlay-hint" data-trigger="hover"
|
||||
class="overlayButton">🛈
|
||||
class="overlayButton"><i class="fa-solid fa-circle-info"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,15 +293,18 @@
|
||||
hidden id="all-results-urls">
|
||||
<label for="resultsId">All-Results-Overlay </label>
|
||||
<input type="text" readonly id="resultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
|
||||
<button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
<button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton"><i
|
||||
class="fa-solid fa-circle-info"></i></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" onclick="copyToClipboard(this.id)"/>
|
||||
<button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
<button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton"><i
|
||||
class="fa-solid fa-circle-info"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a>
|
||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a><i
|
||||
class="fa-solid fa-chevron-down"></i></a>
|
||||
</button>
|
||||
<div class="content">
|
||||
<label for="theme">Theme </label>
|
||||
@@ -316,9 +322,10 @@
|
||||
<color-picker id="themeColor"></color-picker>
|
||||
<div id="dice-box"></div>
|
||||
|
||||
<button style="margin: 10px" id="preview">Preview 🔎</button>
|
||||
<button style="margin: 10px" onclick="saveDice()">Save 💾</button>
|
||||
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
<button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
<button style="margin: 10px" onclick="saveDice()">Save <i class="fa-solid fa-floppy-disk"></i></button>
|
||||
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton"><i
|
||||
class="fa-solid fa-circle-info"></i></button>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
|
||||
<label style="font-size: x-large; font-weight: bold;">Roll </label>
|
||||
@@ -340,8 +347,9 @@
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
|
||||
<label for="command">Command </label>
|
||||
<input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
|
||||
<button hidden id="roll" onclick="roll()">Roll 🎲</button>
|
||||
<button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
<button hidden id="roll" onclick="roll()">Roll <i class="fa-solid fa-dice"></i></button>
|
||||
<button popovertarget="command-hint" data-trigger="hover" class="overlayButton"><i
|
||||
class="fa-solid fa-circle-info"></i></button>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 25px" id="all-results">
|
||||
@@ -532,10 +540,10 @@
|
||||
const content = this.nextElementSibling;
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none";
|
||||
this.children[0].innerHTML = "🞃"
|
||||
this.children[0].innerHTML = "<i class='fa-solid fa-chevron-down'></i>"
|
||||
} else {
|
||||
content.style.display = "block";
|
||||
this.children[0].innerHTML = "🞁"
|
||||
this.children[0].innerHTML = "<i class='fa-solid fa-chevron-up'></i>"
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -576,7 +584,7 @@
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999);
|
||||
navigator.clipboard.writeText(copyText.value);
|
||||
showSnackbar("Link copied to clipboard: <br/>" + copyText.value);
|
||||
showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
|
||||
}
|
||||
|
||||
function showSnackbar(message) {
|
||||
|
||||
Reference in New Issue
Block a user