Updated about.html

tayrp · Sep 17, 2024 · 8070b06 · 8070b06
1 parent 81955d4
commit 8070b06
Showing 1 changed file with 50 additions and 33 deletions.
diff --git a/about.html b/about.html
@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-
     <head>
-
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,7 +12,6 @@
         <link rel="stylesheet" href="assets/css/animate.css">
         <link rel="stylesheet" href="assets/css/style.css">
 		<link rel="stylesheet" href="assets/css/about/style.css">
-
 
         <!-- Favicon -->
         <link rel="shortcut icon" href="assets//assets\imgs\favicon.png">
@@ -44,37 +41,57 @@
 
 		<about>
 			<div class="about">
-			<div>
-				<body>
-					<div class="content">
-						<h1>Tee</h1>
-						<p>Heya! I'm Tee, A small Modrinth creator.</p>
-						<div id="images">
-						<a href="https://discord.com/users/1050531216589332581" target="_blank"><img src="assets/imgs/discord.png" class="social-logo" alt="Discord"></a>
-						<a href="https://github.com/tayrp" target="_blank"><img src="assets/imgs/github.png" class="social-logo" alt="Github"></a>
-						<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="assets/imgs/youtube.png" class="social-logo" alt="Twitter"></a>
+				<div>
+					<body>
+						<div class="content">
+							<h1>Tee</h1>
+							<p>Heya! I'm Tee, A small Modrinth creator.</p>
+							<div id="images">
+								<a href="https://discord.com/users/1050531216589332581" target="_blank"><img src="assets/imgs/discord.png" class="social-logo" alt="Discord"></a>
+								<a href="https://github.com/tayrp" target="_blank"><img src="assets/imgs/github.png" class="social-logo" alt="Github"></a>
+								<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="assets/imgs/youtube.png" class="social-logo" alt="YouTube"></a>
+							</div>
 						</div>
-					</div>
-					<video autoplay loop id="aboutvideo">
-						<source src="https://index.havenmc.org/website/assets/mp4/usurper.mp4" type="video/mp4">
-						This browser does not support HTML5 video or the server is offline.
-					</video>
-				  <script>
-				  var video = document.getElementById("aboutvideo");
-				  var btn = document.getElementById("aboutpauseBtn");
-
-				  function togglePause() {
-					if (video.paused) {
-					  video.play();
-					  btn.innerHTML = "⏸️";
-					} else {
-					  video.pause();
-					  btn.innerHTML = "▶️";
-					}
-				  }
-				  </script>
-			</div>
-		</div>
+
+						<video autoplay loop id="aboutvideo">
+							<source src="https://index.havenmc.org/website/assets/mp4/usurper.mp4" type="video/mp4">
+							This browser does not support HTML5 video or the server is offline.
+						</video>
+
+						<label for="volumeControl">Volume:</label>
+						<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.15">
+						<span id="volumePercentage">15%</span>						
+
+						<script>
+							var video = document.getElementById("aboutvideo");
+							var btn = document.getElementById("aboutpauseBtn");
+							var volumeControl = document.getElementById("volumeControl");
+							var video = document.getElementById("aboutvideo");
+							var volumeControl = document.getElementById("volumeControl");
+							var volumePercentage = document.getElementById("volumePercentage");
+							video.volume = 0.15;
+							volumeControl.addEventListener("input", function() {
+ 								video.volume = volumeControl.value;
+    							var percentage = Math.round(volumeControl.value * 100);
+    								volumePercentage.innerHTML = percentage + "%";
+								});
+							video.volume = 0.1;
+							function togglePause() {
+								if (video.paused) {
+									video.play();
+									btn.innerHTML = "⏸️";
+								} else {
+									video.pause();
+									btn.innerHTML = "▶️";
+								}
+							}
+							volumeControl.addEventListener("input", function() {
+								video.volume = volumeControl.value;
+							});
+						</script>
+					</body>
+				</div>
+			</div>	
 		</about>
 
         <footer>