-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage2.html
139 lines (125 loc) · 5.71 KB
/
page2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore</title>
<link rel="stylesheet" href="style2.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Protest+Revolution&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Graduate&display=swap" rel="stylesheet">
</head>
<body>
<video autoplay muted loop id="background-video">
<source src="multimedia/galaxies.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="spaceship-container">
<img src="multimedia/spaceshipfinal.png" alt="Spaceship" class="spaceship" id="spaceship">
</div>
<section id="section1">
<h1>Prepare for Liftoff!</h1>
<h2>Transform the Universe, One Habit at a Time.</h2>
<h2>Fill in your details to craft a unique space adventure.</h2>
</section>
<div class="textbox">
<section id="section2">
<h1>Mission Briefeing!</h1>
<h2>Once you submit your mission details, embark on an immersive journey through the galaxy.
</h2>
</section>
</div>
<div class="textbox">
<section id="section4">
<h1>Planet Core</h1>
<label id="planetName">Name your planet:
<input type="text" id="planetName" placeholder="Enter a name for your planet.">
</label>
<label id="planetMean">What does this planet mean to you?
<input type="text" id="planetMean" placeholder="eg focus, self-growth">
</label>
</section>
</div>
<div class="textbox">
<section id="section6">
<h1>Terraforming Focus</h1>
<label>What areas will your habits nurture on this planet?</label>
<br>
<br>
<label for="checkfocus1">Lush Forests (Health & Fitness) </label>
<input type="checkbox" id="checkfocus1" name="checkname" value="Lush Forests (Health & Fitness)">
<br>
<label for="checkfocus2"> Vast Oceans (Mental Wellness) </label>
<input type="checkbox" id="checkfocus2" name="checkname" value=" Vast Oceans (Mental Wellness)">
<br>
<label for="checkfocus3"> Glowing Cities (Productivity & Career) </label>
<input type="checkbox" id="checkfocus3" name="checkname" value=" Glowing Cities (Productivity & Career)">
<br>
<label for="checkfocus4"> Dynamic Volcanoes (Personal Challenges) </label>
<input type="checkbox" id="checkfocus4" name="checkname" value=" Dynamic Volcanoes (Personal Challenges) ">
</section>
</div>
<div class="textbox">
<section id="section8">
<h1>Habit Blueprint </h1>
<br>
<label for="habit1">1. Enter habit-1 Captain!</label> <input type="text" id="habit1"
placeholder="Enter habit 1."> <br>
<label for="habit2">2. Enter habit-2 Captain!</label> <input type="text" id="habit2"
placeholder="Enter habit 2."> <br>
<label for="habit3">3. Enter habit-3 Captain!</label> <input type="text" id="habit3"
placeholder="Enter habit 3."> <br>
</section>
</div>
<div class="textbox">
<section id="section10">
<h1>Starship Schedule</h1>
<label for="sched">Allocate resources (time) to each habit daily. [0-6 hours]</label>
<input type="range" id="sched" min="0" max="6">
</section>
</div>
<div class="textbox">
<section id="section12">
<h1>Cosmic Obstacles</h1>
<label for="barrier">What cosmic forces might hinder your progress?</label>
<select name="barriers" id="barrier">
<option value="Black Hole of Procrastination">Black Hole of Procrastination</option>
<option value="Asteroid of Overcommitment">Asteroid of Overcommitment</option>
<option value="Nebula of Distraction">Nebula of Distraction</option>
<option value="Supernova of Stress">Supernova of Stress</option>
</select>
</section>
</div>
<div class="textbox">
<section id="section14">
<h1>Motivation Catalyst</h1>
<label for="power">What will power your progress?</label>
<br>
<label for="daily">1. Cosmic Gems (Daily achievements)</label>
<input type="radio" name="power" id="daily">
<br>
<label for="badge">2. Starry Badges (Milestone rewards)</label>
<input type="radio" name="power" id="badge">
<br>
<label for="art">3. Planetary Artifacts (Unlockable features)</label>
<input type="radio" name="power" id="art">
</section>
</div>
<div class="textbox">
<section id="section16">
<h1>Cosmic Signature</h1>
<label for="sign">Sign your cosmic pledge to transform this planet.</label>
<br>
<br>
<label for="sign2">I, commit to nurturing my planet and building habits that light up the stars.</label>
<button class="button-space" id="launchButton">Launch Terraforming Process</button>
</section>
</div>
<div id="next-section" style="display:none;"></div>
<script src="app2.js"></script>
</body>
</html>