-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
208 lines (208 loc) · 18.5 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="initial-scale=1" name="viewport">
<meta name="description" content="Generate a parodic O'Reilley book cover, you know, that nerd meme! Source code available at https://github.com/ArthurBeaulieu/ORlyGenerator">
<title>O'Rly Generator – 1.4.1</title>
<link rel="stylesheet" type="text/css" href="./css/orlygenerator.css">
<link href="https://raw.githubusercontent.com/ArthurBeaulieu/ArthurBeaulieu/master/assets/img/ab-logo.png" rel="icon" type="image/png">
</head>
<!-- O'Rly Generator – from 09/2020 -->
<!-- GPL-3.0 License -->
<!-- Arthur Beaulieu -->
<!-- Version 1.4.1 -->
<body>
<!-- GH ribbon -->
<a href="https://github.com/ArthurBeaulieu/ORlyGenerator" target="_blank" rel="noopener noreferrer" style="position:absolute;left:0;top:0"><img decoding="async" width="149" height="149" src="./assets/forkme.webp" class="attachment-full size-full" alt="Fork me on GitHub" loading="lazy" data-recalc-dims="1"></a>
<!-- Language selection -->
<select id="lang-select" class="lang-select" name="lang-select">
<option value="en">{{L_EN}}</option>
<option value="fr">{{L_FR}}</option>
<option value="es">{{L_ES}}</option>
<option value="de">{{L_DE}}</option>
</select>
<!-- Title and subtitle -->
<h1>O'Rly Generator</h1>
<!-- Page content (output and manipulation) -->
<div class="content-wrapper">
<!-- Meme preview and rendering section -->
<div class="preview-container">
<div id="output" class="preview">
<div class="preview-top-border"></div>
<p id="preview-header" class="preview-header-text"></p>
<div class="preview-image-container">
<img src="assets/animals/butterfly.webp" id="image-animal" alt="image-animal">
</div>
<div class="preview-title-container">
<p id="preview-title"></p>
</div>
<p id="preview-subtitle" class="preview-subtitle-text"></p>
<p class="preview-orly">O RLY<sup>?</sup></p>
<p id="preview-signature" class="preview-signature-text"></p>
</div>
</div>
<!-- Meme parametrization -->
<div class="parameters">
<div class="flex-wrapper">
<label>{{PREDEFINED_COLOR}}:</label>
<div id="predefined-colors" class="param-predefined-colors">
<div class="selected" data-value="#55135D"><svg alt="color0" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#55135D"/></svg></div>
<div data-value="#71706E"><svg alt="color1" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#71706E"/></svg></div>
<div data-value="#761b2A"><svg alt="color2" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#761b2A"/></svg></div>
<div data-value="#B80721"><svg alt="color3" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#B80721"/></svg></div>
<div data-value="#65161C"><svg alt="color4" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#65161C"/></svg></div>
<div data-value="#503DBD"><svg alt="color5" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#503DBD"/></svg></div>
<div data-value="#E11105"><svg alt="color6" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#E11105"/></svg></div>
<div data-value="#067BB0"><svg alt="color7" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#067BB0"/></svg></div>
<div data-value="#F7B500"><svg alt="color8" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#F7B500"/></svg></div>
<div data-value="#000F76"><svg alt="color9" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#000F76"/></svg></div>
<div data-value="#A8009B"><svg alt="color10" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#A8009B"/></svg></div>
<div data-value="#008445"><svg alt="color11" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#008445"/></svg></div>
<div data-value="#00999D"><svg alt="color12" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#00999D"/></svg></div>
<div data-value="#014284"><svg alt="color13" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#014284"/></svg></div>
<div data-value="#B10034"><svg alt="color14" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#B10034"/></svg></div>
<div data-value="#378E19"><svg alt="color15" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#378E19"/></svg></div>
<div data-value="#859800"><svg alt="color16" version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h1v1H0" fill="#859800"/></svg></div>
</div>
<label for="input-color">{{CUSTOM_COLORS}}:</label>
<input id="input-color" class="params-input-color" type="color" name="input-color">
<label for="select-image">{{SPIRIT_ANIMAL}}:</label>
<select id="select-image" name="image-select">
<option value="blank">{{A_NONE}}</option>
<option value="alligator">🐊 {{A_ALLIGATOR}}</option>
<option value="bat">🦇 {{A_BAT}}</option>
<option value="bear">🐻 {{A_BEAR}}</option>
<option value="beaver">🐹 {{A_BEAVER}}</option>
<option value="bull">🐄 {{A_BULL}}</option>
<option value="butterfly">🦋 {{A_BUTTERFLY}}</option>
<option value="cat">🐈 {{A_CAT}}</option>
<option value="chameleon">🦎 {{A_CHAMELEON}}</option>
<option value="chronectes">🐡 {{A_CHRONECTES}}</option>
<option value="cow">🐄 {{A_COW}}</option>
<option value="crab">🦀 {{A_CRAB}}</option>
<option value="deer">🦌 {{A_DEER}}</option>
<option value="dog">🐕 {{A_DOG}}</option>
<option value="dog2">🐕 {{A_DOG_2}}</option>
<option value="donkey">🐎 {{A_DONKEY}}</option>
<option value="elephant">🐘 {{A_ELEPHANT}}</option>
<option value="flyingfish">🐟 {{A_FLYING_FISH}}</option>
<option value="fox">🦊 {{A_FOX}}</option>
<option value="frog">🐸 {{A_FROG}}</option>
<option value="gerbil">🐹 {{A_GERBIL}}</option>
<option value="giraffe">🦒 {{A_GIRAFFE}}</option>
<option value="goose">🦢 {{A_GOOSE}}</option>
<option value="gorilla">🦍 {{A_GORILLA}}</option>
<option value="grumpycat">🐈 {{A_GRUMPY_CAT}}</option>
<option value="horse">🐎 {{A_HORSE}}</option>
<option value="jerboa">🐹 {{A_JERBOA}}</option>
<option value="jellyfish">🦑 {{A_JELLYFISH}}</option>
<option value="kangaroo">🦘 {{A_KANGAROO}}</option>
<option value="koala">🐨 {{A_KOALA}}</option>
<option value="lemur">🐒 {{A_LEMUR}}</option>
<option value="llama">🦙 {{A_LLAMA}}</option>
<option value="lophius">🐟 {{A_LOPHIUS}}</option>
<option value="octopus">🐙 {{A_OCTOPUS}}</option>
<option value="orangutan">🦧 {{A_ORANGUTAN}}</option>
<option value="ostrich">🦃 {{A_OSTRICH}}</option>
<option value="otter">🦦 {{A_OTTER}}</option>
<option value="owl">🦉 {{A_OWL}}</option>
<option value="parrot">🦜 {{A_PARROT}}</option>
<option value="penguin">🐧 {{A_PENGUIN}}</option>
<option value="pigeon">🐦 {{A_PIGEON}}</option>
<option value="pterodactyl">🦅 {{A_PTERODACTYL}}</option>
<option value="puma">🐅 {{A_PUMA}}</option>
<option value="racoon">🐹 {{A_RACOON}}</option>
<option value="rooster">🐓 {{A_ROOSTER}}</option>
<option value="scarab">🐞 {{A_SCARAB}}</option>
<option value="shark">🦈 {{A_SHARK}}</option>
<option value="sheatfish">🐟 {{A_SHEATFISH}}</option>
<option value="spider">🕷️ {{A_SPIDER}}</option>
<option value="stingray">🐟 {{A_STINGRAY}}</option>
<option value="sunfish">🐟 {{A_SUNFISH}}</option>
<option value="tiger">🐅 {{A_TIGER}}</option>
<option value="tuna">🐟 {{A_TUNA}}</option>
<option value="turkey">🦃 {{A_TURKEY}}</option>
<option value="turtle">🐢 {{A_TURTLE}}</option>
<option value="wasp">🐝 {{A_WASP}}</option>
<option value="whale">🐳 {{A_WHALE}}</option>
<option value="zebra">🦓 {{A_ZEBRA}}</option>
</select>
<label for="flip-image">{{FLIP_HORIZONTALLY}}</label>
<svg id="flip-image" alt="flip-image" enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m256 0c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/>
<path d="m256 137c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/>
<path d="m256 275c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/>
<path d="m256 412c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/>
<path d="m179.4 103.5-120-36.842c-4.549-1.398-9.49-0.553-13.317 2.276-3.827 2.828-6.085 7.304-6.085 12.063v350c0 4.759 2.258 9.235 6.085 12.063 3.841 2.839 8.787 3.668 13.317 2.275l120-36.842c6.299-1.933 10.598-7.751 10.598-14.339v-276.32c0-6.588-4.3-12.405-10.598-14.339z"/>
<path d="m465.92 68.937c-3.826-2.828-8.77-3.673-13.317-2.276l-120 36.842c-6.299 1.933-10.598 7.751-10.598 14.339v276.32c0 6.588 4.3 12.405 10.598 14.339l120 36.842c4.566 1.402 9.505 0.541 13.317-2.276 3.827-2.828 6.085-7.304 6.085-12.063v-350c0-4.759-2.258-9.235-6.085-12.063z"/>
</svg>
<br> <!-- Since inline block for flip img, we need to line break manually -->
<label for="v-flip-image">{{FLIP_VERTICALLY}}</label>
<svg id="v-flip-image" alt="vertical-flip-image" enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(90,256,256)"><path d="m256 0c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/></g>
<g transform="rotate(90,256,256)"><path d="m256 137c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/></g>
<g transform="rotate(90,256,256)"><path d="m256 275c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/></g>
<g transform="rotate(90,256,256)"><path d="m256 412c-8.284 0-15 6.716-15 15v70c0 8.284 6.716 15 15 15s15-6.716 15-15v-70c0-8.284-6.716-15-15-15z"/></g>
<g transform="rotate(90,256,256)"><path d="m179.4 103.5-120-36.842c-4.549-1.398-9.49-0.553-13.317 2.276-3.827 2.828-6.085 7.304-6.085 12.063v350c0 4.759 2.258 9.235 6.085 12.063 3.841 2.839 8.787 3.668 13.317 2.275l120-36.842c6.299-1.933 10.598-7.751 10.598-14.339v-276.32c0-6.588-4.3-12.405-10.598-14.339z"/></g>
<g transform="rotate(90,256,256)"><path d="m465.92 68.937c-3.826-2.828-8.77-3.673-13.317-2.276l-120 36.842c-6.299 1.933-10.598 7.751-10.598 14.339v276.32c0 6.588 4.3 12.405 10.598 14.339l120 36.842c4.566 1.402 9.505 0.541 13.317-2.276 3.827-2.828 6.085-7.304 6.085-12.063v-350c0-4.759-2.258-9.235-6.085-12.063z"/></g>
</svg>
<br><br> <!-- Since inline block for flip img, we need to line break manually -->
<label for="input-header" data-maxlength="70">{{HEADER}}:</label>
<input id="input-header" type="text" name="input-header" maxlength="69" value="It's only a clever hack if you're the one who wrote it">
<label for="input-title" data-maxlength="64">{{TITLE}}:
<div class="title-centering">
<svg id="l-align" alt="left-align" enable-background="new 0 0 334.367 334.367" version="1.1" viewBox="0 0 334.37 334.37" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m10.449 52.245h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449z"/>
<path d="m10.449 135.84h219.43c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449h-219.43c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449z"/>
<path d="m323.92 198.53h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
<path d="m151.51 282.12h-141.06c-5.771 0-10.449 4.679-10.449 10.449s4.678 10.449 10.449 10.449h141.06c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
</svg>
<svg id="c-align" alt="center-align" enable-background="new 0 0 334.367 334.367" version="1.1" viewBox="0 0 334.37 334.37" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m10.449 52.245h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449z"/>
<path d="m57.469 114.94c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h219.43c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449h-219.43z"/>
<path d="m323.92 198.53h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
<path d="m237.71 282.12h-141.06c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h141.06c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
</svg>
<svg id="r-align" alt="right-align" enable-background="new 0 0 334.367 334.367" version="1.1" viewBox="0 0 334.37 334.37" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m10.449 52.245h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449z"/>
<path d="m323.92 114.94h-219.43c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h219.43c5.771 0 10.449-4.678 10.449-10.449-1e-3 -5.771-4.679-10.449-10.45-10.449z"/>
<path d="m323.92 198.53h-313.47c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h313.47c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
<path d="m323.92 282.12h-141.06c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h141.06c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"/>
</svg>
</div>
</label>
<input id="input-title" type="text" name="input-title" maxlength="64" value="Hating Other People's Code">
<label for="input-subtitle" data-maxlength="70">{{SUBTITLE}}:
<div class="subtitle-centering">
<svg id="bl-align" alt="bl-align" enable-background="new 0 0 426.667 426.667" version="1.1" viewBox="0 0 426.67 426.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(-1 0 0 1 426.67 0)"><path d="m426.4 413.65-74.667-330.67c-1.063-4.708-5.167-8.125-9.979-8.302-5.583-0.354-9.188 2.906-10.604 7.521l-37.459 121.73-200.81-200.8c-4.167-4.167-10.917-4.167-15.083 0l-74.667 74.667c-4.167 4.167-4.167 10.917 0 15.083l200.81 200.8-121.75 37.458c-4.604 1.427-7.688 5.771-7.521 10.604 0.188 4.833 3.604 8.938 8.313 10l330.67 74.667c0.792 0.177 1.563 0.26 2.354 0.26 2.792 0 5.521-1.104 7.542-3.125 2.583-2.583 3.666-6.322 2.854-9.895z"/></g>
</svg>
<svg id="tl-align" alt="tl-align" enable-background="new 0 0 426.667 426.667" version="1.1" viewBox="0 0 426.67 426.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(180 213.33 213.33)"><path d="m426.4 413.65-74.667-330.67c-1.063-4.708-5.167-8.125-9.979-8.302-5.583-0.354-9.188 2.906-10.604 7.521l-37.459 121.73-200.81-200.8c-4.167-4.167-10.917-4.167-15.083 0l-74.667 74.667c-4.167 4.167-4.167 10.917 0 15.083l200.81 200.8-121.75 37.458c-4.604 1.427-7.688 5.771-7.521 10.604 0.188 4.833 3.604 8.938 8.313 10l330.67 74.667c0.792 0.177 1.563 0.26 2.354 0.26 2.792 0 5.521-1.104 7.542-3.125 2.583-2.583 3.666-6.322 2.854-9.895z"/></g>
</svg>
<svg id="tr-align" alt="tr-align" enable-background="new 0 0 426.667 426.667" version="1.1" viewBox="0 0 426.67 426.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 -1 0 426.67)"><path d="m426.4 413.65-74.667-330.67c-1.063-4.708-5.167-8.125-9.979-8.302-5.583-0.354-9.188 2.906-10.604 7.521l-37.459 121.73-200.81-200.8c-4.167-4.167-10.917-4.167-15.083 0l-74.667 74.667c-4.167 4.167-4.167 10.917 0 15.083l200.81 200.8-121.75 37.458c-4.604 1.427-7.688 5.771-7.521 10.604 0.188 4.833 3.604 8.938 8.313 10l330.67 74.667c0.792 0.177 1.563 0.26 2.354 0.26 2.792 0 5.521-1.104 7.542-3.125 2.583-2.583 3.666-6.322 2.854-9.895z"/></g>
</svg>
<svg id="br-align" alt="br-align" enable-background="new 0 0 426.667 426.667" version="1.1" viewBox="0 0 426.67 426.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m426.4 413.65-74.667-330.67c-1.063-4.708-5.167-8.125-9.979-8.302-5.583-0.354-9.188 2.906-10.604 7.521l-37.459 121.73-200.81-200.8c-4.167-4.167-10.917-4.167-15.083 0l-74.667 74.667c-4.167 4.167-4.167 10.917 0 15.083l200.81 200.8-121.75 37.458c-4.604 1.427-7.688 5.771-7.521 10.604 0.188 4.833 3.604 8.938 8.313 10l330.67 74.667c0.792 0.177 1.563 0.26 2.354 0.26 2.792 0 5.521-1.104 7.542-3.125 2.583-2.583 3.666-6.322 2.854-9.895z"/>
</svg>
</div>
</label>
<input id="input-subtitle" type="text" name="input-subtitle" maxlength="70" value="You ARE the alpha programmer">
<label for="input-signature" data-maxlength="60">{{SIGNATURE}}:</label>
<input id="input-signature" type="text" name="input-signature" maxlength="60" value="">
<button id="browse">{{RANDOM_COVER}}</button>
<button id="download">{{DOWNLOAD}}</button>
</div>
</div>
</div>
<!-- Credit footer -->
<p class="credits"><i>O'Rly Generator v1.4.1 – Arthur Beaulieu – 2020/2024</i></p>
<script type="text/javascript" src="js/covertemplate.js"></script>
<script type="text/javascript" src="js/orlygenerator.js"></script>
<script async type="text/javascript" src="js/html2canvas.js"></script>
</body>
</html>