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

Last change on this file was 14559, checked in by Henrik Bettermann, 8 years ago

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