source: main/ikobacustom.pcn/trunk/layout/theme.html @ 13606

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

Customize layout.

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