56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
|
<title>Spiegel</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Klaer Lightende Spiegel der Verfkonst</h1>
|
|
<h4>Paints your image in the colors of the
|
|
<a class="link" target="_blank"
|
|
href="https://nl.wikipedia.org/wiki/Klaer_Lightende_Spiegel_der_Verfkonst">handpainted
|
|
book by A. Boogert</a>,
|
|
<img id="spieghel" alt="spieghel" src="" class="hide">
|
|
the 1692 version of the Pantone color book.</h4>
|
|
|
|
<div class="main">
|
|
|
|
<label>
|
|
<h4>Upload or drag&drop a (jpeg) picture and move the slider, for a quick preview</h4>
|
|
<h4>Then press Apply</h4>
|
|
|
|
</label>
|
|
<div><input id="upload" type="file" accept="image/jpeg"></div>
|
|
<div id="slidecontainer" class="hide">
|
|
<label for="slider">Brush stroke size</label><input type="range" id="slider" value="0" min="0" max="100" class="slider"/>
|
|
<button id="apply">Apply</button>
|
|
</div>
|
|
</label>
|
|
<div class="main-content">
|
|
<div class="content" id="images">
|
|
<div id="image-container" class="border" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
|
|
|
|
<canvas id="canvas" style="visibility: hidden;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function allowDrop(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
function drop(event) {
|
|
event.preventDefault();
|
|
let dt = event.dataTransfer;
|
|
|
|
document.querySelector("#source-image").src = URL.createObjectURL(dt.files[0]);
|
|
document.querySelector('#image-container').setAttribute("class", "no-border");
|
|
document.querySelector("#slidecontainer").setAttribute("class", "slidecontainer");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|