source: main/waeup.ikoba/trunk/layout/theme.html @ 12747

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

Fix test.

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