source: main/waeup.kofa/trunk/layout/theme.html @ 14159

Last change on this file since 14159 was 13513, checked in by Henrik Bettermann, 9 years ago

Add maintenance mode warning box which the enabler sees if logged in.

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