Spaces:
Running
Running
| <html lang="en"> | |
| <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 { | |
| display: flex; | |
| 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; | |
| } | |
| .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; | |
| } | |
| .creator-footer { | |
| position: fixed; | |
| 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; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Video Background --> | |
| <div class="video-background"> | |
| <video autoplay muted loop> | |
| <source src="videos/bg-video.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </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 } = React; | |
| 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 (4).mp4', tag: ['Twin Motion'] }, | |
| { src: 'videos/Insta-VID1 (5).mp4', tag: ['Pika', 'Gen AI'] }, | |
| { src: 'videos/Insta-VID1 (6).mp4', tag: ['Ai Art'] }, | |
| { src: 'videos/Insta-VID1 (7).mp4', tag: ['Ai Art', 'Pika Art'] }, | |
| { 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>Cosmick Visions</h1> | |
| </header> | |
| <main className="gallery-container"> | |
| <div className="navigation-arrow prev" onClick={handlePrevVideo}> | |
| ❮ | |
| </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}> | |
| ❯ | |
| </div> | |
| </main> | |
| <footer className="creator-footer"> | |
| Created by Calvin Allen-Crawford | |
| </footer> | |
| </> | |
| ); | |
| }; | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |