big update
This commit is contained in:
Arjun Patel
@@ -9,7 +9,6 @@ body {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
div.profTitle {
|
||||
padding-top: 5px;
|
||||
@@ -21,11 +20,60 @@ div.profTitle {
|
||||
font-family: 'Dosis', sans-serif;
|
||||
z-index: 10;
|
||||
}
|
||||
.sbreak {
|
||||
margin-top: 10px;
|
||||
padding: 150px 0 150px 0;
|
||||
border-right: 1px solid #45d7e8;
|
||||
color: grey;
|
||||
font-size: 70px;
|
||||
text-align: right;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
}
|
||||
#piechart {
|
||||
padding: 0;
|
||||
height: 800px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: -100px;
|
||||
margin-left: 100px;
|
||||
height: 940px;
|
||||
margin-top: -175px;
|
||||
}
|
||||
div.firstchart {
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
div.text {
|
||||
border-top: 1px solid #45d7e8;
|
||||
}
|
||||
|
||||
div.trans {
|
||||
font-size:70px;
|
||||
color: grey;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
padding-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
div.total {
|
||||
font-size:35px;
|
||||
color: green;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
margin-top:50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.catRow {
|
||||
margin: 30px 0 30px 0;
|
||||
}
|
||||
.totalamt {
|
||||
font-size: 25px;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
text-align: right;
|
||||
color: green;
|
||||
margin: 0;
|
||||
}
|
||||
.btn {
|
||||
width: 400px;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
}
|
||||
.col-xs-3 {
|
||||
font-family: 'Dosis', sans-serif;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
+99
-41
@@ -19,63 +19,121 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12" id="piechart"></div>
|
||||
</div>
|
||||
<div class="row firstchart">
|
||||
<div class="col-xs-4 sbreak">Spending Breakdown</div>
|
||||
<div class="col-xs-8" id="piechart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo0">Food and Dining</button>
|
||||
<div class="container text">
|
||||
<div class="row">
|
||||
<div class="col-xs-11 trans">
|
||||
Transactions
|
||||
</div>
|
||||
<!---<div class="col-xs-1 total">
|
||||
Total
|
||||
</div> --->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo0"><font size="5px">+ Food and Dining</font></button>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$38.30
|
||||
</div>
|
||||
</div>
|
||||
<div id="demo0" class="collapse">
|
||||
In-N-Out Friday, July 18 11:30 PM $3.09
|
||||
Chipotle Saturday, July 19 11:23 PM $6.98
|
||||
McDonald's Thursday, July 24 10::48 PM $9.80
|
||||
In-N-Out Friday, July 25 11:51 PM $3.09
|
||||
California Pizza Kitchen Saturday, July 26 2:18 PM $15.34
|
||||
<div class="row">
|
||||
<div class="col-xs-3">In-N-Out</div><div class="col-xs-3">Friday, July 18</div><div class="col-xs-3">11:30 PM</div><div class="col-xs-3">$3.09</div>
|
||||
<div class="col-xs-3">Chipotle</div> <div class="col-xs-3">Saturday, July 19</div> <div class="col-xs-3">11:23 PM</div> <div class="col-xs-3">$6.98</div>
|
||||
<div class="col-xs-3">McDonald's</div> <div class="col-xs-3">Thursday, July 24</div> <div class="col-xs-3">10:48 PM</div> <div class="col-xs-3">$9.80</div>
|
||||
<div class="col-xs-3">In-N-Out</div> <div class="col-xs-3">Friday, July 25</div> <div class="col-xs-3">11:51 PM</div> <div class="col-xs-3">$3.09</div>
|
||||
<div class="col-xs-3">California Pizza Kitchen</div> <div class="col-xs-3">Saturday, July 26</div> <div class="col-xs-3"> 2:18 PM</div> <div class="col-xs-3">$15.34</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Transportation</button>
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1"><font size="5px">+ Transportation</font></button>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$12.01
|
||||
</div>
|
||||
</div>
|
||||
<div id="demo1" class="collapse">
|
||||
Uber Saturday, July 19 12:02 AM $12.01
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Uber</div><div class="col-xs-3">Saturday, July 19</div><div class="col-xs-3">12:02 AM</div><div class="col-xs-3">$12.01</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2"><font size="5px">+ Utilities</font></button>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$0.00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">Utilities</button>
|
||||
<div id="demo2" class="collapse">
|
||||
No transactions avaiable
|
||||
<div class="row">
|
||||
<div class="col-xs-3">No transactions avaiable</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo3">Clothing</button>
|
||||
<div id="demo3" class="collapse">
|
||||
Macy's Friday, July 18 10:12 PM $32.09
|
||||
Lululemon Athletica Saturday, July 19 9:21 PM $20.61
|
||||
Target Thursday, July 24 10::01 PM $4.89
|
||||
Vans Friday, July 25 9:59 PM $60.24
|
||||
Aididas Saturday, July 26 1:08 PM $28.42
|
||||
<hr>
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo3"><font size="5px">+ Clothing</font></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$146.25
|
||||
</div>
|
||||
</div>
|
||||
<div id="demo3" class="collapse">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Macy's</div><div class="col-xs-3">Friday, July 18</div><div class="col-xs-3">10:12 PM</div><div class="col-xs-3">$32.09</div>
|
||||
<div class="col-xs-3">Lululemon Athletica</div><div class="col-xs-3">Saturday, July 19</div><div class="col-xs-3">9:21 PM</div><div class="col-xs-3">$6.98</div>
|
||||
<div class="col-xs-3">Target</div><div class="col-xs-3">Thursday, July 24</div><div class="col-xs-3">10:01 PM</div><div class="col-xs-3">$4.89</div>
|
||||
<div class="col-xs-3">Vans</div><div class="col-xs-3">Friday, July 25</div><div class="col-xs-3">9:59 PM</div><div class="col-xs-3"> $60.24</div>
|
||||
<div class="col-xs-3">Aididas</div><div class="col-xs-3">Saturday, July 26</div><div class="col-xs-3">1:08 PM</div><div class="col-xs-3">$28.42</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo4">Entertainment</button>
|
||||
<hr>
|
||||
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo4"><font size="5px">+ Entertainment</font></button>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$20.50
|
||||
</div>
|
||||
</div>
|
||||
<div id="demo4" class="collapse">
|
||||
Irvine Lanes Monday, July 21 9:00 PM $6.50
|
||||
Edward's Cinema Thursday, July 24 5:50 $14.00
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Irvine Lanes</div><div class="col-xs-3">Monday, July 21</div><div class="col-xs-3">9:00 PM</div><div class="col-xs-3">$6.50</div>
|
||||
<div class="col-xs-3">Edward's Cinema</div><div class="col-xs-3">Thursday, July 24</div><div class="col-xs-3">5:50 PM</div><div class="col-xs-3">$14.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row catRow">
|
||||
<div class="col-xs-11">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo5"><font size="5px">+ Other</font></button>
|
||||
</div>
|
||||
<div class="col-xs-1 totalamt">
|
||||
$320.40
|
||||
</div>
|
||||
</div>
|
||||
<div id="demo5" class="collapse">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Apple Watch</div><div class="col-xs-3">Monday, July 21</div><div class="col-xs-3">2:00 AM</div><div class="col-xs-3">$320.40</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo5">Other</button>
|
||||
<div id="demo5" class="collapse">
|
||||
Transaction 1:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user