3 changed files with 47 additions and 11 deletions
Split View
Diff Options
+ 20
- 0
xray.css
View File
| @@ -98,4 +98,24 @@ img { | |||
| --opacity: 0; | |||
| opacity: var(--opacity); | |||
| z-index: 1; | |||
| } | |||
| #menu.start > label { | |||
| background: none; | |||
| } | |||
| label { | |||
| margin: 5px; | |||
| background: #222; | |||
| } | |||
| label span { | |||
| user-select: none; | |||
| } | |||
| label input { | |||
| margin: auto; | |||
| } | |||
| .hidden { | |||
| display: none !important; | |||
| } | |||
+ 13
- 11
xray.html
View File
| @@ -14,53 +14,55 @@ | |||
| <body> | |||
| <div id="menu" class="start"> | |||
| <label class="onlystart">Base</label> | |||
| <label class="onlystart">Base Image</label> | |||
| <input class="onlystart" type="text" id="base-url" placeholder="URL for base image"> | |||
| <label class="onlystart">Overlay</label> | |||
| <label class="onlystart">Xray Image</label> | |||
| <input class="onlystart"type="text" id="overlay-url" placeholder="URL for overlay image"> | |||
| <label class="onlystart">Artist (optional)</label> | |||
| <label class="onlystart">Artist Link (optional)</label> | |||
| <input class="onlystart"type="text" id="artist-url" placeholder="URL for the artist"> | |||
| <button id="load-button" class="onlystart">Load</button> | |||
| <button id="reset-button" class="nostart large">Reset</button> | |||
| <label class="nostart large"> | |||
| Radius: | |||
| <span>Radius</span> | |||
| <input type="number" id="radius-input" placeholder="200" value="200"> | |||
| <input type="range" id="radius-slider" min="0" max="500" step="10" value="200"> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Softness: | |||
| <span>Softness</span> | |||
| <input type="number" id="softness-input" placeholder="0" value="0"> | |||
| <input type="range" id="softness-slider" min="0" max="100" step="5" value="0"> | |||
| </label> | |||
| <button class="nostart large" id="fullscreen-button">Fullscreen</button> | |||
| <label class="nostart large"> | |||
| Border: | |||
| <span>Border</span> | |||
| <input type="checkbox" id="show-border" checked> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Paint mode: | |||
| <span>Paint mode</span> | |||
| <input type="checkbox" id="paint-mode"> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Offset mode: | |||
| <span>Offset mode</span> | |||
| <input type="checkbox" id="offset-mode"> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Fit to screen: | |||
| <span>Resize to window</span> | |||
| <input type="checkbox" id="fit-screen" checked> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Opacity: | |||
| <span>Opacity</span> | |||
| <input type="number" id="opacity-input" placeholder="100" value="100"> | |||
| <input type="range" id="opacity-slider" min="0" max="100" step="10" value="100"> | |||
| </label> | |||
| <label class="nostart large"> | |||
| Darkness: | |||
| <span>Darkness</span> | |||
| <input type="number" id="darkness-input" placeholder="0" value="0"> | |||
| <input type="range" id="darkness-slider" min="0" max="100" step="10" value="0"> | |||
| </label> | |||
| <a id="artist" target="_blank" class="nostart large"><button>Visit artist</button></a> | |||
| <button class="nostart large" id="hide-toolbar">Hide Toolbar</button> | |||
| </div> | |||
| <button class="nostart large" id="show-toolbar">Show Toolbar</button> | |||
| <div id="fill-div"> | |||
| <canvas class="hidden" id="overlay"></canvas> | |||
+ 14
- 0
xray.js
View File
| @@ -26,6 +26,18 @@ let scale; | |||
| document.addEventListener("DOMContentLoaded", e => { | |||
| document.querySelector("#reset-button").addEventListener("click", reset); | |||
| document.querySelector("#show-toolbar").addEventListener("click", e => { | |||
| document.querySelector("#menu").classList.remove("hidden") | |||
| document.querySelector("#show-toolbar").classList.add("hidden") | |||
| setup(); | |||
| }) | |||
| document.querySelector("#hide-toolbar").addEventListener("click", e => { | |||
| document.querySelector("#menu").classList.add("hidden") | |||
| document.querySelector("#show-toolbar").classList.remove("hidden") | |||
| setup(); | |||
| }) | |||
| document.querySelector("#show-toolbar").classList.add("hidden") | |||
| document.querySelector("#load-button").addEventListener("click", e => { | |||
| console.log("Trying to load..."); | |||
| const baseInput = document.querySelector("#base-url").value; | |||
| @@ -373,6 +385,8 @@ document.addEventListener("DOMContentLoaded", e => { | |||
| document.querySelector("#menu").classList.add("hidden") | |||
| document.querySelector("#show-toolbar").classList.remove("hidden") | |||
| load(); | |||
| } else { | |||