Allow the option checkboxes to be shown and hidden

macrovision.css

@@ -139,6 +139,7 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
 .options-block {
     display: flex;
     text-align: center;
@@ -146,6 +147,14 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     flex-direction: column;
 }
 
+.options-block.options-block-optional {
+    display: none;
+}
+
+body.show-extra-options .options-block.options-block-optional {
+    display: flex;
+}
+
 @media (max-aspect-ratio: 1/1) {
 
     .options-row {

macrovision.html

@@ -136,36 +136,42 @@
           </label>          
         </div>
         <div class="options-row">
-          <input type="checkbox" id="options-world-show-names">
-          <label for="options-world-show-names">Names over entities</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-bottom-names" checked="true">
-          <label for="options-world-show-bottom-names">Names at bottom</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-top-names" checked="true">
-          <label for="options-world-show-top-names">Arrows for very large entities</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-height-bars">
-          <label for="options-world-show-height-bars">Height bars</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-entity-glow">
-          <label for="options-world-show-entity-glow">Glowing edges</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-scale-sliders">
-          <label for="options-world-show-scale-sliders">Scale sliders</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-bottom-cover">
-          <label for="options-world-show-bottom-cover">Opaque ground</label>
-        </div>
-        <div class="options-row">
-          <input type="checkbox" id="options-world-show-scale" checked="true">
-          <label for="options-world-show-scale">Scale</label>
+          <input type="checkbox" id="options-show-extra">
+          <label for="options-show-extra">Show extra options</label>
+        </div>
+        <div class="options-block options-block-optional">
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-names">
+            <label for="options-world-show-names">Names over entities</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-bottom-names" checked="true">
+            <label for="options-world-show-bottom-names">Names at bottom</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-top-names" checked="true">
+            <label for="options-world-show-top-names">Arrows for very large entities</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-height-bars">
+            <label for="options-world-show-height-bars">Height bars</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-entity-glow">
+            <label for="options-world-show-entity-glow">Glowing edges</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-scale-sliders">
+            <label for="options-world-show-scale-sliders">Scale sliders</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-bottom-cover">
+            <label for="options-world-show-bottom-cover">Opaque ground</label>
+          </div>
+          <div class="options-row">
+            <input type="checkbox" id="options-world-show-scale" checked="true">
+            <label for="options-world-show-scale">Scale</label>
+          </div>
         </div>
 
         <div class="options-label">

macrovision.js

@@ -1005,6 +1005,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#menu-fullscreen").addEventListener("click", toggleFullScreen);
 
+    document.querySelector("#options-show-extra").addEventListener("input", e => {
+        document.body.classList[e.target.checked ? "add" : "remove"]("show-extra-options");
+    });
+
     document.querySelector("#options-world-show-names").addEventListener("input", e => {
         document.body.classList[e.target.checked ? "add" : "remove"]("toggle-entity-name");
     });