Spaces:
Running
Running
| <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="hero_image.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="hero_image.png"> | |
| <source src="demo_video.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>Core Logic & Workflow</h2> | |
| <p>Google Calendar 연동부터 AI 최적화 제안까지, One-Stop 자동화 프로세스</p> | |
| </div> | |
| <div class="workflow-container glass-card"> | |
| <div class="workflow-img-wrapper"> | |
| <img src="workflow_diagram.png" alt="n8n Workflow Diagram" class="full-width-img"> | |
| </div> | |
| <div class="workflow-details"> | |
| <div class="logic-step"> | |
| <h3>1. Trigger & analysis</h3> | |
| <p>구글 캘린더에 새로운 일정이 등록되면 자동으로 감지하여 출발지와 목적지, 그리고 이동 시간을 계산합니다.</p> | |
| </div> | |
| <div class="logic-step"> | |
| <h3>2. Dual-Optimization Engine</h3> | |
| <p>이동 경로를 바탕으로 두 가지 시나리오를 병렬로 생성합니다.</p> | |
| <ul> | |
| <li><strong>탄소 배출 최적화:</strong> 친환경 경로 및 운전 습관 제안</li> | |
| <li><strong>경제적 충전 시나리오:</strong> 최저가 충전소 및 배터리 효율 분석</li> | |
| </ul> | |
| </div> | |
| <div class="logic-step"> | |
| <h3>3. AI Evaluation (Upstage Solar)</h3> | |
| <p>Upstage Solar LLM이 환경성과 경제성을 종합적으로 평가하여, 사용자에게 가장 밸런스 잡힌 최적의 스케줄을 확정합니다.</p> | |
| </div> | |
| <div class="logic-step"> | |
| <h3>4. Action & Report</h3> | |
| <p>최종 확정된 일정은 캘린더에 다시 등록되며, 상세 분석 리포트가 이메일로 즉시 전송됩니다.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="team" class="section"> | |
| <div class="section-header"> | |
| <h2>Our Team</h2> | |
| <p>Liger 프로젝트를 만들어가는 사람들</p> | |
| </div> | |
| <div class="team-container glass-card"> | |
| <!-- Image removed as requested --> | |
| <div class="team-grid"> | |
| <div class="team-member"> | |
| <h4>강윤재</h4> | |
| <span class="role">Data Research & Scenario</span> | |
| <p>전기차 전비/배터리 자료 조사<br>경제적 충전 시나리오 로직 설계</p> | |
| </div> | |
| <div class="team-member"> | |
| <h4>엄세훈</h4> | |
| <span class="role">Workflow Architect</span> | |
| <p>n8n 메인 워크플로우 개발<br>최종 리포트 템플릿 구현</p> | |
| </div> | |
| <div class="team-member"> | |
| <h4>이승현</h4> | |
| <span class="role">Project Lead</span> | |
| <p>프로젝트 총괄 및 일정 조율<br>서비스 기획 및 소개서 작성</p> | |
| </div> | |
| <div class="team-member"> | |
| <h4>이하윤</h4> | |
| <span class="role">Presentation & Data</span> | |
| <p>발표 자료 제작 및 최종 발표<br>탄소 배출 데이터 리서치</p> | |
| </div> | |
| <div class="team-member"> | |
| <h4>차성경</h4> | |
| <span class="role">Media & Validation</span> | |
| <p>아이디어 산출 및 검증<br>홍보 영상 제작 및 자료 조사</p> | |
| </div> | |
| </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> |