forked from pcmueller/fit-lit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (107 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='./src/styles.css'>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link re<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ca77517a12.js" crossorigin="anonymous"></script>
<title>Activity Tracker</title>
</head>
<body>
<main class='main-page' id='mainPage'>
<header class='header-banner' id='headerBanner'>
<p class='header-date' id='headerDate'>today's date</p>
<h1 class='header-message' id='headerMessage'>welcome message</h1>
</header>
<section class='grid-wrapper'>
<section class='home-grid' id='homeGrid'>
<article class='step-goal widget padding-right' id='stepGoal'>
<p class="box-title">STEP GOAL</p>
<p class="box-title-small">YOUR GOAL</p>
<div class='user-datum-medium' id='userStepGoal'>User Step Goal</div>
<p class="box-title-small">AVG USER GOAL</p>
<div class='user-datum-medium' id='avgStepGoal'>Step Goal Comparison</div>
</article>
<article class='user-info padding-right' id='userInfo'>
<p class='user-datum-small' id='name'>name</p>
<p class='user-datum-small' id='address'>address</p>
<p class='user-datum-ex-small email-font' id='email'>email</p>
<p class='user-datum-small' id='stride'>stride</p>
</article>
</section>
<section class='hydration-grid hidden' id='hydrationGrid'>
<article class='weekly-water'>
<p class="box-title">WEEKLY WATER</p>
<div class='user-datum-small' id='userWeeklyWater'>user weekly water</div>
<canvas class='chart-long' id='userWeeklyHydrationGraph' aria-label="bar graph displaying user's weekly water intake"></canvas>
</article>
<article class='daily-water'>
<p class="box-title">DAILY WATER</p>
<div class='user-datum-large' id='userDailyWater'>user daily water</div>
</article>
</section>
<section class='sleep-grid hidden' id='sleepGrid'>
<article class='daily-sleep padding-right' id='dailySleep'>
<p class="box-title-small">DAILY HOURS SLEPT</p>
<div class='user-datum-medium' id='userHoursSlept'></div>
<p class="box-title-small">DAILY SLEEP QUALITY</p>
<div class='user-datum-medium' id='userSleepQuality'></div>
</article>
<article class='avg-sleep padding-right' id='avgSleep'>
<p class="box-title-small">AVG HOURS SLEPT</p>
<div class='user-datum-medium' id='avgHoursSlept'></div>
<p class="box-title-small">AVG SLEEP QUALITY</p>
<div class='user-datum-medium' id='avgSleepQuality'></div>
</article>
<article class='weekly-sleep widget-long' id='weeklySleep'>
<p class='box-title'>WEEKLY SLEEP</p>
<canvas class='chart-short' id='userHoursSleptGraph' aria-label="line graph displaying user's weekly hours slept data"></canvas>
<canvas class='chart-short' id='userSleepQualityGraph' aria-label="line graph displaying user's weekly sleep quality data"></canvas>
</article>
</section>
<section class='activity-grid hidden' id='activityGrid'>
<article class='daily-steps padding-right' id='dailySteps'>
<p class='box-title'>DAILY STEPS</p>
<div class='user-datum-medium' id='userDailyStepCount'>user daily steps</div>
<p class='box-title'>MILES WALKED</p>
<div class='user-datum-medium' id='userDailyDistance'>user daily distance</div>
</article>
<article class='daily-activity padding-right' id='dailyActivity'>
<p class='box-title'>MIN ACTIVE</p>
<div class='user-datum-medium' id='userDailyActivity'>user daily activity</div>
</article>
<article class='weekly-activity' id='weeklyActivity'>
<p class="box-title">WEEKLY MIN</p>
<div class='user-weekly-activity' id='userWeeklyActivity'></div>
<canvas class='chart-long' id='userWeeklyActivityGraph' aria-label="bar graph displaying user's weekly minutes active"></canvas>
</article>
<article class='compare-users widget padding-right' id='compareUsers'>
<p class="box-title">COMPARED TO OTHER USERS TODAY</p>
<div class='user-datum-small' id='compareUserActivity'>compare user activity</div>
</article>
</section>
</section>
<nav class='nav-bar' id='navBar'>
<button class='home-button' id='homeButton' aria-label='home button'>Home</button>
<button class='hydration-button' id='hydrationButton' aria-label='hydration button'>Hydration</button>
<button class='sleep-button' id='sleepButton' aria-label='sleep button'>Sleep</button>
<button class='activity-button' id='activityButton' aria-label='activity button'>Activity</button>
</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
<script type='text/javascript' src='./data/users.js'></script>
<script type='text/javascript' src='./data/hydration.js'></script>
<script type='text/javascript' src='./data/sleep.js'></script>
<script type='text/javascript' src='./data/activity.js'></script>
<script type='text/javascript' src='./src/User.js'></script>
<script type='text/javascript' src='./src/UserHydration.js'></script>
<script type='text/javascript' src='./src/UserSleep.js'></script>
<script type='text/javascript' src='./src/UserActivity.js'></script>
<script type='text/javascript' src='./src/UserRepository.js'></script>
<script type='text/javascript' src='./src/SleepRepository.js'></script>
<script type='text/javascript' src='./src/ActivityRepository.js'></script>
<script type='text/javascript' src='./src/scripts.js'></script>
</main>
</body>
</html>