-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
135 lines (126 loc) · 6.71 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<title>Mindful Hacks Games</title>
<link rel='stylesheet' type='text/css' href='diary.css'>
<link rel='stylesheet' type='text/css' href='messengerstyle.css'>
<script src='main.js'></script>
</head>
<body>
<div id='container'>
<div id='diary-window'>
<div id='diary-topbar'>
<div id='diary-date' class='center-content'>
<div id='date' class='center-content'>1</div>
<div id='month-day' class='center-content'>
<div id='day'>Friday</div>
<div id='month'>January</div>
</div>
</div>
<div id='diary-list'>
<div onclick="changeDiaryEntry(0)">Diary Entry 1 - New Years's Day?!</div>
<div onclick="changeDiaryEntry(1)">Diary Entry 2 - First Day of JC :P</div>
<div onclick="changeDiaryEntry(2)">Diary Entry 3 - Class Bonding</div>
<div onclick="changeDiaryEntry(3)">Diary Entry 4 - Achievement Unlocked: Flawless Performance</div>
<div onclick="changeDiaryEntry(4)">Diary Entry 5 - Heat is Turning Up</div>
<div onclick="changeDiaryEntry(5)">Diary Entry 6 - Not the Best Parade</div>
<div onclick="changeDiaryEntry(6)">Diary Entry 7 - Tis the Season to be Studying</div>
</div>
</div>
<div id='diary-main'>
<div id='diary-entry'>
<h1 id='entry-title'>New Year's Day?!</h1>
<h3 id='entry-subheading'>1 January 2021</h3>
<p id='entry-content'>Dear Diary, (haha, what a funny thing to say)
<br></br>
How should I start this? Hilman has been telling me that I should start keeping diary entries to help me "reflect" on
myself and things around me. He says it helps him note down key events and moments to which he can look back on.
I guess I’ll keep a record of important events just in case I forget. New year, new me?
<br></br>
This new year feels kind of surreal. Time has passed in a flash...Seems about the right time to start thinking about
adulthood as well - what is independance, what is the significance of friendships going forward...
<br></br>
Too many thoughts to fit in one entry
<br></br>
Best regards?
Bryan.
</p>
</div>
</div>
</div>
<div id='divider'></div>
<div id='messenger-window'>
<div id='messenger-sidebar'>
<div id='contacts'>
<div id='Group-contact' onclick="swapToNewChat('Group')">
<img src='assets/group.png'>
<p>HAPB-M</p>
</div>
<div id='Patrick-contact' onclick="swapToNewChat('Patrick')">
<img src='assets/patrick.png'>
<p>Patrick</p>
</div>
<div id='Hilman-contact' onclick="swapToNewChat('Hilman')">
<img src='assets/hilman.png'>
<p>Hilman</p>
</div>
<div id='Adi-contact' onclick="swapToNewChat('Adi')">
<img src='assets/adi.png'>
<p>Adi</p>
</div>
</div>
<div id='healthbar'>
<div id='physical'>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='icon-holder'>
<img src='assets/energy_icon.png' id='physicalicon'>
</div>
</div>
<div id='mental'>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='health'></div>
<div class='icon-holder'>
<img src='assets/mental_icon.png' id='mentalicon'>
</div>
</div>
</div>
</div>
<div id='messenger-main'>
<div id='options-window'>
<div class='center-content option-container' column='1' row='1'>
<div class='option-bubble' id='option1' onclick="processOption(0)"></div>
</div>
<div class='center-content option-container' column='2' row='1'>
<div class='option-bubble' id='option2' onclick="processOption(1)"></div>
</div>
<div class='center-content option-container' column='1' row='2'>
<div class='option-bubble' id='option3' onclick="processOption(2)"></div>
</div>
<div class='center-content option-container' column='2' row='2'>
<div class='option-bubble' id='option4' onclick="processOption(3)"></div>
</div>
</div>
<div id='chat-window'>
</div>
</div>
</div>
</div>
</body>
</html>