chemicalcrux
/
xray-viewer


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>X-ray Viewer</title>
  <link rel="stylesheet" href="xray.css">
  <script src="xray.js"></script>
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="rip Flash lol" />
  <meta property="og:title" content="X-ray Viewer" />
  <meta property="og:description" content="rip Flash lol" />
  <meta name="viewport" content="initial-scale=1.0,width=device-width,height=device-height" />
</head>

<body>
    <div id="menu" class="start">
        <label class="onlystart">Base Image</label>
        <input class="onlystart" type="text" id="base-url" placeholder="URL for base image">
        <label class="onlystart">Xray Image</label>
        <input class="onlystart"type="text" id="overlay-url" placeholder="URL for overlay image">
        <label class="onlystart">Artist Link (optional)</label>
        <input class="onlystart"type="text" id="artist-url" placeholder="URL for the artist">
        <p class="onlystart">Once loaded, just adjust the settings and copy the resulting URL!</p>
        <button id="load-button" class="onlystart">Load</button>
        <button id="reset-button" class="nostart large">Reset</button>
        <a id="artist" target="_blank" class="nostart large"><button>Visit artist</button></a>
        <button class="nostart large" id="hide-toolbar">Hide Toolbar</button>
        <label class="nostart large">
            <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">
            <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>
        <label class="nostart large">
            <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">
            <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>
        <button class="nostart large" id="fullscreen-button">Fullscreen</button>
        <label class="nostart large">
            <span>Border</span>
            <input type="checkbox" id="show-border" checked>
        </label>
        <label class="nostart large">
            <span>Paint mode</span>
            <input type="checkbox" id="paint-mode">
        </label>
        <label class="nostart large">
            <span>Offset mode</span>
            <input type="checkbox" id="offset-mode">
        </label>
        <label class="nostart large">
            <span>Resize to window</span>
            <input type="checkbox" id="fit-screen" checked>
        </label>
    </div>
    <button class="nostart large" id="show-toolbar">Show Toolbar</button>
    
    <div id="fill-div">
        <canvas class="hidden" id="overlay"></canvas>
        <canvas class="hidden" id="shadow"></canvas>
        <canvas class="hidden" id="base"></canvas>
        <canvas class="hidden" id="overlay-resized"></canvas>
        <canvas class="hidden" id="base-resized"></canvas>
    </div>
    <img id="overlay-img" src="overlay.png">
    <img id="base-img" src="base.png">
</body>