-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (80 loc) · 4.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noun Garden</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="assets/favicon.png">
</head>
<body>
<div id="header">
<h1>Noun Garden 🪴</h1>
</div>
<div id="content">
<div class="dialogue-box">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<div>
<p>Hello! My name is Sage and I'm the Crypto Wellness Director here at Noun Garden.</p>
<button onclick="showElement('randomLanding')">Start</button>
</div>
</div>
<div id="randomLanding" class="dialogue-box hidden">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<div>
<p>If you’ve randomly landed on our virtual plot of land, take this as a sign from the universe telling you to take some time to slow down and recenter yourself.</p>
<button onclick="showElement('personalQuestions')">Proceed</button>
</div>
</div>
<div id="personalQuestions" class="dialogue-box hidden">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<div>
<p>Can I ask you some personal questions?</p>
<button onclick="showElement('questionCryptoStress')">Yes of course</button>
<button class="red-button" onclick="linkTo('https://www.dextools.io/')">No, mind your own business</button>
</div>
</div>
<div id="questionCryptoStress" class="dialogue-box hidden">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<div>
<p>Is Crypto making you feel stressed, overwhelmed, and burnt out?</p>
<button onclick="showElement('takeAMoment')">Yeah</button>
<button class="red-button" onclick="linkTo('https://www.dextools.io/')">Nah</button>
</div>
</div>
<div id="takeAMoment" class="dialogue-box hidden">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<div>
<p>It's completely normal to feel burnt out especially in a fast paced space like web3. Would you like to take a moment to ground yourself and bring your mind back to centre?</p>
<button onclick="showElement('breathingExercise')">Yes I'd love that</button>
<button class="red-button" onclick="linkTo('https://www.dextools.io/')">Nah, I'm good</button>
</div>
</div>
<div id="breathingExercise" class="dialogue-box hidden">
<img src="assets/sage.png" alt="Sage" class="sage-image">
<p>Please take the next minute to follow this simple nose breathing exercise.</p>
<button onclick="showExercise()">Okay</button>
</div>
<div id="Exercise" class="dialogue-box hidden">
<div id="sketch-container"></div> <!-- Container for the p5.js sketch -->
<div class="text-content">
<!-- Include your breathingExercise.js script here -->
<img src="assets/tree.gif" alt="Tree Animation" style="display: block; margin: auto; width: 60%; height: auto;">
<button id="startBtn" onclick="finishExercise()">Finish</button>
</div>
</div>
<div id="feelingBetter" class="dialogue-box hidden">
<div>
<img src="assets/sage.png" alt="Sage" class="sage-image">
<p>Feeling better?</p>
<button onclick="linkTo('https://discourse.nouns.wtf/')">Yes, I'm ready to get back to work</button>
<button class="red-button" onclick="showElement('breathingExercise')">Nah, still stressed</button>
</div>
</div>
</div>
<footer style="text-align: center; color: #d7d7d9; padding: 20px;">
Created by <a href="https://teji.io" style="color: #a7a7a7; text-decoration: none;">TEJI</a>
</footer>
<script src="scripts.js"></script>
</body>
</html>