82 lines
5.3 KiB
HTML
82 lines
5.3 KiB
HTML
<!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="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)]">
|
|
<a href="scene_dashboard.html" class="flex items-center gap-2 px-4 py-2 rounded-full text-text-secondary hover:bg-surface-secondary transition-colors">
|
|
<svg class="w-5 h-5"><use href="#icon-home"></use></svg>
|
|
<span class="text-sm font-medium">홈</span>
|
|
</a>
|
|
<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> |