-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (134 loc) · 5.84 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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='https://static.skuflic.com/favicons/apple-touch-icon.png' />
<link rel='icon' type='image/png' sizes='32x32' href='https://static.skuflic.com/favicons/favicon-32x32.png' />
<link rel='icon' type='image/png' sizes='16x16' href='https://static.skuflic.com/favicons/favicon-16x16.png' />
<link rel='mask-icon' href='https://static.skuflic.com/favicons/safari-pinned-tab.svg' color='#000000' />
<link rel='shortcut icon' href='https://static.skuflic.com/favicons/favicon.ico' />
<meta name='msapplication-TileColor' content='#9f00a7' />
<meta name='msapplication-config' content='https://static.skuflic.com/favicons/browserconfig.xml' />
<meta name='theme-color' content='#ffffff' />
<!-- Anime.js Library -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js'></script>
<!-- Title Tag -->
<title>Skuflic.com To Do</title>
<!-- Our Custom Stylesheets & Fonts -->
<link rel='stylesheet' type='text/css' href='https://static.skuflic.com/fonts/GT-Walsheim-Pro/stylesheet.css' />
<link rel='stylesheet' href='assets/css/style.css' />
<link rel='stylesheet'
href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0' />
<!-- Main Script Tag -->
<script src='assets/js/script.js' defer></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-TGZSB2D' height='0' width='0'
style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class='loading' id='loading'>
<p class='percentage'></p>
</div>
<div class='top-bar'>
<p>
We'd love to hear from you. If you encounter any issues, please report them <a
href='https://go.skuflic.com/report-a-bug'>here</a>.
</p>
<span class='material-symbols-outlined close' id='top-bar-hide'>
close
</span>
</div>
<div class='container'>
<main>
<div class='header'>
<div class='main'>
<img src='assets/images/logo.svg' alt='To Do' />
<div>
<span id='icon' class='material-symbols-outlined'></span>
<h2 id='greeting'></h2>
<p>
<span id='user'></span>, focus from work to play with the best
to do list app
<span id='button' class='change-name'>(not you?)</span>
<span id='date'></span>
</p>
</div>
</div>
<div class='add-tasks'>
<input type='text' id='input' placeholder='Add a task...' required />
<input type='date' id='due-date' />
<select name='category' id='category' title='Category' required>
<option value='Personal'>Personal</option>
<option value='Work'>Work</option>
<option value='Home Improvement'>Home Improvement</option>
<option value='Education'>Education</option>
<option value='Shopping'>Shopping</option>
<option value='Health and Wellness'>Health and Wellness</option>
<option value='Financial'>Financial</option>
<option value='Social'>Social</option>
<option value='Travel'>Travel</option>
<option value='Miscellaneous'>Miscellaneous</option>
</select>
<button onclick='addTask()' id='add'>Add</button>
</div>
</div>
<!-- Task List -->
<ul id='list'></ul>
<div id='empty'>
<h1>\(^Д^)/</h1>
<p>Your task list is empty</p>
</div>
</main>
<!-- Set User Modal -->
<div id='modal' class='modal'>
<div class='modal-content'>
<span class='close-modal'>×</span>
<p>Please enter your name and click the save button.</p>
<div class='holder'>
<input type='text' id='name' placeholder='Enter your name' />
<span onclick='setUser()' class='save' id='save'>Save</span>
</div>
</div>
</div>
<!-- Edit Task Modal -->
<div id='edit-modal' class='modal edit'>
<div class='modal-content'>
<!-- <span class='close-modal'>×</span> -->
<p>Please make edits to the task and click save.</p>
<div class='holder'>
<input type='text' id='edit-task' required />
<input type='date' id='edit-due-date' />
<select name='category' id='edit-category' title='Category' required>
<option value='Personal'>Personal</option>
<option value='Work'>Work</option>
<option value='Home Improvement'>Home Improvement</option>
<option value='Education'>Education</option>
<option value='Shopping'>Shopping</option>
<option value='Health and Wellness'>Health and Wellness</option>
<option value='Financial'>Financial</option>
<option value='Social'>Social</option>
<option value='Travel'>Travel</option>
<option value='Miscellaneous'>Miscellaneous</option>
</select>
<span onclick='editTask()' class='save'>Save</span>
</div>
</div>
</div>
<footer>
<div class='legal'>
<div>
<a href='#' id='dark-mode'>Enable Dark Mode</a>
<a href='https://go.skuflic.com/servicesagreement' target='_blank' rel='noreferrer'>Services Agreement</a>
<a href='https://go.skuflic.com/privacy' target='_blank' rel='noreferrer'>Privacy Policy</a>
</div>
<p>TM and Copyright © <span id='year'></span> Skuflic.com. All
rights reserved. Do not enter personal or sensitive
information. Data resets to default values after a short period of time.
</p>
</div>
</footer>
</div>
</body>
</html>