3 změnil soubory, kde provedl 37 přidání a 4 odebrání
+ 15
- 0
xray.css
Zobrazit soubor
| @@ -33,16 +33,31 @@ img { | |||||
| align-items: center; | align-items: center; | ||||
| } | } | ||||
| #menu.start { | |||||
| flex-direction: column; | |||||
| } | |||||
| #menu.start input, | #menu.start input, | ||||
| #menu.start button, | #menu.start button, | ||||
| #menu.start label { | #menu.start label { | ||||
| font-size: 36pt; | font-size: 36pt; | ||||
| } | } | ||||
| #menu.start input { | |||||
| width: 80vw; | |||||
| } | |||||
| #menu.start .nostart { | #menu.start .nostart { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| #menu .onlystart { | |||||
| display: none; | |||||
| } | |||||
| #menu.start .onlystart { | |||||
| display: unset; | |||||
| } | |||||
| .large, | .large, | ||||
| .large > * { | .large > * { | ||||
+ 5
- 4
xray.html
Zobrazit soubor
| @@ -14,15 +14,16 @@ | |||||
| <body> | <body> | ||||
| <div id="menu" class="start"> | <div id="menu" class="start"> | ||||
| <label> | |||||
| <label class="onlystart"> | |||||
| Base: | Base: | ||||
| <input type="text" id="base-url" placeholder="URL for base image"> | <input type="text" id="base-url" placeholder="URL for base image"> | ||||
| </label> | </label> | ||||
| <label> | |||||
| <label class="onlystart"> | |||||
| Overlay: | Overlay: | ||||
| <input type="text" id="overlay-url" placeholder="URL for overlay image"> | <input type="text" id="overlay-url" placeholder="URL for overlay image"> | ||||
| </label> | </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"> | <label class="nostart large"> | ||||
| Radius: | Radius: | ||||
| <input type="number" id="radius-input" placeholder="200" value="200"> | <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="number" id="softness-input" placeholder="25" value="25"> | ||||
| <input type="range" id="softness-slider" min="0" max="100" value="25"> | <input type="range" id="softness-slider" min="0" max="100" value="25"> | ||||
| </label> | </label> | ||||
| <button class="large" id="fullscreen-button">Fullscreen</button> | |||||
| <button class="nostart large" id="fullscreen-button">Fullscreen</button> | |||||
| <label class="nostart large"> | <label class="nostart large"> | ||||
| Paint mode: | Paint mode: | ||||
| <input type="checkbox" id="paint-mode"> | <input type="checkbox" id="paint-mode"> | ||||
+ 17
- 0
xray.js
Zobrazit soubor
| @@ -16,6 +16,8 @@ let paintMode = false; | |||||
| let scale; | let scale; | ||||
| document.addEventListener("DOMContentLoaded", e => { | document.addEventListener("DOMContentLoaded", e => { | ||||
| document.querySelector("#reset-button").addEventListener("click", reset); | |||||
| document.querySelector("#load-button").addEventListener("click", e => { | document.querySelector("#load-button").addEventListener("click", e => { | ||||
| console.log("Trying to load..."); | console.log("Trying to load..."); | ||||
| const baseInput = document.querySelector("#base-url").value; | 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() { | function setup() { | ||||
| running = true; | running = true; | ||||