Spaces:

lord6ablo
/

aiwebvvv

Running

App Files Files Community

lord6ablo commited on Feb 20

Commit

501cec3

•

1 Parent(s): 94af7f5

Upload 13 files

Browse files

Files changed (8) hide show

.gitattributes +1 -0
public/exit.svg +31 -0
public/eye.png +0 -0
public/giphy.gif +3 -0
public/index.css +51 -17
public/index.html +99 -152
public/only.mp3 +3 -0
public/play.svg +1 -0

.gitattributes CHANGED Viewed

@@ -36,3 +36,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.exe filter=lfs diff=lfs merge=lfs -text
 v1.mp4 filter=lfs diff=lfs merge=lfs -text

 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.exe filter=lfs diff=lfs merge=lfs -text
 v1.mp4 filter=lfs diff=lfs merge=lfs -text
+public/giphy.gif filter=lfs diff=lfs merge=lfs -text

public/exit.svg ADDED Viewed

public/eye.png ADDED Viewed

public/giphy.gif ADDED Viewed

Git LFS Details

SHA256: b76dc58db87aaf203be728f20a839a5acd8a4b6169d00ae16954e651ddd35304
Pointer size: 132 Bytes
Size of remote file: 4.93 MB

public/index.css CHANGED Viewed

@@ -18,28 +18,62 @@ 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%;
-  object-fit: cover;
 }
 #backgroundVideo {
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 #placeholder {
   position: relative;
   left: 0;
   width: 100%;
-  height: 950px; /* 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 {
@@ -61,7 +95,7 @@ div #logo_container::before {
 #videoElement {
   opacity: 0;
   width: 80%;
-  transition: opacity 3s ease-in-out;
   margin-top: 155px;
 }
@@ -73,14 +107,14 @@ div #logo_container::before {
 .fade-out {
   opacity: 0.09;
-  transition: opacity 16s ease-in-out;
 }
 /* Modern React Native Design Principles */
 /* 1. Minimalistic Design */
 #playPauseBtn {
-  background-color: #ffea8c;
   opacity: 35;
   border-radius: 50%;
   width: 50px;
@@ -146,8 +180,7 @@ div #logo_container::before {
   animation: floatUpDown 5s ease-in-out infinite;
 }
-/* Tooltip */
-#playPauseBtn .tooltip-text {
   visibility: hidden;
   width: 120px;
   background-color: #555;
@@ -164,12 +197,12 @@ div #logo_container::before {
   transition: opacity 0.3s;
 }
-#playPauseBtn:hover .tooltip-text {
   visibility: visible;
   opacity: 1;
 }
-#playPauseBtn .tooltip-text::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -220,3 +253,4 @@ div #logo_container::before {
     height: 20px;
   }
 }

   text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
 }
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0px rgba(255, 0, 43, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(169, 94, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0px rgb(199, 0, 17);
+  }
 }
+#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;
   width: 100%;
+  object-fit: cover;
+  z-index: -1;
 }
 #placeholder {
   position: relative;
   left: 0;
   width: 100%;
+  height: 100vh;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: black; /* Set the background color to transparent */
+  transition: background-image 0.5s ease-in-out;
 }
 div #logo_container::before {
 #videoElement {
   opacity: 0;
   width: 80%;
+  transition: opacity 1s ease-in-out;
   margin-top: 155px;
 }
 .fade-out {
   opacity: 0.09;
+  transition: opacity 5s ease-in-out;
 }
 /* Modern React Native Design Principles */
 /* 1. Minimalistic Design */
 #playPauseBtn {
+  background-color: #b4b4b4fa;
   opacity: 35;
   border-radius: 50%;
   width: 50px;
   animation: floatUpDown 5s ease-in-out infinite;
 }
+#playPauseBtn{
   visibility: hidden;
   width: 120px;
   background-color: #555;
   transition: opacity 0.3s;
 }
+#playPauseBtn:hover {
   visibility: visible;
   opacity: 1;
 }
+#playPauseBtn:after {
   content: "";
   position: absolute;
   top: 100%;
     height: 20px;
   }
 }

public/index.html CHANGED Viewed

@@ -3,7 +3,9 @@
   <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" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -11,30 +13,37 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Satisfy&display=swap"
       rel="stylesheet"
     />
-    <audio id="audioPlayer" src="risenfall.mp3" autoplay></audio>
     <script src="/mpegts.js"></script>
   </head>
   <body>
     <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="backgroundVideo" class="absolute inset-0 z-0" style="background-size: cover; background-position: center;">
-        <video autoplay muted loop class="h-screen w-screen">
-          <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>
-          <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 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-orange-900/20 rounded-full"
             preload="auto"
             muted
             autoplay
@@ -69,167 +78,105 @@
           </div>
         </div>
         <div class="flex-col items-center justify-center pt-14">
-          <a class="flex grid place-content-end	mr-8">
-            <svg xmlns="http://www.w3.org/2000/svg" href="https://vgony.tech" 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
             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" />
-            <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
-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() {

   <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>
+    <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" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
       href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Satisfy&display=swap"
       rel="stylesheet"
     />
+    <audio id="audioPlayer" src="only.mp3" autoplay></audio>
     <script src="/mpegts.js"></script>
   </head>
   <body>
     <div
+      style="
+        background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWZyb3d2ZnM2cGJ5NHNmamtiYWxubTFoa2Jib2NxcmQxY21odDBkaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qyXsup1970N5UJNHgI/giphy.gif');
+      "
+      class="bg-no-repeat bg-center bg-cover bg-fixed h-screen w-screen grid place-content-center place-items-center overflow-hidden bg-gradient-to-b from-slate-900 to-black"
     >
+      <div class="flex place-content-center justify-between flex-row">
+        <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"
+        >
+          <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>
       <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-6 border-slate-900/30 rounded-full"
             preload="auto"
             muted
             autoplay
           </div>
         </div>
         <div class="flex-col items-center justify-center pt-14">
           <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>
+    <div
+      id="placeholder"
+      class="w-screen h-screen"
+      style="
+        background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExODRidWc0MjB1a2x1dnlzMTd4cXZwZGR3aXpnbzRyYnJreDlrM3AwaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3XCpYDupGaM4T0hVFu/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>
     <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--) {
+          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();
+        }, 1500); //
       });
       function showVideo() {

public/only.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:738f94300faaf7a853a13b0e41b84e0f4613056de1818d6ac7228817ecf97513
+size 6432813

public/play.svg ADDED Viewed