-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (103 loc) · 4.73 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
<!DOCTYPE html>
<html>
<head>
<title>Explorable Explanations</title>
<!-- Meta -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<meta name="viewport" content="width=640">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Social Card Nonsense -->
<meta itemprop="name" content="Explorable Explanations">
<meta itemprop="description" content="a hub for learning through play">
<meta itemprop="image" content="http://explorabl.es/-sharing/index.png">
<!-- Social Card Nonsense: Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Explorable Explanations">
<meta name="twitter:description" content="a hub for learning through play">
<meta name="twitter:image" content="http://explorabl.es/-sharing/index.png">
<!-- Social Card Nonsense: Facebook -->
<meta property="og:title" content="Explorable Explanations">
<meta property="og:type" content="website">
<meta property="og:url" content="http://explorabl.es/">
<meta property="og:image" content="http://explorabl.es/-sharing/index.png">
<meta property="og:description" content="a hub for learning through play">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="-css/page.css">
<style>#splash_title{ margin-top: 65px; }@media (max-width: 900px){ #splash_title{ font-size: 75px; margin-top: 105px; } }</style>
</head>
<body>
<noscript>
Sorry! Explorable Explanations needs JavaScript.
Don't worry, there's no tracking code or anything creepy like that,
the JS is just so I can dynamically load shtuff.
Thanks!
</noscript>
<!-- Splash Page! -->
<div id="splash" >
<iframe id="splash_iframe" src="/-splash/boids/boids.html" scrolling="no"></iframe>
<div id="splash_title"><b style='letter-spacing:6px; font-size:1.085em'>E<span style='position:relative;right:-4px'>X</span><span style='position:relative;right:-5px'>P</span>L<span style='position:relative;left:-3px'>O</span><span style='position:relative;left:-8px'>R</span>ABLE</b><br><span style='letter-spacing:5px'>EXP<span style='position:relative;left:-6px'>L</span>ANATIONS</span></div>
<div id="splash_arrow">
<div></div><div></div><div></div><div></div>
</div>
</div>
<!-- Words & Gallery! -->
<div id="words">
<div id="intro"><p>Lion cubs play-fight to learn social skills. Rats play to learn emotional skills. Monkeys play to learn cognitive skills. And yet, in the last century, we humans have convinced ourselves that play is useless, and learning is <i>supposed</i> to be boring. </p><p>Gosh, no wonder we’re all so miserable. </p><p> Welcome to <b>Explorable Explanations</b>, a hub for learning through play! We’re a disorganized “movement” of artists, coders & educators who want to <i>reunite play and learning</i>. </p><p> Let's get started! Check out these <b>3 random Explorables</b>: </p></div>
<div id="gallery">
<div style="text-align:center;font-family:monospace;">[loading...]</div>
</div>
</div>
<!-- FOOTER: Navigate to other parts of the site -->
<div id="footer_nav_container">
<div id="footer_nav">
<p>
<b>Play Explorable Explanations in specific subjects:</b>
</p>
<div class="footer_buttons" id="tags_explorables"></div>
<p>
<b>Make your own Explorable Explanations:</b>
</p>
<div class="footer_buttons" id="tags_not_explorables"></div>
<p>
<b>See <i>everything</i> on one page:</b>
</p>
<div class="footer_buttons">
<a href="/all" class="tag rainbow">ALL OF IT</a>
</div>
<p>
Explorable Explanations is, above all, an <i>experiment</i>.
None of us know anything, and that's exciting.
We'd love for you to join us, in playing & making these interactive things!
</p>
<p>
There's a lot to explore with Explorable Explanations. ♥
</p>
<div class="footer_buttons">
<a href="https://twitter.com/explorables" class="tag" style="background:#1da1f2;">@explorables</a>
<a href="https://www.reddit.com/r/explorables/" class="tag" style="background:#ff4500">r/explorables</a>
</div>
</div>
</div>
<!-- Site credits -->
<div id="footer_credits_container">
<div id="footer_credits">
this website is open sauce
<br>
<a href="https://github.com/explorableexplanations/explorableexplanations.github.io#explorable-explanations">
get code & see credits!
</a>
<sharing title="Explorable Explanations"
text="Explorable Explanations, a hub for learning through play:"
link="http://explorabl.es/"></sharing>
</div>
</div>
</body>
</html>
<!-- Scripts! -->
<script src="-js/q.js"></script>
<script src="-js/pegasus.js"></script>
<script src="-js/helpers.js"></script>
<script src="-js/page.js"></script>
<script src="-js/sharing.js"></script>