Upload 25 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.exe filter=lfs diff=lfs merge=lfs -text

public/agent741.mp3

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

public/hacker.mp3

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

public/headlights.mp3

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

public/index.css

@@ -1,37 +1,149 @@
 html {
-    font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* GTA Text */
+h1 {
+  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
+}
+/* Vice City Text */
+h2 {
+  font-family: "Satisfy", cursive;
+  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
+}
+
+div #logo_container::before {
+  z-index: 20;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 157%;
+  left: 0;
+  position: absolute;
+  transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+}
+
+.container {
+  position: relative;
+  z-index: 20;
+}
+
+#videoElement {
+  opacity: 0;
+  transition: opacity 3s ease-in-out;
+}
+
+#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;
   }
+}
 
-  body {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    overflow-y:visible
+@media (max-width: 480px) {
+  #playPauseBtn {
+    width: 30px;
+    height: 30px;
   }
-  video {
-    margin-top: -128px;
-    height: auto;
-    width: auto;
+
+  #playPauseBtn img {
+    width: 20px;
+    height: 20px;
   }
+}
+
+/* Modern React Native Design Principles */
+/* 1. Minimalistic Design */
+
+#playPauseBtn {
+  background-color: #00ff40; 
+  opacity: 35;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn img {
+  width: 30px;
+  height: 30px;
+}
 
-  /* GTA Text */
-  h1 {
-    text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
-    
+#playPauseBtn:active {
+  background-color: #b1b1b186;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn:active img {
+  transform: scale(1.2);
+  transition: transform 0.2s ease;
+}
+
+#playPauseBtn:active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: rgb(218, 0, 0);
+  border-radius: 50%;
+  animation: ripple 0.4s linear;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
   }
-  /* Vice City Text */
-  h2 {
-    font-family: 'Satisfy', cursive;
-    text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
   }
+}
 
-  div #logo_container::before {
-    content: "";
-    width:100%;
-    height:100%;
-    top:157%;
-    left:0;
-    position:absolute;
-    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+/* Add a floating up and down animation */
+@keyframes floatUpDown {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
   }
+}
 
+#playPauseBtn:not(:hover) {
+  animation: floatUpDown 5s ease-in-out infinite;
+}
+/* 2. Animations and Transitions */
+/* 3. Consistent Typography */
+/* 4. Accessibility */
+/* 5. Responsive Design */

public/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>V-Pod</title>
     <link rel="stylesheet" href="index.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -11,6 +11,8 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Satisfy&display=swap"
       rel="stylesheet"
     />
+    <audio id="audioPlayer" src="overthink.mp3" autoplay></audio>
+
     <script src="/mpegts.js"></script>
   </head>
   <body>
@@ -18,46 +20,36 @@
       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="logo_container"
-        class="relative grid place-content-center place-items-center gap-2 before:bg-gradient-to-t before:from-teal-500/70 before:via-fuchsia-600 before:to-transparent before:blur-xl before:filter"
+        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;
+        "
       >
-        >
-        <h1 class="title text-4xl font-black text-teal-300">VGФЙЧ</h1>
-        <a 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 3 0 013 3v1"
-            />
-          </svg>
-        </a>
-        <h2 class="cursive text-6xl font-bold text-fuchsia-500">forever</h2>
+        <div class="flex place-content-center justify-between flex-row">
+          <h1 class="display-flex text-4xl font-black text-teal-300">VGФЙЧ</h1>
+          <h2 class="cursive text-6xl font-bold text-fuchsia-500">forever</h2>
+        </div>
       </div>
-      <div x-data="app()" x-init="init()" class="container mx-auto  z-10">
-        <div class="flex w-full pt-16">
+      <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">
           <video
             id="videoElement"
-            class="aspect-video mx-auto w-auto border-4 border-slate-900/20 rounded-full"
+            class="aspect-video mx-auto w-auto border-4 border-6 border-slate-900/80 rounded-full"
             preload="auto"
             muted
             autoplay
           ></video>
         </div>
-        <div class="inset-x-0 bottom-0 pb-4 z-10">
-          <div class="container mx-auto px-8 opacity-85">
-            <div class="flex items-center justify-between">
+        <div class="flex justify-center bottom-0 pb-2 z-10">
+          <div class="container mx-auto px-4 opacity-85">
+            <div class="flex-row items-center justify-center">
               <div
-                class="flex items-center space-x-4 text-xs focus:cursor-pointer"
+                class="flex items-center space-x-6 text-xs focus:cursor-pointer"
               >
-              
                 <template x-for="(chan, index) in channels">
                   <div
                     class="text-sm capitalize truncate mr-2"
@@ -70,32 +62,111 @@
                     ></span>
                   </div>
                 </template>
-
-                
               </div>
-              <div class="flex-col justify-center space-y-2 items-center">
-                <div class="flex items-center justify-center space-x-1 text-xs">
-                  <span>🔴</span>
-                  <a class="text-white font-bold" x-text="'LIVE'"></a>
-                </div>
-                <div
-                  class="flex items-center justify-center text-white opacity-80 hover:opacity-100 cursor-pointer"
-                  x-on:click="toggleAudio()"
-                >
-                  <span x-show="muted">&#x1F507;</span>
-                  <span x-show="!muted">&#x1F508;</span>
-                </div>
-                <div
-                  class="flex items-center justify-center text-white hover:text-white opacity-80 hover:opacity-100 cursor-pointer"
-                >
+
+              <div class="flex-col justify-center items-center">
+                <div class="flex items-center justify-center">
+                  <a class="text-white font-bold" x-text="''"></a>
                 </div>
               </div>
             </div>
           </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>
+            </svg>
+          </a>
+          <button
+            id="playPauseBtn"
+            type="button"
+            class="dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-10 h-10 rounded-full shadow-md flex items-center justify-center opacity-90"
+            aria-label="Pause"
+          >
+            <img src="headphones.svg" alt="Pause Button" width="10" height="10" />
+          </button>
+          
+        </div>
       </div>
     </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 = [
+  'overthink.mp3',
+  'overthink.mp3',
+  'overthink.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();
+        }, 3000); // 10 seconds
+      });
+
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function () {
+          showVideo();
+          fadeBackgroundImage();
+        }, 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)
       window.HELP_IMPROVE_VIDEOJS = false;
     </script>
@@ -105,7 +176,6 @@
     ></script>
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
-    <!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
     <script>
       function app() {
         return {

public/letitbe.mp3

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

public/overthink.mp3

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

public/tst.mp3

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