source: main/kofacustom.iuokada/trunk/layout/theme.html @ 17364

Last change on this file since 17364 was 15565, checked in by Henrik Bettermann, 5 years ago

Add logo (also to website).

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