-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
47 lines (46 loc) · 2.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dot.css</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="./src/app.css">
</head>
<body>
<input id="menu-switch" class="icon-button close" type="checkbox">
<aside>
<h1>dot<span class="dot">.</span>css</h1>
<div class="source-image">
<label for="source-image-file" class="icon-button" title="upload your own image"></label>
<input id="source-image-file" type="file" accept="image/*">
<label for="source-image-select">input image</label>
<select id="source-image-select">
<option value="./assets/16-bits-palette-256x256.png" selected="selected">16 bits palette (256x256)</option>
<option value="./assets/crayons-256x256.png">crayons (256x256)</option>
<option value="./assets/mini-easel-489x500.jpg">mini easel (489x500)</option>
<option value="./assets/mini-easels-888x864.jpg">mini easels (888x864)</option>
</select>
</div>
<label for="crossfade-slider">crossfade</label>
<input id="crossfade-slider" type="range" min="0" max="100" value="0">
<label for="pixelate-slider">pixelate</label>
<input id="pixelate-slider" type="range" min="0" max="100" value="10" class="percentage">
<label for="blur-slider">blur</label>
<input id="blur-slider" type="range" min="0" max="50" value="0">
<label for="zoom-slider">zoom</label>
<input id="zoom-slider" type="range" step="0.2" min=".4" max="4" value="2">
<label for="subpixel-rendering-switch">subpixel rendering<input
id="subpixel-rendering-switch" type="checkbox" class="icon-button" checked="checked"></label>
</aside>
<main id="main">
<div id="source">
<img id="source-image">
</div>
<div id="target">
<div id="paper"></div>
</div>
</main>
<script src="./src/lib.js"></script>
<script src="./src/app.js"></script>
</body>
</html>