forked from akshitagupta15june/GymFreaks.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
323 lines (277 loc) · 14.6 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en">
<title>GymFreaks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 10px;
/* background-color: #2196F3; */
/* padding: 10px; */
}
.grid-container > div {
/* background-color: rgba(255, 255, 255, 0.8); */
/* border: 1px solid black; */
color: cadetblue;
text-align: center;
font-size: 15px;
/* font-size: 30px; */
}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT US</a>
<a href="#workout" class="w3-bar-item w3-button w3-padding-large w3-hide-small">WORKOUT</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT US</a>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<a href="#about" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">ABOUT US</a>
<a href="#workout" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">WORKOUT</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<!-- Automatic Slideshow Images -->
<div class="mySlides w3-display-container w3-center">
<img src="images/gymfreakback.png" style="width: 100%">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
<h3>Rory Mcllroy</h3>
<p><b>“Going to the gym is great for your body, but its also great for your mind”</b></p>
</div>
</div>
</div>
<div class="mySlides w3-display-container w3-center">
<img src="images/gymoo.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
<h3>Anonymous</h3>
<p><b>“Your body can stand almost anything.Its your mind that that tells you to continue.”</b></p>
</div>
</div>
<!-- The Band Section -->
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="about">
<h2 class="w3-wide"><b>GymFreaks</b></h1>
<p class="w3-opacity"><i>‘The last three or four reps is what makes the muscle grow. This area of pain divides a champion from someone who is not a champion.’</i></p>
<p class="w3-center"><b>Do you want to spend a few fruitful hours at the gym? Would it be better to see someone performing the exercises around you?
<br><h5>
Don't have a trainer around?<br>
Don't worry! GymFreaks is here to help you. <br>
Scan the QR code beside the exercise using Google Lens. You can inspect the video playing right in front of you and get every movement right!<br>
Have a problem with the AR set-up? Watch the 3D video instead.
<br>
GymFreaks ensures that your gym-time counts!</h5>
</b></p>
</div>
<!-- The workout Section Section -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="workout">
<h1 class="w3-wide w3-center">Let's do Workout!</h1>
<p class="w3-opacity w3-center"><i>"All progress takes place outside the comfort zone."</i></p>
<p class="w3-justify w3-center">
</p>
<div class = "w3-center">
<img src="images/fitness.jpg" style="width:70%">
<p><b>Best Workout Song to Get You Motivated.</b></p>
<audio controls>
<source src="hall-of.mp3" type="audio/mpeg">
<p><b>Some beats to ramp up your workout!</b></p>
<audio controls>
<source src="music/electro-sky-8470.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio controls>
<source src="music/jump-to-conclusion-10411.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Your browser does not support the audio element.
</audio>
<b><p>Scan the QR code beside the 3D exercise video using Google Lens. You can inspect the video playing right in front of you and get every movement right!
Have a problem with the AR set-up? Watch the 3D video instead.</p></b>
</div>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Bench Press</b></p>
<video src="videos/bodybuilding.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/body-building.png" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;">
</div>
</div>
<p><b>Here’s how to Bench Press with proper form:</b></p>
<ol>
<li>Lie on the bench with your eyes under the bar</li>
<li>Grab the bar with a medium grip-width (thumbs around the bar!)</li>
<li>Unrack the bar by straightening your arms</li>
<li>Lower the bar to your mid-chest</li>
<li>Press the bar back up until your arms are straight</li>
</ol>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Ball Swing</b></p>
<video src="videos/ball-swing.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/ballswing.jpeg" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;">
</div>
</div>
<p><b>Here’s how to Ball Swing with proper form:</b></p>
<ol>
<li>Squat while holding the yoga ball to engage your core.</li>
<li>Sit on your yoga ball and lean back to form an abdominal crunch.</li>
<li>Lie on your back and balance your legs on a yoga ball to form a bridge pose.</li>
<li>Perform a plank with your thighs resting on the yoga ball.</li>
<li>Roll the ball forward with your legs to strengthen your abs.</li>
</ol>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Dumbbells Lift</b></p>
<video src="videos/dumbell.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/dumbell.jpeg" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;" >
</div>
</div>
<p><b>Here’s how to dumbbells lifting with proper form:</b></p>
<ol>
<li>Stand with your feet shoulder-width apart, your arms hanging naturally at your sides and your palms facing your body.</li>
<li>Lie face-up on a bench with your knees bent and your feet flat on the floor to do bench presses.</li>
<li>Perform dumbbell rows using one arm at a time. Balance yourself with your left leg on the floor, and your right hand and leg on top of a bench.</li>
<li>Stand with your feet shoulder-width apart and grasp a dumbbell in each hand to do dumbbell rows.</li>
<li>Tighten your abs, keep your back straight and exhale as you rise to an erect position.</li>
</ol>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Preacher bench using bent bar</b></p>
<video src="videos/preacher.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/preacher.png" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;" >
</div>
</div>
<p><b>Here’s how to do Preacher Curls with proper form:</b></p>
<ol>
<li>Grab the barbell or EZ curl bar with an underhand grip, and sit down on the preacher curl bench with your feet flat on the floor. Adjust the seat to allow your upper arms and chest to be in contact with the arm pad.</li>
<li>Your chin should remain tucked throughout the movement, as if you were holding an egg under your chin.</li>
<li>While keeping your upper arms in contact with the arm pad, initiate the upward movement by squeezing your biceps and bending your elbows.</li>
<li>Finish the movement by squeezing your biceps.</li>
<li>Slowly straighten your elbows to lower the barbell to the starting position.</li>
</ol>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Barbell standing calf raise</b></p>
<video src="videos/barbell.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/barbell.png" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;" >
</div>
</div>
<p><b>Here’s how to do standing barbell calf raise with proper form:</b></p>
<ol>
<li>Start of by placing a block or two free weight plates on the floor, then placing a weighted barbell across your back and step up so that the balls of your feet are on the block.</li>
<li>Slowly lift your heels up off of the floor and then lower them back so that you feel as much of a stretch as possible in your calf muscles.</li>
<li>Return to the starting position and repeat for as many reps and sets as desired.</li>
<li>Finish the movement by squeezing your biceps.</li>
<li>Slowly straighten your elbows to lower the barbell to the starting position.</li>
</ol>
<div class="w3-padding-32">
<div class = "w3-left">
<p><b class = "w3-xxlarge ">Leverage Machine High Row</b></p>
<video src="videos/leverage.mp4" type="video/mp4" class="w3-round w3-margin-bottom" alt="Body Building preview" style="width: 450px;" controls></video>
</div>
<div class = "w3-center w3-padding-64">
<p>Scan this QR code for AR-Workout</p>
<img src = "qr-code/leverage.png" class="w3-round w3-margin-bottom " alt="QR code-body buiding" style="width: 250px;" >
</div>
</div>
<p><b>Here’s how to do Leverage Machine High Row with proper form:</b></p>
<ol>
<li>Start off by loading weight onto the leverage machine and adjust the settings so that the handles are just above you and knee pads can comfortably keep you down.</li>
<li> Slowly pull both handles down towards your abs retracting your shoulders back as you motion downwards.</li>
<li>As soon as you reach the bottom and feel tension on your lower back, stop, squeeze your muscles and hold for a count.</li>
<li>Return back to the starting position and repeat for as many reps and sets as desired.</li>
<li>Finish the movement by squeezing your biceps.</li>
</ol>
</div>
<!-- The Contact Section -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
<h2 class="w3-wide w3-center">CONTACT US</h2>
<p class="w3-opacity w3-center"><i>REPORT ANY SERIOUS ISSUES!!</i></p>
<div class="w3-col m13 w3-center">
<form action="https://formspree.io/f/xayaokzl" method="POST">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
</div>
</div>
<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">
<button class="w3-button w3-black w3-section w3-right" type="submit">SEND</button>
</form>
</div>
</div>
</div>
<!-- End Page Content -->
</div>
<!-- Image of location/map -->
<img src="images/gymback.jpg" class="w3-image w3-greyscale-min" style="width:100%">
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
<div class="grid-container">
<div>
</div>
</ul>
</div>
</footer>
<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000);
}
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>