source: main/kofacustom.ekodisco/trunk/layout/theme.html @ 11283

Last change on this file since 11283 was 11278, checked in by uli, 11 years ago

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