-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathoptions.html
201 lines (195 loc) · 6.04 KB
/
options.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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!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.0" />
<title>CMS Enrolment Extension</title>
<link rel="stylesheet" href="uikit/uikit.min.css" />
<style>
.red {
background-color: #ea1537;
color: white;
}
.green {
background-color: #0cb21d;
color: white;
}
.black {
background-color: rgb(61, 61, 61);
color: white;
}
body {
font-size: 100% !important;
}
.wrapper {
display: flex;
}
.wrapper > div:first-child {
border-right: 2px solid rgba(0, 0, 0, 0.3);
/* max-width: 600px; */
}
.wrapper > div:last-child {
padding-left: 35px;
flex-grow: 1;
}
/* .home {
display: flex;
}
.home > div:first-child {
margin-left: 10px;
border-right: 2px solid rgba(0, 0, 0, 0.3);
} */
.img-flex {
display: flex;
}
.img-flex img {
display: block;
width: 200px;
}
header {
margin: 0 20px;
}
</style>
</head>
<body>
<header>
<h1>The CMS Enrollment Extension</h1>
<div class="uk-alert" uk-alert>
Enrol or unenrol from your courses on CMS in no time! Enter your course
codes below and have yourself enrolled in one click!
</div>
<div class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>
Ensure you are logged in on CMS before enrolling/unenrolling from
courses
</p>
</div>
<div class="uk-alert-success" uk-alert>
<a class="uk-alert-close" uk-close></a>
Recommended: Pin the extension icon for easy access
</div>
</header>
<section class="home">
<!-- <div>
<ul class="uk-tab-right" uk-tab>
<li class="uk-active"><a href="#">Right</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div> -->
<div class="wrapper">
<div>
<form class="uk-container">
<fieldset class="uk-fieldset">
<legend class="uk-legend">Course Codes</legend>
<p>
Should be of the form <kbd>CODE Fxxx Section</kbd>, for example,
<kbd>CS F214 T1</kbd> Type one code on one line.
</p>
<div class="uk-margin">
<textarea
id="codes"
class="uk-textarea"
rows="5"
placeholder="CS F214 L1
CS F222 T2"
></textarea>
</div>
<button
id="enrol"
class="uk-button uk-button-primary"
type="button"
>
Enrol in these
</button>
<!-- <div>Leave it blank to unenrol from <i>all</i> courses</div> -->
<button
id="unenrol"
class="uk-button uk-button-danger"
type="button"
style="/*display: none*/"
>
<!-- invisible but exists because of js event listener error -->
Unenrol from these
</button>
<button
id="unenrol-all"
class="uk-button uk-button-danger"
type="button"
style="display: none"
>
Unenrol from all courses
</button>
</fieldset>
<div class="uk-alert-warning" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Only 3 courses are allowed to be worked on at a time.</p>
</div>
</form>
</div>
<div>
<table class="uk-table uk-table-divider">
<caption>
Enrollment status
</caption>
<thead>
<tr>
<th>Course code</th>
<th>Section</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Course codes</td>
<td>and their statuses</td>
<td>will be shown here</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<article class="uk-article" style="margin: 10px 40px" id="about">
<hr class="uk-divider-icon" />
<h2 class="uk-article-title">
<a class="uk-link-reset" href="">About</a>
</h2>
<p class="uk-article-meta">
This extension supercharges your CMS experience. Developed By Akshat.
</p>
<p class="uk-text-lead">Enrol/Unenrol</p>
<p>
Enter your course codes in the textbox above (separated by new lines)
and click on the blue/red buttons to enrol or unenrol from those
courses.
</p>
<p class="uk-text-lead">Navigate between announcements with ease</p>
<p>
In the announcements section (on viewing an announcements) go to the
next or previous announcements by using your arrow keys: RIGHT or LEFT
</p>
<p class="uk-text-lead">Quickly get back to CMS</p>
<div class="img-flex">
<p>
Click the extension icon (or on the extension name in the list of
extensions (puzzle icon in chrome)) to view your recently openend
courses and quickly open them back by clicking on them.
</p>
<!-- <img src="extension-list.png" alt="Extension list image" /> -->
</div>
</article>
<!-- This is the modal -->
<div id="modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Welcome to the CMS extension</h2>
<p></p>
<button class="uk-modal-close" type="button"></button>
</div>
</div>
<script src="uikit/uikit.min.js"></script>
<script src="options.js"></script>
</body>
</html>