source: main/kofacustom.lpng/trunk/layout/theme.html @ 17186

Last change on this file since 17186 was 17186, checked in by Henrik Bettermann, 22 months ago

Update header properties.

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