source: main/waeup.uniben/trunk/layout/theme.html @ 11617

Last change on this file since 11617 was 11560, checked in by Henrik Bettermann, 11 years ago

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