Merge pull request #31 from CharlieMallon/dd-lastjobs

Dd lastjobs
CharlieMallon · Nov 21, 2022 · 45b9bd8 · 45b9bd8
2 parents 926f75a + 9477a83
commit 45b9bd8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/assets/css/game.css b/assets/css/game.css
@@ -1,7 +1,6 @@
 /* styling css */
 
 .score-wrapper{
-    height: 20%;
     width: 80%;
     border-radius: 10px;
     color: #fafafa;
@@ -32,6 +31,7 @@
     justify-content: space-evenly;
     display: flex;
     flex-direction: row;
+    align-items: flex-end;
 }
 
 #end-game-container{
@@ -126,4 +126,10 @@
 
 .hidden{
     display: none;
-}
+}
+
+@media (max-width: 780px) {
+    .score-wrapper{
+        width: 100%;
+    }
+  }
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -47,4 +47,24 @@ p {
     background-color: #db3eb1;
     filter: drop-shadow(0 0 20px #db3eb1) contrast(2) brightness(2);
   }
-
+
+  /* mute button  color*/
+  .mute-button {
+    filter: invert(100%) sepia(4%) saturate(361%) hue-rotate(252deg) brightness(116%) contrast(96%);
+  }
+
+  /* volume selector color */
+  input[type=range] {
+    -webkit-appearance: none;
+    background-color: #fafafa;
+    height: 10px;
+}
+
+/* volume selector color */
+input[type="range"]::-webkit-slider-thumb {
+     -webkit-appearance: none;
+    background-color: #db3eb1;
+    width: 10px;
+    height: 26px;
+
+}
diff --git a/carousel.html b/carousel.html
@@ -24,7 +24,7 @@
         by the BPM of the song.  Carousel shows the
         single cover of the song, artist and difficulty. -->
     <div class="container text-center">
-        <h1 class="logo">Rhythm Heroes</h1>
+        <a href="index.html"><h1 class="logo">Rhythm Heroes</h1></a>
     </div>
 
     <div class="header">
@@ -54,7 +54,7 @@ <h2>Select Your Song</h2>
     <!-- ./mute button and slider -->
 
     <!-- Audio Player-->
-    <audio id="carousel-audio-player" controls>
+    <audio id="carousel-audio-player">
         <source src="">
     </audio>
     <!-- Audio Player-->

diff --git a/game.html b/game.html
@@ -26,7 +26,8 @@
 
     <!-- Game Name -->
     <div class="container text-center">
-        <h1 class="logo">Rhythm Heroes</h1>
+        <a href="index.html"><h1 class="logo">Rhythm Heroes</h1></a>
+
     </div>
     <!-- Game name-->
 
@@ -44,7 +45,14 @@ <h3>Current Song</h3>
         <div class="score">
             <p>Score: <span id="score"></span></p>
             <p>High Score: cookie?</p>
-            <p class="volume">volume slider</p>
+            <div id="carousel-volume-settings">
+                <label class="mute-button" id="mute-button" for="volume"><svg xmlns="http://www.w3.org/2000/svg"
+                        height="48" width="48">
+                        <path
+                            d="M28 41.45v-3.1q4.85-1.4 7.925-5.375T39 23.95q0-5.05-3.05-9.05-3.05-4-7.95-5.35v-3.1q6.2 1.4 10.1 6.275Q42 17.6 42 23.95t-3.9 11.225Q34.2 40.05 28 41.45ZM6 30V18h8L24 8v32L14 30Zm21 2.4V15.55q2.75.85 4.375 3.2T33 24q0 2.85-1.65 5.2T27 32.4Zm-6-16.8L15.35 21H9v6h6.35L21 32.45ZM16.3 24Z" />
+                    </svg></label>
+                <input type="range" id="volume" name="volume" min="0" max="10" value="2">
+            </div>
         </div>
 
     </div>
@@ -85,7 +93,7 @@ <h3>Current Song</h3>
     <!-- ./GameBoard -->
 
     <!-- Audio Player -->
-    <audio id="game-audio" controls>
+    <audio id="game-audio">
         <source src="">
     </audio>
     <!-- ./Audio Player -->

diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 
 <body>
   <div class="container">
-    <h1 class="text-center p-2 logo">Rhythm Heroes</h1>
+    <a href="index.html"><h1 class="text-center p-2 logo">Rhythm Heroes</h1></a>
   </div>
 
   <!-- Jumbotron -->