Spaces:

CosmickVisions
/

Cosmick-Gallery

Running

App Files Files Community

CosmickVisions commited on Mar 20

Commit

a7dc203

verified ·

1 Parent(s): 29179b8

Update index.html

Browse files

Files changed (1) hide show

index.html +188 -47

index.html CHANGED Viewed

@@ -3,56 +3,121 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Video Gallery with React</title>
-  <!-- CSS -->
   <style>
-    body {
-      font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
-      background-color: #f4f4f4;
-      color: var(--text-color);
       line-height: 1.6;
     }
-    .video-background video {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      object-fit: cover;
-      z-index: -1;
     }
-    .gradient-overlay {
-      position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(228, 232, 240, 0.8) 50%);
-      z-index: -1;
     }
     header {
       text-align: center;
-      padding: 20px;
-      background-color: #333;
-      color: white;
     }
     .filters button {
       margin: 5px;
       padding: 10px 20px;
-      border: none;
-      background-color: #555;
-      color: white;
       cursor: pointer;
     }
     .filters button:hover {
-      background-color: #777;
     }
     .gallery {
@@ -60,33 +125,80 @@
       flex-wrap: wrap;
       justify-content: center;
       padding: 20px;
     }
     .video-card {
-      margin: 10px;
       width: 300px;
-      background-color: white;
-      border-radius: 8px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       overflow: hidden;
     }
     .video-card video {
       width: 100%;
       height: auto;
     }
     .video-card p {
-      padding: 10px;
       text-align: center;
-      margin: 0;
     }
     @media (max-width: 600px) {
       .video-card {
         width: 100%;
       }
     }
   </style>
 </head>
 <body>
@@ -99,20 +211,38 @@
   </div>
   <div class="gradient-overlay"></div>
-  <!-- Root div for React -->
   <div id="root"></div>
-  <!-- CDN for React, ReactDOM, and Babel -->
   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <!-- React App Script -->
   <script type="text/babel">
-    const { useState } = React;
     const App = () => {
-      // Local video data
       const videos = [
         { src: 'videos/Insta-VID1 (1).mp4', tag: ['Gen AI', 'Pika', 'Ai Art'] },
         { src: 'videos/Insta-VID1 (3).mp4', tag: ['After Effects'] },
@@ -123,25 +253,37 @@
         { src: 'videos/Insta-VID1 (8).mp4', tag: ['After Effects'] },
       ];
-      // State for filter
       const [filter, setFilter] = useState('all');
-      // Filter videos based on tag
-      const filteredVideos = filter === 'all'
-        ? videos
-        : videos.filter(video => video.tag.includes(filter));
       return (
-        <div>
           <header>
-            <h1>My Video Gallery</h1>
             <div className="filters">
-              <button onClick={() => setFilter('all')}>All</button>
-              <button onClick={() => setFilter('Gen AI')}>Gen AI</button>
-              <button onClick={() => setFilter('Pika')}>Pika</button>
-              <button onClick={() => setFilter('Ai Art')}>Ai Art</button>
-              <button onClick={() => setFilter('After Effects')}>After Effects</button>
-              <button onClick={() => setFilter('Twin Motion')}>Twin Motion</button>
             </div>
           </header>
           <main>
@@ -157,12 +299,11 @@
               ))}
             </div>
           </main>
-        </div>
       );
     };
-    // Render the React app
     ReactDOM.render(<App />, document.getElementById('root'));
   </script>
 </body>
-</html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calvin Allen-Crawford's Gen AI Video Gallery</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
   <style>
+    :root {
+      --primary-color: #00ffff;
+      --secondary-color: #ff6bff;
+      --background-dark: #0a0a1a;
+      --text-color-light: #e0e0ff;
+      --card-background: rgba(15, 15, 40, 0.8);
+    }
+    * {
+      box-sizing: border-box;
       margin: 0;
       padding: 0;
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: var(--background-dark);
+      color: var(--text-color-light);
       line-height: 1.6;
+      overflow-x: hidden;
+      perspective: 1000px;
     }
+    .space-background {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
+      background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+      z-index: -2;
+      overflow: hidden;
     }
+    .stars {
+      position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
+      transform: rotateZ(45deg);
+    }
+    .star {
+      position: absolute;
+      background-color: #fff;
+      width: 1px;
+      height: 1px;
+      border-radius: 50%;
+      animation: twinkle 2s infinite alternate;
+    }
+    @keyframes twinkle {
+      0% { opacity: 0.2; }
+      100% { opacity: 1; }
     }
     header {
       text-align: center;
+      padding: 30px 20px;
+      background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(15,15,40,0.8) 100%);
+      backdrop-filter: blur(10px);
+      box-shadow: 0 4px 6px rgba(0,0,0,0.5);
+    }
+    header h1 {
+      font-family: 'Orbitron', sans-serif;
+      font-size: 2.5rem;
+      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 0 0 10px rgba(0,255,255,0.5);
+    }
+    .filters {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 20px;
     }
     .filters button {
       margin: 5px;
       padding: 10px 20px;
+      border: 2px solid var(--primary-color);
+      background-color: transparent;
+      color: var(--primary-color);
       cursor: pointer;
+      font-family: 'Orbitron', sans-serif;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
     }
     .filters button:hover {
+      background-color: rgba(0,255,255,0.2);
+      box-shadow: 0 0 15px rgba(0,255,255,0.5);
+    }
+    .filters button::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
+      transition: all 0.5s ease;
+    }
+    .filters button:hover::before {
+      left: 100%;
     }
     .gallery {
       flex-wrap: wrap;
       justify-content: center;
       padding: 20px;
+      perspective: 1000px;
     }
     .video-card {
+      margin: 15px;
       width: 300px;
+      background-color: var(--card-background);
+      border-radius: 15px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
       overflow: hidden;
+      transition: all 0.3s ease;
+      transform: rotateX(10deg);
+      border: 2px solid rgba(0,255,255,0.2);
+    }
+    .video-card:hover {
+      transform: scale(1.05) rotateX(0);
+      box-shadow: 0 15px 35px rgba(0,255,255,0.3);
     }
     .video-card video {
       width: 100%;
       height: auto;
+      transition: transform 0.3s ease;
+    }
+    .video-card:hover video {
+      transform: scale(1.1);
     }
     .video-card p {
+      padding: 15px;
       text-align: center;
+      color: var(--primary-color);
+      font-family: 'Orbitron', sans-serif;
+      background: rgba(0,0,0,0.5);
     }
     @media (max-width: 600px) {
       .video-card {
         width: 100%;
+        margin: 10px 0;
       }
     }
+    .video-background {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -3;
+      overflow: hidden;
+    }
+    .video-background video {
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      object-fit: cover;
+    }
+    .gradient-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(15,15,40,0.8) 100%);
+      z-index: -2;
+    }
   </style>
 </head>
 <body>
   </div>
   <div class="gradient-overlay"></div>
+  <div class="space-background">
+    <div class="stars"></div>
+  </div>
   <div id="root"></div>
   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <script type="text/babel">
+    const { useState, useEffect } = React;
+    const StarBackground = () => {
+      useEffect(() => {
+        const starsContainer = document.querySelector('.stars');
+        const starCount = 200;
+        for (let i = 0; i < starCount; i++) {
+          const star = document.createElement('div');
+          star.classList.add('star');
+          star.style.left = `${Math.random() * 100}%`;
+          star.style.top = `${Math.random() * 100}%`;
+          star.style.animationDelay = `${Math.random() * 2}s`;
+          starsContainer.appendChild(star);
+        }
+      }, []);
+      return null;
+    };
     const App = () => {
       const videos = [
         { src: 'videos/Insta-VID1 (1).mp4', tag: ['Gen AI', 'Pika', 'Ai Art'] },
         { src: 'videos/Insta-VID1 (3).mp4', tag: ['After Effects'] },
         { src: 'videos/Insta-VID1 (8).mp4', tag: ['After Effects'] },
       ];
       const [filter, setFilter] = useState('all');
+      const [filteredVideos, setFilteredVideos] = useState(videos);
+      useEffect(() => {
+        setFilteredVideos(
+          filter === 'all'
+            ? videos
+            : videos.filter(video => video.tag.includes(filter))
+        );
+      }, [filter]);
+      const uniqueTags = ['all', ...new Set(videos.flatMap(v => v.tag))];
       return (
+        <>
+          <StarBackground />
           <header>
+            <h1>Calvin Allen-Crawford's Gen AI Gallery</h1>
             <div className="filters">
+              {uniqueTags.map(tag => (
+                <button
+                  key={tag}
+                  onClick={() => setFilter(tag)}
+                  style={{
+                    fontWeight: filter === tag ? 'bold' : 'normal',
+                    backgroundColor: filter === tag ? 'rgba(0,255,255,0.2)' : 'transparent'
+                  }}
+                >
+                  {tag}
+                </button>
+              ))}
             </div>
           </header>
           <main>
               ))}
             </div>
           </main>
+        </>
       );
     };
     ReactDOM.render(<App />, document.getElementById('root'));
   </script>
 </body>
+</html>