Hugging Face's logo

Spaces:
Fazbeeer
/
mindmaster-vr-arena-clone
Running

App Files Community
Fazbeeer commited on
Commit
67e5051
·
verified ·
1 Parent(s): fefc3cd

Promote version 9b5d40e to main

Browse files

Promoted commit 9b5d40ed29200433a2a6e854c7dd4f53b0f4bacb to main branch

Files changed (2) hide show
  1. index.html +60 -29
  2. script.js +41 -9
index.html CHANGED
@@ -45,42 +45,46 @@
45
  </style>
46
  </head>
47
  <body class="bg-black text-white font-['Montserrat']">
48
- <!-- Background Music -->
49
- <iframe
50
  id="bg-music"
51
  width="0" height="0"
52
- src="https://www.youtube.com/embed/kSlPMMxZfys?autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys&enablejsapi=1"
53
  frameborder="0"
54
  allow="autoplay"
55
  ></iframe>
56
 
57
- <script src="https://www.youtube.com/iframe_api"></script>
58
-
59
  <script>
60
- let player;
 
 
 
61
 
62
- function onYouTubeIframeAPIReady() {
63
- player = new YT.Player('bg-music', {
64
- events: {
65
- onReady: (e) => {
66
- setTimeout(() => {
67
- e.target.unMute();
68
- e.target.setVolume(100);
69
- e.target.playVideo();
70
- }, 800);
71
- }
72
- }
73
- });
74
- }
75
-
76
- // Mute Button
77
- document.getElementById("mute-btn").addEventListener("click", () => {
78
- if (player.isMuted()) {
79
- player.unMute();
80
- } else {
81
- player.mute();
82
- }
83
- });
 
 
 
84
  </script>
85
  <!-- Mute/unmute button -->
86
  <button id="mute-btn"
@@ -433,7 +437,34 @@ Get Started Now
433
  </div>
434
  <!-- Footer Component -->
435
  <script src="components/footer.js"></script>
436
- <!-- SNOW EFFECT -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
437
  <style>
438
  .snowflake {
439
  position: fixed;
 
45
  </style>
46
  </head>
47
  <body class="bg-black text-white font-['Montserrat']">
48
+ <!-- YouTube Background Music -->
49
+ <iframe
50
  id="bg-music"
51
  width="0" height="0"
52
+ src="https://www.youtube.com/embed/kSlPMMxZfys?enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=kSlPMMxZfys"
53
  frameborder="0"
54
  allow="autoplay"
55
  ></iframe>
56
 
 
 
57
  <script>
58
+ // Wait a moment for YouTube API to load
59
+ window.onload = function () {
60
+ setTimeout(() => {
61
+ var iframe = document.getElementById("bg-music");
62
 
63
+ // Message API → unmutes + plays at full volume
64
+ iframe.contentWindow.postMessage(
65
+ JSON.stringify({
66
+ event: "command",
67
+ func: "unMute"
68
+ }),
69
+ "*"
70
+ );
71
+ iframe.contentWindow.postMessage(
72
+ JSON.stringify({
73
+ event: "command",
74
+ func: "setVolume",
75
+ args: [100]
76
+ }),
77
+ "*"
78
+ );
79
+ iframe.contentWindow.postMessage(
80
+ JSON.stringify({
81
+ event: "command",
82
+ func: "playVideo"
83
+ }),
84
+ "*"
85
+ );
86
+ }, 1500);
87
+ };
88
  </script>
89
  <!-- Mute/unmute button -->
90
  <button id="mute-btn"
 
437
  </div>
438
  <!-- Footer Component -->
439
  <script src="components/footer.js"></script>
440
+ <script>
441
+ var player;
442
+
443
+ function onYouTubeIframeAPIReady() {
444
+ player = new YT.Player('bg-music', {
445
+ events: {
446
+ 'onReady': function (event) {
447
+ event.target.playVideo();
448
+ }
449
+ }
450
+ });
451
+ }
452
+
453
+ document.getElementById("mute-btn").addEventListener("click", function () {
454
+ if (player.isMuted()) {
455
+ player.unMute();
456
+ this.innerHTML = '<i data-feather="volume-2"></i>';
457
+ } else {
458
+ player.mute();
459
+ this.innerHTML = '<i data-feather="volume-x"></i>';
460
+ }
461
+ feather.replace();
462
+ });
463
+ </script>
464
+
465
+ <script src="https://www.youtube.com/iframe_api"></script>
466
+
467
+ <!-- SNOW EFFECT -->
468
  <style>
469
  .snowflake {
470
  position: fixed;
script.js CHANGED
@@ -1,17 +1,49 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  // Shared JavaScript across all pages
3
  document.addEventListener('DOMContentLoaded', () => {
4
- // Update mute button icon
 
 
 
 
 
 
5
  const muteBtn = document.getElementById('mute-btn');
6
- if (muteBtn) {
7
- muteBtn.addEventListener('click', () => {
8
- const icon = muteBtn.querySelector('i');
9
- if (icon) {
10
- icon.setAttribute('data-feather', player.isMuted() ? 'volume-2' : 'volume-x');
11
- feather.replace();
12
  }
13
- });
14
- }
 
15
  // Handle support form submission
16
  const supportForm = document.getElementById('supportForm');
17
  if (supportForm) {
 
1
 
2
+ // YouTube API setup
3
+ let player;
4
+ function onYouTubeIframeAPIReady() {
5
+ player = new YT.Player('bg-music', {
6
+ events: {
7
+ 'onReady': onPlayerReady
8
+ }
9
+ });
10
+ }
11
+
12
+ function onPlayerReady(event) {
13
+ // Player is ready
14
+ updateMuteButton();
15
+ }
16
+
17
+ function updateMuteButton() {
18
+ const muteBtn = document.getElementById('mute-btn');
19
+ if (player.isMuted()) {
20
+ muteBtn.innerHTML = '<i data-feather="volume-x"></i>';
21
+ } else {
22
+ muteBtn.innerHTML = '<i data-feather="volume-2"></i>';
23
+ }
24
+ feather.replace();
25
+ }
26
+
27
  // Shared JavaScript across all pages
28
  document.addEventListener('DOMContentLoaded', () => {
29
+ // Load YouTube API script
30
+ const tag = document.createElement('script');
31
+ tag.src = "https://www.youtube.com/iframe_api";
32
+ const firstScriptTag = document.getElementsByTagName('script')[0];
33
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
34
+
35
+ // Mute/unmute button functionality
36
  const muteBtn = document.getElementById('mute-btn');
37
+ muteBtn.addEventListener('click', () => {
38
+ if (player) {
39
+ if (player.isMuted()) {
40
+ player.unMute();
41
+ } else {
42
+ player.mute();
43
  }
44
+ updateMuteButton();
45
+ }
46
+ });
47
  // Handle support form submission
48
  const supportForm = document.getElementById('supportForm');
49
  if (supportForm) {