Upload 13 files

public/index.css

@@ -30,31 +30,6 @@ h2 {
   }
 }
 
-#eyeButton {
-  background: none;
-  border: none;
-  position: relative;
-  cursor: pointer;
-  overflow: hidden; /* Clip the shadow outside the button */
-  border-radius: 50%; /* Make it round, adjust as needed */
-  width: 32px; /* Set your eye image width */;
-  height: 32px;/* Set your eye image height */;
-  animation: pulse 2s infinite; /* Adjust the duration as needed */
-}
-#exitButton {
-  background: none;
-  border: none;
-  position: relative;
-  cursor: pointer;
-  overflow: hidden; /* Clip the shadow outside the button */
-  border-radius: 50%; /* Make it round, adjust as needed */
-  width: 32px; /* Set your eye image width */;
-  height: 32px;/* Set your eye image height */;
-}
-
-
-
-
 #backgroundVideo {
   top: 0;
   left: 0;
@@ -66,14 +41,13 @@ h2 {
 #placeholder {
   position: relative;
   left: 0;
-  width: 100%;
-  height: 100vh;
+  width: auto;
+  height: 100dvh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  background-color: black; /* Set the background color to transparent */
+  background-color: black;
   transition: background-image 0.5s ease-in-out;
-
 }
 
 div #logo_container::before {
@@ -96,7 +70,7 @@ div #logo_container::before {
   opacity: 0;
   width: 80%;
   transition: opacity 1s ease-in-out;
-  margin-top: 155px;
+  margin-top: 10px;
 
 }
 
@@ -105,13 +79,35 @@ div #logo_container::before {
 
 }
 
+
+
 .fade-out {
   opacity: 0.09;
-  transition: opacity 5s ease-in-out;
+  transition: opacity 3s ease-in-out;
 }
 
-/* Modern React Native Design Principles */
-/* 1. Minimalistic Design */
+
+#eyeButton {
+  background: none;
+  border: none;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden; /* Clip the shadow outside the button */
+  border-radius: 50%; /* Make it round, adjust as needed */
+  width: 32px; /* Set your eye image width */;
+  height: 32px;/* Set your eye image height */;
+  animation: pulse 2s infinite; /* Adjust the duration as needed */
+}
+#exitButton {
+  background: none;
+  border: none;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden; /* Clip the shadow outside the button */
+  border-radius: 50%; /* Make it round, adjust as needed */
+  width: 32px; /* Set your eye image width */;
+  height: 32px;/* Set your eye image height */;
+}
 
 #playPauseBtn {
   background-color: #b4b4b4fa;
@@ -152,6 +148,35 @@ div #logo_container::before {
 }
 
 
+#playPauseBtn {
+  background-color: #ff2424;
+  opacity: 35;
+  border-radius: 50%;
+  width: 50px;
+  animation: floatUpDown 5s ease-in-out infinite;
+}
+
+/* Tooltip */
+#playPauseBtn .tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: #ff0000;
+  transition: opacity 0.3s;
+}
+
+#playPauseBtn:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+#playPauseBtn .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+    height: 20px;
+  }
+
+
 @keyframes ripple {
   0% {
     transform: scale(0);
@@ -176,59 +201,6 @@ div #logo_container::before {
   }
 }
 
-#playPauseBtn:not(:hover) {
-  animation: floatUpDown 5s ease-in-out infinite;
-}
-
-#playPauseBtn{
-  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 {
-  visibility: visible;
-  opacity: 1;
-}
-
-#playPauseBtn: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 {
@@ -254,3 +226,22 @@ div #logo_container::before {
   }
 }
 
+
+
+
+/* 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 */
+}
+

public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Enter the V Pod by Vgony Forever.</title>
+    <title>V Corp</title>
     <meta name="twitter:image" content="https://i.imgur.com/JcRLYji.jpeg" />
     <meta property="og:image" content="https://i.imgur.com/JcRLYji.jpeg" />
     <link rel="stylesheet" href="index.css" />
@@ -16,6 +16,7 @@
     <audio id="audioPlayer" src="only.mp3" autoplay></audio>
 
     <script src="/mpegts.js"></script>
+    
   </head>
   <body>
     <div
@@ -28,19 +29,17 @@
         <h1 class="display-flex text-4xl font-black text-grey-300">ФЙLЧ</h1>
         <h2 class="cursive text-6xl font-bold text-red-500">Human</h2>
 
-        <a
-          id="eyeButton"
-          class="flex grid place-content-end mr-25"
-        >
+        <a id="eyeButton" class="flex grid place-content-end mr-25">
           <img src="eye.png" alt="Eye Icon" height="30px" width="auto" />
         </a>
       </div>
       <div>
         <a href="https://vgony.tech" class="exit-simulation-button">
-          <img id="exitButton" src="exit.svg" alt="Exit button">
-        </a>        </div>
+          <img id="exitButton" src="exit.svg" alt="Exit button" />
+        </a>
+      </div>
       <div x-data="app()" x-init="init()" class="container mx-auto z-10">
-        <div class="flex grid place-content-center justify-center w-full p-2">
+        <div class="flex grid place-content-center justify-center w-full p-1">
           <video
             id="videoElement"
             class="aspect-video mx-auto w-auto border-4 border-6 border-slate-900/30 rounded-full"
@@ -87,54 +86,52 @@
             <img
               src="headphones.svg"
               alt="Pause Button"
-              width="10"
-              height="10"
+              width="32"
+              height="32"
             />
           </button>
         </div>
       </div>
     </div>
+    <div id="placeholder" class="w-auto h-vh relative inset-0 z-0"
+    style="
+      background-image: url('https://media1.giphy.com/media/n1KtF7TCeMM3hit7OI/giphy.gif');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-color: black;
+      transition: background-image 0.5s ease-in-out;
+    "></div>
     <div
       id="placeholder"
       class="w-screen h-screen"
       style="
-        background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExODRidWc0MjB1a2x1dnlzMTd4cXZwZGR3aXpnbzRyYnJreDlrM3AwaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3XCpYDupGaM4T0hVFu/giphy.gif');
+        background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdGZzdHJlYTVtNTN1aXFxNWhuY3F5M3VyNjE3aDRpbmt3Z3V1bjd0ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/W4xRd0FiK5EY6Q71DC/giphy.gif');
       "
       class="relative inset-0 z-0"
     ></div>
     <div
-    id="placeholder"
-    class="w-screen h-screen"
-    style="position: relative;"
-  >
-    <video
-      class="w-full h-full object-cover"
-      src="https://i.imgur.com/fsbSOpO.mp4"
-      autoplay
-      muted
-      loop
-    ></video>
-  </div>
+      id="placeholder"
+      class="w-screen h-screen"
+      style="
+        background-image: url('https://media0.giphy.com/media/YHrQQb71BWx2k21w2N/giphy.gif?cid=ecf05e47dipv8twiw8rsrrrpcbygndgu6buzuri4mvr4hw83&ep=v1_gifs_related&rid=giphy.gif&ct=g');
+      "
+      class="relative inset-0 z-0"
+    ></div>
+
 
     <script>
       const eyeButton = document.getElementById("eyeButton");
       const videoWrapper = document.getElementById("videoElement");
-      // 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 = [
         "only.mp3",
         "risenfall.mp3",
-
         // Add more audio file paths here
       ];
-      eyeButton.addEventListener("click", () => {
-        videoWrapper.classList.toggle("fade-in");
-      });
-
+    
       // Shuffle the audio files array
       function shuffleArray(array) {
         for (let i = array.length - 1; i > 0; i--) {
@@ -144,17 +141,19 @@
         return array;
       }
 
+      eyeButton.addEventListener("click", () => {
+        videoWrapper.classList.toggle("fade-in");
+      });
+    
       // Play the next audio file in the shuffled array
       function playNextAudio() {
-        const currentIndex = audioFiles.findIndex(
-          (file) => file === audioPlayer.src
-        );
+        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
+    
+      // Handle clicking the play/pause button
       playPauseBtn.addEventListener("click", () => {
         if (audioPlayer.paused) {
           audioPlayer.play();
@@ -164,30 +163,24 @@
           playPauseBtn.querySelector("img").src = "headphones.svg";
         }
       });
-
-      // Shuffle the audio files array on page load
+    
+      // Setup audio player
       shuffleArray(audioFiles);
       audioPlayer.src = audioFiles[0];
       audioPlayer.play();
-
-      // Automatically play the next audio file after the current one finishes
       audioPlayer.addEventListener("ended", playNextAudio);
-
+    
+      // Display the video once loaded
       document.addEventListener("DOMContentLoaded", function () {
         setTimeout(function () {
           showVideo();
-        }, 1500); //
+        }, 1000);
       });
-
+    
       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>
       // disable analytics (we don't use VideoJS yet anyway)
@@ -243,7 +236,7 @@
             },
             comedy: {
               id: "comedy",
-              label: "#comedy",
+              label: "#Entertainment",
               audience: 0,
               online: false,
               visible: true,
@@ -254,7 +247,7 @@
             },
             documentary: {
               id: "documentary",
-              label: "#documentary",
+              label: "#News",
               audience: 0,
               online: false,
               visible: true,