-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (130 loc) · 6.52 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<title>Yoga for the busy!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Do not add `link` tags-->
<link rel='icon' href='https://www.clipartmax.com/png/middle/17-176924_exercise-yoga-male-fitness-stretching-boy-health-yoga-silhouette-male.png' type='image/x-icon'/>
<!-- Do not add `script` tags-->
<script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
<script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
<!-- before login -->
<div id="unAuthedView">
<!-- The video -->
<div class="video-container">
<!-- <img src='backgroundVideo.gif' id='bgVideo' alt="nice-video"/> -->
<img src='https://media.giphy.com/media/iBiQezf5ZNTmwNVHsl/giphy.gif' id='bgVideo'/>
</div>
<div class="to-start">
<div class="form-container">
<h4>Let's get you started</h4>
<h6 id="unAuthedMessage"></h6>
<!-- sign up form-->
<!-- Sign up form don't edit -->
<form id="sign-up" class="forms">
<input name="credentials[email]" type="text" placeholder="Email address" class="form-control">
<input name="credentials[password]" type="password" placeholder="Password" class="form-control">
<input name="credentials[password_confirmation]" type="password" placeholder="Confirm password" class="form-control">
<input name="credentials[fitness]" type="text" placeholder="Fitness level" class="form-control">
<p> Enter 'All levels' or 'Intermediate'</p>
<button class="btn btn-secondary">Sign Up</button>
<button class="btn btn-secondary" id="switch-to-sign-in">Have an account</button>
</form>
<!-- Sign up form don't edit -->
<!-- sign up form-->
<!-- sign in form -->
<!-- Sign in form don't edit -->
<form id="sign-in" class="forms">
<input name="credentials[email]" type="text" placeholder="Email address" class="form-control">
<input name="credentials[password]" type="password" placeholder="Password" class="form-control">
<button class="btn btn-secondary">Sign in</button>
<button class="btn btn-secondary" id="switch-to-sign-up">Create an account</button>
</form>
<!-- Sign in form don't edit -->
<!-- sign in form -->
</div>
</div>
</div>
<!-- once logged in-->
<div id="authedView">
<h5 id="authedMessage"></h5>
<nav class="navbar navbar-expand-lg navbar-light" id="navbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="account">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<ul id="user-account">
<li id="username">Username</li>
<li id="fitness-level">Your fitness level is </li>
<form id="update-fitness">
<select id="select-fitness">
<option id="option1" value="All levels">All levels</option>
<option id="option2" value="Intermediate">Intermediate</option>
</select>
</form>
<li id="account-age"></li>
<button class="btn btn-info" id="delete">Delete account</button>
</ul>
</div>
<!--Change password link -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="password">
Change password
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<form id="change-password" class="forms">
<input type="password" name="passwords[old]" placeholder="Old password" class="form-control">
<input type="password" name="passwords[new]" placeholder="New password" class="form-control">
<button class="btn btn-info">Change password</button>
</form>
</div>
</li>
<!--Sign out link -->
<li class="nav-item">
<a class="nav-link" id="sign-out">Sign out</a>
</li>
</ul>
</nav>
<!-- User time availability -->
<div id="time">
<h5>How long do you have today?</h5>
<div class="btn-group">
<div class="time-availability">
<button type="button" class="btn btn-info" id="thirty-min">40 minutes</button>
<button type="button" class="btn btn-info" id="fortyfive-min">50 minutes</button>
<button type="button" class="btn btn-info" id="sixty-min">70 minutes</button>
</div>
</div>
</div>
<!-- Workout view -->
<div id="picture"></div>
<div id="startWorkout">
<form id="new-invitation" class="forms">
<input id="invitee" placeholder="Invite a friend" class="form-control">
<button type="submit" class="btn btn-info">Invite!</button>
</form>
<h5>Take a deep breath and yoga!</h5>
<!-- <iframe id="workout-video" width="700" height="450" src=""></iframe> -->
<iframe id="workout-video" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Modals -->
<div class="modal" tabindex="-1" role="dialog" id="delete-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h5>Are you sure you want to delete your account?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="delete-account">Delete</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>