Control zing!!!!

2017-09-16 00:06:41 -07:00
parent 34c339acde
commit e2a908d5cc
4 changed files with 140 additions and 20 deletions
@@ -6,33 +6,52 @@
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
+    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  </head>

  <body>
    <div class="container logIn">
+
      <div class="row">
-        <div class="col-xs-12">
-          Email:<input class="input"></input>
+        <div class="col-xs-12 signin">
+          Sign In
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-4 eachintxt">
+          email
+        </div>
+        <div class="col-xs-8">
+          <input class="input"></input>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="row">
+        <div class="col-xs-4 eachintxt">
+          password
+        </div>
+        <div class="col-xs-8">
+          <input class="input"></input>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="row">
+        <div class="col-xs-12 signup">
+          <a class="signup">sign up</a>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
-          Password:<input class="input"></input>
+          <button class="retrieve btn">View Profile</button>
        </div>
      </div>

-      <div class="row">
-        <div class="col-xs-12">
-          Age:<input class="input"></input>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-xs-12">
-          City:<input class="input"></input>
-        </div>
-      </div>
    </div>
  </body>
 </html
@@ -11,20 +11,56 @@ body {
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
+  font-family: 'Dosis', sans-serif;
 }
 div.logIn {
-  height: 500px;
+  height: 375px;
  width: 500px;
-  background-color: white;
+  background-color: #7f8184;
  position: absolute;
    top: 50%;
    left: 25%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
-  border-radius: 5px;
+  border-radius: 20px;
+  box-shadow: 0;
+  transform: translate();
 }

 input.input {
-  background-color: grey;
+  background-color: #d1d3d6;
  border-radius: 5px;
+  width: 250px;
+  font-size: 20px;
+}
+.row {
+  margin: 22px 0 22px 0;
+}
+.signin {
+  font-size: 30px;
+  color: white;
+  text-align: center;
+}
+.eachintxt {
+  text-align: right;
+  color: white;
+  font-size: 20px;
+}
+.signup {
+  color: white;
+  font-size: 15px;
+  text-align: center;
+}
+
+.btn {
+  border-radius: 10px;
+  font-size: 20px;
+  margin-top: 20px;
+  height: 40px;
+  width: 200px;
+  position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
 }
@@ -1,10 +1,17 @@
 google.charts.load('current', {'packages':['corechart']});
+<<<<<<< HEAD
      google.charts.setOnLoadCallback(drawChart);
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawBarChart);
+=======
+google.charts.setOnLoadCallback(drawChart);
+google.charts.load('current', {'packages':['bar']});
+google.charts.setOnLoadCallback(drawChart);
+>>>>>>> parent of 3e059c2... d

-      function drawChart() {
+function drawChart() {

+<<<<<<< HEAD
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Amount'],
          ['Food and Dining',     11],
@@ -20,8 +27,24 @@ google.charts.load('current', {'packages':['corechart']});
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
+=======
+    var data = google.visualization.arrayToDataTable([
+        ['Task', 'Hours per Day'],
+        ['Food and Dining',     11],
+        ['Clothing',  2],
+        ['Entertainment', 2],
+        ['Transportation',    7],
+        ['Other',   1]
+    ]);

+    var options = {
+        title: 'My Daily Activities'
+    };
+>>>>>>> parent of 3e059c2... d
+
+    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
+<<<<<<< HEAD
      }

      function drawBarChart() {
@@ -47,3 +70,46 @@ google.charts.load('current', {'packages':['corechart']});

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
+=======
+     }
+};
+
+function drawChart() {
+    var data = google.visualization.arrayToDataTable([
+        ['Category', 'You', 'Average 18 Year Old'],
+        ['Food and Dining', 1000, 400],
+        ['Utilities', 1170, 460],
+        ['Clothing', 660, 120],
+        ['Entertainment', 1030, 540],
+        ['Transportation', 1030, 540],
+        ['Other', 1030, 540]
+    ]);
+
+    var options = {
+        chart: {
+            title: 'Comparing Spending Habits',
+            subtitle: 'Based on other 18 year olds',
+        },
+        bars: 'horizontal', // Required for Material Bar Charts.
+        hAxis: {
+            format: 'decimal'
+        },
+        height: 400,
+        colors: ['#1b9e77', '#d95f02', '#7570b3']
+    };
+
+    var chart = new google.charts.Bar(document.getElementById('chart_div'));
+
+    chart.draw(data, google.charts.Bar.convertOptions(options));
+
+    var btns = document.getElementById('btn-group');
+
+    btns.onclick = function(e) {
+
+        if (e.target.tagName === 'BUTTON') {
+            options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
+            chart.draw(data, google.charts.Bar.convertOptions(options));
+        }
+    }
+}
+>>>>>>> parent of 3e059c2... d
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>

  <head>