Spaces:

dltmdgus
/

GreenDriverOptimizer

Configuration error

App Files Files Community

GreenDriverOptimizer / index.html

dltmdgus

Upload 4 files

d2bcb48 verified 28 days ago

raw

history blame contribute delete

5.49 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Liger - Green-Drive Optimizer</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<meta name="description" content="Liger: 친환경 주행 경로 최적화 및 충전소 추천 솔루션">
	</head>
	<body>
	<div class="background-glob"></div>

	<nav class="navbar">
	<div class="logo">LIGER</div>
	<div class="nav-links">
	<a href="#demo">Demo</a>
	<a href="#presentation">Presentation</a>
	<a href="#workflow">Workflow</a>
	</div>
	</nav>

	<header class="hero">
	<div class="hero-content">
	<span class="badge">Green-Drive Optimizer</span>
	<h1>스마트한 전기차 라이프의 시작,<br> <span class="gradient-text">LIGER</span></h1>
	<p>최적의 경로와 충전소를 찾아주는 당신만의 AI 드라이빙 파트너</p>
	<div class="cta-group">
	<a href="#demo" class="btn primary">데모 영상 보기</a>
	<a href="#workflow" class="btn secondary">워크플로우 확인하기</a>
	</div>
	</div>
	<div class="hero-image">
	<img src="라이거_대표이미지.png" alt="Liger Dashboard Preview" class="glass-card">
	</div>
	</header>

	<main>
	<section id="demo" class="section">
	<div class="section-header">
	<h2>Demo Video</h2>
	<p>Liger가 어떻게 작동하는지 확인해보세요</p>
	</div>
	<div class="video-container glass-card">
	<video controls poster="라이거_대표이미지.png">
	<source src="라이거_데모영상.mp4" type="video/mp4">
	브라우저가 비디오 태그를 지원하지 않습니다.
	</video>
	</div>
	</section>

	<section id="presentation" class="section">
	<div class="section-header">
	<h2>Presentation</h2>
	<p>프로젝트 상세 소개 및 기술 스택</p>
	</div>
	<div class="ppt-container glass-card">
	<!-- PDF 파일을 여기에 업로드하거나 Google Slides embed 코드를 넣으세요 -->
	<div class="placeholder-ppt">
	<div class="icon-box">📊</div>
	<h3>발표 자료 (PPT/PDF)</h3>
	<p>PDF 파일을 레포지토리에 업로드하고, <br><code>embed</code> 태그나 링크로 연결해주세요.</p>
	<a href="#" class="btn secondary small">PDF 다운로드 (예시)</a>
	</div>
	</div>
	</section>

	<section id="workflow" class="section">
	<div class="section-header">
	<h2>n8n Workflow</h2>
	<p>자동화 로직과 데이터 흐름을 한눈에</p>
	</div>
	<div class="workflow-container glass-card">
	<div class="workflow-info">
	<h3>Core Logic</h3>
	<p>유저 입력 → 경로 최적화 → 충전소 추천 → 결과 리포트 생성</p>
	</div>
	<div class="workflow-viz">
	<!-- n8n 워크플로우 이미지나 iframe을 넣을 수 있습니다 -->
	<div class="code-block">
	<pre><code>
	// n8n Workflow JSON Viewer Link or Image
	[User Input] --> [Tmap API] --> [Filtering] --> [Map Map] --> [Response]
	</code></pre>
	</div>
	<a href="https://huggingface.co/dltmdgus" target="_blank" class="btn primary">Hugging Face 프로필 방문</a>
	</div>
	</div>
	</section>
	</main>

	<footer>
	<p>© 2024 Liger Team. All rights reserved.</p>
	<div class="socials">
	<a href="https://huggingface.co/dltmdgus" target="_blank">Hugging Face</a>
	</div>
	</footer>

	<script>
	// Smooth scroll for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Simple intersection observer for fade-in animations
	const observerOptions = {
	threshold: 0.1
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('visible');
	}
	});
	}, observerOptions);

	document.querySelectorAll('.section, .hero').forEach(el => {
	el.classList.add('fade-in-section');
	observer.observe(el);
	});
	</script>
	</body>
	</html>