changes to dice-box-threejs

src/main/resources/templates/index.html

@@ -103,8 +103,15 @@
     </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>
+        <iframe id="resultFrame" title="results" style="width: 100%; height: 100%; overflow: hidden; border: 0"></iframe>
+        <label for="resultDiceSwitch" style="position: absolute; top: 25px; right: 95px">Show dice </label>
+        <label class="switch" style="position: absolute; top: 25px; right: 25px; z-index: 5">
+            <input type="checkbox" id="resultDiceSwitch">
+            <span class="slider"></span>
+        </label>
+        <div id="results-dice" hidden>
+            <iframe id="diceFrame" title="dice" style="width: 50%; height: 100%; overflow: hidden; border: 0; z-index: 4; position: absolute; top: 0; left: 50%"></iframe>
+        </div>
     </div>
 
     <div popover id="urls-overlay" class="tooltip" style="width: 600px">
@@ -125,27 +132,27 @@
         </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>
+        <div style="text-align: center;">
+            <label for="theme">Theme </label>
+            <select name="theme" id="theme" style="margin: 0 25px"></select>
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline">
+            <div style="flex-grow: 1; padding: 0 10px">
+                <color-picker id="faceColor" name="Face" value="#8d8981"></color-picker>
+            </div>
+            <div style="flex-grow: 1; padding: 10px 0">
+                <color-picker id="numberColor" name="Numbers" value="black"></color-picker>
+            </div>
+        </div>
+        <div id="dice-box">
+            <div id="app"></div>
+        </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>
@@ -171,6 +178,12 @@
     <div hidden id="room-hint">
         <p>How is your character called?</p>
     </div>
+    <div hidden id="madeby-hint">
+        <p>
+            made by Arindy<br/>
+            Click to go to source
+        </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;">
@@ -184,9 +197,6 @@
 
                 <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>
@@ -207,7 +217,6 @@
 </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>
+    <a popovertarget="madeby-hint" data-trigger="hover" href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Version {version}</a>
 </footer>
 </html>