diff --git a/assets/css/style.css b/assets/css/style.css
index ce8b338..85927fa 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -194,11 +194,19 @@ body {
position: fixed;
bottom: 20px;
right: 20px;
- padding: 10px 15px;
- background-color: #333;
- color: white;
- border: none;
- border-radius: 5px;
cursor: pointer;
z-index: 1000;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
+}
+
+#music-toggle svg {
+ width: 32px;
+ height: 32px;
+ stroke: white;
}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 3a46b3d..1c7e49e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -2,15 +2,31 @@
document.addEventListener('DOMContentLoaded', function() {
const music = document.getElementById('background-music');
const musicToggle = document.getElementById('music-toggle');
+ const soundOnIcon = document.getElementById('sound-on-icon');
+ const soundOffIcon = document.getElementById('sound-off-icon');
if (music && musicToggle) {
+ // Try to play music by default
+ music.play().then(() => {
+ // Autoplay started!
+ soundOnIcon.style.display = 'inline';
+ soundOffIcon.style.display = 'none';
+ }).catch(error => {
+ // Autoplay was prevented.
+ console.log("Autoplay was prevented by the browser.");
+ soundOnIcon.style.display = 'none';
+ soundOffIcon.style.display = 'inline';
+ });
+
musicToggle.addEventListener('click', function() {
if (music.paused) {
music.play();
- musicToggle.textContent = 'Pause Music';
+ soundOnIcon.style.display = 'inline';
+ soundOffIcon.style.display = 'none';
} else {
music.pause();
- musicToggle.textContent = 'Play Music';
+ soundOnIcon.style.display = 'none';
+ soundOffIcon.style.display = 'inline';
}
});
}
diff --git a/index.php b/index.php
index ae66dea..3c069fa 100644
--- a/index.php
+++ b/index.php
@@ -33,7 +33,18 @@
-
+