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

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

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