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

Last change on this file since 17724 was 17724, checked in by Henrik Bettermann, 6 months ago

Add logo

File size: 23.6 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="">
[17005]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">   
[11393]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">
[11564]28    <link href="static/css/file-upload.css" rel="stylesheet">
[11393]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
[11742]37    <script src="static/js/kofa-functions.js"></script>
[11393]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">
[13519]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">
[11393]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 -->
[13519]135        </div> <!-- /kofa-breadcrumbs-box-long -->
[11393]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">
[17724]207          <div id="logo-container-narrow">
208            <img src="static_custom/udss_logo.png" width="90">
209          </div>
[11393]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>
[11564]295
[11393]296                <br><br>
297
[11564]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
[14451]330                <br><br>
[11564]331
[14451]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
[11393]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 class="well kofa-content">
354            <div class="actionbar">
355              <a class="btn btn-default" href="">
356                <img src="static/img/actionicon_modify.png"
357                     alt="Manage" />
358                     Manage
359              </a>
360              <a class="btn btn-default" href="">
361                <img src="static/img/actionicon_trigtrans.png"
362                     alt="Trigger transition" />
363                     Trigger transition
364              </a>
365            </div>
366            <div class="hero-unit">
367              <h1>Hello there!</h1>
368              <p>this is...</p>
369            </div>
370            <div>...content that spans the whole page.</div>
[14451]371
[11393]372            <br><br>
[14451]373            <h3>Accordions</h3>
374            <div class="panel-group" id="accordion" role="tablist"
375                 aria-multiselectable="true">
376              <div class="panel panel-default">
377                <div class="panel-heading" role="tab" id="headingTwo">
378                  <h4 class="panel-title">
379                    <a class="collapsed" data-toggle="collapse"
380                       data-parent="#accordion" href="#collapseTwo"
381                       aria-expanded="false" aria-controls="collapseTwo">
382                      Collapsible Group
383                    </a>
384                  </h4>
385                </div>
386                <div id="collapseTwo" class="panel-collapse collapse"
387                     role="tabpanel" aria-labelledby="headingTwo">
388                  <div class="panel-body">
389                    Anim pariatur cliche reprehenderit, enim eiusmod high life
390                    terry richardson ad squid. 3 wolf moon officia aute, non
391                    skateboard dolor brunch. Food truck quinoa laborum eiusmod.
392                  </div>
393                </div>
394              </div>
395            </div>
396
397            <br><br>
[11393]398            <h3>A Sample Data Table</h3>
399            <div class="table-responsive">
[11447]400              <table id="#datatable" class="table table-striped dataTable">
[11393]401                <thead>
402                  <tr>
403                    <th>Id</th>
404                    <th>Name</th>
405                    <th>Portal Roles</th>
406                    <th>Local Roles</th>
407                    <th></th>
408                  </tr>
409                </thead><tbody><tr><td>admin</td>
410                    <td>John</td>
411                    <td nowrap="nowrap">Portal Manager <br />
412                      Academics Officer (view only)
413                    </td>
414                    <td>Owner</td>
415                    <td class="text-right">
416                      <form method="post">
417                        <input type="hidden" name="userid" value="admin" />
[11564]418                        <input class="btn btn-primary btn-sm" type="submit"
[11393]419                               name="manage" value="Manage" />
[11564]420                        <input class="btn btn-default btn-sm" type="submit"
[11393]421                               name="delete" value="Remove" />
422                      </form>
423                    </td>
424                  </tr>
425                  <tr>
426                    <td>tester</td>
427                    <td>Vitali</td>
428                    <td nowrap="nowrap">Academics Officer (view only)</td>
429                    <td>Owner</td>
430                    <td class="text-right">
431                      <form method="post">
432                        <input type="hidden" name="userid" value="your_id" />
433                        <input class="btn btn-sm btn-primary" type="submit"
434                               name="manage" value="Manage" />
435                        <input class="btn btn-sm btn-default" type="submit"
436                               name="delete" value="Remove" />
437                      </form>
438                    </td>
439                  </tr>
440                </tbody>
441              </table>
442            </div>
443
444            <br><br>
445            <h3>A Sample Inline Form</h3>
446            <form method="POST" class="form-inline">
447            <br />
448              <div class="form-group">
449                <input class="btn btn-primary" type="submit" name="search"
450                  value="Find student(s)" />
451              </div>
452              <div class="form-group">
453                <select name="searchtype" class="form-control">
454                  <option value="student_id">with id</option>
455                  <option value="fullname">with name</option>
456                  <option value="reg_number">with registration number</option>
457                  <option value="matric_number">with matric number</option>
458                  <option value="current_session">in session</option>
459                  <option value="depcode">in department</option>
460                  <option value="current_mode">in study mode</option>
461                  <option value="suspended">
462                    with deactivated account (search term omitted)
463                  </option>
464                  <option value="transcript">
465                    who requested transcript (search term omitted)
466                  </option>
467                </select>
468              </div>
469              <div class="form-group">
470                <input type="text" class="form-control" name="searchterm" />
471              </div>
472            </form>
473
474            <br><br>
475            <h3>A Sample Display Form Table</h3>
476            <table class="form-table">
477              <tbody>
478                <tr>
479                  <td class="fieldname">Code:</td>
480                  <td>app2012</td>
481                </tr>
482                <tr>
483                 <td class="fieldname">Application Target:</td>
484                  <td>General Studies</td>
485                </tr>
486                 <tr>
487                  <td class="fieldname">
488                    Application Mode (Donec id elit non mi porta gravida.):
489                  </td>
490                  <td>Create Application Records</td>
491                </tr>
492              </tbody>
493            </table>
494
495            <br><br>
496            <h3>A Sample Edit/Manage Form Table</h3>
497            <table class="form-table">
498              <tbody>
499                <tr>
500                  <td class="fieldname">Code:</td>
501                  <td>app2012</td>
502                </tr>
503                <tr>
504                  <td class="fieldname">* Title:</td>
505                  <td>
506                    <input class="textType" id="form.title" name="form.title"
507                           size="20" type="text"
508                           value="General Studies 2012/2013" />
509                  </td>
510                </tr>
511                <tr>
512                  <td class="fieldname">Any phone number:</td>
513                  <td>
514                    <select id="form.phone.country" name="form.phone.country"
515                              size="1" class="phone-input">
516                      <option value="+234">Nigeria (+234)</option>
517                      <option value="+49">Germany (+49)</option>
518                      <option value="+1">U.S. (+1)</option>
519                    </select>-
520                    <input class=" phone-input textType" id="form.phone.area"
521                           name="form.phone.area" size="20" type="text"
522                           value="" />-
523                    <input class=" phone-input textType" id="form.phone.ext"
524                           name="form.phone.ext" size="20" type="text" value="" />
525                  </td>
526                </tr>
527                <tr>
528                  <td class="fieldname">Any text field:</td>
529                  <td>
530                      <textarea id="any_id"
531                          name="any_name" rows="5">Placeholder text</textarea>
532                  </td>
533                </tr>
534                <tr>
535                  <td class="fieldname">*
536                      Application Mode
537                      (A select field coming from zope.formlib):
538                  </td>
539                  <td>
540                    <div class="value">
541                      <select id="form.mode" name="form.mode" size="1">
542                        <option selected="selected" value="create">
543                          Create Application Records
544                        </option>
545                        <option value="update">Update Application Records
546                        </option>
547                      </select>
548                    </div>
549                    <input name="form.mode-empty-marker"
550                           type="hidden" value="1" />
551                  </td>
552                </tr>
553                <tr>
554                  <td class="fieldname">A datepicker field:</td>
555                  <td>
556                    <input class="datepicker-le-year textType"
557                                 id="form.any_date" name="form.any_date"
558                                 size="20" type="text" value="" />
559                  </td>
560                </tr>
561
562                <tr>
563                  <td class="fieldname">
564                      A select field in Kofa pagetemplates:
565                  </td>
566                  <td>
567                      <select id="any_id" name="any_name" size="1"
568                              class="form-control half">
569                        <option selected="selected" value="create">
570                            Create Application Records
571                        </option>
572                        <option value="update">
573                            Update Application Records
574                        </option>
575                      </select>
576                  </td>
577                </tr>
578              </tbody>
579            </table>
[14451]580            <br>
581            <div class="documentation">
582              <a href="#" target="_blank">
583                Kofa Docs for this page
584              </a>
585            </div>
[11393]586          </div> <!-- /well kofa-content-->
587        </div> <!-- /kofa-content-wide -->
588      </div> <!-- /row -->
[11472]589      <div id="bottom" class="footer">
[11393]590        <p class="credit muted text-right">
591          Kofa - Student Management System<br />
[11742]592          Copyright &copy; WAeUP Group
593          <script type="text/javascript">
594          renderCurrentYear();
595          </script>
[11393]596        </p>
597      </div>
598    </div> <!-- /container -->
599
[11414]600    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
[11393]601    <script src="static/bootstrap/js/bootstrap.min.js"></script>
[11472]602    <script src="static/js/kofa-scroll.js"></script>
[11447]603    <script src="static/js/kofa-activate-tab.js"></script>
[11518]604    <script src="static/js/kofa-scrollto.js"></script>
[11564]605    <script src="static/js/file-upload.js"></script>
[11447]606    <script class="kofa-script-tooltip"
607        src="static/js/kofa-tooltip.js">
608    </script>
[11393]609    <script class="kofa-script-datatable"
610        src="static/js/jquery.dataTables.min.js">
611    </script>
612    <script class="kofa-script-datatable"
613        src="static/js/kofa-datatables.js">
614    </script>
[11447]615    <script class="jquery-ui"
[11393]616        src="static/js/jquery-ui.min.js">
617    </script>
618    <script class="kofa-script-datepicker"
619        src="static/js/kofa-datepicker.js">
620    </script>
[14451]621    <script class="kofa-filterByText"
622        src="static/js/kofa-filterByText.js">
623    </script>
[11393]624  </body>
625</html>
Note: See TracBrowser for help on using the repository browser.