-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (115 loc) · 4.65 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hexahexaflexagon Utility</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link href="hexa.css" rel="stylesheet" />
<script src="js/hexa.js" type="module" async defer></script>
</head>
<body>
<video
style="display: none"
id="video"
width="640"
height="480"
autoplay
></video>
<canvas style="display: none" id="canvas" width="640" height="480"></canvas>
<section class="noprint" id="intro">
<h1>Hexahexaflexagon Tool</h1>
<p>
Welcome to the hexahexflexagon tool! If you print this (and cut, fold,
and glue according to the
<a href="https://hackmd.io/eawNw6gyTCibG64dc3SC8w?view">instructions</a
>), you will get a kind of paper kaleidoscope, but that's just the
beginning! You can add your own custom images and use the controls to
position them in the hexagon, and make your very own hexahexaflexagon.
</p>
<p>
Simply choose the hex, and drag a picture to it (or use the buttons to
pick a new picture or use the camera). You can scale with the mouse
wheel and drag to position.
</p>
<p hidden>
You can also save the result to have an SVG file suitable for use with
Cricut-style cutting machines.
</p>
</section>
<section class="noprint" id="controls">
<div>
<svg
id="hex"
width="350"
height="300"
viewBox="0 0 350 300"
draggable="true"
></svg>
</div>
<form>
<h3>Choose (or take photos) 6 images</h3>
<label
><input type="radio" name="image" value="1" checked /> Image
One</label
>
<label><input type="radio" name="image" value="2" /> Image Two</label>
<label><input type="radio" name="image" value="3" /> Image Three</label>
<label><input type="radio" name="image" value="4" /> Image Four</label>
<label><input type="radio" name="image" value="5" /> Image Five</label>
<label><input type="radio" name="image" value="6" /> Image Six</label>
<hr />
<label
><input type="file" name="filepicker" id="filepicker" /> Load an
image</label
>
<button id="take-photo" type="button">Take a Photo</button><br />
<button id="download-file" type="button" hidden>Download File</button>
</form>
<form id="options">
<h3>Optional text around the edges</h3>
<label>Top Edge <input type="text" id="text1" data-idx="a" autocomplete="off" /></label>
<label>Upper Right <input type="text" id="text2" data-idx="b" autocomplete="off" /></label>
<label>Lower Right <input type="text" id="text3" data-idx="c" autocomplete="off" /></label>
<label>Bottom Edge <input type="text" id="text4" data-idx="d" autocomplete="off" /></label>
<label>Lower Left <input type="text" id="text5" data-idx="e" autocomplete="off" /></label>
<label>Upper Left <input type="text" id="text6" data-idx="f" autocomplete="off" /></label>
<button id="copy_text" type="button">Copy this text to all sides</button>
<hr>
<h3>Advanced Options</h3>
<label>Hide Images <input type="checkbox" id="hide_images" /></label>
<label>Hide Text <input type="checkbox" id="hide_text" /></label>
</form>
</section>
<svg id="strip1" viewBox="-1 -1 1034 300"></svg>
<svg id="strip2" viewBox="-1 -1 1034 300"></svg>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"
><img
alt="Creative Commons License"
style="border-width: 0"
src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a
><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"
>Flexagon</span
>
by
<a
xmlns:cc="http://creativecommons.org/ns#"
href="https://dethe.github.io/flexagon/"
property="cc:attributionName"
rel="cc:attributionURL"
>Dethe Elza</a
>
is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"
>Creative Commons Attribution-ShareAlike 4.0 International License</a
>.<br />Based on a work at
<a
xmlns:dct="http://purl.org/dc/terms/"
href="https://github.com/dethe/flexagon"
rel="dct:source"
>https://github.com/dethe/flexagon</a
>.
</body>
</html>