-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (149 loc) · 8.35 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Work-Form generator</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<canvas class="canvas"></canvas>
<div class="word-generator">
<div class="result-wrapper">
<!-- Styles added as attributes for html to canvas functionality -->
<div class="result" style="height: 100vh; width: 100vw; padding: 16px; color: white; font-size: 60px; line-height: 75px; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;">
<div class="results__word-wrapper" style="height: 48%">
<span style="display: block; word-break: break-word;" class="result__word result__word--1"></span>
<span style="display: block; word-break: break-word;" class="result__word result__word--2"></span>
<span style="display: block; word-break: break-word;" class="result__word result__word--3">&</span>
<span style="display: block; word-break: break-word;" class="result__word result__word--4"></span>
</div>
</div>
</div>
<div class="word-generator__controls" id="bottom">
<div class="words">
<h1 class="words__title">Line 1 words:</h1>
<ul class="words__list words__list--1">
<!-- Loaded by JS -->
</ul>
<form class="words__form" name="people">
<input class="words__input" type="text">
<button type="submit" class="words__btn words__btn--1">Add word</button>
<button type="button" class="words__clear-all">Clear words</button>
</form>
</div>
<div class="words">
<h1 class="words__title">Line 2 words:</h1>
<ul class="words__list words__list--2">
<!-- Loaded by JS -->
</ul>
<form class="words__form" name="places">
<input class="words__input" type="text">
<button type="submit" class="words__btn words__btn--2">Add word</button>
<button type="button" class="words__clear-all">Clear words</button>
</form>
</div>
<div class="words">
<h1 class="words__title">Line 3 words:</h1>
<ul class="words__list words__list--3">
<!-- Loaded by JS -->
</ul>
<form class="words__form" name="locations">
<input class="words__input" type="text">
<button type="submit" class="words__btn words__btn--3">Add word</button>
<button type="button" class="words__clear-all">Clear words</button>
</form>
</div>
<div class="colours">
<h1 class="colours__title">Colours:</h1>
<ul class="colours__list">
<!-- Loaded by JS -->
</ul>
<form class="colours__form" name="colours">
<input class="colours__input" type="text">
<button type="submit" class="colours__btn">Add colour</button>
<button type="button" class="words__clear-all">Clear colours</button>
</form>
</div>
<div class="fonts">
<h1 class="fonts__title">Fonts:</h1>
<form class="fonts__form">
<label class="fonts__checkbox-wrapper">sheppy sans
<input class="fonts__input" type="checkbox" id="sheppySans" name="sheppySans" value="sheppySans" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">airspace regular
<input class="fonts__input" type="checkbox" id="airSpace" name="airSpace" value="airSpace" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">apercu
<input class="fonts__input" type="checkbox" id="apercu" name="apercu" value="apercu" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Jones Mono
<input class="fonts__input" type="checkbox" id="jonesMono" name="jonesMono" value="jonesMono" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Loose Fit Regular
<input class="fonts__input" type="checkbox" id="LooseFit" name="LooseFit" value="LooseFit" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Selavy Cross
<input class="fonts__input" type="checkbox" id="SelavyCross" name="SelavyCross" value="SelavyCross" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Work-form Standard
<input class="fonts__input" type="checkbox" id="WorkFormStandard" name="WorkFormStandard" value="WorkFormStandard" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Work Curvy
<input class="fonts__input" type="checkbox" id="WorkCurvy" name="WorkCurvy" value="WorkCurvy" checked>
<span class="fonts__checkmark"></span>
</label>
<label class="fonts__checkbox-wrapper">Work Slab
<input class="fonts__input" type="checkbox" id="WorkSlab" name="WorkSlab" value="WorkSlab" checked>
<span class="fonts__checkmark"></span>
</label>
</form>
</div>
<div class="speed">
<h1 class="speed__title">Speed:</h1>
<!-- 0.1 seconds to 10 seconds -->
<input type="range" min="500" max="10000" step="500" value="2000" class="slider slider--speed">
<p class="speed__text">Images change every <span class="speed__seconds">2 seconds</span></p>
<h1 class="image-count__title">Images per gif:</h1>
<input type="range" min="1" max="10" step="1" value="3" class="slider slider--image-count">
<p class="image-count__text">Gif made up of <span class="image-count__number">3 images</span></p>
</div>
<div class="capture">
<p class="capture__render-count"></p>
<p class="capture__count"></p>
<div class="capture__acquire-wrapper">
<a class="acquire-gif-link js-download-link acquire-gif-link acquire-gif-link--disabled" download="generated-sentence">Download<br>gif</a>
<a class="acquire-gif-link js-view-link acquire-gif-link--disabled" target="_self">View<br>gif</a>
</div>
<button class="capture__btn" type="button">Capture gif</button>
</div>
</div>
<div>
<a href="#bottom" class="hand">Controls</a>
<div class="preload visually-hidden">
<!-- Preload fonts to stop flickering when added via js -->
<span class="preload__apercu"></span>
<span class="preload__sheppySans"></span>
<span class="preload__airSpace"></span>
<span class="preload__jonesMono"></span>
<span class="preload__LisbonRuha"></span>
<span class="preload__LooseFit"></span>
<span class="preload__PascalDisplay"></span>
<span class="preload__SelavyCross"></span>
<span class="preload__WorkFormStandard"></span>
<span class="preload__WorkCurvy"></span>
<span class="preload__WorkSlab"></span>
</div>
<script src="scripts/gif.worker.js"></script>
<script src="scripts/gif.js"></script>
<script src="build.js"></script>
</body>
</html>