1 | <!DOCTYPE html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <meta charset="utf-8"> |
---|
5 | <title>Base · Twitter Bootstrap</title> |
---|
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
---|
7 | <meta name="description" content=""> |
---|
8 | <meta name="author" content=""> |
---|
9 | |
---|
10 | <!-- stylesheets --> |
---|
11 | <link href="static/bootstrap/css/bootstrap.min.css" |
---|
12 | rel="stylesheet"> |
---|
13 | <link href="static/bootstrap/css/bootstrap-theme.min.css" |
---|
14 | rel="stylesheet"> |
---|
15 | <link href="static/css/jquery.dataTables.css" |
---|
16 | rel="stylesheet"> |
---|
17 | <link href="static/css/jquery-ui.css" |
---|
18 | rel="stylesheet"> |
---|
19 | <link href="static/css/base.css" rel="stylesheet"> |
---|
20 | |
---|
21 | <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> |
---|
22 | <!--[if lt IE 9]> |
---|
23 | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> |
---|
24 | <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> |
---|
25 | <link href="static/css/IE8.css" rel="stylesheet"> |
---|
26 | <![endif]--> |
---|
27 | |
---|
28 | <script src="static/js/kofa-recaptcha_white.js"></script> |
---|
29 | |
---|
30 | <!-- icons --> |
---|
31 | <link rel="shortcut icon" href="static/ico/favicon.ico"> |
---|
32 | |
---|
33 | |
---|
34 | </head> |
---|
35 | |
---|
36 | <body id="kofa-body"> |
---|
37 | |
---|
38 | <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> |
---|
39 | <div class="navbar-header"> |
---|
40 | <button type="button" class="navbar-toggle" data-toggle="collapse" |
---|
41 | data-target="#kofa-primary-nav"> |
---|
42 | <span class="icon-bar"></span> |
---|
43 | <span class="icon-bar"></span> |
---|
44 | <span class="icon-bar"></span> |
---|
45 | </button> |
---|
46 | <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a> |
---|
47 | </div> |
---|
48 | <div class="navbar-collapse collapse" |
---|
49 | id="kofa-primary-nav"> |
---|
50 | <ul class="nav navbar-nav kofa-navbar-left"> |
---|
51 | <li class="active"><a href="#">Academics</a></li> |
---|
52 | <li><a href="#about">Applicants</a></li> |
---|
53 | <li><a href="#contact">Students</a></li> |
---|
54 | <li><a href="#contact">Hostels</a></li> |
---|
55 | <li class="dropdown"> |
---|
56 | <a href="#" class="dropdown-toggle" |
---|
57 | data-toggle="dropdown">My Data |
---|
58 | <b class="caret"></b> |
---|
59 | <ul class="dropdown-menu"> |
---|
60 | <li><a href="#">Base Data</a></li> |
---|
61 | <li><a href="#">Clearance Data</a></li> |
---|
62 | <li><a href="#">Personal Data</a></li> |
---|
63 | <li><a href="#">History</a></li> |
---|
64 | </ul> |
---|
65 | </li> |
---|
66 | </ul> |
---|
67 | |
---|
68 | <ul class="nav navbar-nav navbar-right kofa-navbar-right"> |
---|
69 | <li class="dropdown kofa-langselect"> |
---|
70 | <a href="#" class="dropdown-toggle" |
---|
71 | data-toggle="dropdown"> |
---|
72 | <img src="static/img/earth.png" /> |
---|
73 | <ul class="dropdown-menu"> |
---|
74 | <li class="kofa-language"><a href="#">English</a></li> |
---|
75 | <li class="kofa-language"><a href="#">Français</a></li> |
---|
76 | <li class="kofa-language"><a href="#">Deutsch</a></li> |
---|
77 | <li class="kofa-language"><a href="#">Hausa</a></li> |
---|
78 | <li class="kofa-language"><a href="#">Yoruba</a></li> |
---|
79 | <li class="kofa-language"><a href="#">Igbo</a></li> |
---|
80 | </ul> |
---|
81 | </li> |
---|
82 | <li><a href="#">Contact</a></li> |
---|
83 | <li><a href="#">Logout</a></li> |
---|
84 | </ul> |
---|
85 | </div><!--/.nav-collapse --> |
---|
86 | </div><!-- /.navbar --> |
---|
87 | |
---|
88 | <div class="container"> |
---|
89 | |
---|
90 | <div class="row"> |
---|
91 | <div class="col-md-12 container kofa-breadcrumbs-box-long"> |
---|
92 | <div class="well"> |
---|
93 | <ol class="breadcrumb kofa-breadcrumbs"> |
---|
94 | <li> |
---|
95 | <a href="#"> |
---|
96 | Home |
---|
97 | </a> |
---|
98 | </li> |
---|
99 | <li> |
---|
100 | <a href="#"> |
---|
101 | Subtopic 1 |
---|
102 | </a> |
---|
103 | </li> |
---|
104 | <li> |
---|
105 | <a href="#"> |
---|
106 | Subtopic 2 |
---|
107 | </a> |
---|
108 | </li> |
---|
109 | <li> |
---|
110 | <a href="#"> |
---|
111 | Subtopic 3 |
---|
112 | </a> |
---|
113 | </li> |
---|
114 | </ol><!-- /kofa-breadcrumbs --> |
---|
115 | </div> <!-- /well --> |
---|
116 | </div> <!-- /kofa-breadcrumbs-box-short --> |
---|
117 | </div> |
---|
118 | |
---|
119 | <div class="row"> |
---|
120 | <div class="col-md-8 container kofa-breadcrumbs-box-short"> |
---|
121 | <div class="well"> |
---|
122 | <ol class="breadcrumb kofa-breadcrumbs"> |
---|
123 | <li> |
---|
124 | <a href="#"> |
---|
125 | Home |
---|
126 | </a> |
---|
127 | </li> |
---|
128 | <li> |
---|
129 | <a href="#"> |
---|
130 | Subtopic 1 |
---|
131 | </a> |
---|
132 | </li> |
---|
133 | <li> |
---|
134 | <a href="#"> |
---|
135 | Subtopic 2 |
---|
136 | </a> |
---|
137 | </li> |
---|
138 | <li> |
---|
139 | <a href="#"> |
---|
140 | Subtopic 3 |
---|
141 | </a> |
---|
142 | </li> |
---|
143 | </ol><!-- /kofa-breadcrumbs --> |
---|
144 | </div> <!-- /well --> |
---|
145 | </div> <!-- /kofa-breadcrumbs-box-short --> |
---|
146 | |
---|
147 | <div class="col-md-4 container kofa-student-status-box"> |
---|
148 | <div class="well"> |
---|
149 | <div class="wfstatus"> |
---|
150 | K1000000 • quite long student status |
---|
151 | </div> <!-- /wfstatus --> |
---|
152 | </div> <!-- /well --> |
---|
153 | </div> <!-- /kofa-student-status-box --> |
---|
154 | |
---|
155 | </div> <!-- /row --> |
---|
156 | |
---|
157 | <div class="row"> |
---|
158 | <div class="col-md-2 kofa-sidebar"> |
---|
159 | <div class="sidebar-nav well"> |
---|
160 | <div> |
---|
161 | <div class="kofa-sidebar-title">Student Name</div> |
---|
162 | <ul class="nav"> |
---|
163 | <li><a href="#">Base Data</a></li> |
---|
164 | <li><a href="#">Clearance Data</a></li> |
---|
165 | <li><a href="#">Personal Data</a></li> |
---|
166 | <li><a href="#">Study Course</a></li> |
---|
167 | <li><a href="#">Payments</a></li> |
---|
168 | <li><a href="#">Accommodation</a></li> |
---|
169 | <li><a href="#">History</a></li> |
---|
170 | </ul> |
---|
171 | </div> |
---|
172 | <div> |
---|
173 | <div class="kofa-sidebar-title">Manager Name</div> |
---|
174 | <ul class="nav"> |
---|
175 | <li><a href="#">Portal Configuration</a></li> |
---|
176 | <li><a href="#">Portal Users</a></li> |
---|
177 | <li><a href="#">Data Center</a></li> |
---|
178 | <li><a href="#">Reports</a></li> |
---|
179 | <li><a href="#">Access Codes</a></li> |
---|
180 | <li><a href="#">My Preferences</a></li> |
---|
181 | <li><a href="#">My Roles</a></li> |
---|
182 | </ul> |
---|
183 | </div> |
---|
184 | </div> <!-- /well --> |
---|
185 | </div> <!-- /kofa-sidebar --> |
---|
186 | |
---|
187 | <div class="col-md-10 content kofa-content-narrow"> |
---|
188 | <div class="well"> |
---|
189 | <div class="kofa-content"> |
---|
190 | <div class="actionbar"> |
---|
191 | <a class="btn btn-default" href=""> |
---|
192 | <img src="static/img/actionicon_modify.png" |
---|
193 | alt="Manage" /> |
---|
194 | Manage |
---|
195 | </a> |
---|
196 | <a class="btn btn-default" href=""> |
---|
197 | <img src="static/img/actionicon_trigtrans.png" |
---|
198 | alt="Trigger transition" /> |
---|
199 | Trigger transition |
---|
200 | </a> |
---|
201 | </div> |
---|
202 | <div class="alert alert-danger"> |
---|
203 | There were errors ... |
---|
204 | </div> |
---|
205 | <div class="alert alert-warning"> |
---|
206 | Be careful ... |
---|
207 | </div> |
---|
208 | <div class="alert alert-success"> |
---|
209 | You have successfully ... |
---|
210 | </div> |
---|
211 | <h1>WAeUP.Kofa Theme</h1> |
---|
212 | |
---|
213 | <p class="kofa-content-desc"> |
---|
214 | A sample Diazo theme for WAeUP.Kofa |
---|
215 | <br /> |
---|
216 | Fusce dapibus, tellus ac cursus commodo. |
---|
217 | </p> |
---|
218 | <p> |
---|
219 | Donec id elit non mi porta gravida at eget metus. Fusce |
---|
220 | dapibus, tellus ac cursus commodo, tortor mauris |
---|
221 | condimentum nibh, ut fermentum massa justo sit amet |
---|
222 | risus. Etiam porta sem malesuada magna mollis |
---|
223 | euismod. Donec sed odio dui. |
---|
224 | </p> |
---|
225 | <img src="static/img/bg.png" /> |
---|
226 | |
---|
227 | <!-- Tabs... --> |
---|
228 | <br /><br /> |
---|
229 | <h3>Sample Tabs</h3> |
---|
230 | <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs"> |
---|
231 | <li class="active"> |
---|
232 | <a href="#tab-1" data-toggle="tab">Tab 1</a> |
---|
233 | </li> |
---|
234 | <li class=""> |
---|
235 | <a href="#tab-2" data-toggle="tab">Tab 2</a> |
---|
236 | </li> |
---|
237 | <li class=""> |
---|
238 | <a href="#tab-3" data-toggle="tab">Tab 3</a> |
---|
239 | </li> |
---|
240 | </ul> |
---|
241 | <div class="tab-content"> |
---|
242 | <div id="tab-1" class="tab-pane active"> |
---|
243 | <br /> |
---|
244 | <p> |
---|
245 | Tab 1 content...<br /> Donec id elit non mi porta |
---|
246 | gravida at eget metus. Fusce dapibus, tellus ac |
---|
247 | cursus commodo. |
---|
248 | </p> |
---|
249 | </div> |
---|
250 | <div id="tab-2" class="tab-pane"> |
---|
251 | <br /> |
---|
252 | <p> |
---|
253 | Tab 2 content...<br /> Tortor mauris condimentum |
---|
254 | nibh, ut fermentum massa justo sit amet |
---|
255 | risus. Etiam porta sem malesuada. |
---|
256 | </p> |
---|
257 | </div> |
---|
258 | <div id="tab-3" class="tab-pane"> |
---|
259 | <br /> |
---|
260 | <p> |
---|
261 | Tab 3 content...<br /> Magna mollis euismod. Donec |
---|
262 | sed odio dui. |
---|
263 | </p> |
---|
264 | </div> |
---|
265 | |
---|
266 | <br> |
---|
267 | |
---|
268 | <h3>Sample Tooltip</h3> |
---|
269 | <br>Move the mouse over the button: |
---|
270 | <div class="btn btn-default" data-toggle="tooltip" |
---|
271 | title="This is a tooltip">Sample Tooltip |
---|
272 | </div> |
---|
273 | <br><br> |
---|
274 | |
---|
275 | </div><!-- /tab-content --> |
---|
276 | </div> <!-- /kofa-content --> |
---|
277 | </div> <!-- /well --> |
---|
278 | </div> <!-- /kofa-content-narrow --> |
---|
279 | </div> <!-- /row --> |
---|
280 | |
---|
281 | <div class="row"> |
---|
282 | <div class="col-md-12 content kofa-content-wide"> |
---|
283 | <div class="well kofa-content"> |
---|
284 | <div class="actionbar"> |
---|
285 | <a class="btn btn-default" href=""> |
---|
286 | <img src="static/img/actionicon_modify.png" |
---|
287 | alt="Manage" /> |
---|
288 | Manage |
---|
289 | </a> |
---|
290 | <a class="btn btn-default" href=""> |
---|
291 | <img src="static/img/actionicon_trigtrans.png" |
---|
292 | alt="Trigger transition" /> |
---|
293 | Trigger transition |
---|
294 | </a> |
---|
295 | </div> |
---|
296 | <div class="hero-unit"> |
---|
297 | <h1>Hello there!</h1> |
---|
298 | <p>this is...</p> |
---|
299 | </div> |
---|
300 | <div>...content that spans the whole page.</div> |
---|
301 | <br><br> |
---|
302 | <div id="#sampleform"> |
---|
303 | <form method="post"> |
---|
304 | <fieldset id="form-fieldset"> |
---|
305 | <legend>A Sample Form</legend> |
---|
306 | <div class="form-group variable-form"> |
---|
307 | <label>Some Label</label> |
---|
308 | <input type="text" class="textType" |
---|
309 | name="myinput[]" placeholder="A name..." /> |
---|
310 | </div> |
---|
311 | <button type="submit" class="btn rowadd btn-default"> |
---|
312 | Add row |
---|
313 | </button> |
---|
314 | <br /> |
---|
315 | <button type="submit" class="btn btn-primary">Save</button> |
---|
316 | </fieldset> |
---|
317 | </form> |
---|
318 | </div> <!-- /sampleform --> |
---|
319 | <br><br> |
---|
320 | <h3>A Sample Data Table</h3> |
---|
321 | <div class="table-responsive"> |
---|
322 | <table id="#dadatable" class="table table-striped dataTable"> |
---|
323 | <thead> |
---|
324 | <tr> |
---|
325 | <th>Id</th> |
---|
326 | <th>Name</th> |
---|
327 | <th>Portal Roles</th> |
---|
328 | <th>Local Roles</th> |
---|
329 | <th></th> |
---|
330 | </tr> |
---|
331 | </thead><tbody><tr><td>admin</td> |
---|
332 | <td>John</td> |
---|
333 | <td nowrap="nowrap">Portal Manager <br /> |
---|
334 | Academics Officer (view only) |
---|
335 | </td> |
---|
336 | <td>Owner</td> |
---|
337 | <td class="text-right"> |
---|
338 | <form method="post"> |
---|
339 | <input type="hidden" name="userid" value="admin" /> |
---|
340 | <input class="btn btn-sm btn-primary" type="submit" |
---|
341 | name="manage" value="Manage" /> |
---|
342 | <input class="btn btn-sm btn-default" type="submit" |
---|
343 | name="delete" value="Remove" /> |
---|
344 | </form> |
---|
345 | </td> |
---|
346 | </tr> |
---|
347 | <tr> |
---|
348 | <td>tester</td> |
---|
349 | <td>Vitali</td> |
---|
350 | <td nowrap="nowrap">Academics Officer (view only)</td> |
---|
351 | <td>Owner</td> |
---|
352 | <td class="text-right"> |
---|
353 | <form method="post"> |
---|
354 | <input type="hidden" name="userid" value="your_id" /> |
---|
355 | <input class="btn btn-sm btn-primary" type="submit" |
---|
356 | name="manage" value="Manage" /> |
---|
357 | <input class="btn btn-sm btn-default" type="submit" |
---|
358 | name="delete" value="Remove" /> |
---|
359 | </form> |
---|
360 | </td> |
---|
361 | </tr> |
---|
362 | </tbody> |
---|
363 | </table> |
---|
364 | </div> |
---|
365 | |
---|
366 | <br><br> |
---|
367 | <h3>A Sample Inline Form</h3> |
---|
368 | <form method="POST" class="form-inline"> |
---|
369 | <br /> |
---|
370 | <div class="form-group"> |
---|
371 | <input class="btn btn-primary" type="submit" name="search" |
---|
372 | value="Find student(s)" /> |
---|
373 | </div> |
---|
374 | <div class="form-group"> |
---|
375 | <select name="searchtype" class="form-control"> |
---|
376 | <option value="student_id">with id</option> |
---|
377 | <option value="fullname">with name</option> |
---|
378 | <option value="reg_number">with registration number</option> |
---|
379 | <option value="matric_number">with matric number</option> |
---|
380 | <option value="current_session">in session</option> |
---|
381 | <option value="depcode">in department</option> |
---|
382 | <option value="current_mode">in study mode</option> |
---|
383 | <option value="suspended"> |
---|
384 | with deactivated account (search term omitted) |
---|
385 | </option> |
---|
386 | <option value="transcript"> |
---|
387 | who requested transcript (search term omitted) |
---|
388 | </option> |
---|
389 | </select> |
---|
390 | </div> |
---|
391 | <div class="form-group"> |
---|
392 | <input type="text" class="form-control" name="searchterm" /> |
---|
393 | </div> |
---|
394 | </form> |
---|
395 | |
---|
396 | <br><br> |
---|
397 | <h3>A Sample Display Form Table</h3> |
---|
398 | <table class="form-table"> |
---|
399 | <tbody> |
---|
400 | <tr> |
---|
401 | <td class="fieldname">Code:</td> |
---|
402 | <td>app2012</td> |
---|
403 | </tr> |
---|
404 | <tr> |
---|
405 | <td class="fieldname">Application Target:</td> |
---|
406 | <td>General Studies</td> |
---|
407 | </tr> |
---|
408 | <tr> |
---|
409 | <td class="fieldname"> |
---|
410 | Application Mode (Donec id elit non mi porta gravida.): |
---|
411 | </td> |
---|
412 | <td>Create Application Records</td> |
---|
413 | </tr> |
---|
414 | </tbody> |
---|
415 | </table> |
---|
416 | |
---|
417 | <br><br> |
---|
418 | <h3>A Sample Edit/Manage Form Table</h3> |
---|
419 | <table class="form-table"> |
---|
420 | <tbody> |
---|
421 | <tr> |
---|
422 | <td class="fieldname">Code:</td> |
---|
423 | <td>app2012</td> |
---|
424 | </tr> |
---|
425 | <tr> |
---|
426 | <td class="fieldname">* Title:</td> |
---|
427 | <td> |
---|
428 | <input class="textType" id="form.title" name="form.title" |
---|
429 | size="20" type="text" |
---|
430 | value="General Studies 2012/2013" /> |
---|
431 | </td> |
---|
432 | </tr> |
---|
433 | <tr> |
---|
434 | <td class="fieldname">Any phone number:</td> |
---|
435 | <td> |
---|
436 | <select id="form.phone.country" name="form.phone.country" |
---|
437 | size="1" class="phone-input"> |
---|
438 | <option value="+234">Nigeria (+234)</option> |
---|
439 | <option value="+49">Germany (+49)</option> |
---|
440 | <option value="+1">U.S. (+1)</option> |
---|
441 | </select>- |
---|
442 | <input class=" phone-input textType" id="form.phone.area" |
---|
443 | name="form.phone.area" size="20" type="text" |
---|
444 | value="" />- |
---|
445 | <input class=" phone-input textType" id="form.phone.ext" |
---|
446 | name="form.phone.ext" size="20" type="text" value="" /> |
---|
447 | </td> |
---|
448 | </tr> |
---|
449 | <tr> |
---|
450 | <td class="fieldname">Any text field:</td> |
---|
451 | <td> |
---|
452 | <textarea id="any_id" |
---|
453 | name="any_name" rows="5">Placeholder text</textarea> |
---|
454 | </td> |
---|
455 | </tr> |
---|
456 | <tr> |
---|
457 | <td class="fieldname">* |
---|
458 | Application Mode |
---|
459 | (A select field coming from zope.formlib): |
---|
460 | </td> |
---|
461 | <td> |
---|
462 | <div class="value"> |
---|
463 | <select id="form.mode" name="form.mode" size="1"> |
---|
464 | <option selected="selected" value="create"> |
---|
465 | Create Application Records |
---|
466 | </option> |
---|
467 | <option value="update">Update Application Records |
---|
468 | </option> |
---|
469 | </select> |
---|
470 | </div> |
---|
471 | <input name="form.mode-empty-marker" |
---|
472 | type="hidden" value="1" /> |
---|
473 | </td> |
---|
474 | </tr> |
---|
475 | <tr> |
---|
476 | <td class="fieldname">A datepicker field:</td> |
---|
477 | <td> |
---|
478 | <input class="datepicker-le-year textType" |
---|
479 | id="form.any_date" name="form.any_date" |
---|
480 | size="20" type="text" value="" /> |
---|
481 | </td> |
---|
482 | </tr> |
---|
483 | |
---|
484 | <tr> |
---|
485 | <td class="fieldname"> |
---|
486 | A select field in Kofa pagetemplates: |
---|
487 | </td> |
---|
488 | <td> |
---|
489 | <select id="any_id" name="any_name" size="1" |
---|
490 | class="form-control half"> |
---|
491 | <option selected="selected" value="create"> |
---|
492 | Create Application Records |
---|
493 | </option> |
---|
494 | <option value="update"> |
---|
495 | Update Application Records |
---|
496 | </option> |
---|
497 | </select> |
---|
498 | </td> |
---|
499 | </tr> |
---|
500 | </tbody> |
---|
501 | </table> |
---|
502 | </div> <!-- /well kofa-content--> |
---|
503 | </div> <!-- /kofa-content-wide --> |
---|
504 | </div> <!-- /row --> |
---|
505 | <div class="footer"> |
---|
506 | <p class="credit muted text-right"> |
---|
507 | Kofa - Student Management System<br /> |
---|
508 | Copyright © WAeUP Group 2014 |
---|
509 | </p> |
---|
510 | </div> |
---|
511 | </div> <!-- /container --> |
---|
512 | |
---|
513 | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> |
---|
514 | <script src="static/bootstrap/js/bootstrap.min.js"></script> |
---|
515 | <script src="static/js/kofa-tooltip.js"></script> |
---|
516 | <script src="static/js/kofa-button-rowadd.js"></script> |
---|
517 | <script src="static/js/kofa-toggleall.js"></script> |
---|
518 | <script src="static/js/kofa-activate-tab.js"></script> |
---|
519 | <script class="kofa-script-datatable" |
---|
520 | src="static/js/jquery.dataTables.min.js"> |
---|
521 | </script> |
---|
522 | <script class="kofa-script-datatable" |
---|
523 | src="static/js/kofa-datatables.js"> |
---|
524 | </script> |
---|
525 | <script class="kofa-script-datepicker" |
---|
526 | src="static/js/jquery-ui.min.js"> |
---|
527 | </script> |
---|
528 | <script class="kofa-script-datepicker" |
---|
529 | src="static/js/kofa-datepicker.js"> |
---|
530 | </script> |
---|
531 | |
---|
532 | </body> |
---|
533 | </html> |
---|