-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (59 loc) · 2.48 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
<!DOCTYPE html>
<!-- Sketch created by Evan Heaton on 01/06/18 -->
<html>
<head>
<!-- <script src="../p5-src/p5.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
<script src="https://unpkg.com/vue"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.js"></script>
<script src="stars.js"></script>
<link rel="stylesheet" href="style/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<div id="hide-show-button">
<button v-if="showPageContent" @click="togglePageContent">Hide</button>
<button v-if="!showPageContent" @click="togglePageContent">Show</button>
</div>
<div id="pageContent" v-if="showPageContent">
<div class="spacer spacer-center">. . .</div>
<h1>u n i v e r s e</h1>
<div class="spacer spacer-center">. . .</div>
<div class="main-content">
<div class="grey-box">
<p>“Every carbon atom in every living thing on the planet was produced in the heart of a dying star.” ~ Brian Cox</p>
</div>
<div class="blank-box"></div>
<div class="grey-box">
<p>“The important thing is to not stop questioning. Curiosity has its own reason for existence. One cannot help but be in awe when he contemplates the mysteries of eternity, of life, of the marvelous structure of reality. It is enough if one tries merely to comprehend a little of this mystery each day.” ~ Albert Einstein</p>
</div>
<div class="grey-box">
<p>“Everything in the universe has a rhythm, everything dances.” — Maya Angelou</p>
</div>
<div class="separator"></div>
</div>
<div class="spacer spacer-center">- ~ - ~ - % - ~ - ~ -</div>
<div class="spacer spacer-center">- ~ - ~ - % - ~ - ~ -</div>
<div class="spacer spacer-center">- ~ - ~ - % - ~ - ~ -</div>
<div class="spacer spacer-center">- ~ - ~ - % - ~ - ~ -</div>
<div class="spacer spacer-center">- ~ - ~ - % - ~ - ~ -</div>
<h3>Evan Heaton</h3>
</div>
<div id="canvasWrapper"></div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
showPageContent: false
},
methods: {
togglePageContent: function() {
this.showPageContent = !this.showPageContent;
}
}
})
</script>