Added volume slider

DEVELOPMENT.md

@@ -23,6 +23,10 @@ This section details the series of instructions provided to ChatGPT for the crea
 
 ### Add Alarm Sound
 - "Now I want it to play a sound when it finishes."
+- "How can i change the volume of the sound?"
+- "Can you change the code so it shows only a volume knob?"
+- "Can you change the code to display some text above the volume knob?"
+- "Change the code so the volume slide is displayed in the lower right corner?"
 
 ### I Downloaded an Alarm Sound from the Internet
 ### But I Want to Make Sound Alarm Shorter with FFmpeg
@@ -51,4 +55,4 @@ This section details the series of instructions provided to ChatGPT for the crea
 
 ### Improve README.md
 - "Make this README more informal, fun, and enjoyable, with emojis and so on..."
-- "Not so informal, something in between, please."
+- "Not so informal, something in between, please."

index.html

@@ -41,6 +41,10 @@
       src="https://cdn.glitch.global/a4d114d0-86a7-4f80-ba12-95f3b0ba963b/alarm.wav?v=1699704359595"
       type="audio/wav"
     ></audio>
+    <div class="volume-container">
+    <label for="volumeSlider">Volume:</label>
+    <input type="range" min="0" max="1" step="0.01" value="1" id="volumeSlider">
+    </div>
     <script src="script.js"></script>
   </body>
 </html>

script.js

@@ -7,8 +7,13 @@ function updateSector() {
   const radius = 9.2;
   const knob = document.getElementById("knob");
   const alarm = document.getElementById("alarm");
+  let volumeSlider = document.getElementById("volumeSlider");
   let startTime = Date.now() - (TOTAL_DURATION_MS - remainingTimeMS);
   let isMouseDown = false;
+
+  volumeSlider.addEventListener("input", function() {
+    alarm.volume = volumeSlider.value; // Set volume based on slider value
+  });
 
   const calculateAngle = (clickX, clickY) => {
     let angle = Math.atan2(clickY, clickX) + Math.PI / 2;

style.css

@@ -25,3 +25,18 @@ html {
 #sector {
   fill: var(--sector-fill-color); /* Use CSS variable for color */
 }
+.volume-container {
+  position: fixed;
+  bottom: 20px;
+  right: 50px;
+  width: 150px; /* Adjust width as needed */
+}
+
+input[type="range"] {
+  width: 100%;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}