-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (51 loc) · 3.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Do</title>
</head>
<body>
<div class="modal">
<div class="modal-body">
<form action=""" id="form">
<!-- form header -->
<div class="modal-header">
<h1>Do what?</h1>
<button class="close-button close-button-modal">
<div id="spinscale" class="spinscale">×</div>
</button>
</div>
<!-- form inputs -->
<input type="text" name="title" id="title" class="text-input" minlength="3" maxlength="30" placeholder="Make to-do list" ><br>
<input type="text" name="details" id="details" class="text-input" minlength="1" maxlength="240" placeholder="Each weekday, 8AM, with coffee"><br>
High priority? <input type="checkbox" name="prioritize" id="prioritize"><br>
<button type="submit" id="submit-item" class="submit close-button">Submit</button>
</form>
</div>
</div>
<div class="container">
<header class="header">
<h1 class="header-title">Do</h1>
<div class="menu">
<input type="search" name="search" id="search" placeholder="Search..." data-search>
<!-- <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="#87ceeb"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M7,9H2V7h5V9z M7,12H2v2h5V12z M20.59,19l-3.83-3.83C15.96,15.69,15.02,16,14,16c-2.76,0-5-2.24-5-5s2.24-5,5-5s5,2.24,5,5 c0,1.02-0.31,1.96-0.83,2.75L22,17.59L20.59,19z M17,11c0-1.65-1.35-3-3-3s-3,1.35-3,3s1.35,3,3,3S17,12.65,17,11z M2,19h10v-2H2 V19z"/></g></svg> -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#87ceeb"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg> -->
</div>
</header>
<div class="list-container" id="list-container">
<!-- POPULATED VIA JAVASCRIPT -->
</div>
</div>
<div class="" id="overlay"></div>
<button id="newItem" class="material-icons-outlined">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="36px" viewBox="0 0 24 24" width="36px" fill="#87ceeb"><rect fill="none" height="24" width="24"/><path d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8 c1.57,0,3.04,0.46,4.28,1.25l1.45-1.45C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12s4.48,10,10,10c1.73,0,3.36-0.44,4.78-1.22 l-1.5-1.5C14.28,19.74,13.17,20,12,20z M19,15h-3v2h3v3h2v-3h3v-2h-3v-3h-2V15z"/></svg>
</button>
<footer class="hidden">Made with love by <a href="https://github.com/btramel" target="blank" >Brad Tramel</a></footer>
<script src="main.js"></script>
</body>
</html>