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

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

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