/
index.html
126 lines (100 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- The title of the page displayed on the tab -->
<title>Degree Progression Dashboard</title>
<!-- Set the character encoding for this page -->
<meta charset="utf-8">
<!-- Set the device viewport for better responsiveness -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Prevent search engines from crawling and indexing this page since it is going to be published on the Internet -->
<!-- While this is set in the web server configuration file, it is also set here for good measure in case those robots do not parse the HTTP response headers -->
<meta name="robots" content="noindex,nofollow,noarchive,noimageindex,nosnippet,nositelinkssearchbox">
<!-- Set additional metadata for browser integrations, screen readers, etc. -->
<meta name="url" content="https://degreeprogressiondashboard.cf">
<meta name="description" content="Intuitive dashboard for tracking progression throughout your degree.">
<meta name="subject" content="Intuitive dashboard for tracking progression throughout your degree.">
<meta name="keywords" content="degree,progression,dashboard,university">
<meta name="author" content="viral32111 <contact@viral32111.com>">
<meta name="language" content="en_gb">
<!-- Prevent browsers from requesting /favicon.ico to reduce server logs during development (stackoverflow.com/a/38917888) -->
<link rel="icon" href="data:,">
<!-- Include the Bootstrap stylesheet -->
<!-- This includes a sub-resource integrity hash which increases security by preventing the browser loading the file if it has been tampered with -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" type="text/css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Include the Google Charts API -->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<!-- Include our custom stylesheet for this page -->
<link rel="stylesheet" href="styles/dashboard.css" type="text/css">
</head>
<body>
<!-- The main container for the page content with a margin at the top -->
<!-- By default this is hidden, but it becomes visible once the the server confirms the user is logged in -->
<div id="container" class="container mt-3 invisible">
<!-- Main row and column -->
<div class="row justify-content-center">
<div class="col-lg-12 col-11 border rounded bg-light shadow-sm">
<!-- Title and subtitle containing the logged in users name -->
<div class="row pt-2">
<h1 class="fs-2 text-center">Degree Progression Dashboard</h1>
<p class="fs-6 text-center">Welcome to the dashboard <a id="title-logout-link" style="text-decoration: inherit; color: inherit;" href="" title="Not you? Click to logout."><strong id="title-user-name"></strong></a>, your current results are below. Hover over items in the charts to view additional information.</p>
</div>
<!-- Alert for the next assignment due -->
<div id="next-assignment-row" class="row ps-3 pe-3">
<div class="m-0 alert alert-danger text-center" role="alert">
Your next assignment <strong id="next-assignment-name"></strong> for <strong id="next-assignment-module"></strong> is due on the <strong id="next-assignment-due"></strong>!
</div>
</div>
<!-- Row for first year module scores and average grade -->
<div class="row mt-3 ps-3 pe-3" style="height: 150px">
<div class="col-9 p-0 pe-2">
<div id="graph-first-year-module-scores" class="col-12 h-100 text-center"></div>
</div>
<div class="col-3 p-0 ps-2">
<div id="graph-first-year-average-grade" class="col-12 h-100 text-center"></div>
</div>
</div>
<!-- Row for second year module scores and average grade -->
<div class="row mt-3 ps-3 pe-3" style="height: 150px">
<div class="col-9 p-0 pe-2">
<div id="graph-second-year-module-scores" class="col-12 h-100 text-center"></div>
</div>
<div class="col-3 p-0 ps-2">
<div id="graph-second-year-average-grade" class="col-12 h-100 text-center"></div>
</div>
</div>
<!-- Row for module completion progress, random module scores and the assignment score update form -->
<div class="row mt-3 mb-3 ps-3 pe-3" style="height: 440px">
<div class="col-9 p-0 pe-2">
<div id="graph-module-completion-progress" class="col-12 h-100 text-center"></div>
</div>
<div class="col-3 p-0 ps-2 h-100">
<div id="graph-random-module-scores" class="col-12 h-50 text-center pb-2"></div>
<div class="col-12 h-50 pt-2">
<div class="row m-0 p-0 h-100 border border rounded" style="background-color: #e9ecef;">
<form id="update-form" class="p-2 pt-0">
<!-- Combobox for the module (dynamically set by script) -->
<label class="form-label m-0" for="module">Module:</label>
<select id="update-form-module" class="form-select form-select-sm shadow-none" style="font-size: 12px" name="module" required></select>
<!-- Combobox for the assignment (dynamically set by script) -->
<label class="form-label p-0 m-0" for="assignment">Assignment:</label>
<select id="update-form-assignment" class="form-select form-select-sm shadow-none" style="font-size: 12px" name="assignment" required></select>
<!-- Input for the score (dynamically set by script) -->
<label class="form-label p-0 m-0" for="score">Score:</label>
<input id="update-form-score" class="form-control form-control-sm shadow-none" style="font-size: 12px" type="number" name="score" min="0" placeholder="" autocomplete="off" required>
<!-- Form submit button, no spinner for feedback like on the login form as the feedback is given through changing the button color and text -->
<div class="mt-3 d-grid">
<button id="update-form-submit" class="btn btn-sm btn-success btn-block shadow-none" style="font-size: 12px" type="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load the script for loading the graphs and handling the form -->
<script src="scripts/client/dashboard.js"></script>
</body>
</html>