|
|
<!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-link { |
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
|
|
border-radius: 20px; |
|
|
padding: 30px; |
|
|
margin-bottom: 50px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 30px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.featured-link img { |
|
|
width: 300px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.featured-link .content { |
|
|
flex: 1; |
|
|
min-width: 250px; |
|
|
} |
|
|
|
|
|
.featured-link h2 { |
|
|
font-size: 2em; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.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; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.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; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.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: 768px) { |
|
|
.featured-link { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.featured-link img { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.gallery { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>🤖 AI Project Gallery</h1> |
|
|
<p>HuggingFace-based AI Development Portfolio</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="featured-link"> |
|
|
<img src="images/ginigen-screenshot.png" alt="Ginigen AI"> |
|
|
<div class="content"> |
|
|
<h2>🍌 Ginigen AI</h2> |
|
|
<p>Next-Generation AI Solution Platform</p> |
|
|
<p>Accelerate your business with innovative AI technology</p> |
|
|
<a href="https://www.ginigen.ai/en" target="_blank" class="visit-button"> |
|
|
Visit Now → |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="section-title">🎬 Video Gallery</h2> |
|
|
<div class="gallery" id="video-gallery"> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<video src="videos/h1.mp4" controls> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
<div class="caption">Featured Demo 1</div> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<video src="videos/h2.mp4" controls> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
<div class="caption">Featured Demo 2</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gallery-item"> |
|
|
<video src="videos/demo1.mp4" controls> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
<div class="caption">AI Chatbot Demo</div> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<video src="videos/demo2.mp4" controls> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
<div class="caption">Object Detection Demo</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="section-title">📸 Image Gallery</h2> |
|
|
<div class="gallery" id="image-gallery"> |
|
|
<div class="gallery-item" onclick="openLightbox('images/project1.jpg')"> |
|
|
<img src="images/project1.jpg" alt="Project 1"> |
|
|
<div class="caption">AI Image Generation</div> |
|
|
</div> |
|
|
<div class="gallery-item" onclick="openLightbox('images/project2.png')"> |
|
|
<img src="images/project2.png" alt="Project 2"> |
|
|
<div class="caption">Text Analysis Model</div> |
|
|
</div> |
|
|
<div class="gallery-item" onclick="openLightbox('images/project3.jpg')"> |
|
|
<img src="images/project3.jpg" alt="Project 3"> |
|
|
<div class="caption">Voice Recognition System</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> |
|
|
|
