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" />
</head>

<body>
    <div id="menu" class="start">
        <label class="onlystart">Base</label>
        <input class="onlystart" type="text" id="base-url" placeholder="URL for base image">
        <label class="onlystart">Overlay</label>
        <input class="onlystart"type="text" id="overlay-url" placeholder="URL for overlay image">
        <label class="onlystart">Artist (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:
            <input type="number" id="radius-input" placeholder="200" value="200">
            <input type="range" id="radius-slider" min="0" max="500" value="200">
        </label>
        <label class="nostart large">
            Softness:
            <input type="number" id="softness-input" placeholder="0" value="0">
            <input type="range" id="softness-slider" min="0" max="100" value="0">
        </label>
        <button class="nostart large" id="fullscreen-button">Fullscreen</button>
        <label class="nostart large">
            Border:
            <input type="checkbox" id="show-border" checked>
        </label>
        <label class="nostart large">
            Paint mode:
            <input type="checkbox" id="paint-mode">
        </label>
        <label class="nostart large">
            Fit to screen:
            <input type="checkbox" id="fit-screen" checked>
        </label>
        <label class="nostart large">
            Opacity:
            <input type="number" id="opacity-input" placeholder="100" value="100">
            <input type="range" id="opacity-slider" min="0" max="100" value="100">
        </label>
        <label class="nostart large">
            Darkness:
            <input type="number" id="darkness-input" placeholder="0" value="0">
            <input type="range" id="darkness-slider" min="0" max="100" value="0">
        </label>
        <a id="artist" target="_blank" class="nostart large"><button>Visit artist</button></a>
    </div>
    
    <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>