-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (128 loc) · 5.22 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link CSS Style and Reset sheets -->
<link href="css/reset.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<!-- Link Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- Link Tab/Window Icon -->
<link rel="icon" href="images/T2.JPG">
<!-- Webpage Title -->
<title>T2 Task Planner</title>
</head>
<body class="box">
<!-- Header Start -->
<header class="row header">
<h1>T2 Task Planner</h1>
</header>
<!-- Header End -->
<!-- Main Card Container Start -->
<div class="row main-container">
<!-- Burger Icon for Menu Toggle Start -->
<div id="menu-button">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- Burger Icon for Menu Toggle End -->
<!-- Sidebar Navigation Start -->
<nav id="sidebar">
<ul>
<li><button type="button" id="create-button">CREATE</button></li>
<ul class="filter-navs">
<h1>
<p>Filter By Status:</p>
<p id="current-filter">To-Do</p>
</h1>
<li id="to-do-filter"><a class="to-do">TO-DO</a></li>
<li id="in-progress-filter"><a class="in-progress">IN-PROGRESS</a></li>
<li id="review-filter"><a class="review">REVIEW</a></li>
<li id="done-filter"><a class="done">DONE</a></li>
<li id="show-all-filter"><a class="to-do">SHOW ALL</a></li>
</ul>
</ul>
</nav>
<!-- Sidebar Navigation End -->
<!-- Card List Start -->
<section class="cards" id="task-card-list">
</section>
<!-- Card List End -->
</div>
<!-- Main Card Container End -->
<!-- Form Start -->
<section>
<form id="task-form" class="task-form">
<!-- Title -->
<img class="close-form" id="closeTaskForm" src="images/close-button.png">
<div class="form-row">
<label for="form-title">Title</label>
<input type="text" id="form-title" name="form-title">
</div>
<!-- Middle Section Container -->
<div class="form-row middle-form">
<!-- Description -->
<div id="desc-container">
<label for="form-desc">Description</label>
<textarea id="form-desc" name="form-desc"></textarea>
</div>
<!-- Right Column Container Start -->
<div class="right-col-form">
<!-- Assigned To -->
<div class="right-col-input">
<label for="form-assigned">Assigned To</label>
<input type="text" id="form-assigned" name="form-assigned">
</div>
<!-- Due Date -->
<div class="right-col-input">
<label for="form-due">Due Date</label>
<input type="date" id="form-due" name="form-due">
</div>
<!-- Status Select Menu -->
<div class="right-col-input">
<label for="form-status">Status</label>
<select name="form-status" id="form-status">
<option value="" selected disabled hidden></option>
<option value="in-progress">In-Progress</option>
<option value="to-do">To-Do</option>
<option value="review">Review</option>
<option value="done">Done</option>
</select>
</div>
</div>
<!-- Right Column Container End -->
</div>
<!-- Middle Section Container End -->
<!-- Bottom Row -->
<div class="form-row form-footer">
<!-- Delete Button -->
<input type="button" id="deleteTaskBtn" value="Delete Task">
<!-- Save Task Button -->
<input type="button" id="saveTaskBtn" value="Save Task">
<!-- Hidden: Update Task Button -->
<input type="button" id="updateTaskBtn" value="Update Task">
</div>
</form>
</section>
<!-- Form End -->
<!-- Footer Start -->
<footer class="row footer">
<ul>
<li class="t2planner">T2 TASK PLANNER ©</li>
<li class="footerclock"><span id='ct6'></span></li>
<li class="createdby">Created by da boiz</li>
</ul>
</footer>
<!-- Footer End -->
<!-- Link to custom JS files -->
<script src="js/interactivity.js"></script>
<script src="js/taskmanager.js"></script>
<script src="js/form-validation.js"></script>
<script src="js/index.js"></script>
</body>
</html>