-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (153 loc) · 8.03 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
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" style="text/css" href="index.css">
<title>Task Planner</title>
</head>
<!--TASK LIST-->
<body class="pagesetup">
<div class="container">
<div class="container" id="jumbotron">
<h1>Screw It, Let's Do It!</h1>
<h3>Task List</h3>
</div>
<br>
<div class="form-group row">
<div class="container-fluid">
<div class="card">
<div class="card-body" id="taskManagerFunctions">
<span>Filter Tasks to User:</span>
<select id="userDropdown">
<option value="all">All</option>
<option value="diana">Diana</option>
<option value="irina">Irina</option>
<option value="martin">Martin</option>
<option value="spare">(spare)</option>
</select>
<a href="#newTask" class="btn btn-primary float-right" data-toggle="modal" data-target="#newTaskModal" data-whatever="@mdo" data-backdrop="focus">Assign New Task</a>
</div>
</div>
</div>
<!--CARDS vs LIST -->
<div class="container-fluid">
<div class="card mx-auto">
<div class="card-body" id="tasksList">
<!-- <div class="list-group" id="tasksList"></div>-->
</div>
</div>
</div>
</div>
</div>
<!--NEW TASK FORM-->
<div class="modal fade" id="newTaskModal" tabindex="-1" role="dialog" aria-labelledby="newTask" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newTask">Create New Task</h5>
<button type="button" class="close" id="closeModalButton" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="newTaskForm" class="needs-validation" novalidate>
<div class="form-group">
<label for="newTaskNameInput" class="col-form-label">Task Name</label>
<input type="text" class="form-control" id="newTaskNameInput" placeholder="Example: Fix links">
<div class="valid-feedback"> Great!</div>
<div class="invalid-feedback"> Please include succinct description of the task </div>
</div>
<div class="form-group">
<label for="newTaskAssignedTo" class="col-form-label">Assign To:</label>
<select class="custom-select form-control" id="newTaskAssignedTo" required>
<option value="">Nominate Team Member</option>
<option value="all">All</option>
<option value="diana">Diana</option>
<option value="irina">Irina</option>
<option value="martin">Martin</option>
<option value="spare">(spare)</option>
</select>
<div class="valid-feedback">OK!</div>
<div class="invalid-feedback">Who would you like to assign this to?</div>
</div>
<!--ASSIGNED TO - TEXT FIELD OPTION
<div class="form-group">
<label for="newTaskAssignedTo" class="col-form-label">Assigned To:</label>
<input type="text" class="form-control" id="newTaskAssignedTo" placeholder="Nominate Team Member">
<div class="valid-feedback">OK!</div>
<div class="invalid-feedback">Who is this assigned to?</div>
</div>-->
<div class="form-group">
<label for="newTaskDueDate" class="col-form-label">Due Date</label>
<input type="date" class="form-control" id="newTaskDueDate">
<div class="valid-feedback">OK!</div>
<div class="invalid-feedback">Date must be in the future</div>
</div>
<div class="form-group">
<label for="newTaskDescription" class="col-form-label">Description</label>
<textarea class="form-control" id="newTaskDescription" placeholder="Include any specific instructions or task requirements here"></textarea>
<div class="valid-feedback">Great!</div>
<div class="invalid-feedback">Please provide task specific details to enable your assignee to complete it</div>
</div>
<div class="modal-footer">
<!--CLOSE MODAL - CHECKBOX OPTION
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input close" id="closeModalAfterSubmit">
<label class="custom-control-label" for="closeModalAfterSubmit">Close Form on Submit</label>
</div>-->
<!--Optional CLOSE MODAL button
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="website-footer">
<div class="reference">
<h6 id="footer-text1"></h6>
<nav class="thumbnail" id="githubThumbnails">
<ul>
<li id="diana">
<a href="https://github.com/d1anas0" target="_blank">
<img class="diana-image" src="https://octodex.github.com/images/femalecodertocat.png" style="width:150px; height:150px;" alt="GitHub (Diana So)"/>
<span>Diana</span>
</a>
</li>
<li id="martin">
<a href="https://github.com/martink114" target="_blank">
<img src="https://octodex.github.com/images/bouncercat.png" style="width:150px; height:150px;" alt="GitHub (Martin K)"/>
<span>Martin</span>
</a>
</li>
<li id="irina">
<a href="https://github.com/vasiliygenadiy" target="_blank">
<img src="https://octodex.github.com/images/welcometocat.png" style="width:150px; height:150px;" alt="GitHub (Irina Ko)"/>
<span>Irina</span>
</a>
</li>
</ul>
</nav>
<h6>Created by us koolkats in 2020</h6>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="js/taskManager.js"></script>
<script src="js/index.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>