Clean up the UI some more

5 years ago · 2fae425e39
--- a/xray.css
+++ b/xray.css
@@ -33,16 +33,31 @@ img {
    align-items: center;
 }

 #menu.start {
    flex-direction: column;
 }

 #menu.start input,
 #menu.start button,
 #menu.start label {
    font-size: 36pt;
 }

 #menu.start input {
    width: 80vw;
 }

 #menu.start .nostart {
    display: none;
 }

 #menu .onlystart {
    display: none;
 }

 #menu.start .onlystart {
    display: unset;
 }

 .large,
 .large > * {
--- a/xray.html
+++ b/xray.html
@@ -14,15 +14,16 @@

 <body>
    <div id="menu" class="start">
        <label>
        <label class="onlystart">
            Base:
            <input type="text" id="base-url" placeholder="URL for base image">
        </label>
        <label>
        <label class="onlystart">
            Overlay:
            <input type="text" id="overlay-url" placeholder="URL for overlay image">
        </label>
        <button id="load-button">Load</button>
        <button id="load-button" class="onlystart">Load</button>
        <button id="reset-button" class="nostart large">Reset</button>
        <label class="nostart large">
            Radius:
            <input type="number" id="radius-input" placeholder="200" value="200">
@@ -33,7 +34,7 @@
            <input type="number" id="softness-input" placeholder="25" value="25">
            <input type="range" id="softness-slider" min="0" max="100" value="25">
        </label>
        <button class="large" id="fullscreen-button">Fullscreen</button>
        <button class="nostart large" id="fullscreen-button">Fullscreen</button>
        <label class="nostart large">
            Paint mode:
            <input type="checkbox" id="paint-mode">
--- a/xray.js
+++ b/xray.js
@@ -16,6 +16,8 @@ let paintMode = false;
 let scale;

 document.addEventListener("DOMContentLoaded", e => {
    document.querySelector("#reset-button").addEventListener("click", reset);
    
    document.querySelector("#load-button").addEventListener("click", e => {
        console.log("Trying to load...");
        const baseInput = document.querySelector("#base-url").value;
@@ -282,6 +284,21 @@ function load() {
    })
 }

 function reset() {
    running = false;

    const overlay = document.querySelector("#overlay");
    const base = document.querySelector("#base");
    const overlayResized = document.querySelector("#overlay-resized");
    const baseResized = document.querySelector("#base-resized");

    document.querySelector("#menu").classList.add("start");

    overlay.classList.add("hidden");
    base.classList.add("hidden");

 }

 function setup() {
    running = true;