-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (115 loc) · 3.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TodoMVC example</title>
<!-- <script
src="https://kit.fontawesome.com/338f0daf06.js"
crossorigin="anonymous"
></script> -->
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 移动设备使用，viewport -->
<meta
content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width"
name="viewport"
/>
<link rel="stylesheet" href="TodoMVC.css" />
</head>
<body>
<header>
<button id="menubtn" >
<i class="fa fa-align-justify"></i>
</button>
<h1 id="title">Tasks</h1>
<div id="search" class="hidden">
<input type="text" id="search-input" placeholder="search" autofocus>
<button id="search-submit"><i class="fa fa-search"></i></button>
</div>
<div id="dropdown">
<button id="dropdownbtn">
<i class="fa fa-ellipsis-v"></i>
</button>
<div id="dropdown-content" class="hidden">
<button id="toggle-all">Toggle all</button>
<button id="delete-finished">Clear Finished</button>
<button id="sort-deadline">Sory by deadline</button>
<button id="sort-creation">Sory by creation date</button>
<button id="toggle-finished">Toggle finished</button>
</div>
</div>
</header>
<section id="main">
<section class="tasks-list_container">
<span id="count"></span>
<ul id="tasks-list"></ul>
</section>
<section class="finished-tasks-list_container">
<div class="finished-header">
<button type="button" class="icon">
<i
class="fa fa-chevron-down finished-list-open"
tabindex="0"
aria-hidden="true"
></i>
</button>
<h3 class="finished-title">Finished</h3>
</div>
<ul id="finished-tasks-list"></ul>
</section>
</section>
<div id="menu" class="hidden">
<h2 id="menu-title"></h2>
<button id="switch-search"><i class="fa fa-search"></i></button>
<ul id="menu-list">
<li id="switch-all" class="switch-list"><i class="fa fa-list" ></i><span>All</span></li>
<li id="switch-myDay" class="switch-list"><i class='fa fa-sun-o'></i><span>My Day</span></li>
<li id="switch-important" class="switch-list"><i class="fa fa-star"></i><span>Important</span></li>
<li id="switch-planned" class="switch-list"><i class="fa fa-calendar"></i><span>Planned</span></li>
<li id="switch-finished" class="switch-list"><i class="fa fa-check-square-o"></i><span>Finished</span></li>
<li id="toggle-theme"><i class="fa fa-pie-chart"></i><span>Theme</span></li>
<ul id="theme-list" class="hidden">
<li class="switch-theme theme-color">theme1</li>
<li class="switch-theme theme-color2">theme2</li>
<li class="switch-theme theme-color3">theme3</li>
<li class="switch-theme theme-color4">theme4</li>
<li class="switch-theme theme-color5">theme5</li>
<li class="switch-theme theme-color6">theme6</li>
<li class="switch-theme theme-color7">theme7</li>
</ul>
</ul>
</div>
<div id="out-model" class="hidden">
<div id="new">
<ul id="submit-card">
<li class="task-list-item submit-item">
<button
type="button"
class="tasks-list-item_check-button"
>
<i class="fa fa-circle-o" aria-hidden="true"></i>
</button>
<input
id="todo"
type="text"
placeholder="Add new tasks"
autofocus
/>
<button id="submit" class="submit-button">
<i class="fa fa-arrow-circle-o-up"></i>
</button>
</li>
</ul>
<div id="choose">
<button id="add-myDay"><i class="fa fa-sun-o"></i>Add to My Day</button>
<span>Deadline</span>
<input id="deadline-input" type="date" value="" />
<button id="cancel">Cancel</button>
</div>
</div>
</div>
<button id="add">+</button>
<script src="model.js"></script>
<script src="provider-localStorage.js"></script>
<script src="TodoMVC.js"></script>
</body>
</html>