-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (75 loc) · 3.58 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<title>Effigie</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- FONTS & ICONS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- STYLES -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/styles/main.css">
<!-- WEB APP -->
<link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" sizes="192x192" href="/images/effigie192.png">
<meta name="theme-color" content="#282c34">
</head>
<body>
<!-- HEADER -->
<header class="w3-container w3-center">
<h1 class="w3-xxlarge">Effigie</h1>
</header>
<!-- PAGE CONTENT -->
<div class="w3-row-padding">
<!-- EFFIGIE -->
<div class="w3-col s12 m6 l4 w3-center">
<canvas id="effigie"></canvas>
</div>
<!-- OPTIONS -->
<div id="options" class="w3-col s12 m6 l4">
<!-- SEED -->
<input type="text" id="seed" class="w3-input" placeholder="Seed">
<!-- PROBABILITY -->
<input type="range" id="probability" min="10" max="90" value="50" class="slider">
Fill ratio: <span id="probability-value">50</span>%
<!-- CELLS -->
<input type="range" id="cells" min="4" max="16" value="7" class="slider">
Cells: <span id="cells-value">7x7</span>
<!-- SIZE -->
<input type="range" id="size" min="256" max="1024" step="256" value="512" class="slider">
Size: <span id="size-value">512</span>px
<!-- MARGIN -->
<input type="range" id="margin" min="0" max="20" value="5" class="slider">
Margin: <span id="margin-value">5</span>%
<!-- CHECKBOXES -->
<div class="w3-row">
<!-- RANDOM COLOR -->
<div class="w3-col s6">
<input type="checkbox" id="random" name="random" class="w3-check" checked>
<label for="random">Random color</label>
</div>
<!-- SYMMETRICAL -->
<div class="w3-col s6">
<input type="checkbox" id="symmetrical" name="symmetrical" class="w3-check" checked>
<label for="symmetrical">Symmetrical</label>
</div>
</div>
<!-- CELL COLOR -->
<input type="color" id="color" name="color" class="picker" value="#3f51b5" disabled>
<label for="color">Cells color</label>
<!-- BACKGROUND COLOR -->
<input type="color" id="background" name="background" class="picker" value="#f0f0f0" disabled>
<label for="background">Background color</label>
</div>
<!-- DOWNLOAD -->
<a id="download" class="w3-btn w3-card w3-xlarSge w3-circle">
<i class="material-icons">get_app</i>
</a>
</div>
<!-- SCRIPTS -->
<script src="/scripts/seedrandom.js"></script>
<script src="/scripts/effigie.js"></script>
</body>
</html>