From 333f3adebb0ccc596cf05dcbf260bed78e5b5c6e Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 16 Sep 2017 02:58:22 -0700
Subject: [PATCH] big update

---
 prof.css     |  60 +++++++++++++++++++---
 profile.html | 140 ++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 153 insertions(+), 47 deletions(-)

diff --git a/prof.css b/prof.css
index 6ddbe40..1ee1b68 100644
--- a/prof.css
+++ b/prof.css
@@ -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;
 }
diff --git a/profile.html b/profile.html
index ffa07d0..ca36923 100644
--- a/profile.html
+++ b/profile.html
@@ -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>