ml5

Deus-Group-HT6 · Aug 21, 2021 · bb2f2ff · bb2f2ff
1 parent d18f9bf
commit bb2f2ff
Show file tree

Hide file tree

Showing 16 changed files with 20,518 additions and 85 deletions.
diff --git a/public/arms.html b/public/arms.html
@@ -24,18 +24,47 @@
     <div class="title">
       <h1>You have selected: Arms</h1>
     </div>
+
+    <div class="clearfix muscle">
+            <h3>Select muscle group for workout:</h3>
+            <ul>
+              <li>
+
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                  <p1>Exercise 1</p1>
+                </button>
+              </li>
+              <li>
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                    <p1>Exercise 1</p1>
+                </button>
+              </li>
+              <li>
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                    <p1>Exercise 1</p1>
+                </button>
+              </li>
+            </ul>
+      </div>
+
+      <div id="container">
+        <video autoplay="true" id="video" style="max-width: 100%; max-height: 100%"></video>
+      </div>
 
       <div class="stopwatch">
         <span class="time" id="display">00:00:00</span>
         <div class="controls">
         <button class="buttonPlay">
-          <img id="playButton" src="play-button.png"/>
+          <img id="playButton" src="playbtn.png"/>
 
-          <img id="pauseButton" src="pause-button.png"/>
+          <img id="pauseButton" src="pausebtn.png"/>
         </button>
 
         <button class="buttonReset">
-          <img id="resetButton" src="stop-button.png"/>
+          <img id="resetButton" src="resetbtn.png"/>
         </button>
         </div>
       </div>

diff --git a/public/chest.html b/public/chest.html
@@ -25,18 +25,46 @@
       <h1>You have selected: Chest</h1>
     </div>
 
+    <div class="clearfix muscle">
+            <h3>Select muscle group for workout:</h3>
+            <ul>
+              <li>
+
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                  <p1>Exercise 1</p1>
+                </button>
+              </li>
+              <li>
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                    <p1>Exercise 1</p1>
+                </button>
+              </li>
+              <li>
+                <button onclick="showVid()">
+                  <img src="favicon.png">
+                    <p1>Exercise 1</p1>
+                </button>
+              </li>
+            </ul>
+      </div>
+
+      <div id="container">
+        <video autoplay="true" id="video" style="max-width: 100%; max-height: 100%"></video>
+      </div>
 
     <div class="stopwatch">
       <span class="time" id="display">00:00:00</span>
       <div class="controls">
       <button class="buttonPlay">
-        <img id="playButton" src="play-button.png"/>
+        <img id="playButton" src="playbtn.png"/>
 
-        <img id="pauseButton" src="pause-button.png"/>
+        <img id="pauseButton" src="pausebtn.png"/>
       </button>
 
       <button class="buttonReset">
-        <img id="resetButton" src="stop-button.png"/>
+        <img id="resetButton" src="resetbtn.png"/>
       </button>
       </div>
     </div>

diff --git a/public/css/arms.css b/public/css/arms.css
@@ -1,3 +1,8 @@
+.button {
+  padding: 0;
+  margin: 0;
+}
+
 .body {
   font-family: 'IBM Plex Sans Hebrew', sans-serif;
   font-weight: normal;
@@ -48,10 +53,109 @@
   background-color: #111;
 }
 
-#playButton {
-  display: block;
+.muscle {
+  padding: 0 20px;
+}
+
+.muscle h3{
+  position: relative;
+  font-family: 'IBM Plex Sans Hebrew', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 200%;
+  line-height: 115px;
+  text-align: center;
+  letter-spacing: -0.017em;
+
+  padding-top:  50px;
+
+  color: #000000;
+}
+
+
+.muscle ul {
+  position: relative;
+  padding:0;
+  margin:0;
+  }
+
+.muscle li{
+  float: left;
+  width: calc((100% - 20px*2)/3);
+  height:auto;
+  list-style-type: none;
+  background-color: #333;
+  margin-right: 20px;
+  margin-bottom: none;
+  position: relative;
+  text-align: center;
+  border-radius: 20px;
+
+  box-shadow: 0px 0px 10px rgba(0,0,0,.5);
+  transition: transform .2s;
+}
+
+.muscle li:last-of-type{
+  margin-right: 0px;
+}
+
+.imgfilter{
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #00000060;
+  border-radius: 20px;
+}
+
+.muscle li p1{
+  color: #FFFFFF;
+  font-family: 'IBM Plex Sans Hebrew', sans-serif;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+}
+
+.muscle li:hover {
+  transform: scale(1.05);
+}
+
+.muscle li img{
+  max-width:  100%;
+}
+
+#container{
+  padding: 20px;
+  width:  100%;
+  height:  20%;
+  text-align: center;
+  display: none;
+}
+.stopwatch{
+  padding-top: 20px;
+  text-align: center;
+}
+
+.buttonPlay {
+  display:  inline-block;
 }
 
 #pauseButton {
   display: none;
+}
+
+.buttonReset {
+
+}
+
+.stopwatch button {
+  height:  100px;
+}
+
+.stopwatch img{
+  max-height: 100%;
+  max-width: 100%
 }
diff --git a/public/css/chest.css b/public/css/chest.css
@@ -1,3 +1,8 @@
+.button {
+  padding: 0;
+  margin: 0;
+}
+
 .body {
   font-family: 'IBM Plex Sans Hebrew', sans-serif;
   font-weight: normal;
@@ -48,10 +53,109 @@
   background-color: #111;
 }
 
-#playButton {
-  display: block;
+.muscle {
+  padding: 0 20px;
+}
+
+.muscle h3{
+  position: relative;
+  font-family: 'IBM Plex Sans Hebrew', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 200%;
+  line-height: 115px;
+  text-align: center;
+  letter-spacing: -0.017em;
+
+  padding-top:  50px;
+
+  color: #000000;
+}
+
+
+.muscle ul {
+  position: relative;
+  padding:0;
+  margin:0;
+  }
+
+.muscle li{
+  float: left;
+  width: calc((100% - 20px*2)/3);
+  height:auto;
+  list-style-type: none;
+  background-color: #333;
+  margin-right: 20px;
+  margin-bottom: none;
+  position: relative;
+  text-align: center;
+  border-radius: 20px;
+
+  box-shadow: 0px 0px 10px rgba(0,0,0,.5);
+  transition: transform .2s;
+}
+
+.muscle li:last-of-type{
+  margin-right: 0px;
+}
+
+.imgfilter{
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #00000060;
+  border-radius: 20px;
+}
+
+.muscle li p1{
+  color: #FFFFFF;
+  font-family: 'IBM Plex Sans Hebrew', sans-serif;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+}
+
+.muscle li:hover {
+  transform: scale(1.05);
+}
+
+.muscle li img{
+  max-width:  100%;
+}
+
+#container{
+  padding: 20px;
+  width:  100%;
+  height:  20%;
+  text-align: center;
+  display: none;
+}
+.stopwatch{
+  padding-top: 20px;
+  text-align: center;
+}
+
+.buttonPlay {
+  display:  inline-block;
 }
 
 #pauseButton {
   display: none;
+}
+
+.buttonReset {
+
+}
+
+.stopwatch button {
+  height:  100px;
+}
+
+.stopwatch img{
+  max-height: 100%;
+  max-width: 100%
 }
diff --git a/public/css/legs.css b/public/css/legs.css
@@ -104,7 +104,7 @@
   top: 0;
   height: 100%;
   width: 100%;
-  background-color: #00000060;
+  background-color: #000000;
   border-radius: 20px;
 }
 
@@ -134,21 +134,27 @@
   text-align: center;
   display: none;
 }
+
 .stopwatch{
   padding-top: 20px;
   text-align: center;
+
+  font-family: 'IBM Plex Sans Hebrew', sans-serif;
+  font-size: 150%;
 }
 
-.buttonPlay {
-  display:  inline-block;
+#playButton {
+  display: inline-block;
 }
 
 #pauseButton {
   display: none;
 }
 
-.buttonReset {
-
+#resetButton {
+  display: inline-block;
+  padding: 0;
+  margin:  0;
 }
 
 .stopwatch button {