|
|
<!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> |
|
|
|
