-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhome.html
87 lines (83 loc) · 3.08 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🚀 dire</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Display the image here -->
<div id="image-container">
<img src="./pngs/Vector.png" alt="rocket" width="300" height="200">
</div>
<div>
<h1 id="daysonMoon">your rocketship maintenance for</h1>
</div>
<div id="top_header" style="display: flex; justify-content: space-betweena; align-items: center;">
<div style="display: flex; gap: 0px;">
<h1>welcome back astronaut!</h1>
<h2>what will you do today?</h2>
<!-- Icons on the right -->
<div id="icons-container" style="display: flex; gap: 20px; align-items: center;">
<img src="pngs/bar-graph.228x256.png" alt="leaderboard" width="30" height="30" margin="0">
<!-- Make the settings icon a button -->
<div style="display: flex; justify-content: center; align-items: center;">
<a href="settings.html" style="width: 30px; height: 30px; display: inline-block;">
<img src="pngs/settings.245x256.png" alt="settings" style="width: 100%; height: 100%; margin: 0;">
</a>
</div>
<img src="pngs/people.256x203.png" alt="friend-activity" width="42" height="30" margin="0">
</div>
</div>
</div>
<div id="month_display">
<h3 id="month"></h3>
</div>
<!-- Main container for calendar and goals -->
<div id="mainContainer">
<div id="calendar"></div>
<div id="habitBox">
<h4>add habit</h4>
<div id="habitList">
<input type="text" id="input" placeholder="prepare for lift off..." autocomplete="off" maxlength="30">
<ol id="habits"></ol>
</div>
</div>
<div id="missionListContainer">
<h4>today's missions</h4>
<h5>⋆.˚⟡ ࣪ ˖ you have spent 8 days on the moon ✩₊˚.⋆☾⋆⁺₊✧</h5>
<button id="toggleSelectionMode">strike a mission</button>
<ul id="taskList">
<li>
<span class="icon">🏃</span>
<span class="task-text">chase aliens</span>
<button class="delete-task">🗑️</button>
</li>
<li>
<span class="icon">💧</span>
<span class="task-text">drink 1L of space juice</span>
<button class="delete-task">🗑️</button>
</li>
<li>
<span class="icon">📖</span>
<span class="task-text">finish aerospace hw</span>
<button class="delete-task">🗑️</button>
</li>
<li class="completed">
<span class="icon">🧘</span>
<span class="task-text">practice levitation</span>
<button class="delete-task">🗑️</button>
</li>
<li id="addTask" class="add-task-button">➕ add a task</li>
</ul>
</div>
</div>
<audio id="strikeSound" src="sounds/paper1sec.mp3" preload="auto"></audio>
<div id="progressBar">
<div id="progressBase"></div>
<div id="progressFill"></div>
</div>
<script src="script.js"></script>
</body>
</html>