| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Project Gallery</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: #0f0f0f; |
| color: #fff; |
| padding: 20px; |
| } |
| |
| .header { |
| text-align: center; |
| padding: 40px 20px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border-radius: 20px; |
| margin-bottom: 40px; |
| } |
| |
| .header h1 { |
| font-size: 2.5em; |
| margin-bottom: 10px; |
| } |
| |
| |
| .featured-section { |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
| border-radius: 20px; |
| padding: 40px; |
| margin-bottom: 50px; |
| } |
| |
| .featured-section h2 { |
| font-size: 2em; |
| margin-bottom: 20px; |
| text-align: center; |
| } |
| |
| .featured-section p { |
| text-align: center; |
| font-size: 1.1em; |
| margin-bottom: 30px; |
| } |
| |
| .featured-media { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .featured-media-item { |
| background: #1a1a1a; |
| border-radius: 15px; |
| overflow: hidden; |
| } |
| |
| .featured-media-item img, |
| .featured-media-item video { |
| width: 100%; |
| height: 250px; |
| object-fit: cover; |
| display: block; |
| } |
| |
| .featured-media-item .caption { |
| padding: 10px; |
| text-align: center; |
| font-size: 0.9em; |
| } |
| |
| .link-container { |
| text-align: center; |
| } |
| |
| .visit-button { |
| display: inline-block; |
| padding: 15px 40px; |
| background: white; |
| color: #f5576c; |
| text-decoration: none; |
| border-radius: 50px; |
| font-weight: bold; |
| font-size: 1.1em; |
| transition: all 0.3s ease; |
| } |
| |
| .visit-button:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px rgba(255,255,255,0.3); |
| } |
| |
| |
| .section-title { |
| font-size: 2em; |
| margin: 40px 0 20px 0; |
| text-align: center; |
| } |
| |
| .gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 20px; |
| margin-bottom: 50px; |
| } |
| |
| .gallery-item { |
| background: #1a1a1a; |
| border-radius: 15px; |
| overflow: hidden; |
| transition: transform 0.3s ease; |
| } |
| |
| .gallery-item:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4); |
| } |
| |
| .gallery-item img, |
| .gallery-item video { |
| width: 100%; |
| height: 250px; |
| object-fit: cover; |
| display: block; |
| } |
| |
| .gallery-item .caption { |
| padding: 15px; |
| text-align: center; |
| font-size: 1.1em; |
| } |
| |
| |
| .lightbox { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.95); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .lightbox.active { |
| display: flex; |
| } |
| |
| .lightbox-content { |
| max-width: 90%; |
| max-height: 90%; |
| } |
| |
| .lightbox img, |
| .lightbox video { |
| max-width: 100%; |
| max-height: 90vh; |
| border-radius: 10px; |
| } |
| |
| .close-lightbox { |
| position: absolute; |
| top: 20px; |
| right: 40px; |
| font-size: 40px; |
| color: white; |
| cursor: pointer; |
| background: none; |
| border: none; |
| } |
| |
| @media (max-width: 1024px) { |
| .featured-media { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .gallery { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <h1>🤖 Nano Banana Addon' Gallery</h1> |
| <p>Free Service Link: https://www.ginigen.ai/en</p> |
| </div> |
|
|
| |
| <div class="featured-section"> |
| <h2>🍌 Ginigen AI</h2> |
| <p>Next-Generation AI Solution Platform - Accelerate your business with innovative AI technology</p> |
| |
| <div class="featured-media"> |
| <div class="featured-media-item"> |
| <img src="ginigen-screenshot.png" alt="Ginigen AI Screenshot"> |
| <div class="caption">Ginigen AI Platform</div> |
| </div> |
| <div class="featured-media-item"> |
| <video src="h1.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">H1 Demo</div> |
| </div> |
| <div class="featured-media-item"> |
| <video src="h2.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">H2 Demo</div> |
| </div> |
| </div> |
|
|
| <div class="link-container"> |
| <a href="https://www.ginigen.ai/en" target="_blank" class="visit-button"> |
| Visit Ginigen AI Now → |
| </a> |
| </div> |
| </div> |
|
|
| |
| <h2 class="section-title">🎬 Video Gallery</h2> |
| <div class="gallery" id="video-gallery"> |
| <div class="gallery-item"> |
| <video src="q1.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q1 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q2.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q2 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q3.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q3 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q4.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q4 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q5.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q5 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q6.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q6 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q7.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q7 Demo</div> |
| </div> |
| <div class="gallery-item"> |
| <video src="q8.mp4" controls> |
| Your browser does not support the video tag. |
| </video> |
| <div class="caption">Q8 Demo</div> |
| </div> |
| </div> |
|
|
| |
| <h2 class="section-title">📸 Image Gallery</h2> |
| <div class="gallery" id="image-gallery"> |
| <div class="gallery-item" onclick="openLightbox('q1.jpg')"> |
| <img src="q1.jpg" alt="Q1 Project"> |
| <div class="caption">Q1 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q2.jpg')"> |
| <img src="q2.jpg" alt="Q2 Project"> |
| <div class="caption">Q2 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q3.jpg')"> |
| <img src="q3.jpg" alt="Q3 Project"> |
| <div class="caption">Q3 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q4.jpg')"> |
| <img src="q4.jpg" alt="Q4 Project"> |
| <div class="caption">Q4 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q5.jpg')"> |
| <img src="q5.jpg" alt="Q5 Project"> |
| <div class="caption">Q5 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q6.jpg')"> |
| <img src="q6.jpg" alt="Q6 Project"> |
| <div class="caption">Q6 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q7.jpg')"> |
| <img src="q7.jpg" alt="Q7 Project"> |
| <div class="caption">Q7 Project</div> |
| </div> |
| <div class="gallery-item" onclick="openLightbox('q8.jpg')"> |
| <img src="q8.jpg" alt="Q8 Project"> |
| <div class="caption">Q8 Project</div> |
| </div> |
| </div> |
|
|
| |
| <div class="lightbox" id="lightbox" onclick="closeLightbox()"> |
| <button class="close-lightbox">×</button> |
| <div class="lightbox-content"> |
| <img id="lightbox-img" src="" alt="Full size"> |
| </div> |
| </div> |
|
|
| <script> |
| function openLightbox(src) { |
| document.getElementById('lightbox').classList.add('active'); |
| document.getElementById('lightbox-img').src = src; |
| } |
| |
| function closeLightbox() { |
| document.getElementById('lightbox').classList.remove('active'); |
| } |
| |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.key === 'Escape') { |
| closeLightbox(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
