-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmanager.html
93 lines (87 loc) · 5.18 KB
/
manager.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
<!DOCTYPE html>
<html>
<head>
<title>Tasks Manager</title>
<meta charset="utf-8">
<!--Bootstrap Init-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
<!--End Bootstrap Init-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script defer src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script defer src="./script.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark personal-bg sticky-top">
<!--Button that is shown on mobile devices-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--End button-->
<!--Logo-->
<a class="navbar-brand mx-auto" href="#"><img src="/todo.svg" alt="" width="30" height="30" class="d-inline-block align-top"> Manager</a>
<!--End Logo-->
<!--Items to show when button is toggled-->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mr-auto d-block d-sm-none">
<li class="nav-item">
<a class="nav-link" href="#">All <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Important</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Next 7 days</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Private</a>
</li>
</ul>
<form class="form-inline m-lg-auto">
<input class="form-control mr-sm-2 mt-1 mt-sm-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0 d-none d-sm-block" type="submit">Search</button>
</form>
</div>
<!--End items to show-->
<!--User Icon-->
<div class="navbar-nav mt-0 mt-lg-0 user-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</div>
</nav>
<!--End Navbar-->
<div class='container-fluid'>
<!--Content goes here-->
<div class="row" style="min-height: 100vh;">
<div class="col-4 py-2 px-lg-3 leftcol-bg d-none d-sm-block">
<!--Sidebar-->
<div class="list-group list-group-flush">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true" id="all">All</button>
<button type="button" class="list-group-item list-group-item-action trans" id="isImportant">Important</button>
<button type="button" class="list-group-item list-group-item-action trans" id="isToday">Today</button>
<button type="button" class="list-group-item list-group-item-action trans" id="sevenDays">Next 7 Days</button>
<button type="button" class="list-group-item list-group-item-action trans" id="isPrivate">Private</button>
</div>
<!--End Sidebar-->
</div>
<div class="col py-2 px-lg-3 border bg-light d-block">
<h1 id="thetitle">All</h1>
<ul class="list-group list-group-flush" id="listoftask">
</ul>
</div>
</div>
<button type="button" class="btn d-flex radius rounded-circle m-3">+</button>
</div>
<!--Bootstrap Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!--End Bootstrap Scripts-->
</body>
</html>