refactor: convert SPA to multi-page architecture
- 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:
552
src/pages/scene_ai_classification.html
Normal file
552
src/pages/scene_ai_classification.html
Normal file
@@ -0,0 +1,552 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 분류 - 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">
|
||||
<!-- Heroicons SVG Sprite -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
|
||||
<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>
|
||||
<symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3v18M5.5 9.5L7.5 12M5.5 14.5L7.5 12M16.5 9.5L14.5 12M16.5 14.5L14.5 12M9 3l1.5 4.5L15 3M9 21l1.5-4.5L15 21"/>
|
||||
<path d="M9 3l1.5 4.5M14.5 7.5L15 3l-4.5 1.5M9 21l1.5-4.5M14.5 16.5L15 21l-4.5-1.5"/>
|
||||
</symbol>
|
||||
<symbol id="icon-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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-chart-bar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<circle cx="19" cy="5" r="2"/>
|
||||
<circle cx="5" cy="19" r="2"/>
|
||||
<path d="M10.4 10.6l5.2 5.2M13.6 13.6l5.2 5.2"/>
|
||||
</symbol>
|
||||
<symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</symbol>
|
||||
<symbol id="icon-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
|
||||
<line x1="7" y1="7" x2="7.01" y2="7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</symbol>
|
||||
<symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-arrow-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 19V5M5 12l7-7 7 7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</symbol>
|
||||
<symbol id="icon-sparkles-alt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cpu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="8" y="8" width="12" height="12" rx="2"/>
|
||||
<path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<style>
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0a0e1a;
|
||||
--bg-secondary: #111827;
|
||||
--bg-card: #1e293b;
|
||||
--bg-overlay: rgba(14, 165, 233, 0.12);
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
|
||||
--shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
|
||||
}
|
||||
[data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); }
|
||||
[data-theme="dark"] .bg-primary { background: var(--bg-primary); }
|
||||
[data-theme="dark"] .bg-secondary { background: var(--bg-secondary); }
|
||||
[data-theme="dark"] .bg-card { background: var(--bg-card); }
|
||||
[data-theme="dark"] .bg-overlay { background: var(--bg-overlay); }
|
||||
[data-theme="dark"] .text-primary { color: var(--text-primary); }
|
||||
[data-theme="dark"] .text-secondary { color: var(--text-secondary); }
|
||||
[data-theme="dark"] .text-muted { color: var(--text-muted); }
|
||||
[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm); }
|
||||
[data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md); }
|
||||
[data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg); }
|
||||
[data-theme="dark"] .shadow-glow { box-shadow: var(--shadow-glow); }
|
||||
[data-theme="dark"] .border-secondary { border-color: var(--bg-secondary); }
|
||||
|
||||
/* Neural network nodes animation delays */
|
||||
.neural-node:nth-child(1) { animation-delay: 0s; }
|
||||
.neural-node:nth-child(2) { animation-delay: 0.3s; }
|
||||
.neural-node:nth-child(3) { animation-delay: 0.6s; }
|
||||
.neural-node:nth-child(4) { animation-delay: 0.9s; }
|
||||
.neural-node:nth-child(5) { animation-delay: 1.2s; }
|
||||
|
||||
/* Discovery card stagger animation */
|
||||
.discovery-card:nth-child(1) { transition-delay: 0ms; }
|
||||
.discovery-card:nth-child(2) { transition-delay: 100ms; }
|
||||
.discovery-card:nth-child(3) { transition-delay: 200ms; }
|
||||
.discovery-card:nth-child(4) { transition-delay: 300ms; }
|
||||
|
||||
/* Tag pill click feedback */
|
||||
.tag-pill-feedback { transform: scale(0.95); }
|
||||
|
||||
/* Hint chip click feedback */
|
||||
.hint-chip-feedback { background: var(--primary-dark); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden">
|
||||
<div class="max-w-[1200px] w-full mx-auto p-6">
|
||||
<!-- Back Header -->
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<a href="index.html" class="inline-flex items-center gap-2 text-text-secondary font-medium transition-colors duration-150 hover:text-primary hover:bg-accent/10 rounded-xl px-3 py-2">
|
||||
<svg class="w-5 h-5"><use href="#icon-arrow-left"></use></svg>
|
||||
<span>대시보드로</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Hero Banner -->
|
||||
<div class="bg-gradient-to-br from-primary via-secondary to-primary-light rounded-[28px] p-12 mb-8 relative overflow-hidden shadow-lg">
|
||||
<div class="absolute top-[-50%] right-[-20%] w-[400px] h-[400px] bg-[radial-gradient(circle,rgba(255,255,255,0.15),transparent_70%)] animate-pulse-glow"></div>
|
||||
<div class="relative z-10 flex items-center gap-6">
|
||||
<div class="w-20 h-20 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<svg class="w-12 h-12 text-white"><use href="#icon-shield-check"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 ml-4">
|
||||
<h1 class="text-white text-2xl font-display font-bold mb-2">AI 파일 분류</h1>
|
||||
<p class="text-white/80 text-sm font-light">머신러닝으로 파일을 자동으로 분석하고 분류합니다</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-card rounded-xl p-6 mb-8 shadow-md flex items-center gap-6">
|
||||
<div class="w-16 h-16 relative">
|
||||
<div class="w-full h-full rounded-full border-4 border-surface-secondary relative">
|
||||
<div class="absolute inset-[-4px] rounded-full border-4 border-transparent border-t-primary animate-spin"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-3 h-3 bg-primary rounded-full absolute top-[10%] left-[50%] -translate-x-1/2 animate-node-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-[1.1rem] font-display font-semibold mb-1">AI 분석 진행 중</h2>
|
||||
<p class="text-text-muted text-[0.85rem]">파일을 스캔하고 패턴을 인식하는 중...</p>
|
||||
<div class="mt-2 h-2 bg-surface-secondary rounded-full overflow-hidden w-[200px]">
|
||||
<div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-1000 animate-[width_2s_ease-out]" style="width: 67%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 bg-surface-secondary hover:bg-surface-primary text-text-secondary hover:text-text-primary rounded-xl text-sm font-medium transition-all duration-200">
|
||||
<svg class="w-4 h-4"><use href="#icon-arrow-up"></use></svg>
|
||||
분석 결과 내보내기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Neural Network Visualization -->
|
||||
<div class="bg-surface-card rounded-xl p-8 mb-8 shadow-md relative overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<div class="absolute top-[20%] left-[10%] w-32 h-32 border border-primary rounded-full animate-float"></div>
|
||||
<div class="absolute top-[60%] right-[15%] w-24 h-24 border border-secondary rounded-full animate-float" style="animation-delay: 0.5s;"></div>
|
||||
<div class="absolute bottom-[20%] left-[30%] w-20 h-20 border border-accent rounded-full animate-float" style="animation-delay: 1s;"></div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-[1.5rem] font-display font-semibold">분류 네트워크</h2>
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-primary/10 text-primary rounded-full text-[0.75rem] font-medium">
|
||||
<span class="w-1.5 h-1.5 bg-primary rounded-full animate-pulse"></span>
|
||||
활성
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-text-muted text-[0.85rem]">
|
||||
<svg class="w-4 h-4"><use href="#icon-cpu"></use></svg>
|
||||
<span>GPU 가속</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-[200px] flex items-center justify-center">
|
||||
<!-- Neural Network SVG -->
|
||||
<svg class="w-full h-full absolute inset-0" style="min-width: 600px;">
|
||||
<!-- Connection lines -->
|
||||
<path d="M100 100 Q200 50 300 100" class="stroke-surface-secondary stroke-[1] fill-none opacity-30"/>
|
||||
<path d="M100 100 Q200 150 300 100" class="stroke-surface-secondary stroke-[1] fill-none opacity-30"/>
|
||||
<path d="M100 100 Q200 100 300 100" class="stroke-surface-secondary stroke-[1] fill-none opacity-50"/>
|
||||
<path d="M300 100 Q400 50 500 100" class="stroke-primary stroke-[2] fill-none opacity-60"/>
|
||||
<path d="M300 100 Q400 150 500 100" class="stroke-secondary stroke-[2] fill-none opacity-60"/>
|
||||
<path d="M300 100 Q400 100 500 100" class="stroke-accent stroke-[2] fill-none opacity-80"/>
|
||||
<!-- Animated pulses on connections -->
|
||||
<circle r="4" fill="var(--primary)" class="animate-node-pulse">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M100 100 Q200 50 300 100"/>
|
||||
</circle>
|
||||
<circle r="4" fill="var(--secondary)" class="animate-node-pulse" style="animation-delay: 0.5s;">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M300 100 Q400 150 500 100" begin="0.5s"/>
|
||||
</circle>
|
||||
</svg>
|
||||
<!-- Input Layer -->
|
||||
<div class="flex flex-col gap-4 absolute left-[10%] top-1/2 -translate-y-1/2">
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary-dark shadow-md flex items-center justify-center animate-node-pulse">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-document"></use></svg>
|
||||
</div>
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary-dark shadow-md flex items-center justify-center animate-node-pulse" style="animation-delay: 0.3s;">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-image"></use></svg>
|
||||
</div>
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary-dark shadow-md flex items-center justify-center animate-node-pulse" style="animation-delay: 0.6s;">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden Layer -->
|
||||
<div class="flex flex-col gap-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div class="neural-node w-14 h-14 rounded-full bg-gradient-to-br from-secondary to-secondary-light shadow-lg flex items-center justify-center animate-node-pulse" style="animation-delay: 0.2s;">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-sparkles"></use></svg>
|
||||
</div>
|
||||
<div class="neural-node w-14 h-14 rounded-full bg-gradient-to-br from-secondary to-secondary-light shadow-lg flex items-center justify-center animate-node-pulse" style="animation-delay: 0.4s;">
|
||||
<span class="text-white font-bold text-lg">NN</span>
|
||||
</div>
|
||||
<div class="neural-node w-14 h-14 rounded-full bg-gradient-to-br from-secondary to-secondary-light shadow-lg flex items-center justify-center animate-node-pulse" style="animation-delay: 0.6s;">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-chart-bar"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Output Layer -->
|
||||
<div class="flex flex-col gap-4 absolute right-[10%] top-1/2 -translate-y-1/2">
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent-warn shadow-md flex items-center justify-center animate-node-pulse" style="animation-delay: 0.3s;">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-tag"></use></svg>
|
||||
</div>
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent-warn shadow-md flex items-center justify-center animate-node-pulse" style="animation-delay: 0.5s;">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-clock"></use></svg>
|
||||
</div>
|
||||
<div class="neural-node w-12 h-12 rounded-full bg-gradient-to-br from-accent to-accent-warn shadow-md flex items-center justify-center animate-node-pulse" style="animation-delay: 0.7s;">
|
||||
<svg class="w-5 h-5 text-white"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confidence Metrics -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8 max-lg:grid-cols-1">
|
||||
<!-- Overall Confidence -->
|
||||
<div class="bg-surface-card rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-[0.9rem] font-medium text-text-secondary">전체 신뢰도</h3>
|
||||
<svg class="w-5 h-5 text-primary"><use href="#icon-sparkles"></use></svg>
|
||||
</div>
|
||||
<div class="relative w-[120px] h-[120px] mx-auto mb-4">
|
||||
<svg class="w-full h-full -rotate-[90deg]" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="var(--surface-secondary)" stroke-width="12"/>
|
||||
<circle class="progress-ring-fill fill-none stroke-primary transition-all duration-1000" cx="50" cy="50" r="40" stroke-width="12" stroke-dasharray="251" stroke-dashoffset="251" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="font-display text-2xl font-bold text-text-primary">92<span class="text-[1rem]">%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-primary/10 text-primary rounded-full text-[0.8rem] font-medium">
|
||||
<svg class="w-3.5 h-3.5"><use href="#icon-shield-check"></use></svg>
|
||||
매우 높음
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Files Processed -->
|
||||
<div class="bg-surface-card rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-[0.9rem] font-medium text-text-secondary">처리된 파일</h3>
|
||||
<svg class="w-5 h-5 text-secondary"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
<div class="text-center mb-4">
|
||||
<span class="font-display text-4xl font-bold text-text-primary">847</span>
|
||||
<span class="text-text-muted text-sm ml-2">파일</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between text-[0.85rem]">
|
||||
<span class="text-text-secondary">오늘</span>
|
||||
<span class="font-semibold text-text-primary">+127</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[0.85rem]">
|
||||
<span class="text-text-secondary">이번 주</span>
|
||||
<span class="font-semibold text-text-primary">+389</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories Found -->
|
||||
<div class="bg-surface-card rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-[0.9rem] font-medium text-text-secondary">발견된 카테고리</h3>
|
||||
<svg class="w-5 h-5 text-accent"><use href="#icon-tag"></use></svg>
|
||||
</div>
|
||||
<div class="text-center mb-4">
|
||||
<span class="font-display text-4xl font-bold text-text-primary">24</span>
|
||||
<span class="text-text-muted text-sm ml-2">개</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<span class="tag-pill px-3 py-1 bg-primary/10 text-primary rounded-full text-[0.75rem] font-medium cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white">문서</span>
|
||||
<span class="tag-pill px-3 py-1 bg-secondary/10 text-secondary rounded-full text-[0.75rem] font-medium cursor-pointer transition-all duration-150 hover:bg-secondary hover:text-white">이미지</span>
|
||||
<span class="tag-pill px-3 py-1 bg-accent/10 text-accent rounded-full text-[0.75rem] font-medium cursor-pointer transition-all duration-150 hover:bg-accent hover:text-white">프로젝트</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Discovery Cards -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-[1.5rem] font-display font-semibold">AI 발견 항목</h2>
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-accent/10 text-accent rounded-full text-[0.75rem] font-medium">
|
||||
<span class="w-1.5 h-1.5 bg-accent rounded-full animate-pulse"></span>
|
||||
실시간
|
||||
</span>
|
||||
</div>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 bg-surface-secondary hover:bg-surface-primary text-text-secondary hover:text-text-primary rounded-xl text-sm font-medium transition-all duration-200">
|
||||
<svg class="w-4 h-4"><use href="#icon-arrow-right"></use></svg>
|
||||
모두 보기
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-6 max-lg:grid-cols-1">
|
||||
<!-- Discovery Card 1 -->
|
||||
<div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-500">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center shadow-md">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-document"></use></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-display font-semibold text-[1.05rem] mb-1">금융 문서 자동 분류</h3>
|
||||
<p class="text-text-muted text-[0.85rem]">보고서, 세금, 계약서를 자동으로 구분합니다</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">보고서</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">금융</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">자동</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-surface-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-primary rounded-full"></div>
|
||||
<span class="text-[0.8rem] text-text-muted">신뢰도 94%</span>
|
||||
</div>
|
||||
<span class="text-[0.8rem] text-text-muted">방금 전</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discovery Card 2 -->
|
||||
<div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-500">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-secondary to-secondary-light flex items-center justify-center shadow-md">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-chart-bar"></use></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-display font-semibold text-[1.05rem] mb-1">시간 기반 정리</h3>
|
||||
<p class="text-text-muted text-[0.85rem]">파일 수정일을 분석하여 자동으로 연도/분기별로 분류</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">타임라인</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">정리</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-surface-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-secondary rounded-full"></div>
|
||||
<span class="text-[0.8rem] text-text-muted">신뢰도 89%</span>
|
||||
</div>
|
||||
<span class="text-[0.8rem] text-text-muted">5분 전</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discovery Card 3 -->
|
||||
<div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-500">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent to-accent-warn flex items-center justify-center shadow-md">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-tag"></use></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-display font-semibold text-[1.05rem] mb-1">태그 제안</h3>
|
||||
<p class="text-text-muted text-[0.85rem]">파일 내용을 분석하여 적절한 태그를 자동으로 추천</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">AI</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">추천</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">태그</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-surface-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||||
<span class="text-[0.8rem] text-text-muted">신뢰도 91%</span>
|
||||
</div>
|
||||
<span class="text-[0.8rem] text-text-muted">12분 전</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discovery Card 4 -->
|
||||
<div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-500">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-dark to-primary flex items-center justify-center shadow-md">
|
||||
<svg class="w-6 h-6 text-white"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-display font-semibold text-[1.05rem] mb-1">프로젝트 폴더 감지</h3>
|
||||
<p class="text-text-muted text-[0.85rem]">유사한 파일들을 하나의 프로젝트로 그룹화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">프로젝트</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">그룹</span>
|
||||
<span class="px-3 py-1 bg-surface-secondary rounded-full text-[0.75rem] text-text-secondary">자동</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-surface-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-primary-dark rounded-full"></div>
|
||||
<span class="text-[0.8rem] text-text-muted">신뢰도 87%</span>
|
||||
</div>
|
||||
<span class="text-[0.8rem] text-text-muted">1시간 전</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confidence Breakdown -->
|
||||
<div class="bg-surface-card rounded-xl p-8 mb-8 shadow-md">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-[1.5rem] font-display font-semibold">카테고리별 신뢰도</h2>
|
||||
<button class="inline-flex items-center gap-2 text-text-muted hover:text-text-primary text-[0.85rem] transition-colors">
|
||||
<svg class="w-4 h-4"><use href="#icon-chart-bar"></use></svg>
|
||||
상세 보기
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<!-- Confidence Bar 1 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">문서</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="confidence-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 94%; background: linear-gradient(90deg, var(--primary), var(--primary-light));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">94%</span>
|
||||
</div>
|
||||
<!-- Confidence Bar 2 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">이미지</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="confidence-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 89%; background: linear-gradient(90deg, var(--secondary), var(--secondary-light));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">89%</span>
|
||||
</div>
|
||||
<!-- Confidence Bar 3 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">프로젝트</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="confidence-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 91%; background: linear-gradient(90deg, var(--accent), var(--accent-warn));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">91%</span>
|
||||
</div>
|
||||
<!-- Confidence Bar 4 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">归档</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="confidence-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 78%; background: linear-gradient(90deg, var(--primary-dark), var(--primary));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">78%</span>
|
||||
</div>
|
||||
<!-- Confidence Bar 5 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">기타</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="confidence-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 67%; background: linear-gradient(90deg, var(--accent-warn), #fcd34d);"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">67</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Distribution Chart -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-[1.5rem] font-display font-semibold">파일 분포</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-card rounded-xl p-8 shadow-md">
|
||||
<div class="grid grid-cols-[300px_1fr] gap-8 items-center max-lg:grid-cols-1">
|
||||
<div class="relative w-[220px] h-[220px] mx-auto">
|
||||
<svg class="w-full h-full -rotate-[90deg]" viewBox="0 0 100 100">
|
||||
<circle class="pie-segment fill-none stroke-primary transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 98;"/>
|
||||
<circle class="pie-segment fill-none stroke-secondary transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 78;"/>
|
||||
<circle class="pie-segment fill-none stroke-accent transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 47;"/>
|
||||
<circle class="pie-segment fill-none stroke-accent-warn transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 47;"/>
|
||||
</svg>
|
||||
<div class="absolute inset-10 bg-surface-card rounded-full flex flex-col items-center justify-center">
|
||||
<span class="font-display text-2xl font-bold text-text-primary">847</span>
|
||||
<small class="text-text-muted text-[0.8rem]">전체 파일</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">문서</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 45%; background: linear-gradient(90deg, var(--primary), var(--primary-light));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">382</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">이미지</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 35%; background: linear-gradient(90deg, var(--secondary), var(--secondary-light));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">296</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">프로젝트</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 12%; background: linear-gradient(90deg, var(--accent), var(--accent-warn));"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">102</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="w-[100px] text-[0.9rem] font-medium">기타</span>
|
||||
<div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
|
||||
<div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 8%; background: linear-gradient(90deg, var(--accent-warn), #fcd34d);"></div>
|
||||
</div>
|
||||
<span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">67</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semantic Search Hints -->
|
||||
<div class="bg-surface-card rounded-xl p-6 shadow-md mb-8">
|
||||
<h3 class="text-base font-display font-semibold mb-4 flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary"><use href="#icon-magnifying-glass"></use></svg>
|
||||
관련 검색
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">2024년 4분기 금융 보고서</span>
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">프로젝트 타임라인</span>
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">2024년 휴가</span>
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">디자인 자산</span>
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">세금 문서</span>
|
||||
<span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">고객 프레젠테이션</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate Button -->
|
||||
<div class="flex justify-center gap-4">
|
||||
<button class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-br from-primary to-primary-dark text-white rounded-full font-display font-semibold text-base shadow-blue hover:shadow-[0_6px_25px_rgba(59,130,246,0.4)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-250 min-h-[56px] min-w-[160px]">
|
||||
<svg class="w-5 h-5"><use href="#icon-sparkles-alt"></use></svg>
|
||||
새 인사이트 생성
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../scripts/ai-classification.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
src/pages/scene_dashboard.html
Normal file
120
src/pages/scene_dashboard.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!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-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 a8.21 8.21 0 0 0 3 2.48Z"/>
|
||||
<path d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-cog" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||
</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-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
</head>
|
||||
<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden pb-20">
|
||||
<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)]">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="../assets/logo.svg" alt="Chakmate Logo" class="w-10 h-10 object-contain">
|
||||
<span class="font-display text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Chakmate</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="streak-badge flex items-center gap-2 bg-surface-card px-4 py-2 rounded-full shadow-sm">
|
||||
<svg class="w-5 h-5 stroke-accent-warn fill-none text-orange-500"><use href="#icon-fire"></use></svg>
|
||||
<span class="font-bold text-accent-warn" id="streak-count">7</span>
|
||||
<span class="text-text-muted text-sm">일</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="dashboard">
|
||||
<div class="stats-container p-4 flex flex-col gap-4">
|
||||
<div class="stats-row flex gap-4">
|
||||
<div class="stat-card flex-1 bg-surface-card rounded-[20px] p-5 shadow-sm">
|
||||
<div class="stat-icon w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mb-3">
|
||||
<svg class="w-5 h-5 stroke-primary fill-none"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
<p class="stat-value text-2xl font-display font-bold text-text-primary" id="files-count">248</p>
|
||||
<p class="stat-label text-text-muted text-sm">정리된 파일</p>
|
||||
</div>
|
||||
<div class="stat-card flex-1 bg-surface-card rounded-[20px] p-5 shadow-sm">
|
||||
<div class="stat-icon w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mb-3">
|
||||
<svg class="w-5 h-5 stroke-accent fill-none"><use href="#icon-document"></use></svg>
|
||||
</div>
|
||||
<p class="stat-value text-2xl font-display font-bold text-text-primary" id="folders-count">12</p>
|
||||
<p class="stat-label text-text-muted text-sm">관리된 폴더</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suggestions-card bg-surface-card rounded-[20px] p-5 shadow-md">
|
||||
<div class="suggestions-header flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-display font-bold">AI 제안</h2>
|
||||
<button class="text-sm text-primary font-medium hover:underline" id="apply-suggestions">적용하기</button>
|
||||
</div>
|
||||
<div class="suggestions-list flex flex-col gap-3" id="suggestions-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="achievements-section p-4">
|
||||
<div class="section-header flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-display font-bold">업적</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-5 h-5 stroke-amber-500 fill-none text-yellow-400"><use href="#icon-star"></use></svg>
|
||||
<span class="text-sm font-medium text-text-muted">4/8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievements-grid grid grid-cols-4 gap-3" id="achievements-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-surface-card border-t border-surface-secondary z-[100]">
|
||||
<div class="max-w-[600px] mx-auto flex justify-around py-3">
|
||||
<button class="nav-btn flex flex-col items-center gap-1 px-6 py-2 rounded-2xl transition-all duration-250 active bg-primary/10 text-primary" id="nav-dashboard">
|
||||
<svg class="w-6 h-6 stroke-current fill-none"><use href="#icon-layers"></use></svg>
|
||||
<span class="text-xs font-medium">홈</span>
|
||||
</button>
|
||||
<button class="nav-btn flex flex-col items-center gap-1 px-6 py-2 rounded-2xl transition-all duration-250 text-text-muted" id="nav-swipe" onclick="window.location.href='scene_swipe.html'">
|
||||
<svg class="w-6 h-6 stroke-current fill-none"><use href="#icon-bolt"></use></svg>
|
||||
<span class="text-xs font-medium">스와이프</span>
|
||||
</button>
|
||||
<button class="nav-btn flex flex-col items-center gap-1 px-6 py-2 rounded-2xl transition-all duration-250 text-text-muted" id="nav-settings" onclick="window.location.href='scene_settings.html'">
|
||||
<svg class="w-6 h-6 stroke-current fill-none"><use href="#icon-cog"></use></svg>
|
||||
<span class="text-xs font-medium">설정</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script type="module" src="../scripts/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
305
src/pages/scene_gamification.html
Normal file
305
src/pages/scene_gamification.html
Normal file
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>내 진행 상황 - Chakmate</title>
|
||||
<!-- Heroicons SVG Sprite -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
|
||||
<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>
|
||||
<link rel="stylesheet" href="../styles/main.css">
|
||||
<style>
|
||||
.confetti {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
.achievement.just-unlocked {
|
||||
animation: unlockPulse 0.6s ease-out;
|
||||
}
|
||||
.sparkle {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
animation: sparkle 0.6s ease-out forwards;
|
||||
}
|
||||
.toast.show {
|
||||
opacity: 1 !important;
|
||||
transform: translateX(-50%) translateY(0) !important;
|
||||
}
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 32px;
|
||||
}
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
background: #e2e8f0;
|
||||
border-radius: 9999px;
|
||||
transition: background 250ms ease;
|
||||
}
|
||||
.toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #0ea5e9 100%);
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-slider::before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
.achievement-tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
background: #0f172a;
|
||||
color: #ffffff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 150ms ease;
|
||||
z-index: 10;
|
||||
}
|
||||
.achievement-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #0f172a;
|
||||
}
|
||||
.achievement.locked:hover .achievement-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
.achievement.unlocked .achievement-tooltip {
|
||||
display: none;
|
||||
}
|
||||
.week-day-indicator {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
.week-day-indicator.completed {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
}
|
||||
.week-day-indicator.today {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.week-day-label {
|
||||
font-size: 0.65rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.week-day {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.week-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.achievement-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
.achievement-name {
|
||||
font-size: 0.7rem;
|
||||
color: #475569;
|
||||
text-align: center;
|
||||
}
|
||||
.achievement {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
position: relative;
|
||||
}
|
||||
.achievement.locked {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.achievement.locked .achievement-icon {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.achievement.gold {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border: 1px solid #fbbf24;
|
||||
}
|
||||
.achievement.silver {
|
||||
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
.achievement.bronze {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
|
||||
border: 1px solid #d97706;
|
||||
}
|
||||
.achievement.unlocked {
|
||||
cursor: default;
|
||||
}
|
||||
.streak-fire {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.streak-fire.animate {
|
||||
animation: fireFlicker 0.3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes fireFlicker {
|
||||
0%, 100% { transform: scale(1) rotate(-3deg); }
|
||||
50% { transform: scale(1.1) rotate(3deg); }
|
||||
}
|
||||
@keyframes confettiFall {
|
||||
0% {
|
||||
transform: translateY(-10vh) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-primary min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-surface-card shadow-sm sticky top-0 z-50">
|
||||
<div class="max-w-lg mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<a href="/" class="flex items-center gap-2 text-text-primary hover:text-primary transition-colors">
|
||||
<svg class="w-6 h-6"><use href="#icon-arrow-left"/></svg>
|
||||
<span class="text-sm font-medium">뒤로</span>
|
||||
</a>
|
||||
<h1 class="text-lg font-display font-semibold text-text-primary">내 진행 상황</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-lg mx-auto px-4 py-6 space-y-6 pb-[120px]">
|
||||
<!-- Streak Section -->
|
||||
<section class="bg-gradient-to-br from-primary/10 to-accent/10 rounded-[24px] p-6 text-center">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<span class="streak-fire" id="streakIcon">🔥</span>
|
||||
<span class="text-6xl font-display font-bold text-text-primary" id="streakCount">0</span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm mb-2">일 연속 정리</p>
|
||||
<p class="text-text-muted text-xs" id="streakMessage">오늘 불을 이어가세요!</p>
|
||||
</section>
|
||||
|
||||
<!-- Weekly Progress -->
|
||||
<section class="bg-surface-card rounded-[24px] p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-semibold text-text-primary">이번 주 진행률</h2>
|
||||
<span class="text-sm font-medium text-primary"><span id="daysCompleted">0</span>/7일</span>
|
||||
</div>
|
||||
<div class="h-3 bg-surface-secondary rounded-full overflow-hidden mb-4">
|
||||
<div class="h-full bg-gradient-to-r from-primary to-accent rounded-full transition-all duration-1000 ease-out" id="progressFill" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="week-grid" id="weekGrid"></div>
|
||||
</section>
|
||||
|
||||
<!-- Daily Tip -->
|
||||
<section class="bg-surface-card rounded-[24px] p-5 shadow-sm relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary/5 to-transparent rounded-bl-[100px]"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="text-lg">💡</span>
|
||||
<span class="text-sm font-medium text-text-primary">오늘의 팁</span>
|
||||
</div>
|
||||
<p class="text-text-secondary text-sm leading-relaxed" id="tipText">"정돈된 공간은 정돈된 마음을 만듭니다."</p>
|
||||
<p class="text-text-muted text-xs mt-2 tip-author">— 정리의 지혜</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Achievements -->
|
||||
<section>
|
||||
<h2 class="text-base font-semibold text-text-primary mb-4">업적</h2>
|
||||
<div class="grid grid-cols-4 gap-3" id="achievementsGrid"></div>
|
||||
</section>
|
||||
|
||||
<!-- Settings -->
|
||||
<section class="bg-surface-card rounded-[24px] p-4 shadow-sm space-y-3">
|
||||
<h2 class="text-base font-semibold text-text-primary mb-2">설정</h2>
|
||||
<div class="flex items-center justify-between p-4 bg-surface-primary rounded-[20px]">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">🌙</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-text-primary">다크 모드</div>
|
||||
<div class="text-xs text-text-muted mt-0.5">앱 테마 변경</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="darkModeToggle">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 bg-surface-card rounded-[20px] shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">🔔</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-text-primary">습관 알림</div>
|
||||
<div class="text-xs text-text-muted mt-0.5">매일 알림 받기</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="habitToggle">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="fixed bottom-[100px] left-1/2 -translate-x-1/2 translate-y-[100px] bg-text-primary text-surface-card px-6 py-4 rounded-full text-sm font-medium shadow-lg opacity-0 transition-all duration-500 z-[100] flex items-center gap-2" id="toast">
|
||||
<span id="toastIcon">🎉</span>
|
||||
<span id="toastText">업적 달성!</span>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-0 left-0 w-full h-full pointer-events-none z-[1000] overflow-hidden" id="confettiContainer"></div>
|
||||
|
||||
<script type="module" src="../scripts/gamification.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
106
src/pages/scene_onboarding.html
Normal file
106
src/pages/scene_onboarding.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!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>
|
||||
126
src/pages/scene_settings.html
Normal file
126
src/pages/scene_settings.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!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-x-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</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>
|
||||
<symbol id="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
||||
</symbol>
|
||||
<symbol id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</symbol>
|
||||
<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>
|
||||
</svg>
|
||||
</head>
|
||||
<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden">
|
||||
<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>
|
||||
<div class="w-[80px]"></div>
|
||||
</header>
|
||||
|
||||
<div class="settings-container max-w-[600px] w-full mx-auto p-4">
|
||||
<div class="settings-header mb-8">
|
||||
<h2 class="settings-title text-3xl mb-2 font-display">설정</h2>
|
||||
<p class="settings-subtitle text-text-secondary">앱 환경 사용자 지정</p>
|
||||
</div>
|
||||
|
||||
<div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
|
||||
<h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">알림</h3>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">정리 알림</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">매일 일정한 시간에 파일 정리를 안내합니다</div>
|
||||
</div>
|
||||
<div class="toggle active w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-notifications"></div>
|
||||
</div>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b-0">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">습관 형성 알림</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">정리 습관 형성을 돕는 동기를 부여합니다</div>
|
||||
</div>
|
||||
<div class="toggle w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-habits"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
|
||||
<h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">정리 습관</h3>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">자동 정리</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">자동으로 파일을 제안된 구조로 정리합니다</div>
|
||||
</div>
|
||||
<div class="toggle w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-autoOrganize"></div>
|
||||
</div>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b-0">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">삭제 확인</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">파일 삭제 시 확인 메시지를 표시합니다</div>
|
||||
</div>
|
||||
<div class="toggle active w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-confirmDelete"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
|
||||
<h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">테마</h3>
|
||||
<div class="theme-options flex gap-3">
|
||||
<div class="theme-option light w-12 h-12 rounded-[12px] cursor-pointer border-[3px] border-transparent transition-all duration-250 hover:scale-105 flex items-center justify-center bg-gradient-to-br from-[#f8fafc] to-[#e2e8f0]" data-theme="light">
|
||||
<svg class="w-5 h-5 stroke-text-primary fill-none"><use href="#icon-sun"></use></svg>
|
||||
</div>
|
||||
<div class="theme-option dark w-12 h-12 rounded-[12px] cursor-pointer border-[3px] border-transparent transition-all duration-250 hover:scale-105 flex items-center justify-center bg-gradient-to-br from-[#0f0e17] to-[#252336]" data-theme="dark">
|
||||
<svg class="w-5 h-5 stroke-text-primary fill-none"><use href="#icon-moon"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6">
|
||||
<h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">데이터</h3>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">데이터 내보내기</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">정리된 파일 구조를 JSON으로 내보냅니다</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary" id="export-data">
|
||||
<svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-download"></use></svg>
|
||||
<span>내보내기</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="setting-row flex items-center justify-between py-4 border-b-0">
|
||||
<div class="setting-info flex-1">
|
||||
<div class="setting-name font-medium mb-1">데이터 초기화</div>
|
||||
<div class="setting-desc text-sm text-text-secondary">모든 데이터를 초기 상태로 되돌립니다</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary text-accent-danger" id="reset-data">
|
||||
<svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-trash"></use></svg>
|
||||
<span>초기화</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
85
src/pages/scene_swipe.html
Normal file
85
src/pages/scene_swipe.html
Normal 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>
|
||||
484
src/pages/scene_visualization.html
Normal file
484
src/pages/scene_visualization.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<!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">
|
||||
<!-- Heroicons SVG Sprite -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none; width: 0; height: 0;">
|
||||
<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>
|
||||
<symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-folder-solid" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h6l4 4h6a2 2 0 012 2v8a2 2 0 01-2 2z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-folder-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</symbol>
|
||||
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</symbol>
|
||||
<symbol id="icon-x-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="18 15 12 9 6 15"/>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</symbol>
|
||||
<symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</symbol>
|
||||
<symbol id="icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</symbol>
|
||||
<symbol id="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</symbol>
|
||||
<symbol id="icon-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6"/>
|
||||
<polyline points="8 6 2 12 8 18"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<link rel="stylesheet" href="../styles/main.css">
|
||||
<script type="module" src="../scripts/visualization.js"></script>
|
||||
<div class="app">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="header-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#06b6d4"/>
|
||||
<stop offset="50%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#0ea5e9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M6 3a3 3 0 013 3v2a3 3 0 01-3 3H4a2 2 0 00-2 2v6a2 2 0 002 2h2a3 3 0 013 3v2a3 3 0 01-3 3H6a3 3 0 01-3-3v-2a3 3 0 013-3h2a2 2 0 002-2V8a2 2 0 00-2-2H6a3 3 0 01-3-3V6a3 3 0 013-3z" fill="url(#logoGrad)"/>
|
||||
<circle cx="12" cy="12" r="3" fill="white" opacity="0.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="header-title">구조 제안</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button class="back-btn" onclick="window.location.href='index.html'" aria-label="Go back">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<use href="#icon-arrow-left"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="comparison-banner">
|
||||
<div class="comparison-item current">
|
||||
<div class="comparison-icon">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<use href="#icon-folder"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<span>현재</span>
|
||||
</div>
|
||||
<span class="comparison-arrow">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<use href="#icon-arrow-right"></use>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="comparison-item proposed">
|
||||
<div class="comparison-icon">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<use href="#icon-folder"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<span>AI 제안</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Before/After Comparison UI -->
|
||||
<div class="comparison-container">
|
||||
<!-- Before Panel - Messy State -->
|
||||
<div class="comparison-panel">
|
||||
<div class="comparison-panel-header before">
|
||||
<div class="comparison-panel-icon before">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<use href="#icon-folder"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-panel-title">정리 전</div>
|
||||
<div class="comparison-panel-subtitle">지저분한 폴더 구조</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="before-tree">
|
||||
<div class="messy-folder">
|
||||
<div class="messy-folder-name">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
다운로드
|
||||
</div>
|
||||
<div class="messy-files">
|
||||
<span class="messy-file-tag">사진_2024.jpg</span>
|
||||
<span class="messy-file-tag">invoice.pdf</span>
|
||||
<span class="messy-file-tag">Screenshot.png</span>
|
||||
<span class="messy-file-tag">doc.docx</span>
|
||||
<span class="messy-file-tag">video.mp4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messy-folder">
|
||||
<div class="messy-folder-name">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
바탕화면
|
||||
</div>
|
||||
<div class="messy-files">
|
||||
<span class="messy-file-tag">report_final.xls</span>
|
||||
<span class="messy-file-tag">report_v2.xls</span>
|
||||
<span class="messy-file-tag">report_FINAL.xls</span>
|
||||
<span class="messy-file-tag">temp.png</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messy-folder">
|
||||
<div class="messy-folder-name">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
문서
|
||||
</div>
|
||||
<div class="messy-files">
|
||||
<span class="messy-file-tag">새 폴더</span>
|
||||
<span class="messy-file-tag">새 폴더 (2)</span>
|
||||
<span class="messy-file-tag">archive</span>
|
||||
<span class="messy-file-tag">backup</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-stats">
|
||||
<div class="comparison-stat">
|
||||
<div class="comparison-stat-icon removed">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-x-mark"></use></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-stat-value">87</div>
|
||||
<div class="comparison-stat-label">분산 파일</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-stat">
|
||||
<div class="comparison-stat-icon removed">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-stat-value">12</div>
|
||||
<div class="comparison-stat-label">중복 폴더</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- After Panel - Organized State -->
|
||||
<div class="comparison-panel">
|
||||
<div class="comparison-panel-header after">
|
||||
<div class="comparison-panel-icon after">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use><use href="#icon-check" class="absolute inset-0"></use></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-panel-title">정리 후</div>
|
||||
<div class="comparison-panel-subtitle">AI가 제안하는 구조</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="after-tree">
|
||||
<div class="clean-folder">
|
||||
<div class="clean-folder-header">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><use href="#icon-plus"></use></svg>
|
||||
<span class="clean-folder-name">작업 프로젝트</span>
|
||||
<span class="clean-folder-count">24개 파일</span>
|
||||
</div>
|
||||
<div class="clean-subfolders">
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
2024 보고서
|
||||
<span class="diff-indicator added">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
|
||||
+8
|
||||
</span>
|
||||
</div>
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
고객 파일
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clean-folder">
|
||||
<div class="clean-folder-header">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="clean-folder-name">개인 파일</span>
|
||||
<span class="clean-folder-count">31개 파일</span>
|
||||
</div>
|
||||
<div class="clean-subfolders">
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
사진 아카이브
|
||||
<span class="diff-indicator added">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
|
||||
+15
|
||||
</span>
|
||||
</div>
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
문서
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clean-folder">
|
||||
<div class="clean-folder-header">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="clean-folder-name">유틸리티</span>
|
||||
<span class="clean-folder-count">18개 파일</span>
|
||||
</div>
|
||||
<div class="clean-subfolders">
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
임시 파일
|
||||
<span class="diff-indicator removed">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
|
||||
정리됨
|
||||
</span>
|
||||
</div>
|
||||
<div class="clean-subfolder">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
아카이브
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-stats">
|
||||
<div class="comparison-stat">
|
||||
<div class="comparison-stat-icon improved">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-stat-value">73</div>
|
||||
<div class="comparison-stat-label">정리된 파일</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comparison-stat">
|
||||
<div class="comparison-stat-icon optimized">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comparison-stat-value">6</div>
|
||||
<div class="comparison-stat-label">개선된 구조</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">AI 추천 구조</h2>
|
||||
<span class="section-badge" id="selectedCount">7개 중 3개 선택됨</span>
|
||||
</div>
|
||||
<div class="tree-container" id="folderTree">
|
||||
|
||||
<div class="tree-item expanded" data-category="work" data-folder="work-projects">
|
||||
<div class="tree-item-header">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="work-projects" checked>
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
|
||||
<span class="folder-name">작업 프로젝트</span>
|
||||
<div class="folder-meta">
|
||||
<span class="file-count">12개 파일</span>
|
||||
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-children">
|
||||
<div class="tree-children-inner">
|
||||
<div class="child-item" data-preview="work-projects/2024-reports">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="2024-reports" checked>
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">2024 보고서</span>
|
||||
</div>
|
||||
<div class="child-item" data-preview="work-projects/client-files">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="client-files" checked>
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">고객 파일</span>
|
||||
</div>
|
||||
<div class="child-item" data-preview="work-projects/archive">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="archive">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">아카이브</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tree-item" data-category="personal" data-folder="personal">
|
||||
<div class="tree-item-header">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="personal">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
|
||||
<span class="folder-name">개인</span>
|
||||
<div class="folder-meta">
|
||||
<span class="file-count">24개 파일</span>
|
||||
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-children">
|
||||
<div class="tree-children-inner">
|
||||
<div class="child-item" data-preview="personal/photos">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="photos">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">사진</span>
|
||||
</div>
|
||||
<div class="child-item" data-preview="personal/downloads-archive">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="downloads-archive">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">다운로드 아카이브</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tree-item" data-category="utility" data-folder="utilities">
|
||||
<div class="tree-item-header">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="utilities">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
|
||||
<span class="folder-name">유틸리티</span>
|
||||
<div class="folder-meta">
|
||||
<span class="file-count">8개 파일</span>
|
||||
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-children">
|
||||
<div class="tree-children-inner">
|
||||
<div class="child-item" data-preview="utilities/temp-files">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="utilities" data-subfolder="temp-files">
|
||||
<span class="checkbox-visual">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
|
||||
</span>
|
||||
</label>
|
||||
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
|
||||
<span class="child-folder-name">임시 파일</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">미리보기</h2>
|
||||
</div>
|
||||
<div class="preview-container">
|
||||
<div class="preview-header">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-eye"></use></svg>
|
||||
<span class="preview-title">폴더 내용</span>
|
||||
<span class="preview-path" id="previewPath">폴더 선택</span>
|
||||
</div>
|
||||
<div class="preview-content" id="previewContent">
|
||||
<div class="preview-empty">
|
||||
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="#icon-folder"></use></svg>
|
||||
<p>폴더를 클릭하여 내용 미리보기</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="action-bar">
|
||||
<div class="action-bar-inner">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-label">
|
||||
<span id="progressText">7개 폴더 중 0개 적용됨</span>
|
||||
<span id="progressPercent">0%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="apply-btn" id="applyBtn" disabled>
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
|
||||
<span>선택 항목 적용</span>
|
||||
<span class="count-badge" id="applyCount">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="success-overlay" id="successOverlay">
|
||||
<div class="success-content">
|
||||
<div class="success-icon">
|
||||
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><use href="#icon-check"></use></svg>
|
||||
</div>
|
||||
<h2 class="success-title">적용 완료!</h2>
|
||||
<p class="success-subtitle" id="successSubtitle">3개의 폴더가 정리되었습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user