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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<!DOCTYPE html>
<html>

<head>
	<title>fractiform</title>
	<style>
	body {
		font-family: sans-serif;
		background-color: black;
		margin: 0;
		padding: 0;
		color: white;
		overflow: hidden;
	}
	
	:root {
		--ui-border: white;
		--ui-height: 2.5em;
	}
	
	#page {
		width: 100vw;
		position: relative;
	}
	#page[data-ui-shown="1"] {
		top: var(--ui-height);
		height: calc(100vh - var(--ui-height));
	}
	#page[data-ui-shown="0"] {
		top: 0;
		height: 100vh;
	}
	
	#canvas, #ui-canvas {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.error {
		color: red;
	}
	
	#error-dialog {
		border: 2px solid red;
		background-color: black;
	}
	dialog button {
		font-family: monospace;
	}
	button {
		border: 2px solid var(--ui-border);
		background-color: black;
		color: white;
	}
	button:hover {
		background-color: #fff3;
	}
	button:active {
		background-color: #fff6;
	}
	button:focus {
		outline: 2px solid #0a0;
	}
	#ui {
		display: block;
		width: 100vw;
		height: var(--ui-height);
		background-color: #111;
		border-bottom: 2px solid var(--ui-border);
		position: absolute;
		top: 0;
		left: 0;
		vertical-align:middle;
	}
	#ui input {
		vertical-align: middle;
		display: inline-block;
		height: 2.0em;
		margin: 0.5em 0.2em 0.5em 0.5em;
		padding: 0;
		border: 2px solid var(--ui-border);
		background-color: #333;
	}
	#ui label {
		margin-right: 0.5em;
	}
	</style>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1" name="viewport">
</head>

<body>
<script src="fractiform.js" type="text/javascript"></script>
<div id="page" data-ui-shown="1">
	<noscript>
		<p>
			This page requires JavaScript to function.<br>
			Try using a modern browser such as <em>Netscape Navigator</em>&reg;.
		</p>
	</noscript>
	<canvas id="canvas">
		<p>
			Your browser doesn't support HTML5 &lt;canvas&gt;.<br>
			This page won't work for you.
		</p>
	</canvas>
	<canvas id="ui-canvas"></canvas>
</div>
<div id="ui">
	<input type="color" value="#ffffff" name="color-input" id="color-input">
	<label for="color-input">color</label>
	<input type="range" value="0" min="0" max="1" step="any" name="color-mix-input" id="color-mix-input">
	<label for="color-mix-input">opacity</label>
</div>

<dialog id="error-dialog">
  <pre id="error-message" class="error"></pre>
</dialog>

</body>
</html>