-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
155 lines (145 loc) · 6.15 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
<!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">
<meta name="description" content="Secure and simple to-do list manager. Tasks stored in browser.">
<meta name="keywords" content="task list,tasks,todo,to-do,item list,safe,secure,private,pending,simple todo list">
<title>To-Do Tasks List - Valtn.me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
tr td:first-child {
width: 30px;
}
tr td:last-child {
width: 50px;
}
button:focus {
outline: 0 !important;
}
/* Checkboxes */
input[type=checkbox] {
width: 15px;
height: 15px;
}
#addItem{
background-color: #66CDAA;
}
#cancelItem{
background-color: #DC143C;
}
/*overrides*/
.input-group-addon{
border: none;
color: #FFF;
cursor: pointer;
}
.input-group-addon:hover{
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>To-Do Tasks List <small>by Valtn.me</small></h3>
<p>Simple to-do list of items to keep track of the things that matter and save them within the application we use most in our lives, our browser. All information is stored in your browser using <em>local storage</em>, nothing you write leaves your computer. Your data will continue to be here despite browser restarts.</p>
</div>
</div>
<br>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="tabs" role="tablist">
<li role="presentation" class="pull-right"><a href="#tabCompleted" aria-controls="tabCompleted" role="tab" data-toggle="tab">Completed</a></li>
<li role="presentation" class="pull-right active"><a href="#tabToDo" aria-controls="tabToDo" role="tab" data-toggle="tab">Tasks</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tabToDo">
<br>
<p id="newTaskP">
<button type="button" class="btn btn-default btn-sm" onclick="newItem()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Task
</button>
</p>
<table class="table">
<tbody id="content">
<tr>
<td></td>
<td style="text-align: center">You haven't added any items yet.</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="tabCompleted">
<br>
<p>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#confirmDeleteModal">
<span class="glyphicon glyphicon-erase" aria-hidden="true"></span> Delete all completed tasks
</button>
</p>
<table class="table">
<tbody id="contentCompleted">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document" style="margin-top: 120px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="hideEditModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Edit task</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<textarea class="form-control" id="modalInput"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="hideEditModal()">Cancel</button>
<button type="button" class="btn btn-success" id="modalSave">Save changes</button>
</div>
</div>
</div>
</div>
<!-- / Modal -->
<!-- Confirm delete modal -->
<div class="modal" id="confirmDeleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Confirm delete</h4>
</div>
<div class="modal-body">
Are you sure you want to delete all completed tasks?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" onclick="deleteAllCompletedTasks()">Yes, delete them</button>
</div>
</div>
</div>
</div>
</div>
<!-- / Confirm delete modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>