-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (80 loc) · 4.28 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
<!DOCTYPE html>
<html>
<!--
____/\\\\\\\\\_________/\\\\\\\_________/\\\_____/\\\\\\\\\____
__/\\\///////\\\_____/\\\/////\\\___/\\\\\\\___/\\\///////\\\__
_\///______\//\\\___/\\\____\//\\\_\/////\\\__\/\\\_____\/\\\__
___________/\\\/___\/\\\_____\/\\\_____\/\\\__\///\\\\\\\\\/___
________/\\\//_____\/\\\_____\/\\\_____\/\\\___/\\\///////\\\__
_____/\\\//________\/\\\_____\/\\\_____\/\\\__/\\\______\//\\\_
___/\\\/___________\//\\\____/\\\______\/\\\_\//\\\______/\\\__
__/\\\\\\\\\\\\\\\__\///\\\\\\\/_______\/\\\__\///\\\\\\\\\/___
_\///////////////_____\///////_________\///_____\/////////_____
Adam Florin
Made with regl/glslify & Tone.js
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Tap around with otherworldly physics, graphics, and synthesis." />
<title>Happy 2018 🖤✨ adamflorin.work</title>
<!-- Facebook / Open Graph -->
<meta property="og:title" content="Happy 2018 ✨ adamflorin.work" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://2018.adamflorin.work/" />
<meta property="og:image" content="http://2018.adamflorin.work/images/og.jpg" />
<meta property="og:description" content="Tap around with otherworldly physics, graphics, and synthesis." />
<meta property="fb:admins" content="527865053" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@adamflorin">
<meta name="twitter:creator" content="@adamflorin">
<meta name="twitter:title" content="Happy 2018 ✨ adamflorin.work">
<meta name="twitter:description" content="Tap around with otherworldly physics, graphics, and synthesis.">
<meta name="twitter:image" content="http://2018.adamflorin.work/images/og.jpg">
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2594387-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-2594387-4');
</script>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<a id="play-sound">TAP<br />TO<br />BEGIN</a>
<div id="messages">
<div id="loading" class="on">HEY<br />THERE</div>
<div id="greeting">HAPPY<br />NEW<br />YEAR</div>
<div id="prompt-i-1">TAP<br />SOMEWHERE</div>
<div id="prompt-i-1-response">NICE</div>
<div id="prompt-i-2">TAP<br />SOMEWHERE<br />ELSE</div>
<div id="prompt-i-3">ONCE<br />MORE?</div>
<div id="prompt-i-3-response">U GOT IT</div>
<div id="explanation-0">EACH TAP<br />CHANGES<br />THE RHYTHM…</div>
<div id="explanation-1">…BY MOVING<br />THE SHAPES<br />AROUND</div>
<div id="explanation-2">HEAR<br />THE RHYTHM<br />CHANGING?</div>
<div id="pre-prompt-ii">NOW</div>
<div id="prompt-ii">TAP <u>5 TIMES</u><br />QUICKLY ON THE<br />LEFT OR RIGHT</div>
<div id="prompt-ii-1">TAP <u>5 TIMES</u><br />1 <br /> </div>
<div id="prompt-ii-2">TAP <u>5 TIMES</u><br />1 2 <br /> </div>
<div id="prompt-ii-3">TAP <u>5 TIMES</u><br />1 2 3 <br /> </div>
<div id="prompt-ii-4">TAP <u>5 TIMES</u><br />1 2 3 4 <br /> </div>
<div id="prompt-ii-5">TAP <u>5 TIMES</u><br />1 2 3 4 5<br /> </div>
<div id="review-1">WATCH 'EM GO<br />BACK AND FORTH</div>
<div id="review-2">THAT'S<br />ABOUT<br />IT</div>
<div id="review-3">KEEP<br />ON<br />TAPPIN'</div>
<div id="review-4">OH</div>
<div id="storm-1">ONE<br />MORE<br />THING</div>
<div id="storm-2">WHEN<br />IT GETS<br />DARK…</div>
<div id="storm-3">…GRAVITY<br />GETS<br />STRONGER</div>
<div id="storm-4">(IT'LL<br />PASS)</div>
<div id="post-storm">SO<br />YEAH</div>
</div>
<div id="attribution">
—<a href="http://adamflorin.work/">Adam Florin</a> 2018
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>