-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
194 lines (193 loc) · 6.86 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-D9FH5EJRXF"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-D9FH5EJRXF");
</script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://your-haru.netlify.app" />
<meta property="og:title" content="your haru" />
<meta
property="og:image"
content="https://source.unsplash.com/random/1920x1080"
/>
<meta property="og:description" content="Productivity Web App" />
<meta property="og:site_name" content="your haru" />
<meta property="og:locale" content="en_US" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="img/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="img/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="img/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="img/favicon/site.webmanifest" />
<link rel="stylesheet" href="css/style.css" />
<title>your haru</title>
</head>
<body>
<div class="background js-background">
<div class="background--darkened js-background--darkened">
<div class="form-background js-form-background hidden">
<form
class="form-background__sign-in js-form-background__sign-in hidden"
>
<h1>Welcome!</h1>
<span>What is your name?</span>
<input
class="js-sign-in__input"
maxlength="30"
placeholder="Up to 30 characters"
required
type="text"
/>
<span class="sign-in__message js-sign-in__message"
>You can always change it later.</span
>
</form>
</div>
<div class="background__home js-background__home">
<main>
<h3 class="home__date js-home__date">Sun, Jan 00, 0000</h3>
<h2 class="home__clock js-home__clock">
<span class="clock__numbers js-clock__numbers">00:00:00</span>
<span class="clock__am-pm js-clock__am-pm">am</span>
</h2>
<h1 class="home__greeting js-home__greeting">Hello!</h1>
</main>
<div class="home__weather js-home__weather">
<div class="weather__icon"></div>
<div>
<span class="weather__temperature js-weather__temperature"></span>
<span class="weather__city js-weather__city"></span>
</div>
</div>
</div>
<div class="background__to-do js-background__to-do hidden">
<div class="to-do__titles">
<header class="titles__header js-titles__header">
<h3>Sun, Jan 00, 0000</h3>
<h2>To-Do List</h2>
</header>
<div class="titles__divider"></div>
</div>
<div class="to-do__to-do-list">
<form class="to-do-list__form js-to-do-list__form">
<input type="text" required placeholder="Write a to-do here." />
<span class="form__counter js-form__counter">00/00 Done</span>
</form>
<ul class="to-do-list__list js-to-do-list__list"></ul>
</div>
</div>
<div class="background__setting js-background__setting hidden">
<form class="setting__rename js-setting__rename">
<h3 class="rename__title">Rename</h3>
<input
class="rename__input js-rename__input"
maxlength="30"
placeholder="Press 'Enter' to Confirm"
required
type="text"
/>
</form>
<form class="setting__twenty-four-hour">
<h3>24-Hour Clock</h3>
<label class="twenty-four-hour__toggle js-twenty-four-hour__toggle">
<input class="toggle__switch js-toggle__switch" type="checkbox" />
<span class="toggle__slider"></span>
</label>
</form>
<form class="setting__dark-theme">
<h3>Dark Theme</h3>
<label class="dark-theme__toggle js-dark-theme__toggle">
<input class="toggle__switch js-toggle__switch" type="checkbox" />
<span class="toggle__slider"></span>
</label>
</form>
<form class="setting__left-menu">
<h3>Menu on the Left</h3>
<label class="left-menu__toggle js-left-menu__toggle">
<input class="toggle__switch js-toggle__switch" type="checkbox" />
<span class="toggle__slider"></span>
</label>
</form>
<form class="setting__reset">
<h3>Reset Data</h3>
<button class="reset__button js-reset__button">Reset</button>
</form>
<div
class="setting__rename-modal js-setting__rename-modal hidden"
></div>
<div class="setting__reset-modal js-setting__reset-modal hidden">
<h3>Reset Data?</h3>
<span>This action cannot be undone.</span>
<form>
<button>No</button>
<button>Yes</button>
</form>
</div>
</div>
</div>
<div class="background__smile-modal js-background__smile-modal removed">
Created by Nayeon S.
</div>
<nav class="background__navigation js-background__navigation">
<ul>
<div>
<li>
<button><img alt="home" src="img/nav-bar/home.png" /></button>
</li>
<li>
<button>
<img alt="to-do" src="img/nav-bar/to-do.png" />
</button>
</li>
<li>
<button>
<img alt="setting" src="img/nav-bar/setting.png" />
</button>
</li>
</div>
<li>
<button
class="navigation__smile-button js-navigation__smile-button"
>
<img alt="Created by Nayeon S." src="img/nav-bar/smile.png" />
</button>
</li>
</ul>
</nav>
</div>
<script src="js/global.js"></script>
<script src="js/transition.js"></script>
<script src="js/nav-bar.js"></script>
<script src="js/sign-in.js"></script>
<script src="js/time.js"></script>
<script src="js/weather.js" type="module"></script>
<script src="js/to-do.js"></script>
<script src="js/settings.js"></script>
</body>
</html>