1281 lines
40 KiB
HTML
1281 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>구조 제안 - Chackly</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">
|
|
<style>
|
|
:root {
|
|
/* Color Palette - Soft & Approachable */
|
|
--primary: #6366f1;
|
|
--primary-light: #818cf8;
|
|
--primary-dark: #4f46e5;
|
|
--secondary: #f472b6;
|
|
--secondary-light: #f9a8d4;
|
|
--accent: #34d399;
|
|
--accent-warn: #fbbf24;
|
|
--accent-danger: #f87171;
|
|
|
|
/* Neutrals */
|
|
--bg-primary: #faf9fb;
|
|
--bg-secondary: #f3f2f7;
|
|
--bg-card: #ffffff;
|
|
--bg-overlay: rgba(99, 102, 241, 0.1);
|
|
|
|
/* Text */
|
|
--text-primary: #1e1b2e;
|
|
--text-secondary: #6b6880;
|
|
--text-muted: #9d99a8;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 2px 8px rgba(30, 27, 46, 0.06);
|
|
--shadow-md: 0 4px 20px rgba(30, 27, 46, 0.08);
|
|
--shadow-lg: 0 8px 40px rgba(30, 27, 46, 0.12);
|
|
--shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);
|
|
|
|
/* Spacing */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 250ms ease;
|
|
--transition-slow: 400ms ease;
|
|
--transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-primary: #0f0e17;
|
|
--bg-secondary: #1a1825;
|
|
--bg-card: #252336;
|
|
--bg-overlay: rgba(99, 102, 241, 0.15);
|
|
--text-primary: #f3f2f7;
|
|
--text-secondary: #a8a4b8;
|
|
--text-muted: #6b6880;
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4) var(--space-8);
|
|
border-radius: var(--radius-full);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
font-family: 'Outfit', sans-serif;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all var(--transition-base);
|
|
min-height: 56px;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
min-width: auto;
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
padding: 0;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
}
|
|
|
|
.app {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: var(--space-6) var(--space-5) 100px;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--bg-card);
|
|
box-shadow: var(--shadow-sm);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.header-logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header-logo svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: white;
|
|
}
|
|
|
|
.header-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.back-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-secondary);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: var(--primary-light);
|
|
color: white;
|
|
}
|
|
|
|
.back-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
/* Comparison Banner */
|
|
.comparison-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-5);
|
|
padding: var(--space-5);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--bg-secondary);
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: var(--space-7);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.comparison-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.comparison-item.current {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
color: var(--accent-warn);
|
|
border: 1px solid rgba(251, 191, 36, 0.2);
|
|
}
|
|
|
|
.comparison-item.proposed {
|
|
background: var(--bg-overlay);
|
|
color: var(--primary);
|
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
.comparison-arrow {
|
|
color: var(--text-muted);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
}
|
|
|
|
.section-badge {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
background: var(--bg-secondary);
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* Tree Container */
|
|
.tree-container {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--bg-secondary);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Tree Item */
|
|
.tree-item {
|
|
border-bottom: 1px solid var(--bg-secondary);
|
|
}
|
|
|
|
.tree-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tree-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-4);
|
|
gap: var(--space-3);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.tree-item-header:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.tree-item.expanded .tree-item-header {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Category Colors */
|
|
.tree-item[data-category="work"] .folder-icon {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.tree-item[data-category="personal"] .folder-icon {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.tree-item[data-category="utility"] .folder-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Checkbox */
|
|
.checkbox-wrapper {
|
|
position: relative;
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.checkbox-input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.checkbox-visual {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid var(--text-muted);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--transition-fast);
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.checkbox-input:checked + .checkbox-visual {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.checkbox-visual svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: white;
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.checkbox-input:checked + .checkbox-visual svg {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.checkbox-input:focus-visible + .checkbox-visual {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Folder Icon */
|
|
.folder-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.tree-item.expanded .folder-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Folder Name */
|
|
.folder-name {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.folder-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.file-count {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
background: var(--bg-secondary);
|
|
padding: 2px var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.expand-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-muted);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.tree-item.expanded .expand-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Children Container */
|
|
.tree-children {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.tree-item.expanded .tree-children {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.tree-children-inner {
|
|
padding: 0 var(--space-4) var(--space-4) 52px;
|
|
}
|
|
|
|
.child-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-2) var(--space-3);
|
|
gap: var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.child-item:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.child-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.child-item .checkbox-wrapper {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.child-item .checkbox-visual {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.child-item .checkbox-visual svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.child-folder-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.child-folder-name {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Preview Section */
|
|
.preview-container {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--bg-secondary);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--bg-secondary);
|
|
}
|
|
|
|
.preview-header svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.preview-title {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preview-path {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-primary);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.preview-content {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.preview-empty {
|
|
text-align: center;
|
|
padding: var(--space-8) var(--space-4);
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.preview-empty svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: var(--space-3);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.preview-file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: var(--space-2);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.preview-file:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.preview-file:hover {
|
|
background: var(--bg-overlay);
|
|
}
|
|
|
|
.preview-file.applied {
|
|
opacity: 0.5;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.file-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-meta {
|
|
font-size: 0.6875rem;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Bottom Action Bar */
|
|
.action-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(to top, var(--bg-primary) 0%, var(--bg-primary) 70%, transparent 100%);
|
|
padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
|
|
z-index: 100;
|
|
}
|
|
|
|
.action-bar-inner {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.progress-bar-container {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.progress-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
|
|
border-radius: var(--radius-full);
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.apply-btn {
|
|
width: 100%;
|
|
padding: var(--space-4) var(--space-6);
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
border: none;
|
|
border-radius: var(--radius-full);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
|
|
min-height: 56px;
|
|
}
|
|
|
|
.apply-btn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
|
|
}
|
|
|
|
.apply-btn:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.apply-btn:disabled {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.apply-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.apply-btn .count-badge {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 2px var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Success Animation Overlay */
|
|
.success-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(30, 27, 46, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.success-overlay.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.success-content {
|
|
text-align: center;
|
|
transform: scale(0.8);
|
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.success-overlay.visible .success-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.success-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: rgba(52, 211, 153, 0.15);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto var(--space-6);
|
|
animation: successPulse 1s ease infinite;
|
|
}
|
|
|
|
@keyframes successPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
|
|
50% { box-shadow: 0 0 0 20px rgba(52, 211, 153, 0); }
|
|
}
|
|
|
|
.success-icon svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.success-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.success-message {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.success-subtitle {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.tree-item {
|
|
animation: fadeInUp 0.4s ease backwards;
|
|
}
|
|
|
|
.tree-item:nth-child(1) { animation-delay: 0.05s; }
|
|
.tree-item:nth-child(2) { animation-delay: 0.1s; }
|
|
.tree-item:nth-child(3) { animation-delay: 0.15s; }
|
|
|
|
@keyframes checkBounce {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.checkbox-input:checked + .checkbox-visual {
|
|
animation: checkBounce 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<div class="header-logo">
|
|
<svg 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"/>
|
|
</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">
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class="comparison-banner">
|
|
<div class="comparison-item current">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</svg>
|
|
<span>현재</span>
|
|
</div>
|
|
<span class="comparison-arrow">→</span>
|
|
<div class="comparison-item proposed">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</svg>
|
|
<span>AI 제안</span>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
|
|
</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">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
|
|
</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">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
|
|
</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">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
<line x1="12" y1="11" x2="12" y2="17"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="success-title">적용 완료!</h2>
|
|
<p class="success-subtitle" id="successSubtitle">3개의 폴더가 정리되었습니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Sample file data
|
|
const folderContents = {
|
|
'work-projects/2024-reports': [
|
|
{ name: 'Q4_Report_2024.pdf', size: '2.4 MB', type: 'pdf' },
|
|
{ name: 'Annual_Review.pptx', size: '8.1 MB', type: 'pptx' },
|
|
{ name: 'Budget_Analysis.xlsx', size: '1.2 MB', type: 'xlsx' }
|
|
],
|
|
'work-projects/client-files': [
|
|
{ name: 'Acme_Corp_Contract.pdf', size: '540 KB', type: 'pdf' },
|
|
{ name: 'Client_Feedback.docx', size: '234 KB', type: 'docx' },
|
|
{ name: 'Project_Proposal.pptx', size: '4.5 MB', type: 'pptx' },
|
|
{ name: 'Invoice_2024.xlsx', size: '89 KB', type: 'xlsx' }
|
|
],
|
|
'work-projects/archive': [
|
|
{ name: '2023_Reports.zip', size: '15.2 MB', type: 'zip' },
|
|
{ name: 'Old_Contracts.pdf', size: '3.1 MB', type: 'pdf' }
|
|
],
|
|
'personal/photos': [
|
|
{ name: 'Vacation_2024.jpg', size: '4.2 MB', type: 'jpg' },
|
|
{ name: 'Family_Gathering.png', size: '2.8 MB', type: 'png' },
|
|
{ name: 'Screenshots.zip', size: '12.4 MB', type: 'zip' }
|
|
],
|
|
'personal/downloads-archive': [
|
|
{ name: 'Software_Installers.zip', size: '245 MB', type: 'zip' },
|
|
{ name: 'Ebooks_Collection.pdf', size: '34 MB', type: 'pdf' }
|
|
],
|
|
'utilities/temp-files': [
|
|
{ name: 'export_data.csv', size: '1.4 MB', type: 'csv' },
|
|
{ name: 'debug_log.txt', size: '234 KB', type: 'txt' }
|
|
]
|
|
};
|
|
|
|
// State
|
|
let selectedFolders = new Set(['work-projects', '2024-reports', 'client-files']);
|
|
let appliedFolders = new Set();
|
|
const totalFolders = 7;
|
|
|
|
// DOM Elements
|
|
const folderTree = document.getElementById('folderTree');
|
|
const previewContent = document.getElementById('previewContent');
|
|
const previewPath = document.getElementById('previewPath');
|
|
const selectedCount = document.getElementById('selectedCount');
|
|
const applyBtn = document.getElementById('applyBtn');
|
|
const applyCount = document.getElementById('applyCount');
|
|
const progressFill = document.getElementById('progressFill');
|
|
const progressText = document.getElementById('progressText');
|
|
const progressPercent = document.getElementById('progressPercent');
|
|
const successOverlay = document.getElementById('successOverlay');
|
|
const successSubtitle = document.getElementById('successSubtitle');
|
|
|
|
// File icon SVG by type
|
|
const fileIcons = {
|
|
pdf: '<svg viewBox="0 0 24 24" fill="none" stroke="#ff6b6b" stroke-width="2"><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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
|
|
pptx: '<svg viewBox="0 0 24 24" fill="none" stroke="#ff9f43" stroke-width="2"><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"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>',
|
|
xlsx: '<svg viewBox="0 0 24 24" fill="none" stroke="#26de81" stroke-width="2"><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"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>',
|
|
docx: '<svg viewBox="0 0 24 24" fill="none" stroke="#4f8cff" stroke-width="2"><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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>',
|
|
jpg: '<svg viewBox="0 0 24 24" fill="none" stroke="#a55eea" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
|
|
png: '<svg viewBox="0 0 24 24" fill="none" stroke="#a55eea" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
|
|
zip: '<svg viewBox="0 0 24 24" fill="none" stroke="#778ca3" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>',
|
|
csv: '<svg viewBox="0 0 24 24" fill="none" stroke="#20bf6b" stroke-width="2"><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"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>',
|
|
txt: '<svg viewBox="0 0 24 24" fill="none" stroke="#95a5a6" stroke-width="2"><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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>'
|
|
};
|
|
|
|
// Toggle tree item expansion
|
|
folderTree.addEventListener('click', (e) => {
|
|
const header = e.target.closest('.tree-item-header');
|
|
if (header && !e.target.closest('.checkbox-wrapper')) {
|
|
const item = header.closest('.tree-item');
|
|
item.classList.toggle('expanded');
|
|
}
|
|
});
|
|
|
|
// Handle checkbox changes
|
|
folderTree.addEventListener('change', (e) => {
|
|
if (e.target.classList.contains('checkbox-input')) {
|
|
const checkbox = e.target;
|
|
const folder = checkbox.dataset.folder;
|
|
const subfolder = checkbox.dataset.subfolder;
|
|
const type = checkbox.dataset.type;
|
|
|
|
if (type === 'folder') {
|
|
// Toggle all subfolders
|
|
const parentItem = checkbox.closest('.tree-item');
|
|
const subCheckboxes = parentItem.querySelectorAll('.child-item .checkbox-input');
|
|
subCheckboxes.forEach(cb => {
|
|
cb.checked = checkbox.checked;
|
|
const sub = cb.dataset.subfolder;
|
|
if (checkbox.checked) {
|
|
selectedFolders.add(sub);
|
|
} else {
|
|
selectedFolders.delete(sub);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (checkbox.checked) {
|
|
selectedFolders.add(subfolder || folder);
|
|
} else {
|
|
selectedFolders.delete(subfolder || folder);
|
|
}
|
|
|
|
updateUI();
|
|
}
|
|
});
|
|
|
|
// Preview on child item click
|
|
folderTree.addEventListener('click', (e) => {
|
|
const childItem = e.target.closest('.child-item');
|
|
if (childItem && !e.target.closest('.checkbox-wrapper')) {
|
|
const previewKey = childItem.dataset.preview;
|
|
showPreview(previewKey);
|
|
}
|
|
});
|
|
|
|
// Show preview
|
|
function showPreview(key) {
|
|
const files = folderContents[key];
|
|
previewPath.textContent = key;
|
|
|
|
if (!files || files.length === 0) {
|
|
previewContent.innerHTML = `
|
|
<div class="preview-empty">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
|
<line x1="12" y1="11" x2="12" y2="17"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
<p>이 폴더는 비어 있습니다</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const filesHtml = files.map(file => `
|
|
<div class="preview-file ${appliedFolders.has(key) ? 'applied' : ''}">
|
|
<div class="file-icon">${fileIcons[file.type] || fileIcons.txt}</div>
|
|
<div class="file-info">
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-meta">${file.size} · ${file.type.toUpperCase()}</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
previewContent.innerHTML = filesHtml;
|
|
}
|
|
|
|
// Update UI based on selection
|
|
function updateUI() {
|
|
const count = selectedFolders.size;
|
|
selectedCount.textContent = `${count} of ${totalFolders} selected`;
|
|
applyCount.textContent = count;
|
|
applyBtn.disabled = count === 0;
|
|
|
|
const appliedCount = appliedFolders.size;
|
|
const percent = Math.round((appliedCount / totalFolders) * 100);
|
|
progressFill.style.width = `${percent}%`;
|
|
progressText.textContent = `${appliedCount} of ${totalFolders} folders applied`;
|
|
progressPercent.textContent = `${percent}%`;
|
|
}
|
|
|
|
// Apply selected folders
|
|
applyBtn.addEventListener('click', () => {
|
|
selectedFolders.forEach(f => appliedFolders.add(f));
|
|
|
|
// Show success
|
|
successSubtitle.textContent = `${selectedFolders.size} folders have been organized`;
|
|
successOverlay.classList.add('visible');
|
|
|
|
// Hide after delay
|
|
setTimeout(() => {
|
|
successOverlay.classList.remove('visible');
|
|
}, 2000);
|
|
|
|
// Clear selection
|
|
selectedFolders.clear();
|
|
|
|
// Update all checkboxes
|
|
document.querySelectorAll('.checkbox-input').forEach(cb => {
|
|
cb.checked = false;
|
|
});
|
|
|
|
updateUI();
|
|
});
|
|
|
|
// Back button
|
|
document.querySelector('.back-btn').addEventListener('click', () => {
|
|
// In a real app, this would navigate back
|
|
console.log('Back clicked');
|
|
});
|
|
|
|
// Initialize
|
|
updateUI();
|
|
</script>
|
|
</body>
|
|
</html> |