diff --git a/index.html b/index.html
index 1c4c50f..8b02c6a 100644
--- a/index.html
+++ b/index.html
@@ -24,9 +24,11 @@
-
+
+
🔒 This website is requesting access to autoplay music
+
+
+
diff --git a/js/index.js b/js/index.js
index d77a7e7..e7aed87 100644
--- a/js/index.js
+++ b/js/index.js
@@ -114,26 +114,37 @@ function closeThankYouPopup() {
}
// Music toggle
-var isPlaying = true;
-function toggleMusic() {
- var audio = document.getElementById("background-music");
- var button = document.getElementById("music-toggle");
+let isPlaying = true;
+const access = document.getElementById("permission");
+const button = document.getElementById("music-toggle").children[0];
+const audio = new Audio("/assets/sounds/bgMusic.mp3");
+
+document.querySelector(".req1").addEventListener("click", () => {
+ access.style.display = "none";
+ isPlaying = false;
+ button.classList.remove("fa-volume-high");
+ button.classList.add("fa-volume-xmark");
+});
+
+document.querySelector(".req2").addEventListener("click", () => {
+ access.style.display = "none";
+ audio.play();
+ button.classList.remove("fa-volume-xmark");
+ button.classList.add("fa-volume-high");
+});
+
+document.getElementById("music-toggle").addEventListener("click", () => {
if (isPlaying) {
audio.pause();
- button.textContent = "Music On";
+ button.classList.add("fa-volume-xmark");
+ button.classList.remove("fa-volume-high");
} else {
audio.play();
- button.textContent = "Music Off";
+ button.classList.add("fa-volume-high");
+ button.classList.remove("fa-volume-xmark");
}
isPlaying = !isPlaying;
-}
-
-window.onload = function () {
- var audio = document.getElementById("background-music");
- audio.play();
- var button = document.getElementById("music-toggle");
- button.textContent = "Music Off";
-};
+});
// Cursor -->
document.addEventListener("DOMContentLoaded", function () {
diff --git a/styles/index.style.css b/styles/index.style.css
index 33dea24..3ecd50f 100644
--- a/styles/index.style.css
+++ b/styles/index.style.css
@@ -907,6 +907,50 @@ input[type="email"]:focus {
color: white;
}
+/* Permission box */
+
+#permission {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ top: 0;
+ right: 0;
+ margin: auto;
+ background: #fff;
+ padding: 2rem;
+ border-radius: 25px;
+ text-align: center;
+ z-index: 10000;
+ width: fit-content;
+ height: fit-content;
+}
+
+#permission::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: -1;
+
+}
+
+#permission div {
+ font-size: 1.25rem;
+}
+
+.req1,
+.req2 {
+ font-size: 1rem;
+ margin: 2rem 1rem 0 1rem;
+ padding: 0.75rem 1.25rem;
+ border-radius: 10px;
+ border: none;
+ background: silver;
+}
+
.disabled {
opacity: 0.75;
}
\ No newline at end of file