yenru0/chakmate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert SPA to multi-page architecture

Browse Source 
- 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
This commit is contained in:
yenru0
2026-05-19 14:44:49 +09:00
parent 3735240eed
commit c58b5ab24d
49 changed files with 7574 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/scene_swipe.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<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">
</head>
<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased">
<!-- Heroicons SVG Sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</symbol>
<symbol id="icon-arrow-uturn-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7v6h6M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>
</symbol>
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
</symbol>
<symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</symbol>
</svg>
<header class="flex items-center justify-between p-5 bg-surface-card rounded-b-3xl shadow-[0_4px_20px_rgba(30,27,46,0.08)]">
<button class="flex items-center gap-2 px-4 py-2 rounded-full text-text-secondary hover:bg-surface-secondary transition-colors" onclick="window.location.href='scene_dashboard.html'">
<svg class="w-5 h-5"><use href="#icon-home"></use></svg>
<span class="text-sm font-medium">홈</span>
</button>
<h1 class="font-display text-lg font-semibold text-text-primary">스와이프 모드</h1>
<button class="flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-primary to-primary-dark rounded-full text-white text-sm font-semibold shadow-md transition-all duration-250 hover:-translate-y-0.5 hover:shadow-lg disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none" id="undoBtn" disabled>
<svg class="w-4 h-4"><use href="#icon-arrow-uturn-left"></use></svg>
실행 취소
</button>
</header>
<main class="flex flex-col min-h-[calc(100vh-70px)] px-6">
<div class="text-center mb-8">
<h2 class="text-[28px] font-bold text-text-primary mb-1" id="currentFileName">project_proposal.pdf</h2>
<p class="text-text-muted text-sm">왼쪽으로 스와이프하면 삭제, 오른쪽으로 스와이프하면 보관</p>
</div>
<div class="flex-1 flex flex-col items-center justify-center relative py-8">
<div class="relative w-full max-w-[320px] h-[420px]" id="cardStack"></div>
<div class="hidden flex-col items-center justify-center text-center p-16" id="emptyState">
<div class="w-[120px] h-[120px] bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mb-6 animate-pulse-slow shadow-glow">
<svg class="w-[60px] h-[60px] text-white"><use href="#icon-check"></use></svg>
</div>
<h2 class="text-[28px] font-bold text-text-primary mb-3">모두 완료!</h2>
<p class="text-text-muted text-base mb-6">모든 파일을 검토했습니다</p>
<button class="flex items-center gap-2 px-6 py-4 bg-gradient-to-r from-primary to-primary-dark rounded-full text-white text-base font-semibold shadow-md transition-all duration-250 hover:-translate-y-0.5 hover:shadow-lg" onclick="resetFiles()">
다시 시작
</button>
</div>
</div>
<div class="flex justify-center gap-6 mt-8" id="actionButtons">
<button class="w-[80px] h-[80px] rounded-full bg-gradient-to-br from-accent-danger to-red-500 text-white flex items-center justify-center shadow-md transition-transform duration-500 active:scale-90" onclick="handleSwipe('delete')">
<svg class="w-9 h-9"><use href="#icon-trash"></use></svg>
</button>
<button class="w-[80px] h-[80px] rounded-full bg-gradient-to-br from-accent to-emerald-500 text-white flex items-center justify-center shadow-md transition-transform duration-500 active:scale-90" onclick="handleSwipe('keep')">
<svg class="w-9 h-9"><use href="#icon-check"></use></svg>
</button>
</div>
</main>
<footer class="p-5 bg-surface-card rounded-t-3xl shadow-[0_-4px_20px_rgba(30,27,46,0.08)]">
<div class="flex items-center gap-4">
<div class="flex-1 h-2 bg-surface-secondary rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-500" id="progressFill" style="width: 0%"></div>
</div>
<div class="font-display text-sm font-semibold text-primary min-w-[60px] text-right" id="progressText">0%</div>
</div>
</footer>
<div class="fixed top-[90px] left-1/2 -translate-x-1/2 bg-text-primary text-surface-card px-6 py-3 rounded-full text-sm font-medium shadow-lg opacity-0 pointer-events-none transition-all duration-250 z-[200]" id="toast">파일 보관됨</div>
<script type="module" src="../scripts/swipe.js"></script>
</body>
</html>