-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
214 lines (165 loc) · 11.2 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
209
210
211
212
213
214
<!-- This page will self destruct in 5 seconds. -->
<!DOCTYPE html>
<html>
<head>
<title>SHA DESIGN GENERATOR V1.0</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="dependencies/sha1.js"></script>
</head>
<body onLoad="focusinput()">
<div id="menu">
<h3>SHA2017 STYLEGUIDE</h3>
<a href="#installation">Read this before you begin...</a>
<h3>DESIGN GENERATOR</h3>
<textarea id="input" onKeyUp="hash()" onChange="hash()">SHA2017 STYLEGUIDE</textarea>
<br />
<label for="textslider">Text Size: </label> <input type="range" min="8" max="300" value="70" id="textslider" onInput="hash()" onChange="hash()" />
<br />
<label for="codeslider">Code Size: </label><input type="range" min="1" max="50" value="17" id="codeslider" onInput="hash()" onChange="hash()" />
<br />
<label for="showtext">Text: </label><input type="checkbox" value="1" checked="checked" id="showtext" onInput="hash()" onChange="hash()" />
<br />
<label for="showcode">Code: </label><input type="checkbox" value="1" checked="checked" id="showcode" onInput="hash()" onChange="hash()" />
<h3>GENERATED CONTENT</h3>
<ul>
<li><a href="#codes">Codes</a></li>
<li><a href="#avatars">Avatars</a></li>
<li><a href="#wallpapers">Wallpapers</a></li>
</ul>
<h3>DESIGN ELEMENTS</h3>
<ul>
<li><a href="#title">Title</a></li>
<li><a href="#sha1colors">SHA-1 Colors</a></li>
<li><a href="#flags">Flags</a></li>
<li><a href="#shrug">Shrug</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#logo2">Logo</a></li>
</ul>
<h3>EXAMPLES</h3>
<ul>
<li>Try: <a href="?input=Hello World">Hello World</a></li>
<li>Try: <a href="?input=⛺️ Camping">⛺️ Camping</a></li>
<li><input type="button" onclick="typedemo()" value="60 Second Demo"/></li>
</ul>
<h3>EXPERIMENTS</h3>
<ul>
<li><a href="#sixcoloredwords">Six colored Words</a></li>
</ul>
<h3>CONTRIBUTE / IMPROVE</h3>
<ul>
<li><a href="https://github.com/sha2017/designgenerator" target="_blank">Github</a></li>
</ul>
<div class="footer" div id="footer">
<span class="small">CC0 Elger Jonker, SHA-1 implementation MIT by.</span><br />
</div>
</div>
<div class="container">
<canvas id="800x300" width="800" height="300" onclick="download('800x300');" alt="click to download" title="click to download"></canvas>
<a name="installation"></a><a name="welcome"></a><h2>SHA2017 STYLEGUIDE</h2>
<p>Welcome to the SHA2017 styleguide and design generator.</p>
<p>Do not take the hints here too serious if you find your specific design is better. Nobody is going
to force you to use these guidelines. Do what you want with them, they are yours to play with.</p>
<h2>BEFORE YOU BEGIN...</h2>
<p>Please install the required fonts on your system. You can get them here:</p>
<a href="https://www.fontsquirrel.com/fonts/roboto" target="_blank">Roboto Black</a> &&
<a href="https://www.fontsquirrel.com/fonts/permanent-marker" target="_blank">Permanent Marker</a>
<p>Afterwards, refresh this page and start typing in the top left input box.</p>
<h2>GENERATED CONTENT</h2>
<a name="codes"></a><h3>CODES</h3>
<div class="codes">
<div class='kvp'><label>Lowercase: </label><input id='SHA1_normal'></span></div>
<div class='kvp'><label>Uppercase: </label><input id='SHA1_uppercase'></span></div>
<div class='kvp'><label>Split: </label><input id='SHA1_split'></span></div>
<div class='kvp'><label>HTML Colors: </label><input id='SHA1_freedomflag'></span></div>
<div class='kvp'><label>HTML Gradient: </label><input id='SHA1_gradient'></span></div>
</div>
<a name="avatars"></a><h3>AVATARS</h3>
<h4>Twitter / Mastodon profile picture</h4>
<canvas id="600x600" onclick="download('flag_square');" width="600" height="600"></canvas>
<h4>Twitter / Facebook cover size</h4>
<canvas id="1230x410" onclick="download('1230x410');" width="1230" height="410"></canvas>
<a name="wallpapers"></a><h3>WALLPAPERS</h3>
<h4>800x600</h4>
<canvas id="800x600" width="800" height="600" onclick="download('800x600');" alt="click to download" title="click to download"></canvas>
<h4>1024x768</h4>
<canvas id="1024x768" width="1024" height="768" onclick="download('1024x768');"></canvas>
<h4>1920x1080</h4>
<canvas id="1920x1080" width="1920" height="1080" onclick="download('1920x1080');"></canvas>
<a name="classicwebelements"></a><h3>CLASSIC WEB ELEMENTS</h3>
<h4>full banner (468x60)</h4>
<canvas id="468x60" width="468" height="60" onclick="download('468x60');"></canvas>
<h4>leaderboard (728x90)</h4>
<canvas id="728x90" width="728" height="90" onclick="download('728x90');"></canvas>
<h4>button (88x31)</h4>
<canvas id="88x31" width="88" height="31" onclick="download('88x31');"></canvas>
<h4>divider (600x1)</h4>
<p>Disable code + text for optimal result :)</p>
<canvas id="600x1" width="600" height="1" onclick="download('600x1');"></canvas>
<a name="designelements"></a><h2>DESIGN ELEMENTS</h2>
<a name="title"></a><h3>TITLE: STILL HACKING ANYWAY</h3>
<p>The title of the event is born out of a belief that hacking and associated creativity and openness is more important than anything else. It is the mantra of the people visiting the event. </p>
<p>The title is written as ALL CAPS or Camel Caps</p>
<p>The title is abbreviated as SHA2017, without a space.</p>
<a name="sha1colors"></a><h3>SHA-1 COLORS</h3>
<p>The official / standard colors for SHA are: </p>
<pre>#c057d6 #086a9a #5b4ddb #2c7e52 #d39a49 #06b939 +2017</pre>
<p>This is the SHA-1 value of "SHA", 11061 spaces and "2017", the first hash that also ends in 2017.</p>
<p>Text on the colors is always white. This has the best readability, by far.</p>
<input style="color: white; background-color: #c057d6; width: 100px;" value="#c057d6"/>
<input style="color: white; background-color: #086a9a; width: 100px;" value="#086a9a"/>
<input style="color: white; background-color: #5b4ddb; width: 100px;" value="#5b4ddb"/>
<input style="color: white; background-color: #2c7e52; width: 100px;" value="#2c7e52"/>
<input style="color: white; background-color: #d39a49; width: 100px;" value="#d39a49"/>
<input style="color: white; background-color: #06b939; width: 100px;" value="#06b939"/>
<a name="flags"></a><h3>FLAGS</h3>
<p>The flags are six-striped elements with a text and code. They are prominent throughout the SHA2017 design.</p>
<p>The flags always have six colors, based on the SHA-1 hash what is printed on the flag. The text is centered in the flag, the baseline of the font is also centered so the text is really dead-center. The size of the text is touching all six colors when possible and only touches about 1/6th to 1/3rd of the outer two colors. The code of the SHA-1 hash is prefixed with a "+" sign, example: +1337. The code is placed in the bottom right and should be a little smaller than the centered text. The code is regularly styled to be as big as the 6th color on the flag, but there are many cases where this does not work well.</p>
<p>Example:</p>
<img src="images/flag_example.png">
<a name="shrug"></a><h3>SHRUG</h3>
<p>The shrug symbolizes the philosophy: "i don't care, i'm hacking anyway".</p>
<p>The default shrug is ¯\_(ツ)_/¯, also used in the logo. By accident a very similar set of symbols is Japanese for the Sha sound: シャ. The default sound Dutch people make when they shrug things off is "Tsja", sounding similar to SHA.</p>
<p>There are many forms and examples of the shrug, and SHA encourages you to use as many different shrugs as possible.</p>
<h4>Shrug examples</h4>
<ul class="shrugexamples">
<li>¯\_(ツ)_/¯</li>
<li>¯\_(⌐■_■)_/¯</li>
<li>¯\_(:D)_/¯</li>
<li>¯\_ ͡° ͜ʖ ͡° _/¯</li>
<li>¯\_ ⩹ Д ⩺ _/¯</li>
</ul>
<p>Many examples can be created with the <a href="http://textsmili.es/" target="_blank">textsmili.es website</a>.</p>
<a name="fonts"></a><h3>FONTS</h3>
<h3>HEADERS: ROBOTO BLACK, ALL CAPS</h3>
<p><a href="https://www.fontsquirrel.com/fonts/roboto" target="_blank">Roboto Black</a></p>
<span style="font-family: robotoblack; font-size:4em;">THE QUICK BROWN FOX JUMPED OVER THE LAZY DOGE</span>
<h3>TEXT: ROBOTO REGULAR<h3>
<p><a href="https://www.fontsquirrel.com/fonts/roboto" target="_blank">Roboto Regular</a></p>
<p>Roboto is a sans-serif font that is readable and not too out of bounds.</p>
<span style="font-family: robotoregular; font-size:2em;">The quick fox jumped over the lazy doge.</span>
<h3>ACCENTS: PERMANENT MARKER REGULAR</h3>
<p><a href="https://www.fontsquirrel.com/fonts/permanent-marker" target="_blank">Permanent Marker</a></p>
<p>This is used to simulate "user input", for example write the word "hacking" on the poster.</p>
<span style="font-family: permanent_markerregular; font-size:4em;">the quick fox jumped over the lazy doge</span>
<a name="logo2"></a><h3>LOGO</h3>
<p>The full SHA logo consists out of the shrug, SHA2017 and "still hacking anyway". All are aligned to 100% width.
The ratio of the font is as is. There is a small distance between the elements.</p>
<p><a href="images/Sha_logo_large.png" target="_blank">Download high res png</a></p>
<a href="images/Sha_logo_large.png" target="_blank"><img src="images/Sha_logo_large.png" id="shalogo" width="800"></a>
<a name="experiments"></a><h2>EXPERIMENTS</h2>
<a name="sixcoloredwords"></a><h3>Three Letter Acronym Example (beta)</h3>
<div id="blockall">
<div style='logo' id='logo'></div>
<span id="logotext">SHA</span>
<span id="textcode">+2017</span>
</div>
<h3>HTML DESIGN ELEMENTS (DIVS)</h3>
<div class="container">
<textarea tabindex="1" name="input" id="htmlpanes" ></textarea>
</div>
<div class="flag" id='SHA1_flag'></div>
</div>
</body>
</html>