Arjun Patel
160 lines
5.6 KiB
HTML
160 lines
5.6 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="shortcut icon" href="pics/Airplane.ico" />
|
|
<title>Reflex</title>
|
|
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="dash.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
<script src="https://use.fontawesome.com/7b29adddad.js"></script>
|
|
|
|
<meta name="google-signin-client_id" content="1028038812776-ovsjf90n1m620svlfncolr3h00c0frdn.apps.googleusercontent.com">
|
|
<script src="https://apis.google.com/js/api.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
google.charts.load('current', {'packages':['corechart']});
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
function drawChart() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Task', 'Hours per Day'],
|
|
['Completed', 11],
|
|
['To Go' , 13],
|
|
]);
|
|
var options = {
|
|
title: 'Personal Goal Graph',
|
|
pieHole: 0.8,
|
|
colors:['red','#004411'],
|
|
};
|
|
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
|
|
chart.draw(data, options);
|
|
}
|
|
function getData(value){
|
|
}
|
|
google.charts.load('current', {'packages':['corechart']});
|
|
google.charts.setOnLoadCallback(drawVisualization);
|
|
function drawVisualization() {
|
|
// Some raw data (not necessarily accurate)
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Day', 'Steps', 'Calories', 'Sleep', 'Activity', 'Average'],
|
|
['01/05', 10, 94, 90, 84, 70],
|
|
['01/06', 70, 90, 91, 84, 84],
|
|
['01/07', 96, 98, 70, 93, 90],
|
|
['01/08', 83, 90, 90, 75, 85],
|
|
['01/09', 80, 90, 93, 95, 90]
|
|
]);
|
|
var options = {
|
|
title : 'Daily Fitness Goals',
|
|
vAxis: {title: 'Percent'},
|
|
hAxis: {title: 'Days'},
|
|
seriesType: 'bars',
|
|
series: {5: {type: 'line'}}
|
|
};
|
|
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="g-signin2" data-onsuccess="onSignIn"></div>
|
|
<div class="nav">
|
|
<div id="home" onclick="signOut();" class="home"><i class="fa fa-home fa-3x home" aria-hidden="true"></i></div>
|
|
<div class="profile">
|
|
<p id="email"></p>
|
|
<img id="profImg" src="" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid cardsCont">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 welRow">
|
|
<p id="welcome">Welcome to your interactive Fitness Program!</p>
|
|
</div>
|
|
</div>
|
|
<hr class="hr">
|
|
<div class="row goalRow">
|
|
<div class="col-md-6 cardCont">
|
|
<div class="card">
|
|
<div id="piechart" class="circleGraph"></div>
|
|
</div>
|
|
<!---graph ---->
|
|
</div>
|
|
<div class="col-md-6 cardCont">
|
|
<div class="row twoCardRow">
|
|
<div class="col-md-6 cardCont">
|
|
<div class="card stepsC">
|
|
<i class="fa fa-male fa-2x" aria-hidden="true"></i>
|
|
<p class="cardInfo">Steps</p>
|
|
<p class="cardData">1000</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 cardCont">
|
|
<div class="card calC">
|
|
<i class="fa fa-fire fa-2x" aria-hidden="true"></i>
|
|
<p class="cardInfo">Calories</p>
|
|
<p class="cardData">250 Calories</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row twoCardRow">
|
|
<div class="col-md-6 cardCont">
|
|
<div class="card sleepC">
|
|
<i class="fa fa-bed fa-2x" aria-hidden="true"></i>
|
|
<p class="cardInfo">Sleep</p>
|
|
<p class="cardData">8.5 hours</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 cardCont">
|
|
<div class="card activityC">
|
|
<i class="fa fa-heart fa-2x" aria-hidden="true"></i>
|
|
<p class="cardInfo">Activity</p>
|
|
<p class="cardData">1 hours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mainGCont">
|
|
<div class"col-md-12 mainG">
|
|
<div id="chart_div" class="mainGraph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function onSignIn(googleUser) {
|
|
var profile = googleUser.getBasicProfile();
|
|
console.log('hi');
|
|
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
|
|
console.log('Name: ' + profile.getName());
|
|
console.log('Image URL: ' + profile.getImageUrl());
|
|
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
|
|
document.getElementById("welcome").innerHTML = 'Welcome to your interactive fitness program, ' + profile.getName() + '!';
|
|
document.getElementById('email').innerHTML = profile.getEmail();
|
|
document.getElementById('profImg').src = profile.getImageUrl();
|
|
}
|
|
function signOut() {
|
|
var auth2 = gapi.auth2.getAuthInstance();
|
|
auth2.signOut().then(function () {
|
|
console.log('User signed out.');
|
|
});
|
|
}
|
|
$('#home').click(function() {
|
|
|
|
window.location.href = "http://localhost:8000";
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|