<!DOCTYPE html>
<html lang="en">

<head>
	

<meta charset="utf-8">
<meta name="color-scheme" content="light only">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+SC:wght@200..900&family=Noto+Serif+TC:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="https://home.cibmall.net/shared/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://home.cibmall.net/shared/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://home.cibmall.net/shared/css/style.css">


<script src="https://home.cibmall.net/shared/js/code.jquery.com_jquery-3.7.1.min.js"></script>
<script src="https://home.cibmall.net/shared/js/bootstrap.bundle.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js"></script>
<script src="./js/lucide.min.js"></script>

<!----- WEBSITE USED ----->
<meta name="keywords" content="SDO, XDO, sdo, xdo, rhythm, music, song, kpop, osu, anime, 超舞, 超级舞者, Super Dancer Online, SDO game, The Best Rhythm Game, Play Super Dancer Online download, Super Dancer Online guide, Free multiplayer dancing game, Multiplayer rhythm game , Free dancing game, Popular dance game, Popular rhythm game, Rhythm games online, Dance battle multiplayer, SDO download, Best rhythm games 2025">
<meta name="description" content="Super Dancer Online | SDO - the rhythm game that combines music, fashion, and multiplayer competition. Join us in creating your unique avatar, mastering intricate dance routines, and competing in dance battles">
<meta property="og:type" content="website">
<meta property="og:url" content="https://sdo.cibmall.net/">
<meta property="og:title" content="SDO | Super Dancer Online">
<meta property="og:image" content="img/fb-img.jpg">

<link rel="icon" type="image/x-icon" href="img/logo.ico">


<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
    });
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src =
        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-P993THN');
</script>
<!-- End Google Tag Manager -->

<script>
	window.addEventListener('DOMContentLoaded', () => {
		lucide.createIcons();
	});
</script>	<title>Super Dance Online</title>
</head>

<body>
	<!----- Navigation Bar ------>
<nav class="navigation navbar fixed-top navbar-expand-lg noclick">
	<div class="navigation-container container-fluid">
		<a class="navbar-brand" href="index.php">
			<img style="transition: all .5s;" src="img/logo.png" alt="logo">
		</a>

		<button class="hamburgerbtn navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
			<span class="material-symbols-outlined">menu</span>
		</button>
		
		<div class="navwrapper collapse navbar-collapse j_ctr w100" id="navbarNavAltMarkup">
			<ul class="navbar-nav smallgap official btnlight halftone">
				<li class="navigationitem nav-item">
					<a class="nav-link official" href="https://sdo.cibmall.net/home/">Home</a>
				</li> 
				<li class="navigationitem nav-item">
					<a class="nav-link official" href="news.php">News</a>
				</li> 
				<li class="navigationitem nav-item">
					<a class="nav-link official" href="guide.php">Guide</a>
				</li>  
				<li class="navigationitem nav-item">
					<a class="nav-link official" href="https://members.cibmall.net/cibmall/login">Reload</a>
				</li>  
				<li class="navigationitem nav-item">
					<a class="nav-link official" href="download.php">Download</a>
				</li>
				<li class="navigationitem nav-item ">
					<a class="nav-link official hot" href="shop.php">Shop</a>
				</li>
			</ul>

			<ul class="navbar-nav a_ctr j_ctr biggap" style="flex-direction: row;">
				<li class="navigationitem nav-item">
					<a class="nav-link btn_cta halftone icon" href="https://www.facebook.com/cibmall.xdo/" target="_blank">
						<img src="https://home.cibmall.net/shared/img/icon/facebook.svg" alt="facebook">
					</a>

				</li> 
				<li class="navigationitem nav-item">
					<a class="nav-link btn_cta halftone icon" href="https://cibmallsdo.short.gy/discord" target="_blank">
						<img src="https://home.cibmall.net/shared/img/icon/discord.svg" alt="discord">
					</a>
					
				</li> 
				<li class="navigationitem nav-item">
					<a class="nav-link btn_cta halftone icon" href="https://members.cibmall.net/cibmall/login">
						<img src="https://home.cibmall.net/shared/img/icon/login.svg" alt="login">
					</a>
				</li>
				<li class="navigationitem nav-item">
											<button class="nav-link btn_cta halftone icon btn_mute">
							<span class="material-symbols-outlined">volume_up</span>
						</button>
									</li>
			</ul>
		</div>

	</div>

	</div>
</nav>



<!----------------------------- KV START ----------------------------->
	<section id="KV"> 
		<div class=" h100 w100 a_ctr j_fs vertical ovfshow smallgap" style="padding-top: 150px;">

			<video class="logovideo" autoplay="" muted="">
				<source src="img/sdologo_animation.webm" type="video/webm">
			</video>

			<div class="kvlogowrapper w100 a_ctr j_ctr ovfshow">
				<img style="width:fit-content; max-width:75vw; z-index:1;" class="kvlogo hidden" src="img/logo_l.png" alt="">
			</div>

			<img style="width:fit-content; max-width:75vw;" class="a_slideinL hidden" src="img/slogan.png" alt="">
			<!-- <p style="font-size:16px; letter-spacing:10px;">COMING 2026</p> -->
		</div>

	</section>
<!------------------------------ KV END ------------------------------>

<!----------------------------- Section COMEBACK START ----------------------------->
	<section id="Showcase"> 
		<!----------------------------- MARQUEE ----------------------------->
			<div class="w100 a_ctr j_ctr hidden halftone" id="marqueeBar">
				<div class="marquee w100">
					<div class="marquee-content h100 a_ctr nogap">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
					</div>
				</div>
			</div>
		<!----------------------------- MARQUEE ----------------------------->

		<div class="mainwrapper w100 a_ctr j_ctr vertical ovfshow" style="margin: 100px 0 75px 0;">

			<div class="gameplaywrapper w100 a_ctr j_ctr vertical biggap p25 ovfshow">

				<div class="gameplaytltwrapper a_fe j_sb biggap fwrap">
					<img class="title hidden no_mp" src="img/title_showcase.png" alt="">
					
					<!-- Play Button -->
					<button type="button" class="a_ctr j_ctr vertical nogap p25 showcasevideo" data-bs-toggle="modal" data-bs-target="#showcaseVideo">
						<span>▶</span>
					</button>
				</div>

				<div class="gameplaytabwrapper draggable-scroll w100 a_ctr j_sb h100 biggap"  role="tablist">

					<button class="gameplaytab scrolltoview a_ctr j_ctr vertical active" data-bs-toggle="tab" data-bs-target="#nav-gameplay1" type="button" role="tab" aria-controls="nav-gameplay1" aria-selected="true">
						<img src="img/showcase/showcase1.jpg">
						<p class="title_txt gameplaytlt" style="width: fit-content;">Gameplay</p>
					</button>

					<button class="gameplaytab scrolltoview a_ctr j_ctr vertical" data-bs-toggle="tab" data-bs-target="#nav-gameplay2" type="button" role="tab" aria-controls="nav-gameplay2" aria-selected="true">
						<img src="img/showcase/showcase2.jpg">
						<p class="title_txt gameplaytlt" style="width: fit-content;">Minigames</p>
					</button>
					
					<button class="gameplaytab scrolltoview a_ctr j_ctr vertical" data-bs-toggle="tab" data-bs-target="#nav-gameplay3" type="button" role="tab" aria-controls="nav-gameplay3" aria-selected="true">
						<img src="img/showcase/showcase3.jpg">
						<p class="title_txt gameplaytlt" style="width: fit-content;">Housing</p>
					</button>
				</div>
				
				<div class="w100 a_ctr j_ctr p50_h">
					<div id="gameplayContent" class="w100 a_ctr j_sb biggap musicbtnwrapper halftone beat">
						<div class="w100 a_fs j_ctr">

							<div class="tab-pane fade show active" id="nav-gameplay1" role="tabpanel" aria-labelledby="nav-gameplay1-tab"><b>Gameplay:</b>  Delivers an electrifying dance experience where players hit the floor with rhythm-based challenges, competing against others in stylish dance-offs. </div>

							<div class="tab-pane fade" id="nav-gameplay2" role="tabpanel" aria-labelledby="nav-gameplay2-tab"><b>Minigames:</b>  The fun extends beyond the main dance battles with a variety of engaging minigames. These provide a refreshing break and additional ways to earn rewards.</div>

							<div class="tab-pane fade" id="nav-gameplay3" role="tabpanel" aria-labelledby="nav-gameplay3-tab"><b>Housing:</b>  Let's players create their dream virtual spaces, blending creativity with social interaction Customizable Homes, Interactive Elements, Social Hub AND MORE!</div>
						</div>

					</div>
				</div>

			</div>
		</div>

		<!-- showcasevideo -->
		<div class="modal fade video" id="showcaseVideo" tabindex="-1" aria-labelledby="showcaseVideo" aria-hidden="false">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">

					<button type="button" class="btn_close a_fs j_ctr" data-bs-dismiss="modal" aria-label="Close">close</button>

					<div class="modal-body a_fe j_sb vertical">
						<div class="ratio ratio-16x9">
							<iframe id="showcasevideoFrame" src="" allowfullscreen></iframe>
						</div>
					</div>
					
				</div>
			</div>
		</div>


	</section>
<!------------------------------ Section COMEBACK END ------------------------------>

<!----------------------------- Section GALLERY START ----------------------------->
	<section id="Gallery"> 

		<!----------------------------- MARQUEE ----------------------------->
			<div class="w100 a_ctr j_ctr hidden halftone" id="marqueeBar2">
				<div class="marquee w100">
					<div class="marquee-content h100 a_ctr nogap">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
						<img src="img/marquee.png" alt="">
					</div>
				</div>
			</div>
		<!----------------------------- MARQUEE ----------------------------->

		<span class="charwrapper j_sb h100">
			<img class="a_slideinT hidden" src="img/package/char1.png" alt="">
			<img class="a_slideinT hidden" src="img/package/char2.png" alt="">
		</span>

		<div class="mainwrapper w100 a_ctr j_ctr vertical biggap ovfshow">
			<img class="title hidden a_slideinL" src="img/title_media.png" alt="">
			<div class="a_ctr j_fs vertical nogap">
				<div class="tv_top w100 a_ctr j_ctr vertical smallgap">
					<div id="carouselGallery" class="carousel slide">
						
						<div class="carousel-inner">
							<!-- Slide 1 -->
							<div class="carousel-item">
								<img src="img/gallery/p1.jpg" class="d-block w-100" alt="Slide 1">
							</div>
							<!-- Slide 2 -->
							<div class="carousel-item">
								<img src="img/gallery/p2.jpg" class="d-block w-100" alt="Slide 2">
							</div>
							<!-- Slide 3 -->
							<div class="carousel-item active">
								<img src="img/gallery/p3.jpg" class="d-block w-100" alt="Slide 3">
							</div>
						</div>

					</div>
				</div>
				
				<div class="tv_ctr w100 a_ctr j_ctr fwrap biggap" id="galleryTab">
					<button class="btn_indicator" style="padding-right: 2px !important;" type="button" data-bs-target="#carouselGallery" data-bs-slide="prev">◀
					</button>
					<button class="btn_indicator" style="padding-left: 2px !important;" type="button" data-bs-target="#carouselGallery" data-bs-slide="next">►
					</button>
				</div>
				
				<span class="tv_btm"></span>

			</div>
		</div>

	</section> 
<!------------------------------ Section GALLERY END ------------------------------>

<!---------------------------- STICKYBAR START ---------------------------->
	<!-- <div class="w100 a_ctr j_ctr vertical hidden" id="stickyBar_btm">
		<div class="w100 a_ctr j_ctr t_fs p25_h biggap halftone btnStickybar" style="padding:5px 25px; color:var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.5); background-image: linear-gradient(to right, rgb(27 218 231), rgb(202 80 225));">
			<h1 style="font-size: 1rem;">
				<i>Let's build our community back and unlock exclusive rewards!</i>
			</h1>
			<div type="button" class="btn_hide" aria-label="Close">&#9660;</div>
		</div>
		<div class="stickybarbtmwrapper w100 a_ctr j_ctr fwrap xlgap">

			<a href="" class="btn_cta halftone" type="submit">Pre-register Now</a>
		</div>
	</div> -->
<!----------------------------- STICKYBAR END ----------------------------->

<!---------------------------- FOOTER START ---------------------------->
	<!-- footer -->
<section id="footer" class="w100 a_ctr j_ctr">

	<div class="w100 w90 a_ctr j_ctr vertical" style="padding-top:15px; padding-bottom:25px;">
		<div class="footer_wrapper w100 a_fs j_sb xlgap brd_btm p25">
			<div class="a_ctr j_fs fgrow footer_logo">
				<img src="https://home.cibmall.net/shared/img/CiBmall.png" alt="cibmall" style="max-height:30px; margin-bottom:25px;">
			</div>

			<div class="footer_infowrapper fgrow a_fs j_fe xlgap fwrap">

				<div class="footer_info a_fs xlgap fwrap">
					<div class="footer_item a_fs j_fe">
						<span class="material-symbols-sharp">schedule</span>
						<p><b>MON - THU:</b> &nbsp;08:30 to 18:00 (GMT +8)<br>
						<b>FRI:</b> &nbsp;08:30 to 17:30 (GMT +8)</p>
					</div>

					<div class="footer_item a_fs j_fe">
						<span class="material-symbols-sharp">home</span>
						<p>Suite C-01, 02, 03, 3A, Level 6 Block C,<br>Sky Park One City, Jalan USJ 25/1,<br>47650 Subang Jaya, Selangor, Malaysia.</p>
					</div>
				</div>

				<div class="footer_info a_fs xlgap fwrap" style="margin-bottom: 1rem;">
					<div class="footer_item a_fs j_fe">
						<span class="material-symbols-sharp">call</span>
						<a href="tel:+603 5022 3018">+603 5022 3018</a>
					</div>

					<div class="footer_item a_fs j_fe">
						<span class="material-symbols-sharp">mail</span>
						<a href="mailto:cs@cibmall.net">cs@cibmall.net</a>
					</div>
				</div>

			</div>
		</div>
		
		<div class="footer_tnc w100 a_fs j_sb p25_h fwrap biggap">
			<div class="a_fs j_fs fgrow no_mp">
				
			
								<p class="t_ctr fwrap no_mp"><b>Ⓒ 2026 CIB Development Sdn Bhd.</b> &nbsp; <b>All rights reserved.</b></p>

			</div>
			
			<div class="a_fs j_fe biggap fgrow no_mp">
				<a href="https://home.cibmall.net/policy/privacypolicy-en.html" target="_blank">Privacy Policy</a> 
				<span>|</span>
				<a href="https://home.cibmall.net/policy/termofuse-en.html" target="_blank">Terms of Use</a> 
			</div>
		</div>

	</div>

</section><!----------------------------- FOOTER END ----------------------------->

<!-------------------------- MUSIC PLAYER START --------------------------->
	<audio id="backgroundMusic"></audio>

<div id="musicPlayer" type="button" data-bs-toggle="modal" data-bs-target="#musicControls">
	<span></span>
</div>

<div class="modal fade" id="musicControls" tabindex="-1" aria-labelledby="musicModalLabel" aria-hidden="false">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">

			<!-- Volume Controller -->
			<div class="volume-controller a_ctr j_fs p25_h">
				<label for="volume" class="a_ctr j_ctr" id="volumeIcon">
					<span class="material-symbols-outlined">volume_up</span>
				</label>
				<input type="range" id="volume" min="0" max="1" step="0.01" value="0.5">
			</div>

			<!-- Close Button -->
			<button type="button" class="btn_close a_fs j_ctr" data-bs-dismiss="modal" aria-label="Close">close</button>

			<div class="modal-body a_sb j_sb vertical nogap">

				<ul id="playlist" class="scrollY">
									</ul>
				<div id="songProgress">
					<div id="songprogressBar"></div>
				</div>
				<div class="w100 a_ctr j_ctr biggap musicbtnwrapper halftone beat btnlight">

					<div id="prevButton" class="h100 musicbtn a_ctr j_ctr">&#9664;</div>
					<div id="musicButton" class="h100 musicbtn a_ctr j_ctr">&#9658;</div> 
					<div id="nextButton" class="h100 musicbtn a_ctr j_ctr">&#9654;</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {
		const backgroundMusic = $('#backgroundMusic')[0];
		const songprogressBar = $('#songprogressBar');
		const playlist = $('#playlist');
		const volumeIcon = $('#volumeIcon span');
		const volumeSlider = $('#volume');
    const btnMuteIcon = $('.btn_mute span'); // Mute button icon
    let currentSongIndex = 0;
    let isMuted = false;

    // Load a song by index
    function loadSong(index) {
    	const song = $('#playlist li').eq(index);
    	backgroundMusic.src = song.data('src');

      //  Force apply mute state & volume correctly
    	backgroundMusic.muted = isMuted; 
      backgroundMusic.volume = isMuted ? 0 : volumeSlider.val(); // Ensure correct volume
      
      updateVolumeTrack(); // Make sure the UI updates correctly
      backgroundMusic.play().catch((error) => console.warn('Autoplay blocked:', error));

      $('#playlist li').removeClass('active');
      song.addClass('active');
    }


    // Play the next song
    function playNextSong() {
    	currentSongIndex = (currentSongIndex + 1) % playlist.children().length;
    	loadSong(currentSongIndex);
    }

    // Play the previous song
    function playPrevSong() {
    	currentSongIndex = (currentSongIndex - 1 + playlist.children().length) % playlist.children().length;
    	loadSong(currentSongIndex);
    }

    // Update progress bar
    function updateProgressBar() {
    	const progressPercent = (backgroundMusic.currentTime / backgroundMusic.duration) * 100;
    	songprogressBar.css('width', `${progressPercent}%`);
    }

    // Update the volume track fill based on slider value
    function updateVolumeTrack() {
    	const volumePercent = backgroundMusic.muted ? 0 : backgroundMusic.volume * 100;
    	volumeSlider.css(
    		'background',
    	`linear-gradient(to right, var(--active) ${volumePercent}%, #696969 ${volumePercent}%)`
    	);
    }

    // Load the first song and unmute on user interaction
    loadSong(currentSongIndex);
    $(document).one('click', () => {
      if (!isMuted) { // Only play if not muted
      	backgroundMusic.muted = false;
      	backgroundMusic.play().catch(console.warn);
      }
    });

    // Event listeners
    backgroundMusic.addEventListener('timeupdate', updateProgressBar);
    backgroundMusic.addEventListener('ended', playNextSong);

    $('#musicButton').click(() => {
    	if (backgroundMusic.paused) {
    		backgroundMusic.play();
    	} else {
    		backgroundMusic.pause();
    	}
    });

    backgroundMusic.onplay = function () {
      $('#musicButton').html('&#10074;&#10074;').addClass('playing'); // Show pause icon
      $('#musicPlayer').addClass('active');
    };

    backgroundMusic.onpause = function () {
      $('#musicButton').html('&#9658;').removeClass('playing'); // Show play icon
      $('#musicPlayer').removeClass('active');
    };

    $('#prevButton').click(playPrevSong);
    $('#nextButton').click(playNextSong);

    $('#playlist li').click(function () {
    	currentSongIndex = $(this).index();
    	loadSong(currentSongIndex);
    });

    $('#songProgress').on('click touchstart', function (e) {
    	let clickX = (e.pageX || e.originalEvent.touches[0].pageX) - $(this).offset().left;
    	let newTime = (clickX / $(this).width()) * backgroundMusic.duration;
    	backgroundMusic.currentTime = newTime;
    });

    // Update volume when the slider is moved
    volumeSlider.on('input', function () {
      backgroundMusic.volume = $(this).val(); // Update the audio volume
      updateVolumeTrack(); // Update the track fill based on volume
      if (backgroundMusic.volume === 0) {
        backgroundMusic.muted = true; // Mute the music
        volumeIcon.text('volume_off'); // Change to mute icon
        btnMuteIcon.text('volume_off'); // Change mute button icon
      } else {
        backgroundMusic.muted = false; // Unmute the music
        volumeIcon.text('volume_up'); // Change to volume icon
        btnMuteIcon.text('volume_up'); // Change mute button icon
      }
    });

    let lastVolume = 1; // Store last volume before mute

    function toggleMute() {
    	if (backgroundMusic.muted) {
    		backgroundMusic.muted = false;
    		backgroundMusic.volume = lastVolume;
    		volumeSlider.val(lastVolume);
    	} else {
        lastVolume = backgroundMusic.volume || 0.5; // Store last volume before mute
        backgroundMusic.muted = true;
        backgroundMusic.volume = 0;  // Force volume to 0
        volumeSlider.val(0);
      }

      // Ensure volume change is applied properly by forcing reflow
      backgroundMusic.pause();
      backgroundMusic.play().catch(() => {});

      updateVolumeTrack();
      volumeIcon.text(backgroundMusic.muted ? 'volume_off' : 'volume_up');
      btnMuteIcon.text(backgroundMusic.muted ? 'volume_off' : 'volume_up');
    }

    // Apply this function to both mute buttons
    $('#volumeIcon, .btn_mute').click(toggleMute);

    // Update the track fill when the slider is moved
    volumeSlider.on('input', function () {
    	const volumeValue = $(this).val();
      backgroundMusic.volume = volumeValue; // Update the audio volume
      isMuted = volumeValue == 0; // Sync mute state
      
      backgroundMusic.muted = isMuted; // Make sure it updates

      updateVolumeTrack(); // Update the track fill
      volumeIcon.text(isMuted ? 'volume_off' : 'volume_up'); // Update volume icon
      btnMuteIcon.text(isMuted ? 'volume_off' : 'volume_up'); // Update mute button icon
    });

    // Initial setup: Load the first song and update volume track
    updateVolumeTrack();

    // Set the initial slider value to the current volume
    volumeSlider.val(backgroundMusic.volume); // Ensure slider value is synchronized with the audio volume


    ///////////////////////// Restore Player State /////////////////////////
    
    // Save current song details before leaving the page
    function savePlayerState() {
    	localStorage.setItem('currentSongIndex', currentSongIndex);
    	localStorage.setItem('currentTime', backgroundMusic.currentTime);
    	localStorage.setItem('isMuted', backgroundMusic.muted);
    	localStorage.setItem('volume', backgroundMusic.volume);
    }

    // Restore player state when the page loads
    function restorePlayerState() {
    	const savedSongIndex = localStorage.getItem('currentSongIndex');
    	const savedTime = localStorage.getItem('currentTime');
    	const savedMute = localStorage.getItem('isMuted');
    	const savedVolume = localStorage.getItem('volume');

    	if (savedSongIndex !== null) {
    		currentSongIndex = parseInt(savedSongIndex);
    		loadSong(currentSongIndex);
    	}

    	if (savedTime !== null) {
    		backgroundMusic.currentTime = parseFloat(savedTime);
    	}

    	if (savedVolume !== null) {
        backgroundMusic.volume = parseFloat(savedVolume); // Ensure it's a number
        volumeSlider.val(parseFloat(savedVolume)); // Update the slider correctly
      }

      if (savedMute !== null) {
      	isMuted = savedMute === 'true';
      	backgroundMusic.muted = isMuted;

      	if (isMuted) {
          lastVolume = parseFloat(savedVolume) || 0.5; // Store last volume before mute
          backgroundMusic.volume = 0;  // 🔥 Explicitly set volume to 0
          volumeSlider.val(0); // Update slider
        } else {
        	backgroundMusic.volume = parseFloat(savedVolume) || 1;
          volumeSlider.val(backgroundMusic.volume); // Restore actual volume
        }

        // Force update the UI
        updateVolumeTrack();
        btnMuteIcon.text(isMuted ? 'volume_off' : 'volume_up');
        volumeIcon.text(isMuted ? 'volume_off' : 'volume_up');
      }
    }

    // Save player state before the user leaves the page
    $(window).on('beforeunload', savePlayerState);

    // Restore player state when the page loads
    restorePlayerState();

  });
</script>
<!----------------------------- MUSIC PLAYER  ----------------------------->

<!-- videopopup -->
<script>
	$(document).ready(function () {
		const videoID = "EDqTna96de0"; // Your YouTube video ID
		const baseVideoURL = `https://www.youtube.com/embed/${videoID}?rel=0`; 
		const $videoFrame = $("#showcasevideoFrame");
		const backgroundMusic = $("#backgroundMusic")[0]; 

		// Open Modal & Set Video URL
		$("#playVideoBtn").on("click", function () {
			$("#showcaseVideo").modal("show"); // Open modal
		});

		// Ensure Autoplay Works After Modal is Fully Visible
		$("#showcaseVideo").on("shown.bs.modal", function () {
			const autoplayURL = `${baseVideoURL}&autoplay=1&mute=1`; // Force autoplay with mute
			$videoFrame.attr("src", autoplayURL);
			pauseMusic(); // Pause music when video starts
		});

		// Stop Video on Modal Close
		$("#showcaseVideo").on("hidden.bs.modal", function () {
			$videoFrame.attr("src", "about:blank"); // Reset iframe to stop playback
			checkAndResumeMusic(); // Resume music if no other video is playing
		});

		// Pause background music function
		function pauseMusic() {
			if (backgroundMusic && !backgroundMusic.paused) {
				backgroundMusic.pause();
				$("#musicButton").html("&#9658;").removeClass("playing"); // Change to play icon
				$("#musicPlayer").removeClass("active");
			}
		}

		// Check if any video is playing before resuming music
		function checkAndResumeMusic() {
			const anyVideoPlaying = $("iframe[src*='youtube.com'], video").toArray().some((el) => {
				return $(el).attr("src") && $(el).attr("src").includes("autoplay=1");
			});

			if (!anyVideoPlaying && backgroundMusic && !backgroundMusic.muted) {
				backgroundMusic.play().catch(() => console.warn("Autoplay blocked"));
				$("#musicButton").html("&#10074;&#10074;").addClass("playing"); // Change to pause icon
				$("#musicPlayer").addClass("active");
			}
		}

		// Detect when any video (HTML5) starts playing
		$(document).on("play", "video", function () {
			pauseMusic();
		});

		// Detect YouTube/Vimeo iframe autoplay
		const observer = new MutationObserver(() => {
			$("iframe[src*='youtube.com'], iframe[src*='vimeo.com']").each(function () {
				if ($(this).attr("src")?.includes("autoplay=1")) {
					pauseMusic();
				}
			});
		});

		observer.observe(document.body, { childList: true, subtree: true });

		// Resume music only when all modals with videos are closed
		$(".modal").on("hidden.bs.modal", function () {
			checkAndResumeMusic();
		});
	});
</script>

</body>
</html>

