Spaces:

CosmickVisions
/

Cosmick-Gallery

Running

App Files Files Community

CosmickVisions commited on Mar 20

Commit

7e63d34

verified ·

1 Parent(s): 1707b6b

Update index.html

Browse files

Files changed (1) hide show

index.html +132 -11

index.html CHANGED Viewed

@@ -199,6 +199,90 @@
       background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(15,15,40,0.8) 100%);
       z-index: -2;
     }
   </style>
 </head>
 <body>
@@ -235,22 +319,59 @@
         { src: 'videos/Insta-VID1 (8).mp4', tag: ['After Effects'] },
       ];
       return (
         <>
           <header>
             <h1>Calvin Allen-Crawford's Gen AI Gallery</h1>
           </header>
-          <main>
-            <div className="gallery">
-              {videos.map((video, index) => (
-                <div className="video-card" key={index}>
-                  <video controls>
-                    <source src={video.src} type="video/mp4" />
-                    Your browser does not support the video tag.
-                  </video>
-                  <p>{video.tag.join(', ')}</p>
-                </div>
-              ))}
             </div>
           </main>
         </>

       background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(15,15,40,0.8) 100%);
       z-index: -2;
     }
+    .gallery-container {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: calc(100vh - 100px);
+      height: auto;
+      padding: 20px;
+    }
+    .video-showcase {
+      position: relative;
+      width: auto;
+      max-width: 95%;
+      background-color: var(--card-background);
+      border-radius: 15px;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.7);
+      overflow: hidden;
+      perspective: 1000px;
+      transform: rotateX(10deg);
+      transition: all 0.3s ease;
+      display: flex;
+      flex-direction: column;
+    }
+    .video-showcase:hover {
+      transform: scale(1.02) rotateX(0);
+      box-shadow: 0 20px 45px rgba(0,255,255,0.3);
+    }
+    .video-showcase video {
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+      transition: transform 0.3s ease;
+      align-self: center;
+    }
+    .navigation-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0,255,255,0.2);
+      color: var(--primary-color);
+      border: 2px solid var(--primary-color);
+      width: 70px;
+      height: 70px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      z-index: 10;
+      transition: all 0.3s ease;
+      font-size: 36px;
+      font-weight: bold;
+      opacity: 0.7;
+    }
+    .navigation-arrow:hover {
+      background: rgba(0,255,255,0.4);
+      box-shadow: 0 0 15px rgba(0,255,255,0.5);
+      opacity: 1;
+    }
+    .navigation-arrow.prev {
+      left: 30px;
+    }
+    .navigation-arrow.next {
+      right: 30px;
+    }
+    .video-tags {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 15px;
+      background: rgba(0,0,0,0.7);
+      color: var(--primary-color);
+      text-align: center;
+      font-family: 'Orbitron', sans-serif;
+    }
   </style>
 </head>
 <body>
         { src: 'videos/Insta-VID1 (8).mp4', tag: ['After Effects'] },
       ];
+      const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
+      const [videoDimensions, setVideoDimensions] = useState({ width: 'auto', height: 'auto' });
+      const handleLoadedMetadata = (e) => {
+        const { videoWidth, videoHeight } = e.target;
+        setVideoDimensions({ width: videoWidth, height: videoHeight });
+      };
+      const handleNextVideo = () => {
+        setCurrentVideoIndex((prevIndex) =>
+          prevIndex === videos.length - 1 ? 0 : prevIndex + 1
+        );
+      };
+      const handlePrevVideo = () => {
+        setCurrentVideoIndex((prevIndex) =>
+          prevIndex === 0 ? videos.length - 1 : prevIndex - 1
+        );
+      };
+      const currentVideo = videos[currentVideoIndex];
       return (
         <>
           <header>
             <h1>Calvin Allen-Crawford's Gen AI Gallery</h1>
           </header>
+          <main className="gallery-container">
+            <div className="navigation-arrow prev" onClick={handlePrevVideo}>
+              &#10094;
+            </div>
+            <div className="video-showcase">
+              <video
+                key={currentVideo.src}
+                controls
+                autoPlay
+                src={currentVideo.src}
+                onLoadedMetadata={handleLoadedMetadata}
+                style={{
+                  maxWidth: '95vw',
+                  maxHeight: '80vh',
+                  width: videoDimensions.width,
+                  height: videoDimensions.height
+                }}
+              >
+                Your browser does not support the video tag.
+              </video>
+              <div className="video-tags">
+                {currentVideo.tag.join(', ')}
+              </div>
+            </div>
+            <div className="navigation-arrow next" onClick={handleNextVideo}>
+              &#10095;
             </div>
           </main>
         </>