Upload 5 files

public/hold.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a824a9cf88b465a99563af784db9820f300f83ff33a910dbfc53ddfb57b46fa5
+size 8558828

public/index.css

@@ -4,8 +4,8 @@ html {
 
 body {
   margin: 0;
-  display: flex;
-  flex-direction: column;
+  padding: 0;
+  overflow-x: hidden; /* Enable scrolling on the y-axis */
 }
 
 /* GTA Text */
@@ -18,6 +18,32 @@ h2 {
   text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
 }
 
+#backgroundVideo video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh; /* Adjust the height as needed */
+  object-fit: cover;
+}
+
+#backgroundVideo {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh; /* Adjust the height as needed */
+}
+
+#placeholder {
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 75vh; /* Adjust the height as needed */
+  background-color: transparent; /* Set the background color to transparent */
+  z-index: 20; /* Place the background behind other elements */
+}
+
 div #logo_container::before {
   z-index: 20;
   content: "";
@@ -36,50 +62,27 @@ div #logo_container::before {
 
 #videoElement {
   opacity: 0;
+  width: 80%;
   transition: opacity 3s ease-in-out;
+  margin-top: 155px;
+
 }
 
 #videoElement.fade-in {
   opacity: 1;
-  margin-top: 155px;
 
 }
 
 .fade-out {
   opacity: 0.09;
-  transition: opacity 8s ease-in-out;
-}
-
-/* Example responsive styles */
-@media (max-width: 768px) {
-  #playPauseBtn {
-    width: 40px;
-    height: 40px;
-  }
-
-  #playPauseBtn img {
-    width: 25px;
-    height: 25px;
-  }
-}
-
-@media (max-width: 480px) {
-  #playPauseBtn {
-    width: 30px;
-    height: 30px;
-  }
-
-  #playPauseBtn img {
-    width: 20px;
-    height: 20px;
-  }
+  transition: opacity 16s ease-in-out;
 }
 
 /* Modern React Native Design Principles */
 /* 1. Minimalistic Design */
 
 #playPauseBtn {
-  background-color: #00ff40; 
+  background-color: #ffea8c;
   opacity: 35;
   border-radius: 50%;
   width: 50px;
@@ -116,6 +119,7 @@ div #logo_container::before {
   animation: ripple 0.4s linear;
 }
 
+
 @keyframes ripple {
   0% {
     transform: scale(0);
@@ -143,7 +147,85 @@ div #logo_container::before {
 #playPauseBtn:not(:hover) {
   animation: floatUpDown 5s ease-in-out infinite;
 }
-/* 2. Animations and Transitions */
-/* 3. Consistent Typography */
-/* 4. Accessibility */
-/* 5. Responsive Design */
+
+/* Tooltip */
+#playPauseBtn .tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+#playPauseBtn:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+#playPauseBtn .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent transparent;
+}
+
+/* Style the scrollbar */
+::-webkit-scrollbar {
+  width: 5px; /* Adjust the width as needed */
+  height: 12px; /* Adjust the height as needed */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; /* Set the background color of the scrollbar track */
+  border-radius: 10px; /* Adjust the border radius as needed */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888888; /* Set the background color of the scrollbar thumb */
+  border-radius: 12px; /* Adjust the border radius as needed */
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  #playPauseBtn {
+    width: 40px;
+    height: 40px;
+  }
+
+  #playPauseBtn img {
+    width: 25px;
+    height: 25px;
+  }
+}
+
+@media (max-width: 480px) {
+  #playPauseBtn {
+    width: 30px;
+    height: 30px;
+  }
+
+  #playPauseBtn img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  #backgroundVideo {
+    height: auto; /* Adjust the height as needed */
+    min-height: 100vh; /* Adjust the minimum height as needed */
+  }
+}

public/index.html

@@ -11,7 +11,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Satisfy&display=swap"
       rel="stylesheet"
     />
-    <audio id="audioPlayer" src="overthink.mp3" autoplay></audio>
+    <audio id="audioPlayer" src="risenfall.mp3" autoplay></audio>
 
     <script src="/mpegts.js"></script>
   </head>
@@ -19,14 +19,10 @@
     <div
       class="h-screen w-screen grid place-content-center place-items-center overflow-hidden bg-gradient-to-b from-slate-900 to-black"
     >
-      <div
-        id="backgroundImage"
-        class="absolute inset-0 z-0"
-        style="
-          background-image: url('https://media2.giphy.com/media/APExBZ9Aqqy4cDXNoS/giphy.gif?cid=82a1493bd7eswewmapwt3vu83f904rw67jl86246jk211bnz&ep=v1_videos_related&rid=giphy.gif&ct=v');
-          background-size: cover;
-          background-position: center;
-        "
+      <div id="backgroundVideo" class="absolute inset-0 z-0" style="background-size: cover; background-position: center;">
+        <video autoplay muted loop class="w-full h-full object-cover">
+          <source src="v1.mp4" type="video/mp4">
+        </video>
       >
         <div class="flex place-content-center justify-between flex-row">
           <h1 class="display-flex text-4xl font-black text-teal-300">VGФЙЧ</h1>
@@ -38,7 +34,7 @@
         <div class="flex grid place-content-center justify-center w-full p-2">
           <video
             id="videoElement"
-            class="aspect-video mx-auto w-auto border-4 border-6 border-slate-900/80 rounded-full"
+            class="aspect-video mx-auto w-auto border-4 border-6 border-orange-900/20 rounded-full"
             preload="auto"
             muted
             autoplay
@@ -73,9 +69,9 @@
           </div>
         </div>
         <div class="flex-col items-center justify-center pt-14">
-          <a class="flex grid place-content-end	"">
-            <svg href="https://vgony.tech xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+          <a class="flex grid place-content-end	mr-8" href="https://vgony.tech">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 0 013 3v1"></path>
             </svg>
           </a>
           <button
@@ -85,11 +81,91 @@
             aria-label="Pause"
           >
             <img src="headphones.svg" alt="Pause Button" width="10" height="10" />
+            <a class="tooltip-text">1 New Message</a>
           </button>
-          
         </div>
       </div>
     </div>
+    <div id="placeholder" class="relative inset-0 z-0"></div>
+
+    <script>
+// Get the audio element and play/pause button
+// Get the audio element and play/pause button
+const audioPlayer = document.getElementById('audioPlayer');
+const playPauseBtn = document.getElementById('playPauseBtn');
+
+// Array of audio file paths
+const audioFiles = [
+  'hold.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'tst.mp3',
+  // Add more audio file paths here
+];
+
+// Shuffle the audio files array
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Play the next audio file in the shuffled array
+function playNextAudio() {
+  const currentIndex = audioFiles.findIndex(file => file === audioPlayer.src);
+  const nextIndex = (currentIndex + 1) % audioFiles.length;
+  audioPlayer.src = audioFiles[nextIndex];
+  audioPlayer.play();
+}
+
+// Add a click event listener to the play/pause button
+playPauseBtn.addEventListener('click', () => {
+  if (audioPlayer.paused) {
+    audioPlayer.play();
+    playPauseBtn.querySelector('img').src = 'pause.svg';
+
+  } else {
+    audioPlayer.pause();
+    playPauseBtn.querySelector('img').src = 'headphones.svg';
+
+  }
+});
+
+// Shuffle the audio files array on page load
+shuffleArray(audioFiles);
+audioPlayer.src = audioFiles[0];
+audioPlayer.play();
+
+// Automatically play the next audio file after the current one finishes
+audioPlayer.addEventListener('ended', playNextAudio);
+  
+
+
+
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function () {
+          showVideo();
+          fadeBackgroundImage();
+        }, 6500); //
+      });
+
+      function showVideo() {
+        var videoElement = document.getElementById("videoElement");
+        videoElement.classList.add("fade-in");
+      }
+
+      function fadeBackgroundImage() {
+        var backgroundElement = document.getElementById("backgroundImage");
+        backgroundElement.classList.add("fade-out");
+      }
+    </script>
     <script>
 // Get the audio element and play/pause button
 // Get the audio element and play/pause button

public/risenfall.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a365082dee6e74df55d0dc8f05114081599db4538a8b0b014af69d57aab09ad6
+size 8675756

public/v1.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1e077d774fc71ff9b1816b7ba255dc68f942912972b29d0d592a0129a9fb0b2
+size 59345310