adds button icons

.github/workflows/ci.yaml

@@ -11,8 +11,6 @@ jobs:
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
 
       - name: Setup JDK
         uses: actions/setup-java@v4
@@ -20,14 +18,8 @@ jobs:
           distribution: 'zulu'
           java-version: '21'
 
-      - name: new Version
-        if: github.ref_name == 'main'
-        run: |
-          ./mvnw -B --no-transfer-progress versions:set -DremoveSnapshot
-
       - name: Build Runner
-        run: |
+        run: ./mvnw --no-transfer-progress clean verify -Pnative -Dquarkus.native.remote-container-build=true
-          ./mvnw -B --no-transfer-progress clean verify -Pnative -Dquarkus.native.remote-container-build=true -Djgitver.skip=true
 
       - name: Add coverage to PR
         id: jacoco
@@ -39,57 +31,10 @@ jobs:
           min-coverage-changed-files: 60
           title: ${{ env.REPO }} Coverage
 
-      - id: version
+      - name: Build Container
-        name: Version
-        run: echo "VERSION=$(./mvnw help:evaluate -Dexpression=project.version -q -DforceStdout)" >> ${GITHUB_OUTPUT}
-
-      - name: Build unstable Container
-        if: github.ref_name != 'main'
-        run: |
-          echo ${{secrets.PACKAGES_TOKEN}} | docker login --username ${{ secrets.PACKAGES_USER }} --password-stdin git.arindy.de
-          docker build -f src/main/docker/Dockerfile.native-micro -t git.arindy.de/arindy/dice-tower:unstable -t git.arindy.de/arindy/dice-tower:${{ steps.version.outputs.VERSION }} .
-          docker push git.arindy.de/arindy/dice-tower:unstable
-
-      - name: Build stable Container
         if: github.ref_name == 'main'
-        run: |
+        run: docker build -f src/main/docker/Dockerfile.native-micro -t ${{ env.REPO }} .
-          echo ${{secrets.PACKAGES_TOKEN}} | docker login --username ${{ secrets.PACKAGES_USER }} --password-stdin git.arindy.de
-          docker build -f src/main/docker/Dockerfile.native-micro -t git.arindy.de/arindy/dice-tower:latest -t git.arindy.de/arindy/dice-tower:${{ steps.version.outputs.VERSION }} .
-          docker push git.arindy.de/arindy/dice-tower:${{ steps.version.outputs.VERSION }}
-          docker push git.arindy.de/arindy/dice-tower:latest
-
-      - name: Prepare deploy
-        run: |
-          echo ${{secrets.SSH_KNOWN_HOSTS}} >> ~/.ssh/known_hosts
-          base64 -d <<< ${{secrets.SSH_KEY}} > ./.key
-          chmod 600 ./.key
-
-      - name: Deploy unstable
-        if: github.ref_name != 'main'
-        run: "ssh -i ./.key dice-tower@${{secrets.SSH_HOST}} 'docker compose -f compose.unstable.yml pull && docker compose -f compose.unstable.yml up -d'  "
 
       - name: Deploy
-        if: github.ref_name == 'main'
-        run: "ssh -i ./.key dice-tower@${{secrets.SSH_HOST}} 'docker compose -f compose.yml pull && docker compose -f compose.yml up -d'  "
-
-      - name: Deploy local
         if: github.ref_name == 'main'
         run: "docker compose up -d"
-
-      - name: clean up
-        run: |
-          rm ./.key
-
-      - name: create tag
-        if: github.ref_name == 'main'
-        run: |
-          git config user.email "ci@git.arindy.de"
-          git config user.name "gitea"
-          git add ./pom.xml
-          git commit -m "[no ci] release ${{ steps.version.outputs.VERSION }}"
-          git tag ${{ steps.version.outputs.VERSION }} -m "release ${{ steps.version.outputs.VERSION }}"
-          ./mvnw -B --no-transfer-progress clean validate -Pnew-snapshot
-          git add ./pom.xml
-          git commit -m "[no ci] prepare new Version"
-          git push origin main
-          git push origin ${{ steps.version.outputs.VERSION }}

.gitignore

@@ -124,5 +124,3 @@ fabric.properties
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
 
-.key
-.key/

README.md

@@ -6,15 +6,12 @@
 
 <p align="center">
   <a href="#key-features">Key Features</a> •
-  <a href="#start-container">Start Container</a> •
+  <a href="#how-to-build">How To Build</a> •
-  <a href="#how-to-build-from-scratch">How To Build from scratch</a> •
   <a href="#credits">Credits</a> •
   <a href="#license">License</a>
 </p>
 
-<p align="center">
+![preview](.github/media/preview.gif)
-  <img src=".github/media/preview.gif" />
-</p>
 
 ---
 
@@ -27,28 +24,8 @@
 * Watch roll results (also available as Browser Source in OBS)
 
 ---
-## Start Container
 
-You can start dice-tower with docker compose
+## How To Build
-
-Create a `compose.yml`-File with following content:
-```yaml
-services:
-  dice-tower:
-    container_name: dice-tower
-    image: git.arindy.de/arindy/dice-tower:latest
-    restart: always
-    ports:
-      - "8080:8080"
-```
-Run the container with:
-```bash
-docker compose up -d
-```
-
----
-
-## How To Build from scratch
 
 To clone and run this application, you'll need `git`, `java21` and `docker`.
 

compose.yml

@@ -1,7 +1,7 @@
 services:
-  dice-tower:
+  api:
     container_name: dice-tower
-    image: git.arindy.de/arindy/dice-tower:latest
+    image: dice-tower
     restart: always
     networks:
       - reverse_proxy

pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>de.arindy</groupId>
     <artifactId>dice-tower</artifactId>
-    <version>1.1.4</version>
+    <version>1.0.0-SNAPSHOT</version>
 
     <properties>
         <compiler-plugin.version>3.13.0</compiler-plugin.version>
@@ -21,13 +21,6 @@
         <rxjava-version>2.2.8</rxjava-version>
     </properties>
 
-    <scm>
-        <connection>scm:git:https://git.arindy.de/arindy/dice-tower.git</connection>
-        <developerConnection>scm:git:https://git.arindy.de/arindy/dice-tower.git</developerConnection>
-        <url>https://git.arindy.de/arindy/dice-tower</url>
-        <tag>HEAD</tag>
-    </scm>
-
     <dependencyManagement>
         <dependencies>
             <dependency>
@@ -274,42 +267,5 @@
                 <quarkus.native.enabled>true</quarkus.native.enabled>
             </properties>
         </profile>
-        <profile>
-            <id>new-snapshot</id>
-            <build>
-                <plugins>
-                    <plugin>
-                        <groupId>org.codehaus.mojo</groupId>
-                        <artifactId>build-helper-maven-plugin</artifactId>
-                        <version>3.0.0</version>
-                        <executions>
-                            <execution>
-                                <id>next-version</id>
-                                <goals>
-                                    <goal>parse-version</goal>
-                                </goals>
-                            </execution>
-                        </executions>
-                    </plugin>
-                    <plugin>
-                        <groupId>org.codehaus.mojo</groupId>
-                        <artifactId>versions-maven-plugin</artifactId>
-                        <version>2.18.0</version>
-                        <executions>
-                            <execution>
-                                <id>release-version</id>
-                                <phase>validate</phase>
-                                <goals>
-                                    <goal>set</goal>
-                                </goals>
-                                <configuration>
-                                    <newVersion>${parsedVersion.majorVersion}.${parsedVersion.minorVersion}.${parsedVersion.nextIncrementalVersion}-SNAPSHOT</newVersion>
-                                </configuration>
-                            </execution>
-                        </executions>
-                    </plugin>
-                </plugins>
-            </build>
-        </profile>
     </profiles>
 </project>

src/main/kotlin/de/arindy/dicetower/ChatOverlayResource.kt

@@ -1,40 +0,0 @@
-package de.arindy.dicetower
-
-import io.quarkus.qute.TemplateInstance
-import jakarta.ws.rs.GET
-import jakarta.ws.rs.Path
-import jakarta.ws.rs.PathParam
-import jakarta.ws.rs.Produces
-import jakarta.ws.rs.QueryParam
-import jakarta.ws.rs.core.MediaType
-
-@Path("chatoverlay")
-class ChatOverlayResource {
-
-    @GET
-    @Path("/{channel}")
-    @Produces(MediaType.TEXT_HTML)
-    fun get(
-        @PathParam("channel") channel: String,
-        @QueryParam("scale") scale: Int? = 7,
-        @QueryParam("maxDice") maxDice: Int? = 20,
-        @QueryParam("modsAllowed") modsAllowed: Boolean = false,
-        @QueryParam("vipAllowed") vipAllowed: Boolean = false,
-        @QueryParam("subsAllowed") subsAllowed: Boolean = false,
-        @QueryParam("cmd") cmd: String? = "roll",
-        @QueryParam("theme") theme: String? = "default",
-        @QueryParam("themeColor") themeColor: String? = "default",
-        @QueryParam("clearAfter") clearAfter: Long? = -1,
-        @QueryParam("timeout") timeout: Long? = -1
-    ): TemplateInstance {
-        return Templates.chatoverlay(channel, scale ?: 7, maxDice ?: 20, modsAllowed, vipAllowed, subsAllowed, cmd ?: "roll", theme ?: "default", themeColor ?: "ff0202", clearAfter ?: 10, timeout ?: 60)
-    }
-
-    @GET
-    @Produces(MediaType.TEXT_HTML)
-    fun config(
-    ): TemplateInstance {
-        return Templates.chatoverlayconfig()
-    }
-
-}

src/main/kotlin/de/arindy/dicetower/DiceResource.kt

@@ -26,6 +26,9 @@ final class DiceResource(@Context val sse: Sse) {
     @POST
     @Consumes(MediaType.APPLICATION_JSON)
     fun parseCommand(@PathParam("id") id: String, data: RollPayload) {
+        if (!sseBroadcasters.containsKey(id)) {
+            sseBroadcasters[id] = sse.newBroadcaster()
+        }
         data.roll = data.command.split(" ", "&", "and").filter { it.isNotEmpty() }.map { it.trim() }.toTypedArray<String>()
         data.room = id.split(":")[0]
         data.user = id.split(":")[1]
@@ -38,17 +41,6 @@ final class DiceResource(@Context val sse: Sse) {
         }
     }
 
-    @POST
-    @Path("/register")
-    @Consumes(MediaType.APPLICATION_JSON)
-    fun register(@PathParam("id") id: String, data: Any) {
-        println("id = [${id}], data = [${data}]")
-        sseBroadcasters["register:$id"]?.broadcast(
-            eventBuilder.id((UUID.randomUUID()).toString())
-                .mediaType(MediaType.APPLICATION_JSON_TYPE).data(data).build())
-
-    }
-
     @POST
     @Path("/results")
     @Consumes(MediaType.APPLICATION_JSON)
@@ -63,7 +55,9 @@ final class DiceResource(@Context val sse: Sse) {
     @Path("/stream")
     @Produces(MediaType.SERVER_SENT_EVENTS)
     fun stream(@PathParam("id") id: String, @Context sseEventSink: SseEventSink) {
+        if (!sseBroadcasters.containsKey(id)) {
             sseBroadcasters[id] = sse.newBroadcaster()
+        }
         sseBroadcasters[id]?.register(sseEventSink)
     }
 
@@ -77,17 +71,7 @@ final class DiceResource(@Context val sse: Sse) {
         sseBroadcasters[id]?.register(sseEventSink)
     }
 
-    @GET
-    @Path("/users")
-    @Produces(MediaType.SERVER_SENT_EVENTS)
-    fun users(@PathParam("id") id: String, @Context sseEventSink: SseEventSink) {
-        if (!sseBroadcasters.containsKey("register:$id")) {
-            sseBroadcasters["register:$id"] = sse.newBroadcaster()
-        }
-        sseBroadcasters["register:$id"]?.register(sseEventSink)
-    }
-
     @RegisterForReflection
-    data class Result(val name: String, val user: String, val themeColor: String)
+    data class Result(val name: String, val user: String, val themeColor: String) {}
 
 }

src/main/kotlin/de/arindy/dicetower/IndexResource.kt

@@ -1,24 +0,0 @@
-package de.arindy.dicetower
-
-import io.quarkus.qute.TemplateInstance
-import jakarta.enterprise.context.ApplicationScoped
-import jakarta.ws.rs.GET
-import jakarta.ws.rs.Path
-import jakarta.ws.rs.Produces
-import jakarta.ws.rs.core.MediaType
-import org.eclipse.microprofile.config.inject.ConfigProperty
-
-@Path("/")
-@ApplicationScoped
-final class IndexResource() {
-
-    @ConfigProperty(name = "quarkus.application.version")
-    private lateinit var version: String
-
-    @GET
-    @Produces(MediaType.TEXT_HTML)
-    fun get(): TemplateInstance {
-        return Templates.index(version)
-    }
-
-}

src/main/kotlin/de/arindy/dicetower/Templates.kt

@@ -7,28 +7,6 @@ import io.quarkus.qute.TemplateInstance
 object Templates {
     @JvmStatic
     external fun overlay(diceid: String, scale: Int?, clearAfter: Long?): TemplateInstance
-
     @JvmStatic
     external fun results(room: String, name: String?, user: String?): TemplateInstance
-
-    @JvmStatic
-    external fun index(version: String): TemplateInstance
-
-    @JvmStatic
-    external fun chatoverlayconfig(): TemplateInstance
-
-    @JvmStatic
-    external fun chatoverlay(
-        channel: String,
-        scale: Int?,
-        maxDice: Int?,
-        modsAllowed: Boolean,
-        vipAllowed: Boolean,
-        subsAllowed: Boolean,
-        cmd: String?,
-        theme: String?,
-        themeColor: String?,
-        clearAfter: Long?,
-        timeout: Long?
-    ): TemplateInstance
 }

src/main/resources/META-INF/resources/app.js

@@ -1,192 +0,0 @@
-function addDice() {
-    let amount = +document.getElementById('dice-amount').innerText
-    document.getElementById('dice-amount').innerText = `${amount + 1}`
-}
-
-function removeDice() {
-    let amount = +document.getElementById('dice-amount').innerText
-    if (amount > 1) {
-        document.getElementById('dice-amount').innerText = `${amount - 1}`
-    }
-}
-
-function url() {
-    return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
-}
-
-function start(event = undefined) {
-    if ((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
-        document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=7&clearAfter=30';
-        document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
-        document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId');
-        document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
-        document.getElementById('roll').hidden = false;
-        document.getElementById('start-container').hidden = true;
-        document.getElementById('options-container').hidden = false;
-        document.getElementById('dice-tower').hidden = false;
-        document.getElementById('name').hidden = true;
-        document.getElementById('room').hidden = true;
-        document.getElementById('how-to').hidden = true;
-        document.getElementById('chatOverlay').hidden = true;
-        document.getElementById('results').hidden = false;
-        document.getElementById('all-results').hidden = !document.getElementById('gm').checked;
-        document.getElementById('all-results-urls').style.display = document.getElementById('gm').checked ? 'fles' : 'none';
-        document.getElementById('nameH').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
-        document.getElementById('save-dice-hint-name').innerHTML = '<strong>' + document.getElementById('name').value + '</strong>';
-        document.getElementById('roomLabel').hidden = true;
-        document.getElementById('nameLabel').hidden = true;
-        document.getElementById('nameH').hidden = false;
-        document.getElementById('room-hint').innerHTML = '<p>Room: <strong style="font-size:medium;">' + document.getElementById('room').value + '</strong></p>';
-        document.getElementById('overlayLabel').innerHTML = 'Dice-Overlay for <strong>' + document.getElementById('name').value + '</strong>';
-        document.title = document.getElementById('name').value + ' - Dice-Tower';
-
-        localStorage.setItem('last-name', document.getElementById('name').value)
-        localStorage.setItem('last-room', document.getElementById('room').value)
-        localStorage.setItem('last-gm', document.getElementById('gm').checked)
-
-        if (localStorage.getItem(document.getElementById('name').value + "-theme")) {
-            document.getElementById('theme').value = localStorage.getItem(document.getElementById('name').value + "-theme")
-        }
-        if (localStorage.getItem(document.getElementById('name').value + "-themeColor")) {
-            document.getElementById('themeColor').setColor(localStorage.getItem(document.getElementById('name').value + "-themeColor"));
-        }
-
-        if (!localStorage.getItem(document.getElementById('name').value + '-started')) {
-            document.getElementById('urls-overlay').showPopover();
-        }
-
-        localStorage.setItem(document.getElementById('name').value + '-started', "true")
-
-        let httpRequest = new XMLHttpRequest();
-        httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + '/register')
-        httpRequest.setRequestHeader('Content-Type', 'application/json')
-        httpRequest.send(JSON.stringify({
-            name: document.getElementById('name').value,
-            overlay: document.getElementById('overlayId').value,
-            id: document.getElementById('room').value + ':' + localStorage.getItem('userId')
-        }))
-        if (document.getElementById('gm').checked) {
-            document.getElementById('resultSwitch').checked = true;
-            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
-            const evtSource = new EventSource(url() + '/dice/' + document.getElementById('room').value + '/users');
-            evtSource.addEventListener('message', function (event) {
-                let data = JSON.parse(event.data);
-                if (data.id !== document.getElementById('room').value + ':' + localStorage.getItem('userId')) {
-                    let overlays = document.getElementById('overlay-urls');
-                    let newOverlay = document.getElementById(data.id) ?? document.createElement('div');
-                    newOverlay.replaceChildren(...[]);
-                    newOverlay.id = data.id;
-                    newOverlay.style.display = "flex";
-                    newOverlay.style.flexDirection = "row";
-                    newOverlay.style.justifyContent = "space-between";
-                    newOverlay.style.alignItems = "baseline";
-                    let newLabel = document.createElement('label');
-                    newLabel.for = data.id + 'url';
-                    newLabel.innerHTML = "Dice-Overlay for <strong>" + data.name + "</strong>";
-                    let newInput = document.getElementById('overlayId').cloneNode();
-                    newInput.type = "text";
-                    newInput.readOnly = true;
-                    newInput.id = data.id + 'url';
-                    newInput.style.flexGrow = '1';
-                    newInput.value = data.overlay;
-                    newInput.onclick = () => copyToClipboard(newInput.id)
-                    newOverlay.appendChild(newLabel);
-                    newOverlay.appendChild(newInput);
-                    overlays.appendChild(newOverlay);
-                }
-                configurePopover();
-            });
-        }
-    }
-}
-
-function rollEasy(dice) {
-    document.getElementById('command').value = document.getElementById('dice-amount').innerText + dice;
-    roll();
-}
-
-function roll(event) {
-    if ((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
-        let httpRequest = new XMLHttpRequest();
-        httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + ':' + localStorage.getItem(`userId`))
-        httpRequest.setRequestHeader('Content-Type', 'application/json')
-        httpRequest.send(JSON.stringify({
-            name: document.getElementById('name').value,
-            command: document.getElementById('command').value,
-            themeColor: document.getElementById('themeColor').value,
-            theme: document.getElementById('theme').value
-        }))
-    }
-}
-
-function saveDice() {
-    localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
-    localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
-}
-
-function configurePopover() {
-
-    const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");
-    popover.forEach((e) => {
-
-        const target = document.querySelector("#" + e.getAttribute("popovertarget"));
-        e.addEventListener("mouseover", () => {
-            showSnackbar(target.innerHTML);
-        });
-        e.addEventListener("mouseout", () => {
-            hideSnackbar();
-        });
-
-    });
-}
-
-function copyToClipboard(id) {
-    let copyText = document.getElementById(id);
-    copyText.select();
-    copyText.setSelectionRange(0, 99999);
-    navigator.clipboard.writeText(copyText.value).then(() => {
-        showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
-    })
-}
-
-function showSnackbar(message) {
-    let snackbar = document.getElementById("snackbar");
-    let snackbarContainer = document.getElementById("snackbar-container");
-    snackbar.innerHTML = message;
-    snackbar.className = "show";
-    snackbarContainer.className = "show";
-}
-
-function hideSnackbar() {
-    let snackbar = document.getElementById("snackbar");
-    let snackbarContainer = document.getElementById("snackbar-container");
-    snackbar.className = snackbar.className.replace("show", "");
-    snackbarContainer.className = snackbarContainer.className.replace("show", "");
-}
-
-document.addEventListener("DOMContentLoaded", async () => {
-    if (localStorage.getItem('last-name') && localStorage.getItem('last-room')) {
-        document.getElementById('name').value = localStorage.getItem('last-name');
-        document.getElementById('room').value = localStorage.getItem('last-room');
-        document.getElementById('gm').checked = localStorage.getItem('last-gm') === 'true';
-    }
-
-    document.getElementById('resultSwitch').addEventListener('change', function () {
-        if (!this.checked) {
-            document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
-        } else {
-            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
-        }
-    })
-
-    document.getElementById('chatOverlayLink').href = url() + '/chatoverlay'
-
-    document.addEventListener("DOMContentLoaded", async () => {
-        if (!localStorage.getItem("userId")) {
-            localStorage.setItem("userId", self.crypto.randomUUID());
-        }
-    })
-
-    configurePopover();
-})
-

src/main/resources/META-INF/resources/dice-preview.js

@@ -1,15 +0,0 @@
-import DiceBox from "/vendor/dice-box/dice-box.es.js";
-
-document.addEventListener("DOMContentLoaded", async () => {
-    document.getElementById('preview').onclick = async () => {
-        document.getElementById('dice-box').replaceChildren(...[])
-        const diceBox = new DiceBox("#dice-box", {
-            assetPath: "/vendor/assets/",
-            theme: document.getElementById('theme').value,
-            themeColor: document.getElementById('themeColor').value,
-            scale: 14
-        });
-        await diceBox.init()
-        diceBox.roll(['1d2', '1d4', '1d6', '1d8', '1d10', '1d12', '1d20', '1d100']);
-    }
-})

src/main/resources/META-INF/resources/overlay/style.css

@@ -1,36 +0,0 @@
-html,
-body {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    perspective: 1000px;
-}
-
-#dice-box {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    background-size: cover;
-}
-
-#dice-box canvas {
-    width: 100%;
-    height: 100%;
-}
-
-.tooltip {
-    position: fixed;
-    border-radius: 0.5rem;
-    padding: 15px;
-    max-width: 80%;
-    font-size: 400%;
-    color: #fff; !important;
-    background-color: #333333dd; !important
-}

src/main/resources/META-INF/resources/style.css

@@ -1,209 +0,0 @@
-.w3-theme-l6 {
-    color: #000 !important;
-    background-color: #999999 !important;
-    border-radius: 10px;
-}
-
-.w3-theme-l4 {
-    color: #fff !important;
-    background-color: #666666 !important;
-    border-radius: 10px;
-}
-
-.w3-theme-l1 {
-    color: #fff !important;
-    background-color: #333333 !important;
-    border-radius: 10px;
-}
-
-button {
-    padding: 10px;
-    border: #333333 3px solid;
-    border-radius: 10px;
-    background: #333333;
-    color: #fff
-}
-
-button:hover {
-    background: #444444;
-}
-
-button:active {
-    background: #222222;
-}
-
-input {
-    margin: 10px;
-}
-
-/* The switch - the box around the slider */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 25px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* The slider */
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-input:checked + .slider {
-    background-color: #333333;
-}
-
-input:focus + .slider {
-    box-shadow: 0 0 1px #333333;
-}
-
-input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-}
-
-.tooltip {
-    position: fixed;
-    border-radius: 0.5rem;
-    padding: 15px;
-    color: #fff !important;
-    background-color: #333333dd !important
-}
-
-#dice-box {
-    position: relative;
-    justify-self: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    background-size: cover;
-}
-
-#dice-box canvas {
-    width: 100%;
-    height: 100%;
-}
-
-.checkbox {
-    position: relative;
-    padding-left: 50px;
-    margin-bottom: 12px;
-    margin-left: 10px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-.checkmark {
-    margin-left: 25px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 15px;
-    width: 15px;
-    background-color: #eee;
-}
-
-.checkbox:hover input ~ .checkmark {
-    background-color: #ccc;
-}
-
-/* When the checkbox is checked, add a blue background */
-.checkbox input:checked ~ .checkmark {
-    background-color: #333333;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-
-/* Show the checkmark when checked */
-.checkbox input:checked ~ .checkmark:after {
-    display: block;
-}
-
-/* Style the checkmark/indicator */
-.checkbox .checkmark:after {
-    left: 5px;
-    top: 2px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-#snackbar-container {
-    visibility: hidden;
-    position: fixed;
-    width: 100%;
-    z-index: 1;
-    bottom: 10%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-#snackbar {
-    visibility: hidden;
-    text-align: center;
-    border-radius: 0.5rem;
-    padding: 15px;
-    color: #fff !important;
-    border: #fff 5px solid;
-    background-color: #333333dd !important
-}
-
-#snackbar-container.show {
-    visibility: visible;
-}
-
-#snackbar.show {
-    visibility: visible;
-    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-    animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}

src/main/resources/META-INF/resources/vendor/color-picker.js

@@ -47,7 +47,7 @@ class ColorPicker extends HTMLElement {
         this.shadowRoot.innerHTML = `
 			<style>
 				#color-preview {
-					border-radius: 10px;
+					border-radius: inherit;
 					margin: inherit;
 					font-family: inherit;
 					height: inherit;

src/main/resources/META-INF/resources/vendor/font-awesome/LICENSE.txt

@@ -1,165 +0,0 @@
-Fonticons, Inc. (https://fontawesome.com)
-
---------------------------------------------------------------------------------
-
-Font Awesome Free License
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
---------------------------------------------------------------------------------
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-
-The Font Awesome Free download is licensed under a Creative Commons
-Attribution 4.0 International License and applies to all icons packaged
-as SVG and JS file types.
-
---------------------------------------------------------------------------------
-
-# Fonts: SIL OFL 1.1 License
-
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
-with Reserved Font Name: "Font Awesome".
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-SIL OPEN FONT LICENSE
-Version 1.1 - 26 February 2007
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting — in part or in whole — any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-Copyright 2024 Fonticons, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Attribution
-
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
---------------------------------------------------------------------------------
-
-# Brand Icons
-
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**

src/main/resources/META-INF/resources/vendor/font-awesome/css/regular.css

@@ -1,19 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:root, :host {
-  --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
-
-.far,
-.fa-regular {
-  font-weight: 400; }

src/main/resources/META-INF/resources/vendor/font-awesome/css/regular.min.css

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

src/main/resources/META-INF/resources/vendor/font-awesome/css/solid.css

@@ -1,19 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:root, :host {
-  --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-.fas,
-.fa-solid {
-  font-weight: 900; }

src/main/resources/META-INF/resources/vendor/font-awesome/css/solid.min.css

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

src/main/resources/META-INF/resources/vendor/font-awesome/css/svg-with-js.css

@@ -1,461 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-:root, :host {
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
-  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
-  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro';
-  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro';
-  --fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
-  --fa-font-duotone-regular: normal 400 1em/1 'Font Awesome 6 Duotone';
-  --fa-font-duotone-light: normal 300 1em/1 'Font Awesome 6 Duotone';
-  --fa-font-duotone-thin: normal 100 1em/1 'Font Awesome 6 Duotone';
-  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
-  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
-  --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
-  --fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
-  --fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
-  --fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 6 Sharp Duotone';
-  --fa-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 6 Sharp Duotone';
-  --fa-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 6 Sharp Duotone';
-  --fa-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 6 Sharp Duotone'; }
-
-svg.svg-inline--fa:not(:root), svg.svg-inline--fa:not(:host) {
-  overflow: visible;
-  box-sizing: content-box; }
-
-.svg-inline--fa {
-  display: var(--fa-display, inline-block);
-  height: 1em;
-  overflow: visible;
-  vertical-align: -.125em; }
-  .svg-inline--fa.fa-2xs {
-    vertical-align: 0.1em; }
-  .svg-inline--fa.fa-xs {
-    vertical-align: 0em; }
-  .svg-inline--fa.fa-sm {
-    vertical-align: -0.07143em; }
-  .svg-inline--fa.fa-lg {
-    vertical-align: -0.2em; }
-  .svg-inline--fa.fa-xl {
-    vertical-align: -0.25em; }
-  .svg-inline--fa.fa-2xl {
-    vertical-align: -0.3125em; }
-  .svg-inline--fa.fa-pull-left {
-    margin-right: var(--fa-pull-margin, 0.3em);
-    width: auto; }
-  .svg-inline--fa.fa-pull-right {
-    margin-left: var(--fa-pull-margin, 0.3em);
-    width: auto; }
-  .svg-inline--fa.fa-li {
-    width: var(--fa-li-width, 2em);
-    top: 0.25em; }
-  .svg-inline--fa.fa-fw {
-    width: var(--fa-fw-width, 1.25em); }
-
-.fa-layers svg.svg-inline--fa {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0; }
-
-.fa-layers-counter, .fa-layers-text {
-  display: inline-block;
-  position: absolute;
-  text-align: center; }
-
-.fa-layers {
-  display: inline-block;
-  height: 1em;
-  position: relative;
-  text-align: center;
-  vertical-align: -.125em;
-  width: 1em; }
-  .fa-layers svg.svg-inline--fa {
-    transform-origin: center center; }
-
-.fa-layers-text {
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: center center; }
-
-.fa-layers-counter {
-  background-color: var(--fa-counter-background-color, #ff253a);
-  border-radius: var(--fa-counter-border-radius, 1em);
-  box-sizing: border-box;
-  color: var(--fa-inverse, #fff);
-  line-height: var(--fa-counter-line-height, 1);
-  max-width: var(--fa-counter-max-width, 5em);
-  min-width: var(--fa-counter-min-width, 1.5em);
-  overflow: hidden;
-  padding: var(--fa-counter-padding, 0.25em 0.5em);
-  right: var(--fa-right, 0);
-  text-overflow: ellipsis;
-  top: var(--fa-top, 0);
-  transform: scale(var(--fa-counter-scale, 0.25));
-  transform-origin: top right; }
-
-.fa-layers-bottom-right {
-  bottom: var(--fa-bottom, 0);
-  right: var(--fa-right, 0);
-  top: auto;
-  transform: scale(var(--fa-layers-scale, 0.25));
-  transform-origin: bottom right; }
-
-.fa-layers-bottom-left {
-  bottom: var(--fa-bottom, 0);
-  left: var(--fa-left, 0);
-  right: auto;
-  top: auto;
-  transform: scale(var(--fa-layers-scale, 0.25));
-  transform-origin: bottom left; }
-
-.fa-layers-top-right {
-  top: var(--fa-top, 0);
-  right: var(--fa-right, 0);
-  transform: scale(var(--fa-layers-scale, 0.25));
-  transform-origin: top right; }
-
-.fa-layers-top-left {
-  left: var(--fa-left, 0);
-  right: auto;
-  top: var(--fa-top, 0);
-  transform: scale(var(--fa-layers-scale, 0.25));
-  transform-origin: top left; }
-
-.fa-1x {
-  font-size: 1em; }
-
-.fa-2x {
-  font-size: 2em; }
-
-.fa-3x {
-  font-size: 3em; }
-
-.fa-4x {
-  font-size: 4em; }
-
-.fa-5x {
-  font-size: 5em; }
-
-.fa-6x {
-  font-size: 6em; }
-
-.fa-7x {
-  font-size: 7em; }
-
-.fa-8x {
-  font-size: 8em; }
-
-.fa-9x {
-  font-size: 9em; }
-
-.fa-10x {
-  font-size: 10em; }
-
-.fa-2xs {
-  font-size: 0.625em;
-  line-height: 0.1em;
-  vertical-align: 0.225em; }
-
-.fa-xs {
-  font-size: 0.75em;
-  line-height: 0.08333em;
-  vertical-align: 0.125em; }
-
-.fa-sm {
-  font-size: 0.875em;
-  line-height: 0.07143em;
-  vertical-align: 0.05357em; }
-
-.fa-lg {
-  font-size: 1.25em;
-  line-height: 0.05em;
-  vertical-align: -0.075em; }
-
-.fa-xl {
-  font-size: 1.5em;
-  line-height: 0.04167em;
-  vertical-align: -0.125em; }
-
-.fa-2xl {
-  font-size: 2em;
-  line-height: 0.03125em;
-  vertical-align: -0.1875em; }
-
-.fa-fw {
-  text-align: center;
-  width: 1.25em; }
-
-.fa-ul {
-  list-style-type: none;
-  margin-left: var(--fa-li-margin, 2.5em);
-  padding-left: 0; }
-  .fa-ul > li {
-    position: relative; }
-
-.fa-li {
-  left: calc(-1 * var(--fa-li-width, 2em));
-  position: absolute;
-  text-align: center;
-  width: var(--fa-li-width, 2em);
-  line-height: inherit; }
-
-.fa-border {
-  border-color: var(--fa-border-color, #eee);
-  border-radius: var(--fa-border-radius, 0.1em);
-  border-style: var(--fa-border-style, solid);
-  border-width: var(--fa-border-width, 0.08em);
-  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
-
-.fa-pull-left {
-  float: left;
-  margin-right: var(--fa-pull-margin, 0.3em); }
-
-.fa-pull-right {
-  float: right;
-  margin-left: var(--fa-pull-margin, 0.3em); }
-
-.fa-beat {
-  animation-name: fa-beat;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, ease-in-out); }
-
-.fa-bounce {
-  animation-name: fa-bounce;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
-
-.fa-fade {
-  animation-name: fa-fade;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
-
-.fa-beat-fade {
-  animation-name: fa-beat-fade;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
-
-.fa-flip {
-  animation-name: fa-flip;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, ease-in-out); }
-
-.fa-shake {
-  animation-name: fa-shake;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, linear); }
-
-.fa-spin {
-  animation-name: fa-spin;
-  animation-delay: var(--fa-animation-delay, 0s);
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 2s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, linear); }
-
-.fa-spin-reverse {
-  --fa-animation-direction: reverse; }
-
-.fa-pulse,
-.fa-spin-pulse {
-  animation-name: fa-spin;
-  animation-direction: var(--fa-animation-direction, normal);
-  animation-duration: var(--fa-animation-duration, 1s);
-  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-  animation-timing-function: var(--fa-animation-timing, steps(8)); }
-
-@media (prefers-reduced-motion: reduce) {
-  .fa-beat,
-  .fa-bounce,
-  .fa-fade,
-  .fa-beat-fade,
-  .fa-flip,
-  .fa-pulse,
-  .fa-shake,
-  .fa-spin,
-  .fa-spin-pulse {
-    animation-delay: -1ms;
-    animation-duration: 1ms;
-    animation-iteration-count: 1;
-    transition-delay: 0s;
-    transition-duration: 0s; } }
-
-@keyframes fa-beat {
-  0%, 90% {
-    transform: scale(1); }
-  45% {
-    transform: scale(var(--fa-beat-scale, 1.25)); } }
-
-@keyframes fa-bounce {
-  0% {
-    transform: scale(1, 1) translateY(0); }
-  10% {
-    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
-  30% {
-    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
-  50% {
-    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
-  57% {
-    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
-  64% {
-    transform: scale(1, 1) translateY(0); }
-  100% {
-    transform: scale(1, 1) translateY(0); } }
-
-@keyframes fa-fade {
-  50% {
-    opacity: var(--fa-fade-opacity, 0.4); } }
-
-@keyframes fa-beat-fade {
-  0%, 100% {
-    opacity: var(--fa-beat-fade-opacity, 0.4);
-    transform: scale(1); }
-  50% {
-    opacity: 1;
-    transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
-
-@keyframes fa-flip {
-  50% {
-    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
-
-@keyframes fa-shake {
-  0% {
-    transform: rotate(-15deg); }
-  4% {
-    transform: rotate(15deg); }
-  8%, 24% {
-    transform: rotate(-18deg); }
-  12%, 28% {
-    transform: rotate(18deg); }
-  16% {
-    transform: rotate(-22deg); }
-  20% {
-    transform: rotate(22deg); }
-  32% {
-    transform: rotate(-12deg); }
-  36% {
-    transform: rotate(12deg); }
-  40%, 100% {
-    transform: rotate(0deg); } }
-
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg); } }
-
-.fa-rotate-90 {
-  transform: rotate(90deg); }
-
-.fa-rotate-180 {
-  transform: rotate(180deg); }
-
-.fa-rotate-270 {
-  transform: rotate(270deg); }
-
-.fa-flip-horizontal {
-  transform: scale(-1, 1); }
-
-.fa-flip-vertical {
-  transform: scale(1, -1); }
-
-.fa-flip-both,
-.fa-flip-horizontal.fa-flip-vertical {
-  transform: scale(-1, -1); }
-
-.fa-rotate-by {
-  transform: rotate(var(--fa-rotate-angle, 0)); }
-
-.fa-stack {
-  display: inline-block;
-  vertical-align: middle;
-  height: 2em;
-  position: relative;
-  width: 2.5em; }
-
-.fa-stack-1x,
-.fa-stack-2x {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: var(--fa-stack-z-index, auto); }
-
-.svg-inline--fa.fa-stack-1x {
-  height: 1em;
-  width: 1.25em; }
-
-.svg-inline--fa.fa-stack-2x {
-  height: 2em;
-  width: 2.5em; }
-
-.fa-inverse {
-  color: var(--fa-inverse, #fff); }
-
-.sr-only,
-.fa-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0; }
-
-.sr-only-focusable:not(:focus),
-.fa-sr-only-focusable:not(:focus) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0; }
-
-.svg-inline--fa .fa-primary {
-  fill: var(--fa-primary-color, currentColor);
-  opacity: var(--fa-primary-opacity, 1); }
-
-.svg-inline--fa .fa-secondary {
-  fill: var(--fa-secondary-color, currentColor);
-  opacity: var(--fa-secondary-opacity, 0.4); }
-
-.svg-inline--fa.fa-swap-opacity .fa-primary {
-  opacity: var(--fa-secondary-opacity, 0.4); }
-
-.svg-inline--fa.fa-swap-opacity .fa-secondary {
-  opacity: var(--fa-primary-opacity, 1); }
-
-.svg-inline--fa mask .fa-primary,
-.svg-inline--fa mask .fa-secondary {
-  fill: black; }

src/main/resources/META-INF/resources/vendor/font-awesome/css/v4-font-face.css

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@font-face {
-  font-family: 'FontAwesome';
-  font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'FontAwesome';
-  font-display: block;
-  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'FontAwesome';
-  font-display: block;
-  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
-  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
-
-@font-face {
-  font-family: 'FontAwesome';
-  font-display: block;
-  src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
-  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }

src/main/resources/META-INF/resources/vendor/font-awesome/css/v4-font-face.min.css

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}

src/main/resources/META-INF/resources/vendor/font-awesome/css/v5-font-face.css

@@ -1,22 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-display: block;
-  font-weight: 400;
-  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-display: block;
-  font-weight: 900;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-display: block;
-  font-weight: 400;
-  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }

src/main/resources/META-INF/resources/vendor/font-awesome/css/v5-font-face.min.css

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}

src/main/resources/META-INF/resources/vendor/w3css/4/w3.css

@@ -1,235 +0,0 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
-html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
-/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
-html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
-article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
-audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
-audio:not([controls]){display:none;height:0}[hidden],template{display:none}
-a{background-color:transparent}a:active,a:hover{outline-width:0}
-abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
-b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
-small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
-sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
-code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
-button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
-button,input{overflow:visible}button,select{text-transform:none}
-button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
-button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
-button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
-fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
-legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
-[type=checkbox],[type=radio]{padding:0}
-[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
-[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
-[type=search]::-webkit-search-decoration{-webkit-appearance:none}
-::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
-/* End extract */
-html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
-h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
-.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
-h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
-hr{border:0;border-top:1px solid #eee;margin:20px 0}
-.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
-.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
-.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
-.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
-.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
-.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
-.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
-.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
-.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
-.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
-.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
-.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
-.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
-.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
-.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
-.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
-.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
-.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
-.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
-.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
-.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
-.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
-.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
-.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
-.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
-.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
-.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
-.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
-.w3-main,#main{transition:margin-left .4s}
-.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
-.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
-.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
-.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
-.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
-.w3-bar .w3-button{white-space:normal}
-.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
-.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
-.w3-responsive{display:block;overflow-x:auto}
-.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
-.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
-.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
-.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
-.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
-.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
-@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
-.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
-.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
-@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
-.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
-.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
-.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
-.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
-.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
-.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
-.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
-@media (max-width:1205px){.w3-auto{max-width:95%}}
-@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
-.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
-.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
-.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
-@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
-@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
-@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
-@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
-.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
-.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
-.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
-.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
-.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
-.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
-.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
-.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
-.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
-.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
-.w3-display-position{position:absolute}
-.w3-circle{border-radius:50%}
-.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
-.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
-.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
-.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
-.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
-.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
-.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
-.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
-.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
-.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
-.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
-.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
-.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
-.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
-.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
-.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
-.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
-.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
-.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
-.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
-.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
-.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
-.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
-.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
-.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
-.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
-.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
-.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
-.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
-.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
-.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
-.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
-.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
-.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
-.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
-.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
-.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
-.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
-.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
-.w3-left{float:left!important}.w3-right{float:right!important}
-.w3-button:hover{color:#000!important;background-color:#ccc!important}
-.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
-.w3-hover-none:hover{box-shadow:none!important}
-/* Colors */
-.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
-.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
-.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
-.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
-.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
-.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
-.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
-.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
-.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
-.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
-.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
-.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
-.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
-.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
-.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
-.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
-.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
-.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
-.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
-.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
-.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
-.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
-.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
-.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
-.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
-.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
-.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
-.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
-.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
-.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
-.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
-.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
-.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
-.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
-.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
-.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
-.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
-.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
-.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
-.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
-.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
-.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
-.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
-.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
-.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
-.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
-.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
-.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
-.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
-.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
-.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
-.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
-.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
-.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
-.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
-.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
-.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
-.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
-.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
-.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
-.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
-.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
-.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
-.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
-.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
-.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
-.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
-.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
-.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
-.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
-.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
-.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
-.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
-.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
-.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
-.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
-.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
-.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
-.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
-.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
-.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
-.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
-.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

src/main/resources/templates/chatoverlay.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Dice-Tower - Overlay</title>
-    <link rel="icon" type="image/png" href="/favicon.png">
-    <link rel="stylesheet" href="/overlay/style.css">
-    <script src="/vendor/comfy.js/comfy.min.js"></script>
-</head>
-<body>
-<div id="dice-box"></div>
-<div popover id="results" class="tooltip">
-</div>
-<script type="module">
-    import DiceBox from "/vendor/dice-box/dice-box.es.js";
-
-    const diceBox = new DiceBox("#dice-box", {
-        assetPath: "/vendor/assets/",
-        theme: '{theme}',
-        themeColor: '{themeColor}',
-        scale: {scale}
-    });
-    diceBox.init()
-    ComfyJS.Init('{channel}');
-
-    //maxDice
-
-    ComfyJS.onCommand = async (user, command, message, flags) => {
-        if ((
-                flags.broadcaster || ({modsAllowed} && flags.mod) || ({vipAllowed} && flags.vip) || ({subsAllowed} && flags.subscriber
-                )) && '{cmd}' === command && !shouldWait() && message.match(/^\d+d(4|6|8|10|12|20|100)$/) && (+message.split('d')[0] <= {maxDice})
-        ) {
-            toggleWait(true);
-
-            diceBox.onRollComplete = (rollResult) => {
-                rollResult.forEach(result => {
-                    let values = []
-                    result.rolls.forEach(roll => {
-                        values.push(roll.value);
-                    })
-                    document.getElementById('results').innerHTML = '<strong>' + user + '</strong> rolls <strong>' + message + '</strong>:<br/> [' + values.map(value => value === 1 ? '<strong style="text-shadow: 2px 2px 10px red">' + value + '</strong>' : value === result.sides ? '<strong style="text-shadow: 2px 2px 10px green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong>' + result.value + '</strong> '
-                })
-                document.getElementById('results').showPopover()
-                setTimeout(() => {
-                    diceBox.clear();
-                    document.getElementById('results').hidePopover()
-                }, {clearAfter} * 1000)
-            }
-
-            diceBox.roll(message);
-            setTimeout(() => {
-                toggleWait(false);
-            }, {clearAfter} * 1000 + {timeout} * 1000)
-        } else {
-            console.log('Not a valid command or not ready yet');
-        }
-    };
-
-    let wait;
-
-    function shouldWait() {
-        return wait;
-    }
-
-    function toggleWait(value) {
-        wait = value;
-    }
-</script>
-</body>
-</html>

src/main/resources/templates/chatoverlayconfig.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Dice-Tower - Chatoverlay</title>
-    <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">
-    <link rel="stylesheet" href="/style.css">
-    <link rel="icon" type="image/png" href="/favicon.png">
-    <script src="/vendor/color-picker.js"></script>
-</head>
-<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"><i class="fa-solid fa-dice-d20"></i> Dice-Tower - Chatoverlay <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;">
-        <p>Allows Chat to roll a given amount of one dice</p>
-        <p>Example: "!roll 5d20"</p>
-    </div>
-    <div class="w3-panel w3-theme-l4 w3-card w3-display-container"
-         style="padding: 25px; text-align: center; margin-bottom: auto;">
-        <label for="theme">Theme </label>
-        <select name="theme" id="theme" style="margin: 25px">
-            <option value="default">Default</option>
-            <option value="blueGreenMetal">Blue-Green Metal</option>
-            <option value="diceOfRolling">Dice of Rolling</option>
-            <option value="gemstone">Gemstone</option>
-            <option value="gemstoneMarble">Marble Gemstone</option>
-            <option value="rock">Rock</option>
-            <option value="rust">Rust</option>
-            <option value="smooth">Smooth</option>
-            <option value="wooden">Wooden</option>
-        </select>
-        <color-picker id="themeColor"></color-picker>
-        <div>
-            <label for="channel">Channel </label>
-            <input type="text" id="channel" style="width: 400px; margin-top: 20px" value="arindy"/>
-            <label for="cmd">Command !</label>
-            <input type="text" id="cmd" style="width: 100px; margin-top: 20px; margin-left: 0" value="roll"/>
-        </div>
-        <div>
-            <label class="checkbox" id="modsAllowed-container">Allow mods to roll
-                <input type="checkbox" id="modsAllowed">
-                <span class="checkmark"></span>
-            </label>
-            <label class="checkbox" id="vipAllowed-container">Allow VIPs to roll
-                <input type="checkbox" id="vipAllowed">
-                <span class="checkmark"></span>
-            </label>
-            <label class="checkbox" id="subsAllowed-container">Allow subs to roll
-                <input type="checkbox" id="subsAllowed">
-                <span class="checkmark"></span>
-            </label>
-        </div>
-        <div>
-            <label for="scale">Dice-Scale </label>
-            <input type="number" id="scale" style="width: 50px; margin-top: 20px" value="9"/>
-            <label for="maxDice">Max number of dice </label>
-            <input type="number" id="maxDice" style="width: 50px; margin-top: 20px" value="20"/>
-        </div>
-        <div>
-            <label for="clearAfter">Clear dice after (in seconds)</label>
-            <input type="number" id="clearAfter" style="width: 50px; margin-top: 20px" value="10"/>
-            <label for="timeout">Command-timeout (in seconds)</label>
-            <input type="number" id="timeout" style="width: 50px; margin-top: 20px" value="60"/>
-        </div>
-        <div id="dice-box" style="height: 400px"></div>
-        <button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
-        <button style="margin: 10px" id="generate">Generate overlay-link <i class="fa-solid fa-link"></i></button>
-        <div>
-            <input type="text" readonly id="link" style="width: 80%; margin-top: 20px"
-                   onclick="copyToClipboard(this.id)"/>
-        </div>
-    </div>
-</div>
-<div id="snackbar-container">
-    <div id="snackbar">.. they see them rolling</div>
-</div>
-<script>
-    function copyToClipboard(id) {
-        let copyText = document.getElementById(id)
-        if (copyText.value.length > 0) {
-            copyText.select();
-            copyText.setSelectionRange(0, 99999);
-            navigator.clipboard.writeText(copyText.value).then(() => {
-                showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
-            })
-        }
-    }
-
-    function showSnackbar(message) {
-        let snackbar = document.getElementById("snackbar");
-        let snackbarContainer = document.getElementById("snackbar-container");
-        snackbar.innerHTML = message;
-        snackbar.className = "show";
-        snackbarContainer.className = "show";
-        setTimeout(() => {
-            snackbar.className = "";
-            snackbarContainer.className = "";
-        }, 3000)
-    }
-</script>
-<script type="module">
-    import DiceBox from "/vendor/dice-box/dice-box.es.js";
-
-    function url() {
-        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
-    }
-
-    document.addEventListener("DOMContentLoaded", async () => {
-        document.getElementById('preview').onclick = async () => {
-            document.getElementById('dice-box').replaceChildren(...[])
-            const diceBox = new DiceBox("#dice-box", {
-                assetPath: "/vendor/assets/",
-                theme: document.getElementById('theme').value,
-                themeColor: document.getElementById('themeColor').value,
-                scale: +document.getElementById('scale').value
-            });
-            await diceBox.init()
-            diceBox.roll(['1d2', '1d4', '1d6', '1d8', '1d10', '1d12', '1d20', '1d100']);
-        }
-        document.getElementById('generate').onclick = async () => {
-            document.getElementById('link').value = url() +
-                    "/chatoverlay/" + document.getElementById('channel').value +
-                    "?cmd=" + document.getElementById('cmd').value +
-                    "&theme=" + document.getElementById('theme').value +
-                    "&themeColor=" + encodeURIComponent(document.getElementById('themeColor').value) +
-                    "&scale=" + document.getElementById('scale').value +
-                    "&maxDice=" + document.getElementById('maxDice').value +
-                    "&clearAfter=" + document.getElementById('clearAfter').value +
-                    "&timeout=" + document.getElementById('timeout').value +
-                    "&modsAllowed=" + document.getElementById('modsAllowed').checked +
-                    "&vipAllowed=" + document.getElementById('vipAllowed').checked +
-                    "&subsAllowed=" + document.getElementById('subsAllowed').checked
-        }
-    })
-</script>
-</body>
-</html>

src/main/resources/templates/index.html

@@ -1,208 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Dice-Tower</title>
-    <meta name="version" content="{version}">
-
-    <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">
-    <link rel="stylesheet" href="/style.css">
-    <link rel="icon" type="image/png" href="/favicon.png">
-    <script src="/vendor/color-picker.js"></script>
-    <script type="module" src="/dice-preview.js"></script>
-    <script type="text/javascript" src="/app.js"></script>
-
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Dice-Tower">
-    <meta name="twitter:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
-    <meta name="description" content="Easy to use online dice rolling with customizable overlays.">
-    <meta name="twitter:description" content="Easy to use online dice rolling with customizable overlays.">
-    <meta property="og:url" content="{http:request.absoluteURI}">
-    <meta property="og:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
-    <meta property="og:description" content="Easy to use online dice rolling with customizable overlays.">
-    <meta property="og:title" content="Dice-Tower">
-    <meta property="og:site_name" content="Dice-Tower">
-    <meta property="og:type" content="website">
-    <meta property="twitter:url" content="{http:request.absoluteURI}">
-    <meta property="twitter:domain" content="{http:request.authority}">
-</head>
-<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"><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;">
-        <h2 id="nameH" popovertarget="room-hint" data-trigger="hover" style="margin: 0" hidden>Name</h2>
-        <div>
-            <label for="name" id="nameLabel">Name </label>
-            <input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/>
-        </div>
-        <div>
-            <label for="room" id="roomLabel">Room </label>
-            <input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/>
-        </div>
-        <div id="start-container">
-            <div>
-                <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">
-                    <span class="checkmark"></span>
-                </label>
-            </div>
-        </div>
-        <div id="options-container" hidden style="position: absolute; right: 25px; top: 5px">
-            <button id="customize" popovertarget="customize-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-palette"></i>
-            </button>
-            <button id="urls" popovertarget="urls-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-link"></i></button>
-        </div>
-    </div>
-    <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container"
-         style="padding: 25px; margin-bottom: auto">
-
-        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px; padding-right: 25px; padding-left: 25px">
-            <label style="font-size: large; font-weight: bold; margin: 10px">Roll </label>
-            <button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
-                    onclick="removeDice()">-
-            </button>
-            <label style="font-size: large; font-weight: bold" id="dice-amount">1</label>
-            <button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
-                    onclick="addDice()">+
-            </button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d8')">D8</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d10')">D10</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d12')">D12</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d20')">D20</button>
-            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d100')">D100</button>
-        </div>
-        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px 0;">
-            <label for="command">Command </label>
-            <input popovertarget="command-hint" data-trigger="hover" type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
-            <button hidden id="roll" onclick="roll()">Roll <i class="fa-solid fa-dice"></i></button>
-            <div style="margin: 20px 25px" id="all-results">
-                <label for="resultSwitch">Show all results </label>
-                <label class="switch">
-                    <input type="checkbox" id="resultSwitch">
-                    <span class="slider"></span>
-                </label>
-            </div>
-        </div>
-
-
-    </div>
-    <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container"
-         style="padding: 25px; flex-grow: 1; margin-bottom: auto">
-        <iframe id="resultFrame" title="results" style="width: 100%; height: 100%; overflow: hidden; border: 0"
-                onload="this.height=this.contentWindow.document.body.scrollHeight;"></iframe>
-    </div>
-
-    <div popover id="urls-overlay" class="tooltip" style="width: 600px">
-        <div id="overlay-urls">
-            <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="overlayId" id="overlayLabel">Dice-Overlay </label>
-                <input popovertarget="overlay-hint" data-trigger="hover" type="text" readonly id="overlayId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
-            </div>
-        </div>
-        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;"
-             hidden id="all-results-urls">
-            <label for="resultsId">All-Results-Overlay </label>
-            <input popovertarget="all-results-hint" data-trigger="hover"  type="text" readonly id="resultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
-        </div>
-        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-            <label for="myResultsId">My-Results-Overlay </label>
-            <input popovertarget="my-results-hint" data-trigger="hover" type="text" readonly id="myResultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
-        </div>
-    </div>
-    <div popover id="customize-overlay" class="tooltip" style="width: 680px;">
-        <label for="theme">Theme </label>
-        <select name="theme" id="theme" style="margin: 25px">
-            <option value="default">Default</option>
-            <option value="blueGreenMetal">Blue-Green Metal</option>
-            <option value="diceOfRolling">Dice of Rolling</option>
-            <option value="gemstone">Gemstone</option>
-            <option value="gemstoneMarble">Marble Gemstone</option>
-            <option value="rock">Rock</option>
-            <option value="rust">Rust</option>
-            <option value="smooth">Smooth</option>
-            <option value="wooden">Wooden</option>
-        </select>
-        <color-picker id="themeColor"></color-picker>
-        <div id="dice-box"></div>
-
-        <button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
-        <button popovertarget="save-dice-hint" data-trigger="hover" style="margin: 10px" onclick="saveDice()">Save <i class="fa-solid fa-floppy-disk"></i></button>
-    </div>
-    <div hidden id="overlay-hint">
-        <div style="text-align: left">
-            <p style="color: red; font-weight: bold">Only the last loaded instance of that overlay rolls the dice!</p>
-            <p>Query Params you can Change:</p>
-            <ul>
-                <li><strong>scale</strong> changes the size of the dice (any value over 1)</li>
-                <li><strong>clearAfter</strong> time until dice are cleared (in seconds; remove param or set -1 to keep the
-                    dice)
-                </li>
-            </ul>
-        </div>
-    </div>
-
-    <div hidden id="all-results-hint">
-        <p>Shows all Results in this room</p>
-    </div>
-    <div hidden id="my-results-hint">
-        <p>Shows only my Results in this room</p>
-    </div>
-    <div hidden id="save-dice-hint">
-        <p>This saves your current theme and theme color for <a id="save-dice-hint-name"></a></p>
-    </div>
-    <div hidden id="command-hint">
-        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
-    </div>
-    <div hidden id="room-hint">
-        <p>How is your character called?</p>
-    </div>
-
-    <div style="margin-top: 20px" id="how-to">
-        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px;">
-            <h2 style="text-align: center">How-To</h2>
-            <ul>
-                <li>
-                    Join a room by entering your character name and the name of the room.<br/>
-                    <strong>If you are a GM, make sure to join the room first or let all other players rejoin to get all
-                        Overlay-URLs.</strong>
-                </li>
-
-                <li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
-                <ul>
-                    <li style="color: red; font-weight: bold">Only the last loaded instance of that overlay rolls the
-                        dice!
-                    </li>
-                    <li>You can configure your Overlay with query parameters (for more information hover over the link)
-                    </li>
-                </ul>
-                <li>Configure your dice</li>
-                <li>Save your dice configuration</li>
-                <li>Start rolling</li>
-            </ul>
-        </div>
-    </div>
-    <div style="margin-top: 20px; flex-grow: 1" id="chatOverlay">
-        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
-        If you are looking for a way to let your twitch chat roll click <a href target="_blank" id="chatOverlayLink">here</a>
-        </div>
-    </div>
-</div>
-<div id="snackbar-container">
-    <div id="snackbar">.. they see them rolling</div>
-</div>
-</body>
-<footer class="w3-theme-l1 w3-center">
-    Version {version} —
-    <a href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black"><i class="fa-solid fa-code"></i> Source on GitTea</a>
-</footer>
-</html>

src/main/resources/templates/overlay.html

@@ -2,9 +2,36 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Dice-Tower - Overlay</title>
+    <title>Overlay</title>
-    <link rel="icon" type="image/png" href="/favicon.png">
+    <style>
-    <link rel="stylesheet" href="/overlay/style.css">
+        html,
+        body {
+            font-family: Avenir, Helvetica, Arial, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            perspective: 1000px;
+        }
+
+        #dice-box {
+            position: relative;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            background-size: cover;
+        }
+
+        #dice-box canvas {
+            width: 100%;
+            height: 100%;
+        }
+
+    </style>
 </head>
 <body>
 <div id="dice-box"></div>
@@ -12,9 +39,7 @@
     function url() {
         return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
     }
-
     import DiceBox from "/vendor/dice-box/dice-box.es.js";
-
     const evtSource = new EventSource(url() + "/dice/{diceid??}/stream");
     const diceBox = new DiceBox("#dice-box", {
         assetPath: "/vendor/assets/",
@@ -36,9 +61,7 @@
     document.addEventListener("DOMContentLoaded", async() => {
         await diceBox.init()
 
-        let timeout = 0;
         evtSource.addEventListener("message", function (event) {
-            clearInterval(timeout);
             let data = JSON.parse(event.data);
             diceBox.onRollComplete = (rollResult) => {
                 let httpRequest = new XMLHttpRequest();
@@ -50,19 +73,12 @@
                     themeColor: data.themeColor,
                     results: rollResult,
                 } ))
-                if ({clearAfter} >
+                if ({clearAfter} > 0) {
-                0
+                    setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
-            )
-                {
-                    timeout = setTimeout(() => diceBox.clear(), {clearAfter} * 1000
-                )
                 }
 
             }
-            diceBox.roll(data.roll, {
+            diceBox.roll(data.roll, { theme: data.theme?.length > 0 ? data.theme : 'default', themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF' });
-                theme: data.theme?.length > 0 ? data.theme : 'default',
-                themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF'
-            });
         })
     })
 </script>

src/main/resources/templates/pub/index.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<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="/vendor/color-picker.js"></script>
+    <style>
+        .w3-theme-l6 { color:#000 !important; background-color:#999999 !important}
+        .w3-theme-l4 { color:#fff !important; background-color:#666666 !important}
+        .w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
+        .collapsible {
+            background-color: #333333;
+            color: black;
+            cursor: pointer;
+            margin-top: 10px;
+            padding: 18px;
+            width: 100%;
+            border: none;
+            text-align: left;
+            outline: none;
+            font-size: 15px;
+        }
+
+        .content {
+            padding: 0 18px;
+            display: none;
+            overflow: hidden;
+            background-color: #999999;
+            color: #000
+        }
+
+        button {
+            padding: 10px;
+            border: #333333 3px solid;
+            border-radius: 5px;
+            background: #333333;
+            color: #fff
+        }
+        input {
+            margin: 10px;
+        }
+
+        /* The switch - the box around the slider */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 25px;
+        }
+
+        /* Hide default HTML checkbox */
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* The slider */
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            -webkit-transition: .4s;
+            transition: .4s;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+        }
+
+        input:checked + .slider {
+            background-color: #333333;
+        }
+
+        input:focus + .slider {
+            box-shadow: 0 0 1px #333333;
+        }
+
+        input:checked + .slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+        }
+
+        .overlayButton {
+            background: transparent;
+            border: none;
+            width: 5px;
+            height: 5px;
+            font-size: large;
+        }
+
+        .tooltip {
+            position: fixed;
+            border-radius: 0.5rem;
+            padding: 15px;
+            color:#fff !important;
+            background-color:#333333dd !important
+        }
+
+        #dice-box {
+            position: relative;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            background-size: cover;
+        }
+
+        #dice-box canvas {
+            width: 100%;
+            height: 100%;
+            margin: 20px
+        }
+    </style>
+</head>
+<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>
+    <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>
+
+        <div class="content">
+            <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>
+            </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>
+            </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>
+            </div>
+        </div>
+        <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice  <a>🞃</a></button>
+        <div class="content">
+            <label for="theme">Theme </label>
+            <select name="theme" id="theme" style="margin: 25px">
+                <option value="default">Default</option>
+                <option value="blueGreenMetal">Blue-Green Metal</option>
+                <option value="diceOfRolling">Dice of Rolling</option>
+                <option value="gemstone">Gemstone</option>
+                <option value="gemstoneMarble">Marble Gemstone</option>
+                <option value="rock">Rock</option>
+                <option value="rust">Rust</option>
+                <option value="smooth">Smooth</option>
+                <option value="wooden">Wooden</option>
+            </select>
+            <br/>
+            <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>
+        </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/>
+        <label for="resultSwitch">Show all results </label>
+        <label class="switch">
+            <input type="checkbox" id="resultSwitch">
+            <span class="slider"></span>
+        </label>
+    </div>
+    <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container" style="padding: 25px; flex-grow: 1; margin-bottom: auto">
+        <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
+    </div>
+
+    <div popover id="overlay-hint" class="tooltip">
+        <p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p>
+        <p>Query Params you can Change:</p>
+        <ul>
+            <li><strong>scale</strong> changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)</li>
+            <li><strong>clearAfter</strong> time until dice are cleared (in seconds)</li>
+        </ul>
+    </div>
+    <div popover id="all-results-hint" class="tooltip">
+        <p>Shows all Results in this room</p>
+    </div>
+    <div popover id="my-results-hint" class="tooltip">
+        <p>Shows only my Results in this room</p>
+    </div>
+    <div popover id="save-dice-hint" class="tooltip">
+        This saves your current theme and theme color for current Name
+    </div>
+</div>
+<script>
+    function url() {
+        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
+    }
+    function start(event) {
+        if((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
+            document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=7&clearAfter=30';
+            document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
+            document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId');
+            document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
+            document.getElementById('roll').hidden = false;
+            document.getElementById('start').hidden = true;
+            document.getElementById('dice-tower').hidden = false;
+            document.getElementById('name').hidden = true;
+            document.getElementById('room').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>';
+            document.title = document.getElementById('name').value + ' - Dice-Tower';
+
+            if (localStorage.getItem(document.getElementById('name').value + "-theme")) {
+                document.getElementById('theme').value = localStorage.getItem(document.getElementById('name').value + "-theme")
+            }
+            if (localStorage.getItem(document.getElementById('name').value + "-themeColor")) {
+                document.getElementById('themeColor').setColor(localStorage.getItem(document.getElementById('name').value + "-themeColor"));
+            }
+        }
+    }
+
+    function roll(event) {
+        if((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
+            let httpRequest = new XMLHttpRequest();
+            httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + ':' + localStorage.getItem(`userId`))
+            httpRequest.setRequestHeader('Content-Type', 'application/json')
+            httpRequest.send(JSON.stringify({
+                name: document.getElementById('name').value,
+                command: document.getElementById('command').value,
+                themeColor: document.getElementById('themeColor').value,
+                theme: document.getElementById('theme').value
+            } ))
+        }
+    }
+
+    function saveDice() {
+        localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
+        localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
+    }
+
+    let coll = document.getElementsByClassName("collapsible");
+
+    for (let i = 0; i < coll.length; i++) {
+        coll[i].addEventListener("click", function () {
+            const content = this.nextElementSibling;
+            if (content.style.display === "block") {
+                content.style.display = "none";
+                this.children[0].innerHTML = "🞃"
+            } else {
+                content.style.display = "block";
+                this.children[0].innerHTML = "🞁"
+            }
+        });
+    }
+
+    const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");
+
+    popover.forEach((e) => {
+        const target = document.querySelector("#" + e.getAttribute("popovertarget"));
+        e.addEventListener("mouseover",()=>{
+            target.showPopover();
+        });
+
+        e.addEventListener("mouseout",()=>{
+            target.hidePopover();
+        });
+    });
+
+    document.getElementById('resultSwitch').addEventListener('change', function() {
+        if (!this.checked) {
+            document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
+        } else {
+            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
+        }
+    })
+
+    document.addEventListener("DOMContentLoaded", async() => {
+        if (!localStorage.getItem("userId")) {
+            localStorage.setItem("userId", self.crypto.randomUUID());
+        }
+    })
+</script>
+<script type="module">
+    import DiceBox from "/vendor/dice-box/dice-box.es.js";
+    document.addEventListener("DOMContentLoaded", async() => {
+        document.getElementById('preview').onclick = async () => {
+            document.getElementById('dice-box').replaceChildren(...[])
+            const diceBox = new DiceBox("#dice-box", {
+                assetPath: "/vendor/assets/",
+                theme: document.getElementById('theme').value,
+                themeColor: document.getElementById('themeColor').value,
+                scale: 14
+            });
+            await diceBox.init()
+            diceBox.roll(['1d2','1d4','1d6','1d8','1d10','1d12','1d20','1d100']);
+        }
+    })
+
+</script>
+</body>
+<footer class="w3-theme-l1 w3-center w3-padding-16">
+    <a href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Dice-Tower on my GitTea</a>
+</footer>
+</html>

src/main/resources/templates/results.html

@@ -2,18 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Dice-Tower - Results</title>
+    <title>Results</title>
-    <link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
-    <link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
-    <link rel="icon" type="image/png" href="/favicon.png">
 </head>
 <body>
-<div id="results" style="font-size: x-large"></div>
+<div id="results" style="font-size: x-large">
+</div>
 <script type="module">
     function url() {
         return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
     }
-
     const evtSource = new EventSource(url() + '/dice/{room}/results');
     evtSource.addEventListener('message', function (event) {
         let data = JSON.parse(event.data);
@@ -24,17 +21,17 @@
             let node = document.createElement('p');
             let resultText = ''
             if (!data.results) {
-                resultText = ' <i class="fa-solid fa-dice"></i>'
+                resultText = ' rolling...'
             } else {
                 data.results.forEach(result => {
                     let values = []
                     result.rolls.forEach(roll => {
                         values.push(roll.value);
                     })
-                    resultText += '<br/><strong>&ensp; D' + result.sides + '</strong>: [' + values.map(value => value === 1 ? '<strong style="text-shadow: 2px 2px 10px red">' + value + '</strong>' : value === result.sides ? '<strong style="text-shadow: 2px 2px 10px green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong>' + result.value + '</strong> '
+                    resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
                 })
             }
-            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> ' + resultText
+            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922;	' + resultText
             name.appendChild(node)
             document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
         }