Spaces:

ginigen
/

AI

Running

App Files Files Community

AI / index.html

ginipick

Create index.html

242dd77 verified 2 months ago

raw

history blame

7.35 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI 프로젝트 갤러리</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 프로젝트 갤러리</h1>
	<p>허깅페이스 기반 AI 개발 포트폴리오</p>
	</div>

	<!-- 나노 바나나 특집 섹션 -->
	<div class="featured-link">
	<img src="images/ginigen-screenshot.png" alt="Ginigen AI">
	<div class="content">
	<h2>🍌 Ginigen AI</h2>
	<p>차세대 AI 솔루션 플랫폼</p>
	<p>혁신적인 인공지능 기술로 비즈니스를 가속화하세요</p>
	<a href="https://www.ginigen.ai/en" target="_blank" class="visit-button">
	지금 방문하기 →
	</a>
	</div>
	</div>

	<!-- 이미지 갤러리 -->
	<h2 class="section-title">📸 이미지 갤러리</h2>
	<div class="gallery" id="image-gallery">
	<div class="gallery-item" onclick="openLightbox('images/project1.jpg')">
	<img src="images/project1.jpg" alt="프로젝트 1">
	<div class="caption">AI 이미지 생성</div>
	</div>
	<div class="gallery-item" onclick="openLightbox('images/project2.png')">
	<img src="images/project2.png" alt="프로젝트 2">
	<div class="caption">텍스트 분석 모델</div>
	</div>
	<div class="gallery-item" onclick="openLightbox('images/project3.jpg')">
	<img src="images/project3.jpg" alt="프로젝트 3">
	<div class="caption">음성 인식 시스템</div>
	</div>
	<!-- 이미지 파일 추가 -->
	</div>

	<!-- 비디오 갤러리 -->
	<h2 class="section-title">🎬 비디오 갤러리</h2>
	<div class="gallery" id="video-gallery">
	<div class="gallery-item">
	<video src="videos/demo1.mp4" controls>
	Your browser does not support the video tag.
	</video>
	<div class="caption">AI 챗봇 데모</div>
	</div>
	<div class="gallery-item">
	<video src="videos/demo2.mp4" controls>
	Your browser does not support the video tag.
	</video>
	<div class="caption">객체 인식 시연</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');
	}

	// ESC 키로 라이트박스 닫기
	document.addEventListener('keydown', function(e) {
	if (e.key === 'Escape') {
	closeLightbox();
	}
	});
	</script>
	</body>
	</html>