yenru0
c58b5ab24d
- Add scene_onboarding.html, scene_dashboard.html, scene_settings.html - Add onboarding.js, dashboard.js, settings.js scripts - Update vite.config.js for multi-page build - Navigation via window.location.href between pages - Bottom nav bar on dashboard only
106 lines
7.0 KiB
HTML
106 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chakmate - 지능형 디지털 자산 관리</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=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../styles/main.css">
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
<symbol id="icon-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path d="M2 17l10 5 10-5"/>
|
|
<path d="M2 12l10 5 10-5"/>
|
|
</symbol>
|
|
<symbol id="icon-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
|
<path d="M9 12l2 2 4-4"/>
|
|
</symbol>
|
|
<symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M5 12h14"/>
|
|
<path d="M12 5l7 7-7 7"/>
|
|
</symbol>
|
|
<symbol id="icon-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
|
</symbol>
|
|
<symbol id="icon-light-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 18h6M10 22h4M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14"/>
|
|
</symbol>
|
|
<symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
</symbol>
|
|
</svg>
|
|
</head>
|
|
<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden">
|
|
<div class="max-w-[420px] w-full text-center flex flex-col items-center justify-center min-h-screen p-4 gap-4 lg:flex-row lg:max-w-full lg:justify-center lg:gap-8 mx-auto">
|
|
<div class="flex flex-col items-center justify-center lg:flex-shrink-0">
|
|
<div class="logo w-64 h-64 mx-auto mb-6 flex items-center justify-center animate-float lg:w-48 lg:h-48">
|
|
<img src="../assets/logo.svg" alt="Chakmate Logo" class="w-full h-full object-contain">
|
|
</div>
|
|
<h1 class="brand-name font-display text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2 lg:text-3xl">Chakmate</h1>
|
|
<p class="tagline text-text-secondary text-base mb-10 lg:mb-0">지능형 디지털 자산 관리 솔루션</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center gap-4 lg:flex-col">
|
|
<div class="steps-indicator flex gap-2 justify-center mb-8 lg:mb-0">
|
|
<div class="step-dot active w-2 h-2 rounded-full bg-primary transition-all duration-250" data-step="1"></div>
|
|
<div class="step-dot w-2 h-2 rounded-full bg-text-muted transition-all duration-250" data-step="2"></div>
|
|
<div class="step-dot w-2 h-2 rounded-full bg-text-muted transition-all duration-250" data-step="3"></div>
|
|
</div>
|
|
|
|
<!-- Step 1: Welcome -->
|
|
<div class="onboarding-step active" data-step="1">
|
|
<div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
|
|
<svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-layers"></use></svg>
|
|
</div>
|
|
<h2 class="step-title text-xl mb-3 text-text-primary font-display">파일 정리, 지능적으로</h2>
|
|
<p class="step-desc text-text-secondary leading-relaxed mb-8">AI가 파일 사용 패턴을 분석하여 당신만의 최적화된 폴더 구조를 제안합니다. 더 이상 수동 정리는 필요 없습니다.</p>
|
|
<div class="privacy-badge inline-flex items-center gap-2 bg-accent text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
|
|
<svg class="w-4 h-4 stroke-white fill-none"><use href="#icon-shield-check"></use></svg>
|
|
<span>기기 내 단독 처리 • 완벽한 개인정보 보호</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Swipe -->
|
|
<div class="onboarding-step hidden" data-step="2">
|
|
<div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
|
|
<svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-bolt"></use></svg>
|
|
</div>
|
|
<h2 class="step-title text-xl mb-3 text-text-primary font-display">스вай프로 빠른 정리</h2>
|
|
<p class="step-desc text-text-secondary leading-relaxed mb-8">좌우 스와이프로 파일을 빠르게 분류하세요. 한번의 제스처로 파일의 귀 fate를 결정합니다.</p>
|
|
<div class="swipe-hints flex justify-between w-full max-w-[280px] mx-auto text-text-muted text-sm">
|
|
<div class="flex items-center gap-1">
|
|
<svg class="w-[16px] h-[16px] stroke-current fill-none"><use href="#icon-arrow-left"></use></svg>
|
|
<span>삭제</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span>보관</span>
|
|
<svg class="w-[16px] h-[16px] stroke-accent-warn fill-none stroke-2"><use href="#icon-arrow-right"></use></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: AI -->
|
|
<div class="onboarding-step hidden" data-step="3">
|
|
<div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
|
|
<svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-light-bulb"></use></svg>
|
|
</div>
|
|
<h2 class="step-title text-xl mb-3 text-text-primary font-display">AI가 제안하는 구조</h2>
|
|
<p class="step-desc text-text-secondary leading-relaxed mb-8">당신의 파일 사용 패턴을 학습하여 최적인 폴더 구조를 제안해 드립니다.</p>
|
|
</div>
|
|
|
|
<button class="btn btn-primary w-full max-w-[280px] mx-auto lg:mx-0" id="start-organizing">
|
|
<span>정리 시작하기</span>
|
|
<svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-right"></use></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="../scripts/onboarding.js"></script>
|
|
</body>
|
|
</html> |