<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
/* ROBOTO FONT FACES - I */
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* ROBOTO FONT FACES - F */
/** General HTML style - I */
/*@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);*/
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;
}
$(document).ready(function(){
var canvas = $("#chart").get(0);
var ctx = canvas.getContext('2d');
// Global Options:
//Chart.defaults.global.defaultFontColor = '#a0aeb6';
//Chart.defaults.global.defaultFontSize = 12;
// Data with datasets options
var data = {
labels: ["Eyecare", "Medical", "Dentist", "Rx"],
datasets: [
{
backgroundColor:
['#313f4d','#54585a','#39af87','#379baf'],
borderWidth: 0,
data: [84.60, 84.60, 160, 110]
}
]
};
var options = {
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},
isFixedWidth:true,
barWidth:1,
legend: {
display: false
},
tooltips: {
mode: 'index',
callbacks: {
label: function(tooltipItem) {
return "$" + Number(tooltipItem.yLabel).toFixed(2);
},
labelTextColor:function(tooltipItem, chart){
return '#000000';
}/*,
titleTextColor:function(tooltipItem, chart){
return '#000000';
}*/
},
backgroundColor: '#ffffff',
borderColor: '#a0aeb6',
borderWidth: 1,
bodySpacing: 0,
cornerRadius: 2,
displayColors: false,
titleMarginTop: 20,
titleMarginBottom: 0,
titleFontSize: 0,
titleFontColor: '#000000',
caretSize: 4,
xAlign: 'center',
yAlign: 'bottom',
xPadding: 12,
yPadding: 12,
},
title: {
display: false,
text: 'Graph title',
position: 'bottom'
},
scales: {
xAxes: [
{
barThickness : 35,
gridLines: {
display: false
},
ticks: {
fontSize: "12",
fontColor: "#000000",
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false,
color: "#dce1e5",
borderDash: [4, 3],
borderDashOffset: 3
},
ticks: {
beginAtZero:true,
fontColor: "#a0aeb6",
fontSize: "12",
callback: function (value) {
return "$"+Number(value)
},
stepSize: 25
}
}]
},
responsive: true
};
// Chart declaration:
var barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
});
