source: main/kofacustom.udss/trunk/layout/theme.html @ 17726

Last change on this file since 17726 was 17726, checked in by Henrik Bettermann, 9 months ago

… also when logged out

File size: 23.8 KB
Line 
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    <meta property="og:title" content="West African eUniversity Project">
11    <meta property="og:description" content="Integrated Open Source Software solutions to administrate universities, colleges or schools online at a reasonable price">
12    <meta property="og:image" content="https://www.waeup.org/images/map_africa.png">
13    <meta property="og:url" content="https://www.waeup.org">
14    <meta property="og:site_name" content="WAeUP.Kofa">
15    <meta property="og:type" content="website">   
16
17    <!-- stylesheets -->
18    <link href="static/bootstrap/css/bootstrap.min.css"
19          rel="stylesheet">
20    <link href="static/bootstrap/css/bootstrap-theme.min.css"
21          rel="stylesheet">
22    <link href="static/css/jquery.dataTables.css"
23          rel="stylesheet">
24    <link href="static/css/jquery-ui.css"
25          rel="stylesheet">
26    <link href="static/css/base.css" rel="stylesheet">
27    <link href="static_custom/custom.css" rel="stylesheet">
28    <link href="static/css/file-upload.css" rel="stylesheet">
29
30    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
31    <!--[if lt IE 9]>
32      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
33      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
34      <link href="static/css/IE8.css" rel="stylesheet">
35    <![endif]-->
36
37    <script src="static/js/kofa-functions.js"></script>
38
39    <!-- icons -->
40    <link rel="shortcut icon" href="static_custom/favicon.ico">
41
42
43  </head>
44
45  <body id="kofa-body">
46
47    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
48      <div class="navbar-header">
49        <button type="button" class="navbar-toggle" data-toggle="collapse"
50                  data-target="#kofa-primary-nav">
51          <span class="icon-bar"></span>
52          <span class="icon-bar"></span>
53          <span class="icon-bar"></span>
54        </button>
55        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
56      </div>
57      <div class="navbar-collapse collapse"
58           id="kofa-primary-nav">
59        <ul class="nav navbar-nav kofa-navbar-left">
60          <li class="active"><a href="#">Academics</a></li>
61          <li><a href="#about">Applicants</a></li>
62          <li><a href="#contact">Students</a></li>
63          <li><a href="#contact">Hostels</a></li>
64          <li class="dropdown">
65            <a href="#" class="dropdown-toggle"
66               data-toggle="dropdown">My Data
67               <b class="caret"></b>
68            <ul class="dropdown-menu">
69              <li><a href="#">Base Data</a></li>
70              <li><a href="#">Clearance Data</a></li>
71              <li><a href="#">Personal Data</a></li>
72              <li><a href="#">History</a></li>
73            </ul>
74          </li>
75        </ul>
76
77        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
78          <li class="dropdown kofa-langselect">
79            <a href="#" class="dropdown-toggle"
80               data-toggle="dropdown">
81               <img src="static/img/earth.png" />
82            <ul class="dropdown-menu">
83              <li class="kofa-language"><a href="#">English</a></li>
84              <li class="kofa-language"><a href="#">Français</a></li>
85              <li class="kofa-language"><a href="#">Deutsch</a></li>
86              <li class="kofa-language"><a href="#">Hausa</a></li>
87              <li class="kofa-language"><a href="#">Yoruba</a></li>
88              <li class="kofa-language"><a href="#">Igbo</a></li>
89            </ul>
90          </li>
91          <li><a href="#">Contact</a></li>
92          <li><a href="#">Logout</a></li>
93        </ul>
94      </div><!--/.nav-collapse -->
95    </div><!-- /.navbar -->
96
97    <div class="container">
98
99      <div class="row">
100        <div class="col-md-12 container kofa-maintenance">
101          <div class="well">
102            <div class="maintenance-warning">
103                M A I N T E N A N C E &nbsp;&nbsp;&nbsp; M O D E
104            </div> <!-- /maintenance-warning -->
105          </div> <!-- /well -->
106        </div> <!-- /kofa-maintenance -->
107      </div>
108
109      <div class="row">
110        <div class="col-md-12 container kofa-breadcrumbs-box-long">
111          <div class="well">
112            <ol class="breadcrumb kofa-breadcrumbs">
113              <li>
114                <a href="#">
115                  Home
116                </a>
117              </li>
118              <li>
119                <a href="#">
120                  Subtopic 1
121                </a>
122              </li>
123              <li>
124                <a href="#">
125                  Subtopic 2
126                </a>
127              </li>
128              <li>
129                <a href="#">
130                  Subtopic 3
131                </a>
132              </li>
133            </ol><!-- /kofa-breadcrumbs -->
134          </div> <!-- /well -->
135        </div> <!-- /kofa-breadcrumbs-box-long -->
136      </div>
137
138      <div class="row">
139        <div class="col-md-8 container kofa-breadcrumbs-box-short">
140          <div class="well">
141            <ol class="breadcrumb kofa-breadcrumbs">
142              <li>
143                <a href="#">
144                  Home
145                </a>
146              </li>
147              <li>
148                <a href="#">
149                  Subtopic 1
150                </a>
151              </li>
152              <li>
153                <a href="#">
154                  Subtopic 2
155                </a>
156              </li>
157              <li>
158                <a href="#">
159                  Subtopic 3
160                </a>
161              </li>
162            </ol><!-- /kofa-breadcrumbs -->
163          </div> <!-- /well -->
164        </div> <!-- /kofa-breadcrumbs-box-short -->
165
166        <div class="col-md-4 container kofa-student-status-box">
167          <div class="well">
168            <div class="wfstatus">
169                K1000000 &bull; quite long student status
170            </div> <!-- /wfstatus -->
171          </div> <!-- /well -->
172        </div> <!-- /kofa-student-status-box -->
173
174      </div> <!-- /row -->
175
176      <div class="row">
177        <div class="col-md-2 kofa-sidebar">
178          <div class="sidebar-nav well">
179            <div>
180              <div class="kofa-sidebar-title">Student Name</div>
181              <ul class="nav">
182                <li><a href="#">Base Data</a></li>
183                <li><a href="#">Clearance Data</a></li>
184                <li><a href="#">Personal Data</a></li>
185                <li><a href="#">Study Course</a></li>
186                <li><a href="#">Payments</a></li>
187                <li><a href="#">Accommodation</a></li>
188                <li><a href="#">History</a></li>
189              </ul>
190            </div>
191            <div>
192              <div class="kofa-sidebar-title">Manager Name</div>
193              <ul class="nav">
194                <li><a href="#">Portal Configuration</a></li>
195                <li><a href="#">Portal Users</a></li>
196                <li><a href="#">Data Center</a></li>
197                <li><a href="#">Reports</a></li>
198                <li><a href="#">Access Codes</a></li>
199                <li><a href="#">My Preferences</a></li>
200                <li><a href="#">My Roles</a></li>
201              </ul>
202            </div>
203          </div> <!-- /well -->
204        </div> <!-- /kofa-sidebar -->
205
206        <div class="col-md-10 content kofa-content-narrow">
207          <div id="logo-container-narrow">
208            <img src="static_custom/udss_logo.png" width="90">
209          </div>
210          <div class="well">
211            <div class="kofa-content">
212              <div class="actionbar">
213                <a class="btn btn-default" href="">
214                  <img src="static/img/actionicon_modify.png"
215                       alt="Manage" />
216                       Manage
217                </a>
218                <a class="btn btn-default" href="">
219                  <img src="static/img/actionicon_trigtrans.png"
220                       alt="Trigger transition" />
221                       Trigger transition
222                </a>
223              </div>
224              <div class="alert alert-danger">
225                  There were errors ...
226              </div>
227              <div class="alert alert-warning">
228                  Be careful ...
229              </div>
230              <div class="alert alert-success">
231                  You have successfully ...
232              </div>
233              <h1>WAeUP.Kofa Theme</h1>
234
235              <p class="kofa-content-desc">
236                A sample Diazo theme for WAeUP.Kofa
237                <br />
238                Fusce dapibus, tellus ac cursus commodo.
239              </p>
240              <p>
241                Donec id elit non mi porta gravida at eget metus. Fusce
242                dapibus, tellus ac cursus commodo, tortor mauris
243                condimentum nibh, ut fermentum massa justo sit amet
244                risus. Etiam porta sem malesuada magna mollis
245                euismod. Donec sed odio dui.
246              </p>
247              <img src="static/img/bg.png" />
248
249              <!-- Tabs... -->
250              <br /><br />
251              <h3>Sample Tabs</h3>
252              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
253                <li class="active">
254                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
255                </li>
256                <li class="">
257                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
258                </li>
259                <li class="">
260                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
261                </li>
262              </ul>
263              <div class="tab-content">
264                <div id="tab-1" class="tab-pane active">
265                  <br />
266                  <p>
267                    Tab 1 content...<br />  Donec id elit non mi porta
268                    gravida at eget metus. Fusce dapibus, tellus ac
269                    cursus commodo.
270                  </p>
271                </div>
272                <div id="tab-2" class="tab-pane">
273                  <br />
274                  <p>
275                    Tab 2 content...<br />  Tortor mauris condimentum
276                    nibh, ut fermentum massa justo sit amet
277                    risus. Etiam porta sem malesuada.
278                  </p>
279                </div>
280                <div id="tab-3" class="tab-pane">
281                  <br />
282                  <p>
283                    Tab 3 content...<br /> Magna mollis euismod. Donec
284                    sed odio dui.
285                  </p>
286                </div>
287
288                <br>
289
290                <h3>Sample Tooltip</h3>
291                <br>Move the mouse over the button:
292                <div class="btn btn-default" data-toggle="tooltip"
293                     title="This is a tooltip">Sample Tooltip
294                </div>
295
296                <br><br>
297
298                <h3>File Upload</h3>
299                <br>
300                <a href="#">Birth Certificate Scan</a>
301                <input type="submit"
302                       value="Delete file"
303                       class="btn btn-danger" />
304                <div class="btn btn-default btn-file">
305                  Select new file&hellip;
306                  <input type="file"/>
307                </div>
308                <input type="submit"
309                       value="Upload selected file"
310                       class="btn btn-primary" />
311                (10 kB max.)
312                <br><br>
313
314                                        <div class="input-group">
315                                                <div class="input-group-btn">
316                                                        <div class="btn btn-default btn-file">
317                      Select new file&hellip;
318                      <input type="file">
319                    </div>
320                                                </div>
321                                                <input type="text" class="form-control" readonly>
322                  <div class="input-group-btn">
323                    <input type="submit"
324                           value="Upload selected file"
325                           class="btn btn-primary" />
326                    (10 kB max.)
327                  </div>
328                </div>
329
330                <br><br>
331
332                <h3>Filtered Select Box</h3>
333                <br>
334                <input id="filterbox" class="kofa-filterbox form-control half"
335                       placeholder="Enter search text, then select item below."
336                       type="text" />
337                <br />
338                <select id="filteredselect" class="form-control half" size=2>
339                  <option value="1">1</option>
340                  <option value="1234567890">1234567890</option>
341                  <option value="better">better</option>
342                  <option value="world">world</option>
343                </select>
344
345              </div><!-- /tab-content -->
346            </div> <!-- /kofa-content -->
347          </div> <!-- /well -->
348        </div> <!-- /kofa-content-narrow -->
349      </div> <!-- /row -->
350
351      <div class="row">
352        <div class="col-md-12 content kofa-content-wide">
353          <div id="logo-container-narrow">
354            <img src="static_custom/udss_logo.png" width="90">
355          </div>
356          <div class="well kofa-content">
357            <div class="actionbar">
358              <a class="btn btn-default" href="">
359                <img src="static/img/actionicon_modify.png"
360                     alt="Manage" />
361                     Manage
362              </a>
363              <a class="btn btn-default" href="">
364                <img src="static/img/actionicon_trigtrans.png"
365                     alt="Trigger transition" />
366                     Trigger transition
367              </a>
368            </div>
369            <div class="hero-unit">
370              <h1>Hello there!</h1>
371              <p>this is...</p>
372            </div>
373            <div>...content that spans the whole page.</div>
374
375            <br><br>
376            <h3>Accordions</h3>
377            <div class="panel-group" id="accordion" role="tablist"
378                 aria-multiselectable="true">
379              <div class="panel panel-default">
380                <div class="panel-heading" role="tab" id="headingTwo">
381                  <h4 class="panel-title">
382                    <a class="collapsed" data-toggle="collapse"
383                       data-parent="#accordion" href="#collapseTwo"
384                       aria-expanded="false" aria-controls="collapseTwo">
385                      Collapsible Group
386                    </a>
387                  </h4>
388                </div>
389                <div id="collapseTwo" class="panel-collapse collapse"
390                     role="tabpanel" aria-labelledby="headingTwo">
391                  <div class="panel-body">
392                    Anim pariatur cliche reprehenderit, enim eiusmod high life
393                    terry richardson ad squid. 3 wolf moon officia aute, non
394                    skateboard dolor brunch. Food truck quinoa laborum eiusmod.
395                  </div>
396                </div>
397              </div>
398            </div>
399
400            <br><br>
401            <h3>A Sample Data Table</h3>
402            <div class="table-responsive">
403              <table id="#datatable" class="table table-striped dataTable">
404                <thead>
405                  <tr>
406                    <th>Id</th>
407                    <th>Name</th>
408                    <th>Portal Roles</th>
409                    <th>Local Roles</th>
410                    <th></th>
411                  </tr>
412                </thead><tbody><tr><td>admin</td>
413                    <td>John</td>
414                    <td nowrap="nowrap">Portal Manager <br />
415                      Academics Officer (view only)
416                    </td>
417                    <td>Owner</td>
418                    <td class="text-right">
419                      <form method="post">
420                        <input type="hidden" name="userid" value="admin" />
421                        <input class="btn btn-primary btn-sm" type="submit"
422                               name="manage" value="Manage" />
423                        <input class="btn btn-default btn-sm" type="submit"
424                               name="delete" value="Remove" />
425                      </form>
426                    </td>
427                  </tr>
428                  <tr>
429                    <td>tester</td>
430                    <td>Vitali</td>
431                    <td nowrap="nowrap">Academics Officer (view only)</td>
432                    <td>Owner</td>
433                    <td class="text-right">
434                      <form method="post">
435                        <input type="hidden" name="userid" value="your_id" />
436                        <input class="btn btn-sm btn-primary" type="submit"
437                               name="manage" value="Manage" />
438                        <input class="btn btn-sm btn-default" type="submit"
439                               name="delete" value="Remove" />
440                      </form>
441                    </td>
442                  </tr>
443                </tbody>
444              </table>
445            </div>
446
447            <br><br>
448            <h3>A Sample Inline Form</h3>
449            <form method="POST" class="form-inline">
450            <br />
451              <div class="form-group">
452                <input class="btn btn-primary" type="submit" name="search"
453                  value="Find student(s)" />
454              </div>
455              <div class="form-group">
456                <select name="searchtype" class="form-control">
457                  <option value="student_id">with id</option>
458                  <option value="fullname">with name</option>
459                  <option value="reg_number">with registration number</option>
460                  <option value="matric_number">with matric number</option>
461                  <option value="current_session">in session</option>
462                  <option value="depcode">in department</option>
463                  <option value="current_mode">in study mode</option>
464                  <option value="suspended">
465                    with deactivated account (search term omitted)
466                  </option>
467                  <option value="transcript">
468                    who requested transcript (search term omitted)
469                  </option>
470                </select>
471              </div>
472              <div class="form-group">
473                <input type="text" class="form-control" name="searchterm" />
474              </div>
475            </form>
476
477            <br><br>
478            <h3>A Sample Display Form Table</h3>
479            <table class="form-table">
480              <tbody>
481                <tr>
482                  <td class="fieldname">Code:</td>
483                  <td>app2012</td>
484                </tr>
485                <tr>
486                 <td class="fieldname">Application Target:</td>
487                  <td>General Studies</td>
488                </tr>
489                 <tr>
490                  <td class="fieldname">
491                    Application Mode (Donec id elit non mi porta gravida.):
492                  </td>
493                  <td>Create Application Records</td>
494                </tr>
495              </tbody>
496            </table>
497
498            <br><br>
499            <h3>A Sample Edit/Manage Form Table</h3>
500            <table class="form-table">
501              <tbody>
502                <tr>
503                  <td class="fieldname">Code:</td>
504                  <td>app2012</td>
505                </tr>
506                <tr>
507                  <td class="fieldname">* Title:</td>
508                  <td>
509                    <input class="textType" id="form.title" name="form.title"
510                           size="20" type="text"
511                           value="General Studies 2012/2013" />
512                  </td>
513                </tr>
514                <tr>
515                  <td class="fieldname">Any phone number:</td>
516                  <td>
517                    <select id="form.phone.country" name="form.phone.country"
518                              size="1" class="phone-input">
519                      <option value="+234">Nigeria (+234)</option>
520                      <option value="+49">Germany (+49)</option>
521                      <option value="+1">U.S. (+1)</option>
522                    </select>-
523                    <input class=" phone-input textType" id="form.phone.area"
524                           name="form.phone.area" size="20" type="text"
525                           value="" />-
526                    <input class=" phone-input textType" id="form.phone.ext"
527                           name="form.phone.ext" size="20" type="text" value="" />
528                  </td>
529                </tr>
530                <tr>
531                  <td class="fieldname">Any text field:</td>
532                  <td>
533                      <textarea id="any_id"
534                          name="any_name" rows="5">Placeholder text</textarea>
535                  </td>
536                </tr>
537                <tr>
538                  <td class="fieldname">*
539                      Application Mode
540                      (A select field coming from zope.formlib):
541                  </td>
542                  <td>
543                    <div class="value">
544                      <select id="form.mode" name="form.mode" size="1">
545                        <option selected="selected" value="create">
546                          Create Application Records
547                        </option>
548                        <option value="update">Update Application Records
549                        </option>
550                      </select>
551                    </div>
552                    <input name="form.mode-empty-marker"
553                           type="hidden" value="1" />
554                  </td>
555                </tr>
556                <tr>
557                  <td class="fieldname">A datepicker field:</td>
558                  <td>
559                    <input class="datepicker-le-year textType"
560                                 id="form.any_date" name="form.any_date"
561                                 size="20" type="text" value="" />
562                  </td>
563                </tr>
564
565                <tr>
566                  <td class="fieldname">
567                      A select field in Kofa pagetemplates:
568                  </td>
569                  <td>
570                      <select id="any_id" name="any_name" size="1"
571                              class="form-control half">
572                        <option selected="selected" value="create">
573                            Create Application Records
574                        </option>
575                        <option value="update">
576                            Update Application Records
577                        </option>
578                      </select>
579                  </td>
580                </tr>
581              </tbody>
582            </table>
583            <br>
584            <div class="documentation">
585              <a href="#" target="_blank">
586                Kofa Docs for this page
587              </a>
588            </div>
589          </div> <!-- /well kofa-content-->
590        </div> <!-- /kofa-content-wide -->
591      </div> <!-- /row -->
592      <div id="bottom" class="footer">
593        <p class="credit muted text-right">
594          Kofa - Student Management System<br />
595          Copyright &copy; WAeUP Group
596          <script type="text/javascript">
597          renderCurrentYear();
598          </script>
599        </p>
600      </div>
601    </div> <!-- /container -->
602
603    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
604    <script src="static/bootstrap/js/bootstrap.min.js"></script>
605    <script src="static/js/kofa-scroll.js"></script>
606    <script src="static/js/kofa-activate-tab.js"></script>
607    <script src="static/js/kofa-scrollto.js"></script>
608    <script src="static/js/file-upload.js"></script>
609    <script class="kofa-script-tooltip"
610        src="static/js/kofa-tooltip.js">
611    </script>
612    <script class="kofa-script-datatable"
613        src="static/js/jquery.dataTables.min.js">
614    </script>
615    <script class="kofa-script-datatable"
616        src="static/js/kofa-datatables.js">
617    </script>
618    <script class="jquery-ui"
619        src="static/js/jquery-ui.min.js">
620    </script>
621    <script class="kofa-script-datepicker"
622        src="static/js/kofa-datepicker.js">
623    </script>
624    <script class="kofa-filterByText"
625        src="static/js/kofa-filterByText.js">
626    </script>
627  </body>
628</html>
Note: See TracBrowser for help on using the repository browser.