source: main/ikobacustom.skeleton/trunk/layout/theme.html @ 13434

Last change on this file since 13434 was 12175, checked in by Henrik Bettermann, 10 years ago

Fill trunk. Components are not yet customized.

File size: 19.9 KB
RevLine 
[12175]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/ikoba-functions.js"></script>
31
32    <!-- icons -->
33    <link rel="shortcut icon" href="static_custom/favicon.ico">
34
35
36  </head>
37
38  <body id="ikoba-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="#ikoba-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 ikoba-brand-link" href="/">WAeUP.Ikoba</a>
49      </div>
50      <div class="navbar-collapse collapse"
51           id="ikoba-primary-nav">
52        <ul class="nav navbar-nav ikoba-navbar-left">
53          <li class="active"><a href="#">Products</a></li>
54          <li><a href="#about">Customers</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="#">Documents</a></li>
62              <li><a href="#">Contracts</a></li>
63              <li><a href="#">History</a></li>
64            </ul>
65          </li>
66        </ul>
67
68        <ul class="nav navbar-nav navbar-right ikoba-navbar-right">
69          <li class="dropdown ikoba-langselect">
70            <a href="#" class="dropdown-toggle"
71               data-toggle="dropdown">
72               <img src="static/img/earth.png" />
73            <ul class="dropdown-menu">
74              <li class="ikoba-language"><a href="#">English</a></li>
75              <li class="ikoba-language"><a href="#">Français</a></li>
76              <li class="ikoba-language"><a href="#">Deutsch</a></li>
77              <li class="ikoba-language"><a href="#">Hausa</a></li>
78              <li class="ikoba-language"><a href="#">Yoruba</a></li>
79              <li class="ikoba-language"><a href="#">Igbo</a></li>
80            </ul>
81          </li>
82          <li><a href="#">Contact</a></li>
83          <li><a href="#">Logout</a></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 ikoba-breadcrumbs-box-long">
92          <div class="well">
93            <ol class="breadcrumb ikoba-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><!-- /ikoba-breadcrumbs -->
115          </div> <!-- /well -->
116        </div> <!-- /ikoba-breadcrumbs-box-short -->
117      </div>
118
119      <div class="row">
120        <div class="col-md-8 container ikoba-breadcrumbs-box-short">
121          <div class="well">
122            <ol class="breadcrumb ikoba-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><!-- /ikoba-breadcrumbs -->
144          </div> <!-- /well -->
145        </div> <!-- /ikoba-breadcrumbs-box-short -->
146
147        <div class="col-md-4 container ikoba-customer-status-box">
148          <div class="well">
149            <div class="wfstatus">
150                K1000000 &bull; quite long customer status
151            </div> <!-- /wfstatus -->
152          </div> <!-- /well -->
153        </div> <!-- /ikoba-customer-status-box -->
154
155      </div> <!-- /row -->
156
157      <div class="row">
158        <div class="col-md-2 ikoba-sidebar">
159          <div class="sidebar-nav well">
160            <div>
161              <div class="ikoba-sidebar-title">Customer Name</div>
162              <ul class="nav">
163                <li><a href="#">Base Data</a></li>
164                <li><a href="#">Documents</a></li>
165                <li><a href="#">Contracts</a></li>
166                <li><a href="#">History</a></li>
167              </ul>
168            </div>
169            <div>
170              <div class="ikoba-sidebar-title">Manager Name</div>
171              <ul class="nav">
172                <li><a href="#">Portal Configuration</a></li>
173                <li><a href="#">Portal Users</a></li>
174                <li><a href="#">Data Center</a></li>
175                <li><a href="#">Reports</a></li>
176                <li><a href="#">My Preferences</a></li>
177                <li><a href="#">My Roles</a></li>
178              </ul>
179            </div>
180          </div> <!-- /well -->
181        </div> <!-- /ikoba-sidebar -->
182
183        <div class="col-md-10 content ikoba-content-narrow">
184          <div class="well">
185            <div class="ikoba-content">
186              <div class="actionbar">
187                <a class="btn btn-default" href="">
188                  <img src="static/img/actionicon_modify.png"
189                       alt="Manage" />
190                       Manage
191                </a>
192                <a class="btn btn-default" href="">
193                  <img src="static/img/actionicon_trigtrans.png"
194                       alt="Trigger transition" />
195                       Trigger transition
196                </a>
197              </div>
198              <div class="alert alert-danger">
199                  There were errors ...
200              </div>
201              <div class="alert alert-warning">
202                  Be careful ...
203              </div>
204              <div class="alert alert-success">
205                  You have successfully ...
206              </div>
207              <h1>WAeUP.Ikoba Theme</h1>
208
209              <p class="ikoba-content-desc">
210                A sample Diazo theme for WAeUP.Ikoba
211                <br />
212                Fusce dapibus, tellus ac cursus commodo.
213              </p>
214              <p>
215                Donec id elit non mi porta gravida at eget metus. Fusce
216                dapibus, tellus ac cursus commodo, tortor mauris
217                condimentum nibh, ut fermentum massa justo sit amet
218                risus. Etiam porta sem malesuada magna mollis
219                euismod. Donec sed odio dui.
220              </p>
221              <img src="static/img/bg.png" />
222
223              <!-- Tabs... -->
224              <br /><br />
225              <h3>Sample Tabs</h3>
226              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
227                <li class="active">
228                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
229                </li>
230                <li class="">
231                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
232                </li>
233                <li class="">
234                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
235                </li>
236              </ul>
237              <div class="tab-content">
238                <div id="tab-1" class="tab-pane active">
239                  <br />
240                  <p>
241                    Tab 1 content...<br />  Donec id elit non mi porta
242                    gravida at eget metus. Fusce dapibus, tellus ac
243                    cursus commodo.
244                  </p>
245                </div>
246                <div id="tab-2" class="tab-pane">
247                  <br />
248                  <p>
249                    Tab 2 content...<br />  Tortor mauris condimentum
250                    nibh, ut fermentum massa justo sit amet
251                    risus. Etiam porta sem malesuada.
252                  </p>
253                </div>
254                <div id="tab-3" class="tab-pane">
255                  <br />
256                  <p>
257                    Tab 3 content...<br /> Magna mollis euismod. Donec
258                    sed odio dui.
259                  </p>
260                </div>
261
262                <br>
263
264                <h3>Sample Tooltip</h3>
265                <br>Move the mouse over the button:
266                <div class="btn btn-default" data-toggle="tooltip"
267                     title="This is a tooltip">Sample Tooltip
268                </div>
269
270                <br><br>
271
272                <h3>File Upload</h3>
273                <br>
274                <a href="#">Birth Certificate Scan</a>
275                <input type="submit"
276                       value="Delete file"
277                       class="btn btn-danger" />
278                <div class="btn btn-default btn-file">
279                  Select new file&hellip;
280                  <input type="file"/>
281                </div>
282                <input type="submit"
283                       value="Upload selected file"
284                       class="btn btn-primary" />
285                (10 kB max.)
286                <br><br>
287
288                                        <div class="input-group">
289                                                <div class="input-group-btn">
290                                                        <div class="btn btn-default btn-file">
291                      Select new file&hellip;
292                      <input type="file">
293                    </div>
294                                                </div>
295                                                <input type="text" class="form-control" readonly>
296                  <div class="input-group-btn">
297                    <input type="submit"
298                           value="Upload selected file"
299                           class="btn btn-primary" />
300                    (10 kB max.)
301                  </div>
302                </div>
303
304
305              </div><!-- /tab-content -->
306            </div> <!-- /ikoba-content -->
307          </div> <!-- /well -->
308        </div> <!-- /ikoba-content-narrow -->
309      </div> <!-- /row -->
310
311      <div class="row">
312        <div class="col-md-12 content ikoba-content-wide">
313          <div class="well ikoba-content">
314            <div class="actionbar">
315              <a class="btn btn-default" href="">
316                <img src="static/img/actionicon_modify.png"
317                     alt="Manage" />
318                     Manage
319              </a>
320              <a class="btn btn-default" href="">
321                <img src="static/img/actionicon_trigtrans.png"
322                     alt="Trigger transition" />
323                     Trigger transition
324              </a>
325            </div>
326            <div class="hero-unit">
327              <h1>Hello there!</h1>
328              <p>this is...</p>
329            </div>
330            <div>...content that spans the whole page.</div>
331            <br><br>
332            <h3>A Sample Data Table</h3>
333            <div class="table-responsive">
334              <table id="#datatable" class="table table-striped dataTable">
335                <thead>
336                  <tr>
337                    <th>Id</th>
338                    <th>Name</th>
339                    <th>Portal Roles</th>
340                    <th>Local Roles</th>
341                    <th></th>
342                  </tr>
343                </thead><tbody><tr><td>admin</td>
344                    <td>John</td>
345                    <td nowrap="nowrap">Portal Manager <br />
346                      Academics Officer (view only)
347                    </td>
348                    <td>Owner</td>
349                    <td class="text-right">
350                      <form method="post">
351                        <input type="hidden" name="userid" value="admin" />
352                        <input class="btn btn-primary btn-sm" type="submit"
353                               name="manage" value="Manage" />
354                        <input class="btn btn-default btn-sm" type="submit"
355                               name="delete" value="Remove" />
356                      </form>
357                    </td>
358                  </tr>
359                  <tr>
360                    <td>tester</td>
361                    <td>Vitali</td>
362                    <td nowrap="nowrap">Academics Officer (view only)</td>
363                    <td>Owner</td>
364                    <td class="text-right">
365                      <form method="post">
366                        <input type="hidden" name="userid" value="your_id" />
367                        <input class="btn btn-sm btn-primary" type="submit"
368                               name="manage" value="Manage" />
369                        <input class="btn btn-sm btn-default" type="submit"
370                               name="delete" value="Remove" />
371                      </form>
372                    </td>
373                  </tr>
374                </tbody>
375              </table>
376            </div>
377
378            <br><br>
379            <h3>A Sample Inline Form</h3>
380            <form method="POST" class="form-inline">
381            <br />
382              <div class="form-group">
383                <input class="btn btn-primary" type="submit" name="search"
384                  value="Find customers(s)" />
385              </div>
386              <div class="form-group">
387                <select name="searchtype" class="form-control">
388                  <option value="customer_id">with id</option>
389                  <option value="fullname">with name</option>
390                  <option value="reg_number">with registration number</option>
391                  <option value="suspended">
392                    with deactivated account (search term omitted)
393                  </option>
394                </select>
395              </div>
396              <div class="form-group">
397                <input type="text" class="form-control" name="searchterm" />
398              </div>
399            </form>
400
401            <br><br>
402            <h3>A Sample Display Form Table</h3>
403            <table class="form-table">
404              <tbody>
405                <tr>
406                  <td class="fieldname">Code:</td>
407                  <td>app2012</td>
408                </tr>
409                <tr>
410                 <td class="fieldname">Application Target:</td>
411                  <td>General Studies</td>
412                </tr>
413                 <tr>
414                  <td class="fieldname">
415                    Application Mode (Donec id elit non mi porta gravida.):
416                  </td>
417                  <td>Create Application Records</td>
418                </tr>
419              </tbody>
420            </table>
421
422            <br><br>
423            <h3>A Sample Edit/Manage Form Table</h3>
424            <table class="form-table">
425              <tbody>
426                <tr>
427                  <td class="fieldname">Code:</td>
428                  <td>app2012</td>
429                </tr>
430                <tr>
431                  <td class="fieldname">* Title:</td>
432                  <td>
433                    <input class="textType" id="form.title" name="form.title"
434                           size="20" type="text"
435                           value="General Studies 2012/2013" />
436                  </td>
437                </tr>
438                <tr>
439                  <td class="fieldname">Any phone number:</td>
440                  <td>
441                    <select id="form.phone.country" name="form.phone.country"
442                              size="1" class="phone-input">
443                      <option value="+234">Nigeria (+234)</option>
444                      <option value="+49">Germany (+49)</option>
445                      <option value="+1">U.S. (+1)</option>
446                    </select>-
447                    <input class=" phone-input textType" id="form.phone.area"
448                           name="form.phone.area" size="20" type="text"
449                           value="" />-
450                    <input class=" phone-input textType" id="form.phone.ext"
451                           name="form.phone.ext" size="20" type="text" value="" />
452                  </td>
453                </tr>
454                <tr>
455                  <td class="fieldname">Any text field:</td>
456                  <td>
457                      <textarea id="any_id"
458                          name="any_name" rows="5">Placeholder text</textarea>
459                  </td>
460                </tr>
461                <tr>
462                  <td class="fieldname">*
463                      A select field coming from zope.formlib:
464                  </td>
465                  <td>
466                    <div class="value">
467                      <select id="form.mode" name="form.mode" size="1">
468                        <option selected="selected" value="create">
469                          Create Records
470                        </option>
471                        <option value="update">Update Records
472                        </option>
473                      </select>
474                    </div>
475                    <input name="form.mode-empty-marker"
476                           type="hidden" value="1" />
477                  </td>
478                </tr>
479                <tr>
480                  <td class="fieldname">A datepicker field:</td>
481                  <td>
482                    <input class="datepicker-le-year textType"
483                                 id="form.any_date" name="form.any_date"
484                                 size="20" type="text" value="" />
485                  </td>
486                </tr>
487
488                <tr>
489                  <td class="fieldname">
490                      A select field in Ikoba pagetemplates:
491                  </td>
492                  <td>
493                      <select id="any_id" name="any_name" size="1"
494                              class="form-control half">
495                        <option selected="selected" value="create">
496                            Create Records
497                        </option>
498                        <option value="update">
499                            Update Records
500                        </option>
501                      </select>
502                  </td>
503                </tr>
504              </tbody>
505            </table>
506          </div> <!-- /well ikoba-content-->
507        </div> <!-- /ikoba-content-wide -->
508      </div> <!-- /row -->
509      <div id="bottom" class="footer">
510        <p class="credit muted text-right">
511          Ikoba - Application & Registration System<br />
512          Copyright &copy; WAeUP Group
513          <script type="text/javascript">
514          renderCurrentYear();
515          </script>
516        </p>
517      </div>
518    </div> <!-- /container -->
519
520    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
521    <script src="static/bootstrap/js/bootstrap.min.js"></script>
522    <script src="static/js/ikoba-scroll.js"></script>
523    <script src="static/js/ikoba-activate-tab.js"></script>
524    <script src="static/js/ikoba-scrollto.js"></script>
525    <script src="static/js/file-upload.js"></script>
526    <script class="ikoba-script-tooltip"
527        src="static/js/ikoba-tooltip.js">
528    </script>
529    <script class="ikoba-script-datatable"
530        src="static/js/jquery.dataTables.min.js">
531    </script>
532    <script class="ikoba-script-datatable"
533        src="static/js/ikoba-datatables.js">
534    </script>
535    <script class="jquery-ui"
536        src="static/js/jquery-ui.min.js">
537    </script>
538    <script class="ikoba-script-datepicker"
539        src="static/js/ikoba-datepicker.js">
540    </script>
541  </body>
542</html>
Note: See TracBrowser for help on using the repository browser.