|
|
| Zeile 1: |
Zeile 1: |
| {{#tweekihide:sidebar-right|firstHeading}}
| |
| {{#tweekihide:sidebar-right|firstHeading}}
| |
|
| |
|
| <html>
| |
| <head>
| |
| <style>
| |
|
| |
| body > div {
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| a, a:hover, a:focus, a:visited {
| |
| text-decoration: none;
| |
| }
| |
|
| |
| /** General HTML style - F */
| |
|
| |
| canvas {
| |
| margin-bottom: 15px;
| |
| }
| |
|
| |
| /*#monthDrop*/
| |
| .dropdown button .btn-default {
| |
| width:100%;
| |
| border-color: red;
| |
| }
| |
|
| |
| .balance {
| |
| line-height: 36px;
| |
| font-size:36px
| |
| }
| |
|
| |
| .title {
| |
| color: #a0aeb6;
| |
| line-height: 14px;
| |
| font-size:14px;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| /** Rounded divs - I */
| |
| div.rounded,
| |
| div.top-rounded,
| |
| div.bottom-rounded {
| |
| border: solid 1px #dce1e5;
| |
| }
| |
|
| |
| div.rounded {
| |
| margin-bottom: 30px;
| |
| -webkit-border-radius: 4px 4px 4px 4px;
| |
| -moz-border-radius: 4px 4px 4px 4px;
| |
| border-radius: 4px 4px 4px 4px;
| |
| }
| |
|
| |
| div.top-rounded {
| |
| -webkit-border-radius: 4px 4px 0px 0px;
| |
| -moz-border-radius: 4px 4px 0px 0px;
| |
| border-radius: 4px 4px 0px 0px;
| |
| }
| |
|
| |
| div.bottom-rounded {
| |
| border-top-style: none;
| |
| -webkit-border-radius: 0px 0px 4px 4px;
| |
| -moz-border-radius: 0px 0px 4px 4px;
| |
| border-radius: 0px 0px 4px 4px;
| |
| }
| |
| /** Rounded divs - F */
| |
|
| |
|
| |
| /** Dropdown draft - I */
| |
| .dropdown span.caret {
| |
| float:right;
| |
| margin-top:8px;
| |
| }
| |
|
| |
| .dropdown button {
| |
| text-align: left;
| |
| }
| |
|
| |
| .dropdown-menu {
| |
| width: 100%;
| |
| }
| |
| /** Dropdown draft - F */
| |
|
| |
| /** Let tabls-left class be available in bootstrap 3.3.7 - I **/
| |
| .tabs-left > .nav-tabs {
| |
| border-bottom: 0;
| |
| width: 100%;
| |
| }
| |
|
| |
| .tab-content > .tab-pane {
| |
| display: none;
| |
| }
| |
|
| |
| .tab-content > .active {
| |
| display: block;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li {
| |
| float: none;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li > a,
| |
| .tabs-left > .nav-tabs > li > div {
| |
| margin-right: 0;
| |
| margin-bottom: 3px;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs {
| |
| float: left;
| |
| margin-right: 19px;
| |
| border-right: 1px solid #ddd;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li > a,
| |
| .tabs-left > .nav-tabs > li > div {
| |
| margin-right: -1px;
| |
| -webkit-border-radius: 4px 0 0 4px;
| |
| -moz-border-radius: 4px 0 0 4px;
| |
| border-radius: 4px 0 0 4px;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li > a:hover,
| |
| .tabs-left > .nav-tabs > li > a:focus,
| |
| .tabs-left > .nav-tabs > li > div:hover,
| |
| .tabs-left > .nav-tabs > li > div:focus{
| |
| border-color: #eeeeee #dddddd #eeeeee #eeeeee;
| |
| background-color: #eeeeee;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs .active > a,
| |
| .tabs-left > .nav-tabs .active > a:hover,
| |
| .tabs-left > .nav-tabs .active > a:focus,
| |
| .tabs-left > .nav-tabs .active > div,
| |
| .tabs-left > .nav-tabs .active > div:hover,
| |
| .tabs-left > .nav-tabs .active > div:focus{
| |
| border-color: #ddd transparent #ddd #ddd;
| |
| *border-right-color: #ffffff;
| |
| }
| |
| /** Let tabls-left class be available in bootstrap 3.3.7 - F **/
| |
|
| |
| .account-type
| |
| {
| |
| font-family: 'Roboto', sans-serif;
| |
| color: #A0AEB6;
| |
| font-size: 18px;
| |
| font-weight: bold;
| |
| line-height: 18px;
| |
| }
| |
|
| |
| .account-amount
| |
| {
| |
| font-family: 'Roboto', sans-serif;
| |
| color: #A0AEB6;
| |
| font-size: 14px;
| |
| line-height: 16px;
| |
| }
| |
|
| |
| /* TABS */
| |
| .tabs-left > .nav-tabs{
| |
| margin-right:0px;
| |
| padding: 0;
| |
| height: 700px; /* Debe ser el mismo height que el que tenga .tab-content */
| |
| }
| |
|
| |
| /* CONTENIDO DE LOS TABS */
| |
| .tab-content {
| |
| background-color: #FFFFFF;
| |
| border:solid 1px #DCE1E5;
| |
| border-left-style: none;
| |
| height: 700px; /* Debe ser el mismo height que el que tenga .tabs-left > .nav-tabs */
| |
| padding-left: 50px;
| |
|
| |
| border-radius: 0px 4px 4px 4px;
| |
| -moz-border-radius: 0px 4px 4px 4px;
| |
| -webkit-border-radius: 0px 4px 4px 4px;
| |
|
| |
| -webkit-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
| |
| -moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
| |
| box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| .tab-content > div {
| |
| margin-top: 26px;
| |
| }
| |
|
| |
| /* Formato del tab activo */
| |
| .tabs-left > .nav-tabs .active > a,
| |
| .tabs-left > .nav-tabs .active > a:hover,
| |
| .tabs-left > .nav-tabs .active > a:focus,
| |
|
| |
| .tabs-left > .nav-tabs .active div,
| |
| .tabs-left > .nav-tabs .active div:hover,
| |
| .tabs-left > .nav-tabs .active div:focus
| |
| {
| |
| background-color: #FFFFFF;
| |
|
| |
| border-bottom-style: none;
| |
| border-left-style: none;
| |
|
| |
| /*border-bottom: 1px solid #DCE1E5;*/
| |
| /*border-left: 1px solid #DCE1E5;*/
| |
| border-bottom-left-radius: 0px;
| |
| border-right-style: none;
| |
|
| |
| margin-right: -1px;
| |
|
| |
| -webkit-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
| |
| -moz-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
| |
| box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| /* Formato de los tabs en general */
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > a,
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > a:hover,
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > a:focus,
| |
|
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > div,
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > div:hover,
| |
| .tabs-left > .nav-tabs > li:nth-child(1) > div:focus
| |
| {
| |
| cursor: pointer;
| |
| border-top-left-radius: 4px;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > a,
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > a:hover,
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > a:focus,
| |
|
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > div,
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > div:hover,
| |
| .tabs-left > .nav-tabs > li.active:nth-child(1) > div:focus
| |
| {
| |
| border-top-left-radius: 4px;
| |
| border-bottom-style: none;
| |
| border-left: 1px solid #DCE1E5;
| |
| }
| |
|
| |
| .tabs-left > .nav-tabs > li > a,
| |
| .tabs-left > .nav-tabs > li > div {
| |
| display: table;
| |
| /*border: solid 1px transparent;*/
| |
| margin-right: -1px;
| |
|
| |
| margin-bottom: 0;
| |
| padding-bottom: 0;
| |
|
| |
| height: 105px;
| |
|
| |
| border:solid 1px #DCE1E5;
| |
| border-radius: 0px;
| |
| }
| |
|
| |
| /* Style of the div element acting as tab content */
| |
| .tabbable.tabs-left > .nav-tabs > li > div > div {
| |
| display: table-cell;
| |
| vertical-align: middle;
| |
| padding: 0px 12px 0px 12px;
| |
|
| |
| min-width: 105px;
| |
| max-width: 105px;
| |
|
| |
| text-overflow: ellipsis;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| }
| |
|
| |
|
| |
|
| |
| </style>
| |
| </head>
| |
|
| |
| <h2>Anleitung</h2>
| |
| <div class="container" style="margin-top: 30px">
| |
| <div class="row">
| |
| <div id="MyAccountsTab" class="tabbable tabs-left">
| |
| <ul class="nav nav-tabs col-md-1">
| |
| <li class="active">
| |
| <div data-target="#lA" data-toggle="tab">
| |
| <div>
| |
| <span class="account-type">Das Camerarius-Wiki</span><br/>
| |
| </div>
| |
| </div>
| |
| </li>
| |
| <li>
| |
| <div data-target="#lB" data-toggle="tab">
| |
| <div>
| |
| <span class="account-type">Grundstruktur des Wiki</span><br/>
| |
| </div>
| |
| </div>
| |
| </li>
| |
| <li>
| |
| <div data-target="#lC" data-toggle="tab">
| |
| <div>
| |
| <span class="account-type">Bibliographie und Register</span><br/>
| |
| </div>
| |
| </div>
| |
| </li>
| |
| <li>
| |
| <div data-target="#lD" data-toggle="tab">
| |
| <div>
| |
| <span class="account-type">Suche in der Datenbank</span><br/>
| |
| </div>
| |
| </div>
| |
| </li>
| |
| </ul>
| |
| <div class="tab-content col-md-11">
| |
| <div class="tab-pane active" id="lA" style="padding-left: 60px; padding-right:100px">
| |
| <div>
| |
| <div class="row" style="line-height: 14px; border-bottom: solid 1px #DCE1E5; padding-bottom:34.5px; margin-bottom: 34.5px">
| |
| <div class="col-md-6">
| |
| <div class="col-md-5" style="padding: 0">
| |
| <div class="title">
| |
| <span>BALANCE</span>
| |
| </div>
| |
| <div>
| |
| <a href="#" class="balance">$587.50</a>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-7" style="float: none; display: table-cell; vertical-align: bottom; height: 50px; padding-top: 24px">
| |
| <div class="col-md-8" style="padding-left:0px; padding-right: 0px">
| |
| <a href="#" style="line-height: 18px; font-size:14px">Investments</a>
| |
| <a href="#" style="line-height: 18px; font-size:14px">Contributions YTD</a>
| |
| </div>
| |
| <div class="col-md-4">
| |
| <span style="line-height: 18px; font-size:14px">$0.0</span>
| |
| <span style="line-height: 18px; font-size:14px">$786.00</span>
| |
| </div>
| |
| <div class="clear-fix"></div>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-6">
| |
| <div class="title">
| |
| <span>WHAT WOULD YOU LIKE TO DO?</span>
| |
| </div>
| |
| <div class="dropdown">
| |
| <button id="actionsDrop" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width:100%">
| |
| More actions...
| |
| <span class="caret"></span>
| |
| </button>
| |
| <ul class="dropdown-menu" aria-labelledby="actionsDrop">
| |
| <li><a href="#">Manage HSA Contributions</a></li>
| |
| <li><a href="#">Manage HSAOD Activity</a></li>
| |
| <li><a href="#">Go to HSA Save-it!</a></li>
| |
| <li><a href="#">View All Claims</a></li>
| |
| <li><a href="#">View Statements</a></li>
| |
| <!--<li role="separator" class="divider"></li>-->
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| <div class="clearfix"></div>
| |
| </div>
| |
| <div class="row">
| |
| <div class="col-md-6" >
| |
| <div class="title">
| |
| <span>EXPENSE SUMMARY</span>
| |
| </div>
| |
| <div class="col-md-12 top-rounded">
| |
| <div class="col-md-7" style="padding-top:15px; padding-left:3px">
| |
| <div class="title">
| |
| <span>TOTAL EXPENSE</span>
| |
| </div>
| |
| <div class="clear-fix"></div>
| |
| <div style="margin-bottom: 10px; margin-top: -5px;font-size: 18px; font-weight: bold; line-height:18px">
| |
| <span>$458.40</span>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-5" style="padding-top:15px">
| |
| <div class="dropdown">
| |
| <button id="monthsDrop" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width:100%">
| |
| September
| |
| <span class="caret"></span>
| |
| </button>
| |
| <ul class="dropdown-menu" aria-labelledby="monthsDrop">
| |
| <li><a href="#">January</a></li>
| |
| <li><a href="#">February</a></li>
| |
| <li><a href="#">March</a></li>
| |
| <li><a href="#">April</a></li>
| |
| <li><a href="#">May</a></li>
| |
| <li><a href="#">June</a></li>
| |
| <li><a href="#">July</a></li>
| |
| <li><a href="#">August</a></li>
| |
| <li><a href="#">September</a></li>
| |
| <li><a href="#">October</a></li>
| |
| <li><a href="#">November</a></li>
| |
| <li><a href="#">Dicember</a></li>
| |
| </ul>
| |
| </div>
| |
| <!-- <select class="form-control">
| |
| <option value="1">January</option>
| |
| <option value="2">February</option>
| |
| <option value="3">March</option>
| |
| <option value="4">April</option>
| |
| <option value="5">May</option>
| |
| <option value="6">June</option>
| |
| <option value="7">July</option>
| |
| <option value="8">August</option>
| |
| <option value="9" selected>September</option>
| |
| <option value="10">October</option>
| |
| <option value="11">November</option>
| |
| <option value="12">December</option>
| |
| </select>-->
| |
| </div>
| |
| <div class="clear-fix"></div>
| |
| </div>
| |
| <div class="col-md-12 bottom-rounded">
| |
| <canvas id="chart" style="width:400px;height:300px"></canvas>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-6">
| |
| <div>
| |
| <div class="title">
| |
| <span >MY PAYMENT CARD</span>
| |
| </div>
| |
| <div class="col-md-12 rounded" style="height:5em">
| |
| <span>TODO</span>
| |
| <div class="clear-fix"></div>
| |
| </div>
| |
| </div>
| |
| <div style="height:154px">
| |
| <div class="clear-fix"></div>
| |
| <div class="title">
| |
| <span>ADVICE</span>
| |
| </div>
| |
| <div class="col-md-12 rounded" style="height:17em">
| |
| <span>TODO</span>
| |
| <div class="clear-fix"></div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="clear-fix"></div>
| |
| </div>
| |
| </div>
| |
| <div class="clear-fix"></div>
| |
| <div class="row">
| |
| <div class="col-md-12">
| |
| <div class="title">
| |
| <span>RECENT ACTIVITY</span>
| |
| </div>
| |
| <div class="col-md-12 top-rounded" style="font-weight: bold; text-align: center; padding-bottom: 15px">
| |
| <br/>
| |
| TODO - Recent activity datagrid - TODO
| |
| <br/>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="tab-pane" id="lB">
| |
| <div>
| |
| <p>FSA account selected.</p>
| |
| </div>
| |
| </div>
| |
| <div class="tab-pane" id="lC">
| |
| <div>
| |
| <p>HSAOD account selected.</p>
| |
| </div>
| |
| </div>
| |
| <div class="tab-pane" id="lD">
| |
| <div>
| |
| <p>DCAP account selected.</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| </htmL>
| |