source: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html @ 11055

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

Set 'focus' pseudo class.

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