AnleitungTest: Unterschied zwischen den Versionen
Aus Joachim Camerarius (1500-1574)
Noeth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Noeth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
<html> | <html> | ||
< | <head> | ||
<style> | |||
body | |||
{ | |||
font-family: 'Roboto', sans-serif; | |||
/*color: #B7C4CB;*/ | |||
background-color: #F7F9F9; | |||
margin:0; | |||
padding:0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
body > div { | |||
margin-top: 10px; | |||
} | |||
a { | |||
/*font-size: 0.9em;*/ | |||
color: #72B032; | |||
/*color: #86BB4F;*/ | |||
} | |||
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; | |||
} | |||
.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> | |||
<!------ Include the above in your HEAD tag ----------> | |||
<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">HSA</span><br/> | |||
<span class="account-amount">$587.00</span><br/> | |||
<a href="#" class="account-link">Investments</a> | |||
</div> | |||
</div> | |||
</li> | |||
<li> | |||
<div data-target="#lB" data-toggle="tab"> | |||
<div> | |||
<span class="account-type">FSA</span><br/> | |||
<span class="account-amount">$120,00</span><br/> | |||
<a href="#" class="account-link">Investments</a> | |||
</div> | |||
</div> | |||
</li> | |||
<li> | |||
<div data-target="#lC" data-toggle="tab"> | |||
<div> | |||
<span class="account-type">HSAOD</span><br/> | |||
<span class="account-amount">$350,00</span><br/> | |||
<!-- <span class="account-amount">$587.00</span><br/> | |||
<a href="#" class="account-link">Investments</a>--> | |||
</div> | |||
</div> | |||
</li> | |||
<li> | |||
<div data-target="#lD" data-toggle="tab"> | |||
<div> | |||
<span class="account-type">DCAP</span><br/> | |||
<span class="account-amount">$2.300,00</span><br/> | |||
<a href="#" class="account-link">Investments</a> | |||
</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> | </div> | ||
</div> | |||
</htmL> | |||
Version vom 7. Juli 2019, 19:35 Uhr
BALANCE
$0.0
$786.00
WHAT WOULD YOU LIKE TO DO?
EXPENSE SUMMARY
TOTAL EXPENSE
$458.40
MY PAYMENT CARD
TODO
ADVICE
TODO
RECENT ACTIVITY
TODO - Recent activity datagrid - TODO
FSA account selected.
HSAOD account selected.
DCAP account selected.