plans(7D): remap design numbers + archive 12 design HTML mockups
This commit is contained in:
reloop
420
.claude/archive/designs/design-01.html
Normal file
420
.claude/archive/designs/design-01.html
Normal file
@@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-squares-four text-lg text-indigo-400"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-indigo-500/20 text-indigo-300 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
|
||||
<div class="absolute top-[-20%] left-[20%] w-[500px] h-[500px] bg-violet-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-10 relative z-10">
|
||||
|
||||
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<p class="text-gray-400 text-sm mb-1">2024년 10월 24일 목요일</p>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white flex items-center gap-2">
|
||||
안녕하민, 오늘
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-violet-400 font-bold">12개</span>
|
||||
복습이 기다리고 있어요.
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 px-4 py-2 rounded-full shadow-[0_0_10px_rgba(79,70,229,0.1)]">
|
||||
<i class="ph-fill ph-fire text-orange-400"></i>
|
||||
<span class="font-medium text-sm font-mono">15일 연속 학습 중</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="grid grid-cols-3 gap-6 mb-8">
|
||||
|
||||
<div class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-[40px] -mr-10 -mt-10 transition-all group-hover:bg-indigo-500/20"></div>
|
||||
<div class="flex justify-between items-start mb-2 relative z-10">
|
||||
<h2 class="text-sm font-medium text-gray-400">오늘 복습 큐</h2>
|
||||
<i class="ph ph-stack text-gray-500 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-6 relative z-10">
|
||||
<span class="text-6xl font-display font-semibold text-white tracking-tighter">12</span>
|
||||
<span class="text-sm text-gray-500">항목</span>
|
||||
</div>
|
||||
<button class="mt-auto w-full bg-white text-bg hover:bg-gray-100 font-medium py-3 rounded-xl transition-colors flex items-center justify-center gap-2 text-sm shadow-[0_4px_14px_rgba(255,255,255,0.1)]">
|
||||
지금 시작
|
||||
<i class="ph-bold ph-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h2 class="text-sm font-medium text-gray-400">이번 주 정답률</h2>
|
||||
<i class="ph ph-target text-gray-500 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center flex-1">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-6xl font-display font-semibold text-white tracking-tighter">78<span class="text-3xl text-gray-400 font-medium">%</span></span>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-1 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-1 rounded-md text-xs font-mono font-medium">
|
||||
<i class="ph-bold ph-trend-up"></i>
|
||||
+12%
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 mt-1">지난주 대비</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-end gap-1.5 h-10 mt-4 opacity-40">
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[40%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[30%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[50%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[45%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[70%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-surfaceHover rounded-sm h-[65%] hover:bg-indigo-500/40 transition-colors"></div>
|
||||
<div class="w-full bg-indigo-500/80 rounded-sm h-[78%] relative">
|
||||
<div class="absolute -top-1 left-1/2 w-1 h-1 bg-white rounded-full transform -translate-x-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h2 class="text-sm font-medium text-gray-400">마스터리 진행</h2>
|
||||
<i class="ph ph-chart-polar text-gray-500 text-lg"></i>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center flex-1 gap-6">
|
||||
|
||||
<div class="relative w-24 h-24 flex-shrink-0">
|
||||
|
||||
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="transparent" stroke="rgba(255,255,255,0.05)" stroke-width="8"></circle>
|
||||
|
||||
<circle cx="50" cy="50" r="40" fill="transparent" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="165" class="transition-all duration-1000 ease-out"></circle>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#4F46E5"></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center flex-col">
|
||||
<span class="font-display font-semibold text-xl text-white">34<span class="text-sm text-gray-400">%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col justify-center">
|
||||
<p class="text-sm text-gray-300 leading-relaxed">
|
||||
전체 학습 태그 중 <br>
|
||||
<span class="font-mono text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded text-xs">P ≥ 0.9</span>
|
||||
도달 비율
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2 flex items-center gap-1">
|
||||
<i class="ph-fill ph-check-circle text-gray-400"></i> 42/124 태그 마스터
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="grid grid-cols-2 gap-6 mb-8">
|
||||
|
||||
|
||||
<div class="bg-surface/50 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-violet-500 shadow-[0_0_8px_rgba(124,58,237,0.8)]"></div>
|
||||
<h2 class="font-medium text-white">곧 내 것이 되는 영역</h2>
|
||||
</div>
|
||||
<button class="text-xs text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1">
|
||||
전체 보기 <i class="ph-bold ph-caret-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
|
||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-surface transition-colors border border-transparent hover:border-white/5 cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
|
||||
<i class="ph ph-function"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">수학 I - 지수함수와 로그함수</span>
|
||||
<div class="w-32 h-1 bg-white/5 rounded-full mt-1.5 overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[85%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<span class="text-[11px] font-mono text-gray-400 bg-white/5 px-2 py-1 rounded">3일 + 4회 복습 후 마스터 예상</span>
|
||||
<span class="text-[10px] text-gray-500 mt-1 font-mono">현재 P=0.85</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-surface transition-colors border border-transparent hover:border-white/5 cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center">
|
||||
<i class="ph ph-dna"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">생명과학 I - 유전의 원리</span>
|
||||
<div class="w-32 h-1 bg-white/5 rounded-full mt-1.5 overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 w-[78%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<span class="text-[11px] font-mono text-gray-400 bg-white/5 px-2 py-1 rounded">5일 + 3회 복습 후 마스터 예상</span>
|
||||
<span class="text-[10px] text-gray-500 mt-1 font-mono">현재 P=0.78</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="group flex items-center justify-between p-3 rounded-xl hover:bg-surface transition-colors border border-transparent hover:border-white/5 cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-orange-500/10 border border-orange-500/20 text-orange-400 flex items-center justify-center">
|
||||
<i class="ph ph-book-bookmark"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">독서 - 인문예술 지문 구조</span>
|
||||
<div class="w-32 h-1 bg-white/5 rounded-full mt-1.5 overflow-hidden">
|
||||
<div class="h-full bg-orange-500 w-[72%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<span class="text-[11px] font-mono text-gray-400 bg-white/5 px-2 py-1 rounded">7일 + 2회 복습 후 마스터 예상</span>
|
||||
<span class="text-[10px] text-gray-500 mt-1 font-mono">현재 P=0.72</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-surface/50 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="ph ph-clock-counter-clockwise text-gray-400 text-lg"></i>
|
||||
<h2 class="font-medium text-white">최근 학습</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
|
||||
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-surface transition-colors group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded bg-emerald-500/10 flex items-center justify-center text-emerald-400">
|
||||
<i class="ph-bold ph-check text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 group-hover:text-white transition-colors">24학년도 9평 수학 15번</span>
|
||||
<span class="text-[11px] text-gray-500">수학 I · 수열의 귀납적 정의</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono text-gray-500">10분 전</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-surface transition-colors group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded bg-amber-500/10 flex items-center justify-center text-amber-400">
|
||||
<i class="ph-bold ph-triangle text-[10px]"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 group-hover:text-white transition-colors">영단어 Day 12 복습 세트</span>
|
||||
<span class="text-[11px] text-gray-500">영어 · 어휘</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono text-gray-500">45분 전</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-surface transition-colors group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded bg-rose-500/10 flex items-center justify-center text-rose-400">
|
||||
<i class="ph-bold ph-x text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 group-hover:text-white transition-colors">23학년도 수능 국어 11번</span>
|
||||
<span class="text-[11px] text-gray-500">독서 · 과학기술 지문</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono text-gray-500">2시간 전</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-surface transition-colors group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded bg-emerald-500/10 flex items-center justify-center text-emerald-400">
|
||||
<i class="ph-bold ph-check text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 group-hover:text-white transition-colors">EBS 수특 영어 5강 3번</span>
|
||||
<span class="text-[11px] text-gray-500">영어 · 빈칸 추론</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono text-gray-500">어제</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-surface transition-colors group">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded bg-emerald-500/10 flex items-center justify-center text-emerald-400">
|
||||
<i class="ph-bold ph-check text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 group-hover:text-white transition-colors">물리학 I 역학 모의고사 1회</span>
|
||||
<span class="text-[11px] text-gray-500">물리학 I · 뉴턴 역학</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-mono text-gray-500">어제</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="relative overflow-hidden rounded-2xl border border-indigo-500/20 bg-gradient-to-r from-surface to-surface/80 p-1">
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-violet-500/5 opacity-50 pointer-events-none"></div>
|
||||
|
||||
<div class="relative bg-surface rounded-xl p-5 flex items-start gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-indigo-500/10 border border-indigo-500/20 flex flex-shrink-0 items-center justify-center mt-0.5">
|
||||
<i class="ph-fill ph-magic-wand text-indigo-400 text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-sm font-medium text-gray-200 mb-1 flex items-center gap-2">
|
||||
적응형 학습 코치
|
||||
<span class="text-[10px] font-mono bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">Mid 페르소나</span>
|
||||
</h3>
|
||||
<p class="text-sm text-gray-400 leading-relaxed">
|
||||
<span class="text-indigo-300 font-medium">Mid 페르소나는 4일 주기가 최적이야.</span>
|
||||
지금처럼 묵묵히 따라오면 수능 전까지 각 과목별로 3번의 완벽한 복습 사이클을 돌릴 수 있어.
|
||||
오늘 남은 큐를 비우고 예측 마스터리 곡선이 어떻게 오르는지 확인해봐.
|
||||
</p>
|
||||
</div>
|
||||
<button class="flex-shrink-0 p-2 text-gray-500 hover:text-white transition-colors rounded-lg hover:bg-white/5 self-center">
|
||||
<i class="ph ph-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
583
.claude/archive/designs/design-02.html
Normal file
583
.claude/archive/designs/design-02.html
Normal file
@@ -0,0 +1,583 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="scroll-smooth"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 잊기 직전에 딱 한 번 더. 적응형 복습 스케줄링.</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bgMain: '#0F0F14',
|
||||
bgCard: '#181820',
|
||||
bgCardHover: '#1E1E28',
|
||||
brand: {
|
||||
violet: '#7C3AED',
|
||||
indigo: '#4F46E5',
|
||||
},
|
||||
textMain: '#F8FAFC',
|
||||
textMuted: '#94A3B8',
|
||||
borderSubtle: '#272732',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-brand': 'linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%)',
|
||||
'gradient-radial': 'radial-gradient(circle at top center, rgba(124, 58, 237, 0.15), transparent 50%)',
|
||||
},
|
||||
animation: {
|
||||
'fade-in-up': 'fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #0F0F14;
|
||||
color: #F8FAFC;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #A78BFA 0%, #818CF8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(24, 24, 32, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
.faq-item.active .faq-answer {
|
||||
max-height: 200px;
|
||||
opacity: 1;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.faq-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.faq-item.active .faq-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-full h-full min-h-screen relative overflow-x-hidden selection:bg-brand-violet selection:text-white">
|
||||
|
||||
|
||||
<div class="fixed inset-0 pointer-events-none z-0">
|
||||
<div class="absolute inset-0 bg-gradient-radial"></div>
|
||||
<div class="absolute top-[20%] left-[10%] w-96 h-96 bg-brand-violet/5 rounded-full blur-[120px]"></div>
|
||||
<div class="absolute bottom-[20%] right-[10%] w-96 h-96 bg-brand-indigo/5 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="fixed top-0 left-0 w-full z-50 glass-panel border-b-0 border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 cursor-pointer">
|
||||
<i class="ph ph-infinity text-2xl text-brand-violet"></i>
|
||||
<span class="font-bold text-lg tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-textMuted">
|
||||
<a href="#features" class="hover:text-white transition-colors">왜 ReLoop 인가</a>
|
||||
<a href="#how-it-works" class="hover:text-white transition-colors">작동 방식</a>
|
||||
<a href="#pricing" class="hover:text-white transition-colors">요금제</a>
|
||||
<a href="#faq" class="hover:text-white transition-colors">FAQ</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm font-medium">
|
||||
<a href="#" class="text-textMuted hover:text-white transition-colors">로그인</a>
|
||||
<button class="bg-white text-bgMain px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors">시작하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-32 pb-24">
|
||||
|
||||
|
||||
<section class="max-w-5xl mx-auto px-6 text-center pt-16 pb-24">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-mono text-brand-violet mb-8 animate-fade-in-up" style="animation-delay: 0.1s;">
|
||||
<span class="w-2 h-2 rounded-full bg-brand-violet animate-pulse"></span>
|
||||
수능 D-240, 적응형 복습 스케줄러 오픈
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6 leading-[1.1] animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
잊기 직전에 <br class="md:hidden">
|
||||
<span class="text-gradient">딱 한 번 더.</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl text-textMuted max-w-2xl mx-auto leading-relaxed mb-10 animate-fade-in-up" style="animation-delay: 0.3s;">
|
||||
페르소나 곡선 기반 적응형 복습 스케줄링.<br>
|
||||
조용하고 확실하게, 수능 1등급을 향한 마스터리 경로를 걷습니다.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style="animation-delay: 0.4s;">
|
||||
<button class="w-full sm:w-auto px-8 py-4 bg-white text-bgMain rounded-xl font-semibold text-lg hover:scale-105 transition-transform duration-200 shadow-[0_0_20px_rgba(255,255,255,0.1)]">
|
||||
무료로 시작하기
|
||||
</button>
|
||||
<button class="w-full sm:w-auto px-8 py-4 bg-transparent border border-borderSubtle text-white rounded-xl font-medium text-lg hover:bg-white/5 transition-colors duration-200 flex items-center justify-center gap-2">
|
||||
데모 계정으로 체험
|
||||
<i class="ph ph-arrow-right text-textMuted"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-6xl mx-auto px-6 mb-32 reveal">
|
||||
<div class="relative rounded-2xl overflow-hidden border border-borderSubtle bg-bgCard shadow-2xl shadow-brand-violet/10 p-2 glass-panel animate-float">
|
||||
<div class="absolute top-0 left-0 w-full h-8 flex items-center px-4 gap-2 border-b border-borderSubtle bg-black/20">
|
||||
<div class="w-3 h-3 rounded-full bg-gray-600"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-gray-600"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-gray-600"></div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 px-6 pb-6 bg-[#0a0a0c] rounded-xl border border-white/5">
|
||||
<div class="flex justify-between items-end mb-6">
|
||||
<div>
|
||||
<p class="text-textMuted text-sm mb-1">환영합니다, 수험생님</p>
|
||||
<h3 class="text-xl font-bold">오늘 복습할 항목이 42개 있습니다</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-textMuted">
|
||||
<i class="ph ph-fire text-brand-violet"></i> 14일 연속 학습
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="p-4 rounded-lg bg-bgCard border border-borderSubtle">
|
||||
<p class="text-sm text-textMuted mb-2">오늘 복습 큐</p>
|
||||
<div class="text-3xl font-mono font-semibold">42<span class="text-sm text-textMuted ml-1">개</span></div>
|
||||
<div class="w-full h-1 bg-white/10 rounded-full mt-4 overflow-hidden">
|
||||
<div class="h-full bg-brand-violet w-1/4 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-bgCard border border-borderSubtle">
|
||||
<p class="text-sm text-textMuted mb-2">이번 주 정답률</p>
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-3xl font-mono font-semibold">87<span class="text-sm text-textMuted ml-1">%</span></div>
|
||||
<div class="text-sm text-green-400 flex items-center mb-1"><i class="ph ph-trend-up mr-1"></i>2.4%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-bgCard border border-borderSubtle relative overflow-hidden">
|
||||
<div class="absolute -right-4 -bottom-4 w-24 h-24 bg-brand-indigo/20 rounded-full blur-xl"></div>
|
||||
<p class="text-sm text-textMuted mb-2">마스터리 진행</p>
|
||||
<div class="text-3xl font-mono font-semibold">64<span class="text-sm text-textMuted ml-1">%</span></div>
|
||||
<p class="text-xs text-brand-indigo mt-2">전체 태그 중 P≥0.9 도달</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="features" class="max-w-6xl mx-auto px-6 py-24 reveal">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">왜 ReLoop 인가</h2>
|
||||
<p class="text-textMuted text-lg">기존의 수동적인 문제풀이에서 벗어나, 데이터 기반의 학습을 경험하세요.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgCard border border-borderSubtle hover:-translate-y-2 hover:border-brand-violet/30 transition-all duration-300 group">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-6 text-brand-violet group-hover:bg-brand-violet/10 transition-colors">
|
||||
<i class="ph ph-brain text-2xl"></i>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<span class="text-xs font-mono text-textMuted line-through mr-2 opacity-50">기존 SRS는 나를 모른다</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">페르소나별 곡선</h3>
|
||||
<p class="text-textMuted leading-relaxed">
|
||||
모두가 같은 속도로 잊어버리지 않습니다. Senior, Mid, Junior, Crammer 등 4가지 학습 페르소나에 맞춰 당신만의 최적 망각 곡선을 적용합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgCard border border-borderSubtle hover:-translate-y-2 hover:border-brand-violet/30 transition-all duration-300 group">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-6 text-brand-violet group-hover:bg-brand-violet/10 transition-colors">
|
||||
<i class="ph ph-funnel text-2xl"></i>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<span class="text-xs font-mono text-textMuted line-through mr-2 opacity-50">맞은 문제도 계속 나온다</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">곧 까먹을 것만 선별</h3>
|
||||
<p class="text-textMuted leading-relaxed">
|
||||
시간 낭비를 막습니다. 기억 강도가 떨어져 '지금 보지 않으면 잊어버릴' 개념과 문제들만 정확히 큐(Queue)에 올려줍니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgCard border border-borderSubtle hover:-translate-y-2 hover:border-brand-violet/30 transition-all duration-300 group">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-6 text-brand-violet group-hover:bg-brand-violet/10 transition-colors">
|
||||
<i class="ph ph-chart-polar text-2xl"></i>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<span class="text-xs font-mono text-textMuted line-through mr-2 opacity-50">수능 과목별 누적 파악 불가</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">태그별 숙련도 누적</h3>
|
||||
<p class="text-textMuted leading-relaxed">
|
||||
단순히 맞았다 틀렸다가 아닙니다. 세부 태그(예: 미적분-치환적분) 단위로 P값(도달 예상 확률)을 계산하여 시각적인 마스터리 경로를 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="how-it-works" class="max-w-6xl mx-auto px-6 py-24 reveal">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">어떻게 작동하나</h2>
|
||||
<p class="text-textMuted text-lg">기록하고, 알림받고, 복습하는 단순하지만 강력한 사이클.</p>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
|
||||
<div class="hidden md:block absolute top-1/2 left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-borderSubtle to-transparent -translate-y-1/2 z-0"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
|
||||
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-bgCard border border-borderSubtle flex items-center justify-center mb-6 shadow-lg shadow-black/50 relative">
|
||||
<div class="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-brand-violet text-white text-xs flex items-center justify-center font-mono">1</div>
|
||||
<i class="ph ph-pencil-simple text-2xl text-textMuted"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg mb-2">문제 기록</h4>
|
||||
<p class="text-sm text-textMuted">기출문제집 연동 또는 직접 입력으로 1분 안에 결과 기록</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-bgCard border border-borderSubtle flex items-center justify-center mb-6 shadow-lg shadow-black/50 relative">
|
||||
<div class="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-brand-violet text-white text-xs flex items-center justify-center font-mono">2</div>
|
||||
<i class="ph ph-calendar-check text-2xl text-textMuted"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg mb-2">자동 스케줄링</h4>
|
||||
<p class="text-sm text-textMuted">선택한 복습 강도와 페르소나에 맞춰 다음 복습일 자동 계산</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-bgCard border border-borderSubtle flex items-center justify-center mb-6 shadow-lg shadow-black/50 relative">
|
||||
<div class="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-brand-violet text-white text-xs flex items-center justify-center font-mono">3</div>
|
||||
<i class="ph ph-bell-ringing text-2xl text-brand-violet"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg mb-2">타이밍 복습</h4>
|
||||
<p class="text-sm text-textMuted">오늘 해야 할 분량만 큐에 생성, 3~4 터치로 빠른 리뷰</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-bgCard border border-borderSubtle flex items-center justify-center mb-6 shadow-lg shadow-black/50 relative">
|
||||
<div class="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-brand-violet text-white text-xs flex items-center justify-center font-mono">4</div>
|
||||
<i class="ph ph-chart-line-up text-2xl text-brand-indigo"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg mb-2">곡선 성장</h4>
|
||||
<p class="text-sm text-textMuted">마스터리 도달 예측 확률(P)이 상승하며 완전한 내 지식이 됨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="border-y border-borderSubtle bg-white/[0.02] py-20 reveal">
|
||||
<div class="max-w-5xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
|
||||
<div>
|
||||
<div class="text-5xl font-mono font-semibold text-gradient mb-2 counter" data-target="150000">0</div>
|
||||
<p class="text-textMuted font-medium tracking-wide">누적 학습 기록 건수</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-5xl font-mono font-semibold text-gradient mb-2"><span class="counter" data-target="92">0</span>%</div>
|
||||
<p class="text-textMuted font-medium tracking-wide">적중률(P≥0.9 시 정답률)</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-5xl font-mono font-semibold text-gradient mb-2 counter" data-target="45">0</div>
|
||||
<p class="text-textMuted font-medium tracking-wide">평균 일일 복습 문항 수</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="pricing" class="max-w-5xl mx-auto px-6 py-24 reveal">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-12">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">단순하고 투명한 요금제</h2>
|
||||
<p class="text-textMuted text-lg">필요한 만큼만 쓰세요. 모든 플랜에 기본 스케줄링이 포함됩니다.</p>
|
||||
</div>
|
||||
<a href="/pricing" class="mt-4 md:mt-0 text-brand-violet hover:text-brand-indigo flex items-center gap-1 font-medium transition-colors">
|
||||
전체 요금제 비교보기 <i class="ph ph-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgMain border border-borderSubtle flex flex-col">
|
||||
<h3 class="text-xl font-bold mb-2">Free</h3>
|
||||
<div class="text-3xl font-bold mb-6">0원<span class="text-sm font-normal text-textMuted">/월</span></div>
|
||||
<ul class="space-y-3 text-sm text-textMuted mb-8 flex-1">
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 과목 3개 제한</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 학습 기록 무제한</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 기본 망각 곡선</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgCard border border-brand-violet/50 relative shadow-[0_0_30px_rgba(124,58,237,0.1)] scale-100 md:scale-105 flex flex-col z-10">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-violet text-white text-xs font-bold px-3 py-1 rounded-full">
|
||||
가장 인기
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Pro</h3>
|
||||
<div class="text-3xl font-bold mb-6">7,900원<span class="text-sm font-normal text-textMuted">/월</span></div>
|
||||
<ul class="space-y-3 text-sm text-gray-300 mb-8 flex-1">
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-brand-violet mt-0.5"></i> 과목 무제한</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-brand-violet mt-0.5"></i> 마스터리 경로 뷰 (P값)</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-brand-violet mt-0.5"></i> 기출 문제집 자동 연동</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-brand-violet mt-0.5"></i> PDF 업로드 및 분석</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-8 rounded-2xl bg-bgMain border border-borderSubtle flex flex-col">
|
||||
<h3 class="text-xl font-bold mb-2">School</h3>
|
||||
<div class="text-3xl font-bold mb-6">20,000원<span class="text-sm font-normal text-textMuted">/월 (30명)</span></div>
|
||||
<ul class="space-y-3 text-sm text-textMuted mb-8 flex-1">
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 학생 30명 시트 제공</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 선생님 대시보드</li>
|
||||
<li class="flex items-start gap-2"><i class="ph ph-check text-white mt-0.5"></i> 학급별 통계 및 진도 비교</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="faq" class="max-w-3xl mx-auto px-6 py-24 reveal">
|
||||
<h2 class="text-3xl font-bold mb-10 text-center">자주 묻는 질문</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="faq-item bg-bgCard border border-borderSubtle rounded-xl overflow-hidden">
|
||||
<button class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="font-medium">기존의 플래너나 단어장 앱과 무엇이 다른가요?</span>
|
||||
<i class="ph ph-caret-down text-textMuted faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer px-6 bg-black/20 text-sm text-textMuted">
|
||||
일반 플래너는 '오늘 해야 할 일'을 사용자가 직접 정합니다. ReLoop은 사용자의 이전 기록을 바탕으로 개인화된 망각 곡선을 계산하여, '오늘 보지 않으면 잊어버릴 가능성이 높은 항목'만 자동으로 선별해 줍니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item bg-bgCard border border-borderSubtle rounded-xl overflow-hidden">
|
||||
<button class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="font-medium">수능 전 과목에 모두 적용할 수 있나요?</span>
|
||||
<i class="ph ph-caret-down text-textMuted faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer px-6 bg-black/20 text-sm text-textMuted">
|
||||
네, 가능합니다. 특히 탐구 영역의 개념 암기, 수학의 취약 유형 복습, 국어/영어의 오답 노트를 관리할 때 태그 기능을 활용하면 매우 뛰어난 효과를 볼 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item bg-bgCard border border-borderSubtle rounded-xl overflow-hidden">
|
||||
<button class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="font-medium">학습 페르소나는 중간에 바꿀 수 있나요?</span>
|
||||
<i class="ph ph-caret-down text-textMuted faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer px-6 bg-black/20 text-sm text-textMuted">
|
||||
언제든지 프로필 설정에서 변경할 수 있습니다. 예를 들어 평소에는 'Mid'나 'Senior' 페르소나로 천천히 마스터리를 올리다가, 시험 기간이 다가오면 'Crammer(벼락치기)' 모드로 변경하여 복습 주기를 짧게 가져갈 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item bg-bgCard border border-borderSubtle rounded-xl overflow-hidden">
|
||||
<button class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="font-medium">Pro 버전을 무료로 체험해볼 수 있나요?</span>
|
||||
<i class="ph ph-caret-down text-textMuted faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer px-6 bg-black/20 text-sm text-textMuted">
|
||||
네, 가입 즉시 카드 등록 없이 7일간 Pro의 모든 기능을 무제한으로 체험할 수 있습니다. 이후 자동으로 Free 플랜으로 전환됩니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item bg-bgCard border border-borderSubtle rounded-xl overflow-hidden">
|
||||
<button class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="font-medium">입력한 데이터는 안전하게 보관되나요?</span>
|
||||
<i class="ph ph-caret-down text-textMuted faq-icon"></i>
|
||||
</button>
|
||||
<div class="faq-answer px-6 bg-black/20 text-sm text-textMuted">
|
||||
데이터는 클라우드에 실시간으로 안전하게 동기화되며, Pro 사용자의 경우 언제든지 CSV 또는 JSON 형태로 모든 학습 기록을 내보내기(Export) 할 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-4xl mx-auto px-6 py-20 text-center reveal">
|
||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">성장은 꾸준함에서 나옵니다.</h2>
|
||||
<p class="text-lg text-textMuted mb-10">지금 바로 가입하고 첫 번째 문제를 기록해보세요.</p>
|
||||
<button class="px-8 py-4 bg-white text-bgMain rounded-xl font-bold text-lg hover:bg-gray-200 transition-colors">
|
||||
10초 만에 무료로 시작하기
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="border-t border-borderSubtle bg-black/20 pt-16 pb-8 text-sm">
|
||||
<div class="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
|
||||
<div class="col-span-1 md:col-span-1">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="ph ph-infinity text-xl text-brand-violet"></i>
|
||||
<span class="font-bold text-lg">ReLoop</span>
|
||||
</div>
|
||||
<p class="text-textMuted leading-relaxed mb-4">
|
||||
망각을 이기는 가장 조용하고 확실한 방법.<br>수험생을 위한 적응형 복습 스케줄러.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-4">제품</h4>
|
||||
<ul class="space-y-2 text-textMuted">
|
||||
<li><a href="#" class="hover:text-white transition-colors">기능 소개</a></li>
|
||||
<li><a href="/pricing" class="hover:text-white transition-colors">요금제</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">페르소나 테스트</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">업데이트 내역</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-4">리소스</h4>
|
||||
<ul class="space-y-2 text-textMuted">
|
||||
<li><a href="#" class="hover:text-white transition-colors">사용 가이드</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">학습법 블로그</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">도움말 센터</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-4">회사</h4>
|
||||
<ul class="space-y-2 text-textMuted">
|
||||
<li><a href="#" class="hover:text-white transition-colors">이용약관</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors font-medium text-gray-300">개인정보처리방침</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">문의하기 (support@reloop.co)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-6 border-t border-white/5 pt-8 flex flex-col md:flex-row items-center justify-between text-xs text-textMuted">
|
||||
<p>© 2024 ReLoop. All rights reserved.</p>
|
||||
<div class="flex gap-4 mt-4 md:mt-0">
|
||||
<a href="#" class="hover:text-white"><i class="ph ph-twitter-logo text-lg"></i></a>
|
||||
<a href="#" class="hover:text-white"><i class="ph ph-instagram-logo text-lg"></i></a>
|
||||
<a href="#" class="hover:text-white"><i class="ph ph-github-logo text-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function reveal() {
|
||||
var reveals = document.querySelectorAll(".reveal");
|
||||
for (var i = 0; i < reveals.length; i++) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var elementTop = reveals[i].getBoundingClientRect().top;
|
||||
var elementVisible = 100;
|
||||
if (elementTop < windowHeight - elementVisible) {
|
||||
reveals[i].classList.add("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener("scroll", reveal);
|
||||
reveal();
|
||||
|
||||
|
||||
function toggleFaq(button) {
|
||||
const item = button.parentElement;
|
||||
|
||||
document.querySelectorAll('.faq-item').forEach(i => {
|
||||
if (i !== item) i.classList.remove('active');
|
||||
});
|
||||
|
||||
item.classList.toggle('active');
|
||||
}
|
||||
|
||||
|
||||
function animateValue(obj, start, end, duration) {
|
||||
let startTimestamp = null;
|
||||
const step = (timestamp) => {
|
||||
if (!startTimestamp) startTimestamp = timestamp;
|
||||
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
||||
|
||||
const ease = 1 - Math.pow(1 - progress, 4);
|
||||
let current = Math.floor(ease * (end - start) + start);
|
||||
|
||||
obj.innerHTML = current.toLocaleString();
|
||||
if (progress < 1) {
|
||||
window.requestAnimationFrame(step);
|
||||
} else {
|
||||
obj.innerHTML = end.toLocaleString();
|
||||
}
|
||||
};
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
|
||||
let countersStarted = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
const counters = document.querySelectorAll('.counter');
|
||||
if(counters.length === 0) return;
|
||||
|
||||
const rect = counters[0].getBoundingClientRect();
|
||||
if(rect.top < window.innerHeight && !countersStarted) {
|
||||
countersStarted = true;
|
||||
counters.forEach(counter => {
|
||||
const target = parseInt(counter.getAttribute('data-target'));
|
||||
animateValue(counter, 0, target, 2500);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
677
.claude/archive/designs/design-03.html
Normal file
677
.claude/archive/designs/design-03.html
Normal file
@@ -0,0 +1,677 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Pricing</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
|
||||
<link rel="preload" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<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=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
numbers: ['IBM Plex Sans', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
background: '#0F0F14',
|
||||
surface: '#1A1A24',
|
||||
surfaceHover: '#252532',
|
||||
border: '#2A2A35',
|
||||
primary: {
|
||||
400: '#818CF8',
|
||||
500: '#6366F1',
|
||||
600: '#4F46E5',
|
||||
},
|
||||
accent: {
|
||||
400: '#A78BFA',
|
||||
500: '#8B5CF6',
|
||||
600: '#7C3AED',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'brand-gradient': 'linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%)',
|
||||
'brand-gradient-hover': 'linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%)',
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
||||
'slide-up': 'slideUp 0.5s ease-out forwards',
|
||||
'price-change': 'priceChange 0.3s ease-in-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
priceChange: {
|
||||
'0%': { opacity: '0', transform: 'translateY(-10px)' },
|
||||
'50%': { opacity: '0' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0F0F14;
|
||||
color: #F4F4F5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: rgba(15, 15, 20, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(42, 42, 53, 0.5);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #A78BFA 0%, #818CF8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
|
||||
.font-num {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3F3F4E;
|
||||
}
|
||||
|
||||
|
||||
.price-animating {
|
||||
animation: priceChange 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.faq-content {
|
||||
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.faq-content.open {
|
||||
max-height: 200px;
|
||||
opacity: 1;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.faq-item.open .faq-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen w-full flex flex-col relative overflow-x-hidden">
|
||||
|
||||
|
||||
<div class="fixed inset-0 z-0 pointer-events-none overflow-hidden">
|
||||
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-accent-600/5 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-primary-600/5 blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="glass-nav sticky top-0 z-50 w-full">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 cursor-pointer">
|
||||
<div class="w-8 h-8 rounded-lg bg-brand-gradient flex items-center justify-center">
|
||||
<i class="ph ph-infinity text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold tracking-tight text-white">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-zinc-400">
|
||||
<a href="#" class="hover:text-white transition-colors">기능</a>
|
||||
<a href="#" class="text-white">요금제</a>
|
||||
<a href="#" class="hover:text-white transition-colors">학습법</a>
|
||||
<a href="#" class="hover:text-white transition-colors">고객지원</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">로그인</a>
|
||||
<a href="#" class="text-sm font-medium bg-white text-background px-4 py-2 rounded-md hover:bg-zinc-200 transition-colors">시작하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow w-full z-10">
|
||||
|
||||
|
||||
<section class="max-w-7xl mx-auto px-6 pt-24 pb-16 flex flex-col items-center text-center animate-slide-up">
|
||||
<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6 leading-tight">
|
||||
나에게 딱 맞는 <span class="text-gradient">적응형 복습</span> 플랜
|
||||
</h1>
|
||||
<p class="text-lg text-zinc-400 max-w-2xl mb-12 leading-relaxed">
|
||||
잊기 직전, 가장 완벽한 타이밍에 복습을 제안합니다.<br>
|
||||
목표 등급을 향한 느리지만 가장 확실한 성장을 시작하세요.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="flex items-center gap-4 bg-surface p-1.5 rounded-full border border-border mb-8">
|
||||
<button id="toggle-monthly" class="relative px-6 py-2.5 rounded-full text-sm font-semibold text-white bg-border shadow-sm transition-all duration-200" onclick="setBilling('monthly')">
|
||||
월간 결제
|
||||
</button>
|
||||
<button id="toggle-yearly" class="relative px-6 py-2.5 rounded-full text-sm font-semibold text-zinc-400 hover:text-zinc-200 transition-all duration-200 flex items-center gap-2" onclick="setBilling('yearly')">
|
||||
연간 결제
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-accent-500/20 text-accent-400 border border-accent-500/30">2개월 무료</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-7xl mx-auto px-6 pb-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
|
||||
|
||||
|
||||
<div class="bg-surface rounded-2xl border border-border p-8 flex flex-col h-full hover:border-zinc-700 transition-colors">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Free</h3>
|
||||
<p class="text-sm text-zinc-400 h-10">처음 써보는 학생을 위한 필수 기능</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-end gap-1">
|
||||
<span class="text-4xl font-bold font-num text-white" id="price-free">0</span>
|
||||
<span class="text-lg font-medium text-zinc-400 mb-1">원</span>
|
||||
<span class="text-sm text-zinc-500 mb-1.5 ml-1">/ 월</span>
|
||||
</div>
|
||||
|
||||
<button class="w-full py-3 px-4 rounded-lg border border-border text-white font-medium hover:bg-surfaceHover transition-colors mb-8">
|
||||
시작하기
|
||||
</button>
|
||||
|
||||
<div class="flex-grow">
|
||||
<p class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-4">주요 제공 기능</p>
|
||||
<ul class="space-y-4 text-sm text-zinc-300">
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-check-circle text-zinc-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학습 과목 <strong>3개</strong> 등록</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-check-circle text-zinc-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학습 기록 무제한 저장</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-check-circle text-zinc-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>매일 50개 적응형 복습 큐</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-check-circle text-zinc-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>기본 망각 곡선 적용</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-check-circle text-zinc-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학습 페르소나 선택 (4종)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="relative bg-surface rounded-2xl p-8 flex flex-col h-full transform md:scale-[1.02] shadow-2xl shadow-primary-900/20 ring-1 ring-primary-500 z-10">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<span class="bg-brand-gradient text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
|
||||
가장 인기
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 mt-2">
|
||||
<h3 class="text-xl font-bold text-white mb-2 flex items-center gap-2">
|
||||
Pro
|
||||
<i class="ph-fill ph-sparkle text-accent-400"></i>
|
||||
</h3>
|
||||
<p class="text-sm text-zinc-400 h-10">수능을 준비하는 고2~고3을 위한 완벽한 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 flex items-end gap-1">
|
||||
<span class="text-4xl font-bold font-num text-white" id="price-pro">7,900</span>
|
||||
<span class="text-lg font-medium text-zinc-400 mb-1">원</span>
|
||||
<span class="text-sm text-zinc-500 mb-1.5 ml-1" id="period-pro">/ 월</span>
|
||||
</div>
|
||||
<div class="h-6 mb-6">
|
||||
<p class="text-sm text-accent-400 font-num hidden" id="yearly-desc-pro">연 결제 시 총 79,000원</p>
|
||||
</div>
|
||||
|
||||
<button class="w-full py-3 px-4 rounded-lg bg-brand-gradient text-white font-semibold shadow-lg shadow-primary-500/25 hover:opacity-90 transition-opacity mb-8">
|
||||
업그레이드
|
||||
</button>
|
||||
|
||||
<div class="flex-grow">
|
||||
<p class="text-xs font-semibold text-primary-400 uppercase tracking-wider mb-4">Free의 모든 기능 포함, 추가로:</p>
|
||||
<ul class="space-y-4 text-sm text-zinc-200">
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학습 과목 <strong>무제한</strong> 등록</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>평가원/교육청 <strong>기출 문제집 연동</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span><strong>마스터리 경로 뷰</strong> (P값 도달 예측)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>PDF 문제 이미지 직접 업로드</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>과목별 상세 분석 리포트 제공</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph-fill ph-check-circle text-primary-500 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>위젯 알림 및 데이터 내보내기(CSV)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-surface rounded-2xl border border-border p-8 flex flex-col h-full hover:border-zinc-700 transition-colors">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-bold text-white mb-2">School</h3>
|
||||
<p class="text-sm text-zinc-400 h-10">학원과 학교를 위한 단체 관리 플랜</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-end gap-1">
|
||||
<span class="text-4xl font-bold font-num text-white" id="price-school">20,000</span>
|
||||
<span class="text-lg font-medium text-zinc-400 mb-1">원</span>
|
||||
<span class="text-sm text-zinc-500 mb-1.5 ml-1">/ 월</span>
|
||||
</div>
|
||||
|
||||
<button class="w-full py-3 px-4 rounded-lg bg-zinc-800 border border-zinc-700 text-white font-medium hover:bg-zinc-700 transition-colors mb-8">
|
||||
문의하기
|
||||
</button>
|
||||
|
||||
<div class="flex-grow">
|
||||
<p class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-4">Pro의 모든 기능 포함, 추가로:</p>
|
||||
<ul class="space-y-4 text-sm text-zinc-300">
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-users text-zinc-400 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>기본 학생 <strong>30명 시트</strong> 제공</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-chalkboard-teacher text-zinc-400 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>선생님 전용 관리자 대시보드</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-chart-bar text-zinc-400 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학급 통계 및 단체 진도 비교</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-sliders text-zinc-400 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학생별 강제 페르소나/주기 조정</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<i class="ph ph-file-pdf text-zinc-400 mt-0.5 text-lg shrink-0"></i>
|
||||
<span>학부모용 월간 통합 리포트 생성</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-5xl mx-auto px-6 pb-24">
|
||||
<h3 class="text-xl font-bold text-center text-white mb-10">모든 플랜에 기본으로 포함됩니다</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||
|
||||
<div class="flex flex-col items-center text-center p-6 bg-surface/50 rounded-xl border border-border">
|
||||
<div class="w-12 h-12 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 text-zinc-300">
|
||||
<i class="ph ph-brain text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2">적응형 복습 알고리즘</h4>
|
||||
<p class="text-xs text-zinc-400 leading-relaxed">개인의 기억력 감퇴 곡선을 계산하여 최적의 복습 시점을 제안합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center p-6 bg-surface/50 rounded-xl border border-border">
|
||||
<div class="w-12 h-12 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 text-zinc-300">
|
||||
<i class="ph ph-devices text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2">모든 기기 동기화</h4>
|
||||
<p class="text-xs text-zinc-400 leading-relaxed">PC, 태블릿, 모바일 어디서나 실시간으로 학습 상태가 연동됩니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center p-6 bg-surface/50 rounded-xl border border-border">
|
||||
<div class="w-12 h-12 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 text-zinc-300">
|
||||
<i class="ph ph-moon-stars text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2">완벽한 다크 테마</h4>
|
||||
<p class="text-xs text-zinc-400 leading-relaxed">오랜 시간 집중해도 눈이 피안하지 않도록 설계된 전용 다크 UI.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center text-center p-6 bg-surface/50 rounded-xl border border-border">
|
||||
<div class="w-12 h-12 bg-zinc-800 rounded-lg flex items-center justify-center mb-4 text-zinc-300">
|
||||
<i class="ph ph-keyboard text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2">단축키 지원</h4>
|
||||
<p class="text-xs text-zinc-400 leading-relaxed">마우스 없이도 빠르게 복습을 처리할 수 있는 강력한 단축키.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-5xl mx-auto px-6 pb-24 hidden md:block">
|
||||
<h3 class="text-2xl font-bold text-white mb-8">상세 기능 비교</h3>
|
||||
<div class="overflow-hidden border border-border rounded-xl bg-surface/30">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="border-b border-border bg-surface">
|
||||
<th class="py-4 px-6 text-sm font-medium text-zinc-400 w-1/3">기능</th>
|
||||
<th class="py-4 px-6 text-sm font-semibold text-white w-[22%] text-center">Free</th>
|
||||
<th class="py-4 px-6 text-sm font-semibold text-primary-400 w-[22%] text-center relative">
|
||||
Pro
|
||||
<div class="absolute inset-x-0 bottom-0 h-0.5 bg-primary-500"></div>
|
||||
</th>
|
||||
<th class="py-4 px-6 text-sm font-semibold text-white w-[22%] text-center">School</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm text-zinc-300 divide-y divide-border">
|
||||
|
||||
<tr class="bg-zinc-800/30">
|
||||
<td colspan="4" class="py-2 px-6 text-xs font-semibold text-zinc-500 uppercase tracking-wider">핵심 학습</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">등록 가능 과목 수</td>
|
||||
<td class="py-4 px-6 text-center">3개</td>
|
||||
<td class="py-4 px-6 text-center font-medium text-white">무제한</td>
|
||||
<td class="py-4 px-6 text-center">무제한</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">학습 기록(Log)</td>
|
||||
<td class="py-4 px-6 text-center">무제한</td>
|
||||
<td class="py-4 px-6 text-center">무제한</td>
|
||||
<td class="py-4 px-6 text-center">무제한</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">일일 적응형 복습 큐</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400">50개 한정</td>
|
||||
<td class="py-4 px-6 text-center font-medium text-white">무제한</td>
|
||||
<td class="py-4 px-6 text-center">무제한</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="bg-zinc-800/30">
|
||||
<td colspan="4" class="py-2 px-6 text-xs font-semibold text-zinc-500 uppercase tracking-wider">고급 분석 및 데이터</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">망각 곡선 모델</td>
|
||||
<td class="py-4 px-6 text-center">기본</td>
|
||||
<td class="py-4 px-6 text-center font-medium text-white">페르소나 맞춤형</td>
|
||||
<td class="py-4 px-6 text-center">페르소나 맞춤형</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">마스터리 경로 뷰 (P값)</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-primary-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">기출 문제집 연동</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-primary-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">PDF 문제 업로드</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-primary-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">데이터 내보내기 (CSV)</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-primary-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="bg-zinc-800/30">
|
||||
<td colspan="4" class="py-2 px-6 text-xs font-semibold text-zinc-500 uppercase tracking-wider">조직 관리</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">선생님 관리자 대시보드</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="py-4 px-6 font-medium text-zinc-200 group-hover:text-white transition-colors">학급 단체 통계 및 비교</td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-600"><i class="ph ph-minus text-lg"></i></td>
|
||||
<td class="py-4 px-6 text-center text-zinc-400"><i class="ph-fill ph-check-circle text-lg"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-3xl mx-auto px-6 pb-24">
|
||||
<h3 class="text-2xl font-bold text-white mb-8 text-center">자주 묻는 질문</h3>
|
||||
<div class="border-t border-border">
|
||||
|
||||
|
||||
<div class="faq-item border-b border-border">
|
||||
<button class="w-full py-6 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="text-base font-medium text-zinc-200">환불 규정은 어떻게 되나요?</span>
|
||||
<i class="ph ph-caret-down text-zinc-500 faq-icon text-xl"></i>
|
||||
</button>
|
||||
<div class="faq-content px-2">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
결제 후 7일 이내이며, Pro 기능을 활용한 학습 기록(기출 연동, 마스터리 뷰 조회 등)이 없는 경우 100% 전액 환불이 가능합니다. 계정 설정 페이지의 청구 내역에서 직접 환불을 신청하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item border-b border-border">
|
||||
<button class="w-full py-6 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="text-base font-medium text-zinc-200">학생 인증 할인이 있나요?</span>
|
||||
<i class="ph ph-caret-down text-zinc-500 faq-icon text-xl"></i>
|
||||
</button>
|
||||
<div class="faq-content px-2">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
현재 ReLoop의 Pro 플랜 가격은 수능을 준비하는 수험생의 부담을 최소화하기 위해 이미 최적화된 금액으로 책정되어 있습니다. 따라서 별도의 추가 학생 할인은 제공하지 않으나, 연간 결제 시 2개월 분의 요금이 면제됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item border-b border-border">
|
||||
<button class="w-full py-6 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="text-base font-medium text-zinc-200">월간 결제에서 연간 결제로 중간에 변경할 수 있나요?</span>
|
||||
<i class="ph ph-caret-down text-zinc-500 faq-icon text-xl"></i>
|
||||
</button>
|
||||
<div class="faq-content px-2">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
네, 언제든지 가능합니다. 설정의 '요금제 관리'에서 연간 결제로 전환하시면, 남은 월간 결제 일수만큼 일할 계산되어 차감된 후 연간 결제가 진행됩니다. 전환 즉시 2개월 무료 혜택이 적용된 가격으로 이용하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-item border-b border-border">
|
||||
<button class="w-full py-6 flex items-center justify-between text-left focus:outline-none" onclick="toggleFaq(this)">
|
||||
<span class="text-base font-medium text-zinc-200">학교나 학원을 위한 그룹 할인이 궁금합니다.</span>
|
||||
<i class="ph ph-caret-down text-zinc-500 faq-icon text-xl"></i>
|
||||
</button>
|
||||
<div class="faq-content px-2">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
School 플랜은 기본 30명 단위로 제공되며, 100명 이상의 대규모 도입을 원하시는 교육 기관의 경우 우측 하단의 채널톡이나 고객센터 이메일로 도입 문의를 남겨주시면 담당자가 맞춤형 견적을 안내해 드립니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="max-w-4xl mx-auto px-6 pb-32 text-center">
|
||||
<div class="relative rounded-2xl bg-surface border border-border p-12 overflow-hidden flex flex-col items-center">
|
||||
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full max-w-lg bg-accent-600/10 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<h2 class="relative z-10 text-3xl font-bold text-white mb-4">완벽한 복습 타이밍을 경험하세요</h2>
|
||||
<p class="relative z-10 text-zinc-400 mb-8 max-w-md mx-auto">
|
||||
신용카드 등록 없이 Free 플랜으로 즉시 시작할 수 있습니다. 가입 시 7일간 Pro 플랜 기능이 무료로 제공됩니다.
|
||||
</p>
|
||||
<button class="relative z-10 px-8 py-4 rounded-xl bg-white text-background font-bold text-lg hover:bg-zinc-200 transition-colors shadow-lg">
|
||||
무료로 먼저 써보세요
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="border-t border-border bg-background py-12 text-sm text-zinc-500 z-10">
|
||||
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-6 h-6 rounded bg-zinc-800 flex items-center justify-center">
|
||||
<i class="ph ph-infinity text-zinc-400"></i>
|
||||
</div>
|
||||
<span class="font-bold text-zinc-300 tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
<p>가장 과학적인 수능 복습 스케줄러</p>
|
||||
<p class="mt-2 text-xs text-zinc-600">© 2024 ReLoop Inc. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-12">
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="font-semibold text-zinc-300 mb-1">Product</span>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">다운로드</a>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">요금제</a>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">릴리스 노트</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="font-semibold text-zinc-300 mb-1">Company</span>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">이용약관</a>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">개인정보처리방침</a>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">오픈소스 라이선스</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
||||
let currentBilling = 'monthly';
|
||||
const toggleMonthly = document.getElementById('toggle-monthly');
|
||||
const toggleYearly = document.getElementById('toggle-yearly');
|
||||
|
||||
const pricePro = document.getElementById('price-pro');
|
||||
const periodPro = document.getElementById('period-pro');
|
||||
const yearlyDescPro = document.getElementById('yearly-desc-pro');
|
||||
|
||||
const priceSchool = document.getElementById('price-school');
|
||||
|
||||
function setBilling(type) {
|
||||
if (currentBilling === type) return;
|
||||
currentBilling = type;
|
||||
|
||||
|
||||
if (type === 'monthly') {
|
||||
toggleMonthly.classList.add('bg-border', 'text-white', 'shadow-sm');
|
||||
toggleMonthly.classList.remove('text-zinc-400');
|
||||
|
||||
toggleYearly.classList.remove('bg-border', 'text-white', 'shadow-sm');
|
||||
toggleYearly.classList.add('text-zinc-400');
|
||||
|
||||
animatePriceChange(pricePro, '7,900');
|
||||
periodPro.innerText = '/ 월';
|
||||
yearlyDescPro.classList.add('hidden');
|
||||
|
||||
animatePriceChange(priceSchool, '20,000');
|
||||
|
||||
} else {
|
||||
toggleYearly.classList.add('bg-border', 'text-white', 'shadow-sm');
|
||||
toggleYearly.classList.remove('text-zinc-400');
|
||||
|
||||
toggleMonthly.classList.remove('bg-border', 'text-white', 'shadow-sm');
|
||||
toggleMonthly.classList.add('text-zinc-400');
|
||||
|
||||
|
||||
|
||||
|
||||
animatePriceChange(pricePro, '79,000');
|
||||
periodPro.innerText = '/ 년';
|
||||
yearlyDescPro.innerText = '월 환산 시 6,583원 (2개월 무료)';
|
||||
yearlyDescPro.classList.remove('hidden');
|
||||
|
||||
animatePriceChange(priceSchool, '200,000');
|
||||
}
|
||||
}
|
||||
|
||||
function animatePriceChange(element, newText) {
|
||||
element.classList.remove('price-animating');
|
||||
|
||||
void element.offsetWidth;
|
||||
element.classList.add('price-animating');
|
||||
|
||||
setTimeout(() => {
|
||||
element.innerText = newText;
|
||||
}, 150);
|
||||
}
|
||||
|
||||
|
||||
function toggleFaq(button) {
|
||||
const item = button.parentElement;
|
||||
const content = item.querySelector('.faq-content');
|
||||
|
||||
|
||||
document.querySelectorAll('.faq-item').forEach(otherItem => {
|
||||
if (otherItem !== item && otherItem.classList.contains('open')) {
|
||||
otherItem.classList.remove('open');
|
||||
otherItem.querySelector('.faq-content').classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
item.classList.toggle('open');
|
||||
content.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
355
.claude/archive/designs/design-04.html
Normal file
355
.claude/archive/designs/design-04.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 적응형 복습</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['"Pretendard Variable"', 'Pretendard', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'Roboto', '"Helvetica Neue"', '"Segoe UI"', '"Apple SD Gothic Neo"', '"Noto Sans KR"', '"Malgun Gothic"', 'sans-serif'],
|
||||
mono: ['"JetBrains Mono"', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
background: '#0F0F14',
|
||||
card: 'rgba(255, 255, 255, 0.02)',
|
||||
border: 'rgba(255, 255, 255, 0.08)',
|
||||
brand: {
|
||||
indigo: '#4F46E5',
|
||||
violet: '#7C3AED',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'shake': 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both',
|
||||
'fade-in': 'fadeIn 0.3s ease-out forwards',
|
||||
},
|
||||
keyframes: {
|
||||
shake: {
|
||||
'10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
|
||||
'20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
|
||||
'30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
|
||||
'40%, 60%': { transform: 'translate3d(4px, 0, 0)' }
|
||||
},
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0', transform: 'translateY(5px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
border-radius: 0.75rem;
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.input-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1px;
|
||||
background: linear-gradient(to right, #4F46E5, #7C3AED);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
background-color: rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
|
||||
.input-wrapper.has-error::before {
|
||||
background: #EF4444;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within .input-field {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input-wrapper.has-error .input-field {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.tab-indicator {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-zinc-100 font-sans min-h-screen flex items-center justify-center relative overflow-hidden antialiased selection:bg-brand-violet/30 selection:text-white">
|
||||
|
||||
|
||||
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-brand-indigo/10 blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-brand-violet/10 blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<main class="w-full max-w-[420px] px-6 relative z-10 flex flex-col items-center">
|
||||
|
||||
|
||||
<div class="flex flex-col items-center mb-10 animate-fade-in">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="url(#logo-gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<defs>
|
||||
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#4F46E5"></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 1 0 0-8c-2 0-4 1.33-6 4Z"></path>
|
||||
</svg>
|
||||
<span class="text-2xl font-bold tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
<p class="text-zinc-400 text-[15px] font-medium tracking-wide">다시 보기 직전의 딱 한 순간</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full bg-card backdrop-blur-xl border border-border rounded-2xl p-6 md:p-8 shadow-2xl shadow-black/50 animate-fade-in" style="animation-delay: 0.1s;">
|
||||
|
||||
|
||||
<div class="bg-black/20 p-1 rounded-xl flex relative mb-8">
|
||||
<div id="tab-indicator" class="tab-indicator absolute left-1 top-1 bottom-1 w-[calc(50%-4px)] bg-zinc-800 rounded-lg shadow-sm border border-zinc-700/50"></div>
|
||||
<button id="btn-login" class="flex-1 relative z-10 py-2 text-sm font-semibold text-white transition-colors" onclick="switchTab('login')">로그인</button>
|
||||
<button id="btn-register" class="flex-1 relative z-10 py-2 text-sm font-semibold text-zinc-400 hover:text-zinc-200 transition-colors" onclick="switchTab('register')">회원가입</button>
|
||||
</div>
|
||||
|
||||
|
||||
<form id="auth-form" class="flex flex-col gap-5" novalidate="">
|
||||
|
||||
|
||||
<div id="field-nickname" class="hidden flex-col gap-1.5 opacity-0 transition-opacity duration-300">
|
||||
<label for="nickname" class="text-sm font-medium text-zinc-300 ml-1">닉네임</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="nickname" class="input-field px-4 py-3.5 text-[15px] text-white placeholder-zinc-500" placeholder="목표를 이룰 이름">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="email" class="text-sm font-medium text-zinc-300 ml-1">이메일</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="email" id="email" class="input-field px-4 py-3.5 text-[15px] text-white placeholder-zinc-500" placeholder="hello@example.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center ml-1">
|
||||
<label for="password" class="text-sm font-medium text-zinc-300">비밀번호</label>
|
||||
<a href="#" id="link-forgot-pw" class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors">비밀번호 찾기</a>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<input type="password" id="password" class="input-field px-4 py-3.5 text-[15px] text-white placeholder-zinc-500" placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="error-container" class="hidden bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2" aria-live="polite">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 shrink-0 mt-0.5" 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"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<p id="error-message" class="text-sm text-red-400 font-medium"></p>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" id="btn-submit" class="w-full bg-white text-zinc-900 text-[15px] font-bold py-3.5 rounded-xl mt-2 hover:bg-zinc-100 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.1)] hover:shadow-[0_0_25px_rgba(255,255,255,0.2)]">
|
||||
시작하기
|
||||
</button>
|
||||
|
||||
|
||||
<button type="button" id="btn-demo" class="w-full group relative flex items-center justify-center gap-2 bg-brand-indigo/10 border border-brand-indigo/30 text-brand-indigo py-3.5 rounded-xl font-semibold hover:bg-brand-indigo/20 transition-all overflow-hidden" onclick="triggerDemo()">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-indigo/0 via-brand-indigo/10 to-brand-indigo/0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]"></div>
|
||||
<span>로그인 없이 체험하기</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<div class="flex items-center gap-4 my-8">
|
||||
<div class="h-px bg-border flex-1"></div>
|
||||
<span class="text-xs font-medium text-zinc-500">또는</span>
|
||||
<div class="h-px bg-border flex-1"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex gap-3">
|
||||
|
||||
<button class="flex-1 bg-white/[0.03] border border-border rounded-xl py-3 flex items-center justify-center hover:bg-white/[0.08] transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-400 group-hover:text-white transition-colors"><path d="M4 10.4c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6c-1.3 0-2.5-.4-3.5-1.1L3.9 18l1.4-2.8C4.5 14 4 12.3 4 10.4z"></path><path d="M9.5 9h5"></path><path d="M12 6.5v5"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="flex-1 bg-white/[0.03] border border-border rounded-xl py-3 flex items-center justify-center hover:bg-[#FEE500]/10 hover:border-[#FEE500]/30 transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-zinc-400 group-hover:text-[#FEE500] transition-colors">
|
||||
<path d="M12 3c-4.97 0-9 3.185-9 7.115 0 2.535 1.635 4.76 4.14 5.955-.135.485-.49 1.74-.56 2.005-.085.325.115.32.245.23.105-.07 1.66-1.135 2.34-1.61.905.255 1.86.395 2.835.395 4.97 0 9-3.185 9-7.115S16.97 3 12 3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="flex-1 bg-white/[0.03] border border-border rounded-xl py-3 flex items-center justify-center hover:bg-[#03C75A]/10 hover:border-[#03C75A]/30 transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="text-zinc-400 group-hover:text-[#03C75A] transition-colors">
|
||||
<path d="M16.14 3H21v18h-4.86V9.37h-.06L9.67 21H4.86V3h4.86v11.59h.06L16.14 3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-8 flex items-center gap-4 text-xs font-medium text-zinc-600 animate-fade-in" style="animation-delay: 0.2s;">
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">이용약관</a>
|
||||
<div class="w-1 h-1 rounded-full bg-zinc-700"></div>
|
||||
<a href="#" class="hover:text-zinc-300 transition-colors">개인정보처리방침</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let currentMode = 'login';
|
||||
|
||||
const form = document.getElementById('auth-form');
|
||||
const indicator = document.getElementById('tab-indicator');
|
||||
const btnLogin = document.getElementById('btn-login');
|
||||
const btnRegister = document.getElementById('btn-register');
|
||||
const fieldNickname = document.getElementById('field-nickname');
|
||||
const btnSubmit = document.getElementById('btn-submit');
|
||||
const linkForgotPw = document.getElementById('link-forgot-pw');
|
||||
const errorContainer = document.getElementById('error-container');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
function switchTab(mode) {
|
||||
if (currentMode === mode) return;
|
||||
currentMode = mode;
|
||||
|
||||
|
||||
clearErrors();
|
||||
|
||||
if (mode === 'login') {
|
||||
indicator.style.transform = 'translateX(0)';
|
||||
|
||||
btnLogin.classList.replace('text-zinc-400', 'text-white');
|
||||
btnRegister.classList.replace('text-white', 'text-zinc-400');
|
||||
|
||||
fieldNickname.classList.add('hidden');
|
||||
setTimeout(() => fieldNickname.classList.remove('opacity-100'), 10);
|
||||
|
||||
btnSubmit.textContent = '시작하기';
|
||||
linkForgotPw.classList.remove('hidden');
|
||||
} else {
|
||||
indicator.style.transform = 'translateX(100%)';
|
||||
|
||||
btnRegister.classList.replace('text-zinc-400', 'text-white');
|
||||
btnLogin.classList.replace('text-white', 'text-zinc-400');
|
||||
|
||||
fieldNickname.classList.remove('hidden');
|
||||
|
||||
setTimeout(() => fieldNickname.classList.add('opacity-100'), 10);
|
||||
|
||||
btnSubmit.textContent = '계정 만들기';
|
||||
linkForgotPw.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function clearErrors() {
|
||||
form.classList.remove('animate-shake');
|
||||
errorContainer.classList.add('hidden');
|
||||
document.querySelectorAll('.input-wrapper').forEach(el => el.classList.remove('has-error'));
|
||||
}
|
||||
|
||||
function triggerError(msg) {
|
||||
|
||||
form.classList.remove('animate-shake');
|
||||
void form.offsetWidth;
|
||||
form.classList.add('animate-shake');
|
||||
|
||||
errorMessage.textContent = msg;
|
||||
errorContainer.classList.remove('hidden');
|
||||
|
||||
|
||||
const inputs = form.querySelectorAll('input');
|
||||
inputs.forEach(input => {
|
||||
if (!input.value && !input.closest('#field-nickname.hidden')) {
|
||||
input.closest('.input-wrapper').classList.add('has-error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
clearErrors();
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const nickname = document.getElementById('nickname').value;
|
||||
|
||||
|
||||
if (!email || !password || (currentMode === 'register' && !nickname)) {
|
||||
triggerError('모든 정보를 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email.includes('@')) {
|
||||
triggerError('유효한 이메일 주소를 입력해주세요.');
|
||||
document.getElementById('email').closest('.input-wrapper').classList.add('has-error');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const btnOriginalText = btnSubmit.textContent;
|
||||
btnSubmit.innerHTML = `<svg class="animate-spin h-5 w-5 mx-auto text-zinc-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
|
||||
|
||||
setTimeout(() => {
|
||||
btnSubmit.textContent = btnOriginalText;
|
||||
alert(currentMode === 'login' ? '로그인 되었습니다.' : '회원가입이 완료되었습니다.');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
|
||||
document.querySelectorAll('input').forEach(input => {
|
||||
input.addEventListener('input', (e) => {
|
||||
e.target.closest('.input-wrapper').classList.remove('has-error');
|
||||
if(!document.querySelector('.has-error')) {
|
||||
errorContainer.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function triggerDemo() {
|
||||
const btn = document.getElementById('btn-demo');
|
||||
const originalContent = btn.innerHTML;
|
||||
btn.innerHTML = `<svg class="animate-spin h-5 w-5 text-brand-indigo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
alert('데모 계정으로 진입합니다.');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
|
||||
tailwind.config.theme.extend.keyframes.shimmer = {
|
||||
'100%': { transform: 'translateX(100%)' }
|
||||
};
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
308
.claude/archive/designs/design-05.html
Normal file
308
.claude/archive/designs/design-05.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Review</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter+Tight:wght@500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard Variable', 'Pretendard', '-apple-system', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
tight: ['Inter Tight', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
bg: '#0F0F14',
|
||||
card: '#1A1A24',
|
||||
cardHover: '#1E1E2A',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
borderBright: 'rgba(255, 255, 255, 0.12)',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'fade-in-up': 'fadeInUp 0.4s ease-out forwards',
|
||||
'slide-toast': 'slideToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
||||
},
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
slideToast: {
|
||||
'0%': { opacity: '0', transform: 'translate(-50%, 20px)' },
|
||||
'100%': { opacity: '1', transform: 'translate(-50%, 0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0F0F14;
|
||||
color: #E2E8F0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3F3F50;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col relative selection:bg-indigo-500/30 selection:text-indigo-200 antialiased">
|
||||
|
||||
|
||||
<div class="fixed top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-indigo-600/10 blur-[140px] rounded-[100%] pointer-events-none z-0"></div>
|
||||
<div class="fixed bottom-0 right-0 w-[600px] h-[400px] bg-violet-600/5 blur-[120px] rounded-[100%] pointer-events-none z-0"></div>
|
||||
|
||||
|
||||
<header class="w-full px-6 py-4 flex items-center justify-between border-b border-brand-border backdrop-blur-md bg-brand-bg/80 z-20 sticky top-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-slate-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-white/5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="font-tight text-xl font-semibold tracking-tight text-white flex items-center gap-2">
|
||||
<div class="w-5 h-5 rounded-[6px] bg-gradient-to-br from-[#7C3AED] to-[#4F46E5] flex items-center justify-center shadow-[0_0_12px_rgba(124,58,237,0.3)]">
|
||||
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"></path>
|
||||
</svg>
|
||||
</div>
|
||||
ReLoop
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 border border-brand-border bg-white/[0.02] rounded-full px-4 py-1.5 shadow-sm">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
|
||||
<span class="text-sm font-mono text-slate-300">집중 모드</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 w-full max-w-[840px] mx-auto z-10 relative">
|
||||
|
||||
|
||||
<div class="w-full mb-8 animate-fade-in-up">
|
||||
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-5 gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-white mb-3 flex items-center gap-3">
|
||||
오늘의 복습
|
||||
<span class="px-2.5 py-1 rounded-md bg-indigo-500/10 text-indigo-400 text-sm font-semibold border border-indigo-500/20 shadow-[0_0_10px_rgba(99,102,241,0.1)]">Day 42</span>
|
||||
</h1>
|
||||
<div class="flex items-center gap-3 text-slate-400 text-sm font-medium">
|
||||
<span class="text-slate-200">45개 남음</span>
|
||||
<span class="w-1 h-1 rounded-full bg-slate-600"></span>
|
||||
<span>오래된 순</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hidden md:flex items-center gap-4 text-[13px] text-slate-400 font-mono bg-brand-card/80 border border-brand-border rounded-xl px-5 py-2.5 backdrop-blur-md shadow-sm">
|
||||
<div class="flex items-center gap-1.5"><kbd class="bg-[#2A2A35] border border-brand-border/50 px-1.5 py-0.5 rounded text-slate-300 shadow-sm">1</kbd> 틀림</div>
|
||||
<div class="flex items-center gap-1.5"><kbd class="bg-[#2A2A35] border border-brand-border/50 px-1.5 py-0.5 rounded text-slate-300 shadow-sm">2</kbd> 부분</div>
|
||||
<div class="flex items-center gap-1.5"><kbd class="bg-[#2A2A35] border border-brand-border/50 px-1.5 py-0.5 rounded text-slate-300 shadow-sm">3</kbd> 맞음</div>
|
||||
<div class="w-px h-3 bg-brand-border"></div>
|
||||
<div class="flex items-center gap-1.5"><kbd class="bg-[#2A2A35] border border-brand-border/50 px-1.5 py-0.5 rounded text-slate-300 shadow-sm">S</kbd> 스킵</div>
|
||||
<div class="flex items-center gap-1.5"><kbd class="bg-[#2A2A35] border border-brand-border/50 px-1.5 py-0.5 rounded text-slate-300 shadow-sm">→</kbd> 다음</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex items-center gap-5">
|
||||
<div class="flex-1 h-2 bg-[#2A2A35] rounded-full overflow-hidden shadow-inner">
|
||||
<div class="h-full w-[26.6%] bg-gradient-to-r from-[#7C3AED] to-[#4F46E5] rounded-full shadow-[0_0_10px_rgba(79,70,229,0.5)] relative">
|
||||
|
||||
<div class="absolute top-0 right-0 bottom-0 w-10 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-mono text-sm font-medium text-slate-400 w-14 text-right tabular-nums">
|
||||
<span class="text-slate-200">12</span><span class="text-slate-600">/</span>45
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full relative mb-6 animate-fade-in-up" style="animation-delay: 0.1s;">
|
||||
|
||||
<div class="absolute inset-0 bg-brand-card rounded-2xl border border-brand-border translate-y-6 scale-[0.96] opacity-30 z-0"></div>
|
||||
<div class="absolute inset-0 bg-brand-card rounded-2xl border border-brand-border translate-y-3 scale-[0.98] opacity-60 z-0"></div>
|
||||
|
||||
|
||||
<div class="relative bg-brand-card border border-brand-borderBright rounded-2xl p-7 md:p-10 shadow-2xl z-10 flex flex-col min-h-[420px] transition-transform duration-300 hover:border-white/20">
|
||||
|
||||
|
||||
<div class="flex flex-wrap justify-between items-start gap-4 mb-8">
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 bg-[#3B82F6]/10 text-[#60A5FA] px-3 py-1.5 rounded-full text-[13px] font-semibold border border-[#3B82F6]/20">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#60A5FA] shadow-[0_0_8px_rgba(96,165,250,0.8)]"></div>
|
||||
수학 I
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm font-medium flex items-center gap-2">
|
||||
<svg class="w-3.5 h-3.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
지수함수와 로그함수
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex gap-2 font-mono text-[13px] tracking-tight">
|
||||
<span class="bg-[#2A2A35] border border-brand-border text-slate-300 px-3 py-1.5 rounded-full font-medium">
|
||||
3회차 복습
|
||||
</span>
|
||||
<div class="relative group">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-[#7C3AED] to-[#4F46E5] rounded-full blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
|
||||
<span class="relative bg-brand-card border border-[#4F46E5]/30 text-[#818CF8] px-3 py-1.5 rounded-full flex items-center gap-1.5 font-medium shadow-sm">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"></path>
|
||||
</svg>
|
||||
예측 73%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center py-4">
|
||||
<h2 class="text-2xl md:text-[28px] font-semibold text-white leading-snug mb-8 tracking-tight">
|
||||
2024학년도 수능 15번 - 점화식 추론
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="bg-brand-bg/50 border border-brand-border rounded-xl p-5 mb-2 relative overflow-hidden group">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500/30 group-hover:bg-indigo-500/60 transition-colors"></div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="mt-0.5 p-1 bg-white/5 rounded-md border border-white/5">
|
||||
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.89 1.14l-2.8 1.4 1.4-2.8a4.5 4.5 0 011.14-1.89l13.18-13.18z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 7.125L16.875 4.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-slate-300 text-[15px] leading-relaxed">
|
||||
<span class="font-semibold text-slate-200">내 메모:</span> <span class="font-mono text-sm text-indigo-300 bg-indigo-500/10 px-1 rounded">a_n</span> 부호 바뀔 때 케이스 분류 주의할 것. 특히 <span class="font-mono text-sm text-indigo-300 bg-indigo-500/10 px-1 rounded">n=4</span>일 때 역추적 꼼꼼히 안하면 계산 실수함. 조건 (나)에서 파생되는 2가지 루트 모두 써놓고 시작할 것.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-2 text-slate-500 text-[13px] font-mono mt-8 pt-6 border-t border-brand-border">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
2일 4시간 지남
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
|
||||
<button class="group relative flex flex-col items-center justify-center gap-3 bg-brand-card border border-brand-border hover:border-[#F43F5E]/40 hover:bg-[#F43F5E]/5 transition-all duration-300 rounded-2xl py-6 md:py-7 overflow-hidden">
|
||||
<div class="absolute top-3 left-3 px-1.5 py-0.5 rounded text-[11px] font-mono text-slate-600 bg-white/5 border border-white/5 group-hover:text-[#F43F5E] group-hover:border-[#F43F5E]/20 transition-all">1</div>
|
||||
<div class="w-14 h-14 rounded-full bg-brand-bg group-hover:bg-[#F43F5E]/10 flex items-center justify-center transition-all duration-300 shadow-inner group-hover:shadow-[0_0_15px_rgba(244,63,94,0.15)]">
|
||||
<svg class="w-7 h-7 text-slate-500 group-hover:text-[#F43F5E] transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<span class="text-slate-300 font-semibold group-hover:text-[#F43F5E] transition-colors">틀림</span>
|
||||
<span class="text-[11px] text-slate-500 font-mono opacity-0 group-hover:opacity-100 transition-opacity translate-y-1 group-hover:translate-y-0">다시 학습</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="group relative flex flex-col items-center justify-center gap-3 bg-brand-card border border-brand-border hover:border-[#F59E0B]/40 hover:bg-[#F59E0B]/5 transition-all duration-300 rounded-2xl py-6 md:py-7 overflow-hidden">
|
||||
<div class="absolute top-3 left-3 px-1.5 py-0.5 rounded text-[11px] font-mono text-slate-600 bg-white/5 border border-white/5 group-hover:text-[#F59E0B] group-hover:border-[#F59E0B]/20 transition-all">2</div>
|
||||
<div class="w-14 h-14 rounded-full bg-brand-bg group-hover:bg-[#F59E0B]/10 flex items-center justify-center transition-all duration-300 shadow-inner group-hover:shadow-[0_0_15px_rgba(245,158,11,0.15)]">
|
||||
<svg class="w-7 h-7 text-slate-500 group-hover:text-[#F59E0B] transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5l8.5 15H3.5L12 4.5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<span class="text-slate-300 font-semibold group-hover:text-[#F59E0B] transition-colors">부분</span>
|
||||
<span class="text-[11px] text-slate-500 font-mono opacity-0 group-hover:opacity-100 transition-opacity translate-y-1 group-hover:translate-y-0">간격 유지</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="group relative flex flex-col items-center justify-center gap-3 bg-brand-card border border-brand-border hover:border-[#10B981]/50 hover:bg-[#10B981]/5 transition-all duration-300 rounded-2xl py-6 md:py-7 overflow-hidden">
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-[3px] bg-gradient-to-r from-[#10B981]/0 via-[#10B981]/40 to-[#10B981]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
<div class="absolute top-3 left-3 px-1.5 py-0.5 rounded text-[11px] font-mono text-slate-600 bg-white/5 border border-white/5 group-hover:text-[#10B981] group-hover:border-[#10B981]/20 transition-all">3</div>
|
||||
<div class="w-14 h-14 rounded-full bg-brand-bg group-hover:bg-[#10B981]/15 flex items-center justify-center transition-all duration-300 shadow-inner group-hover:shadow-[0_0_20px_rgba(16,185,129,0.2)]">
|
||||
<svg class="w-8 h-8 text-slate-400 group-hover:text-[#10B981] transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<span class="text-slate-200 font-semibold group-hover:text-[#10B981] transition-colors">맞음</span>
|
||||
<span class="text-[11px] text-[#10B981]/70 font-mono opacity-0 group-hover:opacity-100 transition-opacity translate-y-1 group-hover:translate-y-0">간격 증가</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="group relative flex flex-col items-center justify-center gap-3 bg-brand-bg/60 border border-transparent hover:border-brand-border hover:bg-brand-card transition-all duration-300 rounded-2xl py-6 md:py-7 overflow-hidden">
|
||||
<div class="absolute top-3 left-3 px-1.5 py-0.5 rounded text-[11px] font-mono text-slate-600 bg-white/5 border border-white/5 group-hover:text-slate-400 transition-all">S</div>
|
||||
<div class="w-14 h-14 rounded-full bg-[#1A1A24]/50 group-hover:bg-brand-bg flex items-center justify-center transition-all duration-300 border border-transparent group-hover:border-white/5">
|
||||
<svg class="w-6 h-6 text-slate-600 group-hover:text-slate-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<span class="text-slate-500 font-medium group-hover:text-slate-300 transition-colors">스킵</span>
|
||||
<span class="text-[11px] text-slate-600 font-mono opacity-0 group-hover:opacity-100 transition-opacity translate-y-1 group-hover:translate-y-0">다음 문제로</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-slide-toast">
|
||||
<div class="flex items-center gap-4 bg-[#2A2A35]/95 backdrop-blur-md border border-brand-borderBright shadow-[0_10px_40px_rgba(0,0,0,0.5)] px-5 py-3 rounded-full">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-[14px] font-medium text-slate-200">결과가 기록되었습니다</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-600"></div>
|
||||
<button class="text-[13px] font-medium text-[#818CF8] hover:text-indigo-300 transition-colors flex items-center gap-1.5 font-mono group">
|
||||
<svg class="w-4 h-4 group-hover:-rotate-45 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"></path>
|
||||
</svg>
|
||||
실행 취소 (2s)
|
||||
|
||||
|
||||
<svg class="w-4 h-4 -rotate-90 ml-1 text-slate-600" viewBox="0 0 36 36">
|
||||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="100, 100"></path>
|
||||
<path class="text-indigo-400" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="60, 100"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
238
.claude/archive/designs/design-06.html
Normal file
238
.claude/archive/designs/design-06.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 통계</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-indigo-500/20 text-indigo-300 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-trend-up text-lg text-indigo-400"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] left-[20%] w-[500px] h-[500px] bg-violet-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-10 relative z-10">
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white">학습 통계</h1>
|
||||
<p class="text-gray-400 text-sm mt-1">학습 성취도와 패턴을 분석하여 최적의 방향을 제시합니다.</p>
|
||||
</div>
|
||||
<div class="flex bg-surface border border-border rounded-lg p-1">
|
||||
<button class="px-4 py-1.5 rounded-md bg-white/10 text-white text-sm font-medium shadow-sm">주간</button>
|
||||
<button class="px-4 py-1.5 rounded-md text-gray-400 hover:text-white hover:bg-white/5 text-sm transition-colors">월간</button>
|
||||
<button class="px-4 py-1.5 rounded-md text-gray-400 hover:text-white hover:bg-white/5 text-sm transition-colors">전체</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-surface/80 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<h3 class="text-sm font-medium text-gray-400 mb-4">총 학습 시간</h3>
|
||||
<div class="flex items-end gap-3">
|
||||
<span class="text-4xl font-display font-semibold text-white tracking-tighter">24<span class="text-xl text-gray-500 font-medium">h</span> 15<span class="text-xl text-gray-500 font-medium">m</span></span>
|
||||
</div>
|
||||
<p class="text-xs text-emerald-400 mt-2 flex items-center gap-1"><i class="ph-bold ph-trend-up"></i> 지난주 대비 +12%</p>
|
||||
</div>
|
||||
<div class="bg-surface/80 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<h3 class="text-sm font-medium text-gray-400 mb-4">전체 정답률</h3>
|
||||
<div class="flex items-end gap-3">
|
||||
<span class="text-4xl font-display font-semibold text-white tracking-tighter">82<span class="text-xl text-gray-500 font-medium">%</span></span>
|
||||
</div>
|
||||
<p class="text-xs text-emerald-400 mt-2 flex items-center gap-1"><i class="ph-bold ph-trend-up"></i> 지난주 대비 +3%</p>
|
||||
</div>
|
||||
<div class="bg-surface/80 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<h3 class="text-sm font-medium text-gray-400 mb-4">학습 태그</h3>
|
||||
<div class="flex items-end gap-3">
|
||||
<span class="text-4xl font-display font-semibold text-white tracking-tighter">124</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">마스터한 태그 42개</p>
|
||||
</div>
|
||||
<div class="bg-surface/80 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<h3 class="text-sm font-medium text-gray-400 mb-4">연속 학습</h3>
|
||||
<div class="flex items-end gap-3">
|
||||
<span class="text-4xl font-display font-semibold text-white tracking-tighter">15<span class="text-xl text-gray-500 font-medium">일</span></span>
|
||||
</div>
|
||||
<p class="text-xs text-orange-400 mt-2 flex items-center gap-1"><i class="ph-fill ph-fire"></i> 최고 기록 21일</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<div class="col-span-2 bg-surface/50 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="font-medium text-white flex items-center gap-2">
|
||||
<i class="ph ph-chart-line-up text-indigo-400 text-lg"></i>
|
||||
성취도 변화 추이
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-1 min-h-[300px] flex items-end gap-2 pt-4 relative">
|
||||
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none pb-8 opacity-20">
|
||||
<div class="border-b border-white border-dashed w-full"></div>
|
||||
<div class="border-b border-white border-dashed w-full"></div>
|
||||
<div class="border-b border-white border-dashed w-full"></div>
|
||||
<div class="border-b border-white border-dashed w-full"></div>
|
||||
</div>
|
||||
<div class="w-full flex justify-between items-end h-full pb-8 z-10 px-2 gap-2">
|
||||
<div class="w-full bg-indigo-500/20 hover:bg-indigo-500/40 transition-all rounded-t-sm relative group h-[40%]">
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-surface border border-border px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity">40%</div>
|
||||
</div>
|
||||
<div class="w-full bg-indigo-500/30 hover:bg-indigo-500/50 transition-all rounded-t-sm relative group h-[45%]"></div>
|
||||
<div class="w-full bg-indigo-500/40 hover:bg-indigo-500/60 transition-all rounded-t-sm relative group h-[55%]"></div>
|
||||
<div class="w-full bg-indigo-500/50 hover:bg-indigo-500/70 transition-all rounded-t-sm relative group h-[62%]"></div>
|
||||
<div class="w-full bg-indigo-500/60 hover:bg-indigo-500/80 transition-all rounded-t-sm relative group h-[70%]"></div>
|
||||
<div class="w-full bg-indigo-500/80 hover:bg-indigo-500 transition-all rounded-t-sm relative group h-[82%]">
|
||||
<div class="absolute -top-1 left-1/2 w-1.5 h-1.5 bg-white rounded-full transform -translate-x-1/2 shadow-[0_0_10px_rgba(255,255,255,0.8)]"></div>
|
||||
</div>
|
||||
<div class="w-full bg-indigo-500/70 hover:bg-indigo-500/90 transition-all rounded-t-sm relative group h-[78%]"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full flex justify-between px-4 text-xs text-gray-500 font-mono">
|
||||
<span>월</span><span>화</span><span>수</span><span>목</span><span>금</span><span>토</span><span>일</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface/50 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="font-medium text-white flex items-center gap-2">
|
||||
<i class="ph ph-pie-chart text-indigo-400 text-lg"></i>
|
||||
과목별 정답률
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-col gap-5 flex-1 justify-center">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-gray-300 flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-500"></div>수학</span>
|
||||
<span class="text-white font-mono">88%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[88%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-gray-300 flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-orange-500"></div>국어</span>
|
||||
<span class="text-white font-mono">75%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-orange-500 w-[75%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-gray-300 flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500"></div>과학탐구</span>
|
||||
<span class="text-white font-mono">82%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 w-[82%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-gray-300 flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-amber-500"></div>영어</span>
|
||||
<span class="text-white font-mono">91%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-amber-500 w-[91%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
311
.claude/archive/designs/design-07.html
Normal file
311
.claude/archive/designs/design-07.html
Normal file
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Subjects & Tags</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-white/5 text-gray-400 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-folders text-lg text-indigo-400"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] right-[20%] w-[500px] h-[500px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-5xl mx-auto p-10 relative z-10">
|
||||
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white mb-2">과목 및 태그 관리</h1>
|
||||
<p class="text-gray-400 text-sm">전체 124개 학습 태그 중 42개 마스터 도달</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-surface border border-border rounded-lg text-sm text-gray-300 hover:text-white hover:bg-surfaceHover transition-colors">
|
||||
<i class="ph ph-archive"></i>
|
||||
보관함
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-[0_0_15px_rgba(79,70,229,0.3)]">
|
||||
<i class="ph-bold ph-plus"></i>
|
||||
새 과목/태그 추가
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="flex border-b border-border mb-8">
|
||||
<button class="px-6 py-3 text-sm font-medium text-indigo-400 border-b-2 border-indigo-500 transition-colors">전체 (124)</button>
|
||||
<button class="px-6 py-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">수학 (45)</button>
|
||||
<button class="px-6 py-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">국어 (32)</button>
|
||||
<button class="px-6 py-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">영어 (28)</button>
|
||||
<button class="px-6 py-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">과학 (19)</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<section class="bg-surface/50 border border-border rounded-2xl overflow-hidden">
|
||||
<div class="p-5 border-b border-border flex items-center justify-between bg-surface/80">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
|
||||
<i class="ph-bold ph-function text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-white">수학 I</h2>
|
||||
<p class="text-xs text-gray-400 mt-0.5">24개 태그 · 12개 마스터</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="text-xs text-gray-400 mb-1">마스터리 달성률</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-32 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[50%]"></div>
|
||||
</div>
|
||||
<span class="text-sm font-mono text-blue-400">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-2 text-gray-500 hover:text-white transition-colors rounded-lg hover:bg-white/5">
|
||||
<i class="ph ph-dots-three text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-border/50">
|
||||
|
||||
<div class="p-4 hover:bg-surface transition-colors flex items-center justify-between group">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-400 flex items-center justify-center flex-shrink-0">
|
||||
<i class="ph-bold ph-check text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">지수함수와 로그함수</h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="text-[10px] font-mono bg-blue-500/10 text-blue-300 px-1.5 py-0.5 rounded border border-blue-500/20">대수</span>
|
||||
<span class="text-[10px] text-gray-500">최근 학습: 어제</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex flex-col items-end min-w-[120px]">
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-xs text-gray-400">P-Value</span>
|
||||
<span class="text-xs font-mono text-emerald-400 font-medium">0.92</span>
|
||||
</div>
|
||||
<div class="w-full h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 w-[92%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-archive"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-4 hover:bg-surface transition-colors flex items-center justify-between group">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="w-8 h-8 rounded-lg bg-surface border border-border text-gray-400 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-mono">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">삼각함수의 그래프</h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="text-[10px] font-mono bg-blue-500/10 text-blue-300 px-1.5 py-0.5 rounded border border-blue-500/20">기하</span>
|
||||
<span class="text-[10px] text-gray-500">최근 학습: 3일 전</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex flex-col items-end min-w-[120px]">
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-xs text-gray-400">P-Value</span>
|
||||
<span class="text-xs font-mono text-amber-400 font-medium">0.65</span>
|
||||
</div>
|
||||
<div class="w-full h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-amber-500 w-[65%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-archive"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-3 text-sm text-gray-500 hover:text-white hover:bg-surface transition-colors flex items-center justify-center gap-2">
|
||||
<i class="ph ph-caret-down"></i> 22개 태그 더보기
|
||||
</button>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-surface/50 border border-border rounded-2xl overflow-hidden">
|
||||
<div class="p-5 border-b border-border flex items-center justify-between bg-surface/80">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-400 flex items-center justify-center">
|
||||
<i class="ph-bold ph-book-bookmark text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-white">국어 독서</h2>
|
||||
<p class="text-xs text-gray-400 mt-0.5">18개 태그 · 5개 마스터</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="text-xs text-gray-400 mb-1">마스터리 달성률</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-32 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-orange-500 w-[27%]"></div>
|
||||
</div>
|
||||
<span class="text-sm font-mono text-orange-400">27%</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-2 text-gray-500 hover:text-white transition-colors rounded-lg hover:bg-white/5">
|
||||
<i class="ph ph-dots-three text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-border/50">
|
||||
|
||||
<div class="p-4 hover:bg-surface transition-colors flex items-center justify-between group">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="w-8 h-8 rounded-lg bg-surface border border-border text-gray-400 flex items-center justify-center flex-shrink-0 relative">
|
||||
<span class="text-xs font-mono">2</span>
|
||||
<div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-indigo-500 rounded-full border-2 border-surface"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">인문예술 지문 구조 분석</h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="text-[10px] font-mono bg-orange-500/10 text-orange-300 px-1.5 py-0.5 rounded border border-orange-500/20">구조</span>
|
||||
<span class="text-[10px] text-gray-500">최근 학습: 오늘</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex flex-col items-end min-w-[120px]">
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<span class="text-xs text-gray-400">P-Value</span>
|
||||
<span class="text-xs font-mono text-indigo-400 font-medium">0.72</span>
|
||||
</div>
|
||||
<div class="w-full h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-indigo-500 w-[72%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-pencil-simple"></i></button>
|
||||
<button class="p-1.5 text-gray-400 hover:text-white hover:bg-white/10 rounded"><i class="ph ph-archive"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
217
.claude/archive/designs/design-08.html
Normal file
217
.claude/archive/designs/design-08.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Dashboard (Empty State)</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-squares-four text-lg text-indigo-400"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
J
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">Jihoon</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Free Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative flex flex-col">
|
||||
|
||||
<div class="absolute top-[10%] left-[30%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[150px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto p-10 w-full flex-1 flex flex-col justify-center relative z-10">
|
||||
|
||||
<header class="text-center mb-12">
|
||||
<p class="text-indigo-400 text-sm font-medium mb-3 tracking-wide uppercase">Welcome to ReLoop</p>
|
||||
<h1 class="text-4xl font-semibold tracking-tight text-white mb-4">
|
||||
새로운 여정을 시작해볼까요?
|
||||
</h1>
|
||||
<p class="text-gray-400 text-lg max-w-xl mx-auto">
|
||||
아직 학습할 내용이 없어요. 첫 번째 과목을 추가하고 망각 곡선에 맞춘 효율적인 복습을 경험해보세요.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-5 gap-8 items-center">
|
||||
|
||||
<div class="col-span-2 relative h-[300px] flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-gradient-radial from-indigo-500/20 to-transparent rounded-full animate-pulse-slow"></div>
|
||||
<div class="relative z-10 animate-float">
|
||||
<div class="w-48 h-48 bg-surface border border-border rounded-2xl shadow-2xl flex items-center justify-center relative overflow-hidden transform -rotate-6">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-violet-500/20 rounded-full blur-2xl -mr-8 -mt-8"></div>
|
||||
<i class="ph-duotone ph-book-open-text text-6xl text-indigo-400"></i>
|
||||
</div>
|
||||
<div class="absolute -bottom-4 -right-4 w-24 h-24 bg-surface border border-border rounded-xl shadow-xl flex items-center justify-center transform rotate-12">
|
||||
<i class="ph-duotone ph-chart-line-up text-3xl text-emerald-400"></i>
|
||||
</div>
|
||||
<div class="absolute -top-6 -left-6 w-20 h-20 bg-surface border border-border rounded-xl shadow-xl flex items-center justify-center transform -rotate-12">
|
||||
<i class="ph-duotone ph-brain text-3xl text-violet-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-span-3 space-y-6">
|
||||
<div class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-8">
|
||||
<h2 class="text-xl font-medium text-white mb-6">시작하기 위한 체크리스트</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/20 transition-all group">
|
||||
<div class="mt-0.5 flex-shrink-0 w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white shadow-[0_0_10px_rgba(79,70,229,0.3)]">
|
||||
<span class="text-xs font-bold">1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-base font-medium text-white mb-1">첫 번째 과목 추가하기</h3>
|
||||
<p class="text-sm text-gray-400">학습할 과목이나 카테고리를 먼저 생성해주세요.</p>
|
||||
</div>
|
||||
<button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded-lg transition-colors shadow-lg shadow-indigo-500/20 flex items-center gap-2 flex-shrink-0">
|
||||
과목 추가
|
||||
<i class="ph-bold ph-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-surfaceHover border border-transparent opacity-60">
|
||||
<div class="mt-0.5 flex-shrink-0 w-6 h-6 rounded-full border border-gray-600 flex items-center justify-center text-gray-500">
|
||||
<span class="text-xs font-bold">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-base font-medium text-gray-300 mb-1">학습 항목 등록하기</h3>
|
||||
<p class="text-sm text-gray-500">복습이 필요한 개념, 문제, 지문 등을 추가하세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-surfaceHover border border-transparent opacity-60">
|
||||
<div class="mt-0.5 flex-shrink-0 w-6 h-6 rounded-full border border-gray-600 flex items-center justify-center text-gray-500">
|
||||
<span class="text-xs font-bold">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-base font-medium text-gray-300 mb-1">첫 복습 완료하기</h3>
|
||||
<p class="text-sm text-gray-500">알고리즘이 최적의 타이밍에 복습을 제안합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<a href="#" class="inline-flex items-center gap-2 text-gray-400 hover:text-white text-sm font-medium transition-colors">
|
||||
<i class="ph ph-info"></i>
|
||||
ReLoop 사용 방법 알아보기
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
368
.claude/archive/designs/design-09.html
Normal file
368
.claude/archive/designs/design-09.html
Normal file
@@ -0,0 +1,368 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - Settings</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked {
|
||||
right: 0;
|
||||
border-color: #4F46E5;
|
||||
}
|
||||
.toggle-checkbox:checked + .toggle-label {
|
||||
background-color: #4F46E5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-white/5 text-gray-400 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg bg-white/5 border border-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-indigo-500/30 flex items-center justify-center text-sm font-medium text-indigo-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-indigo-400 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-gear text-indigo-400 text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] right-[10%] w-[500px] h-[500px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-5xl mx-auto p-10 relative z-10">
|
||||
|
||||
<header class="mb-8 border-b border-border pb-6">
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white flex items-center gap-3">
|
||||
설정 및 프로필
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-2">계정 관리, 학습 환경 및 알고리즘 설정을 변경합니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
|
||||
<div class="col-span-12 lg:col-span-8 flex flex-col gap-6">
|
||||
|
||||
|
||||
<section class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-medium text-white flex items-center gap-2">
|
||||
<i class="ph ph-user text-gray-400"></i> 프로필 및 플랜
|
||||
</h2>
|
||||
<button class="text-sm bg-white/5 hover:bg-white/10 text-white px-4 py-2 rounded-lg transition-colors border border-white/5">프로필 수정</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500/20 to-violet-500/20 border border-indigo-500/30 flex items-center justify-center text-3xl font-medium text-indigo-300 relative">
|
||||
M
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 bg-surface border border-border rounded-full flex items-center justify-center hover:bg-white/5 cursor-pointer">
|
||||
<i class="ph ph-camera text-xs text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<h3 class="text-xl font-semibold text-white">MinStudent</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-400 mb-4">minstudent@example.com</p>
|
||||
|
||||
<div class="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center">
|
||||
<i class="ph-fill ph-crown text-indigo-400 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-white flex items-center gap-2">
|
||||
ReLoop Pro <span class="text-[10px] bg-indigo-500 text-white px-1.5 py-0.5 rounded font-mono">Active</span>
|
||||
</div>
|
||||
<div class="text-xs text-indigo-300 mt-1">다음 결제일: 2024년 11월 24일</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-xs text-indigo-400 hover:text-indigo-300 font-medium">플랜 관리</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-medium text-white flex items-center gap-2">
|
||||
<i class="ph ph-brain text-gray-400"></i> 학습 및 알고리즘 설정
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm font-medium text-gray-200">일일 학습 목표</label>
|
||||
<span class="text-sm font-mono text-indigo-400">50 항목</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mb-2">하루에 학습하고 복습할 목표 항목 수를 설정합니다.</p>
|
||||
<input type="range" min="10" max="200" value="50" class="w-full h-1 bg-surfaceHover rounded-lg appearance-none cursor-pointer accent-indigo-500">
|
||||
<div class="flex justify-between text-xs text-gray-600 font-mono mt-1">
|
||||
<span>10</span>
|
||||
<span>200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-border">
|
||||
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="text-sm font-medium text-gray-200">간격 반복 알고리즘 민감도</label>
|
||||
<p class="text-xs text-gray-500 mt-1">망각 곡선 예측의 보수성을 결정합니다. 높은 민감도는 더 잦은 복습을 요구합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<label class="cursor-pointer relative">
|
||||
<input type="radio" name="sensitivity" class="peer sr-only">
|
||||
<div class="p-3 border border-border rounded-xl bg-surface hover:bg-surfaceHover peer-checked:border-indigo-500 peer-checked:bg-indigo-500/5 transition-all text-center flex flex-col items-center gap-1">
|
||||
<span class="text-sm font-medium text-gray-300 peer-checked:text-indigo-400">여유로움</span>
|
||||
<span class="text-[10px] text-gray-500">장기 기억 위주</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer relative">
|
||||
<input type="radio" name="sensitivity" class="peer sr-only" checked="">
|
||||
<div class="p-3 border border-border rounded-xl bg-surface hover:bg-surfaceHover peer-checked:border-indigo-500 peer-checked:bg-indigo-500/5 transition-all text-center flex flex-col items-center gap-1">
|
||||
<span class="text-sm font-medium text-gray-300 peer-checked:text-indigo-400">표준 (추천)</span>
|
||||
<span class="text-[10px] text-gray-500">균형 잡힌 복습</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer relative">
|
||||
<input type="radio" name="sensitivity" class="peer sr-only">
|
||||
<div class="p-3 border border-border rounded-xl bg-surface hover:bg-surfaceHover peer-checked:border-indigo-500 peer-checked:bg-indigo-500/5 transition-all text-center flex flex-col items-center gap-1">
|
||||
<span class="text-sm font-medium text-gray-300 peer-checked:text-indigo-400">엄격함</span>
|
||||
<span class="text-[10px] text-gray-500">시험 대비 모드</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-medium text-white flex items-center gap-2">
|
||||
<i class="ph ph-bell text-gray-400"></i> 알림 환경설정
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-200">일일 복습 리마인더</div>
|
||||
<div class="text-xs text-gray-500 mt-1">오늘 완료해야 할 복습 항목이 있을 때 알림을 받습니다.</div>
|
||||
</div>
|
||||
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
|
||||
<input type="checkbox" name="toggle" id="toggle1" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 z-10" checked="">
|
||||
<label for="toggle1" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-600 cursor-pointer transition-colors duration-300"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-200">연속 학습(Streak) 경고</div>
|
||||
<div class="text-xs text-gray-500 mt-1">연속 학습 기록이 끊어질 위험이 있을 때 알려줍니다.</div>
|
||||
</div>
|
||||
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
|
||||
<input type="checkbox" name="toggle" id="toggle2" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 z-10" checked="">
|
||||
<label for="toggle2" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-600 cursor-pointer transition-colors duration-300"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-200">주간 학습 리포트</div>
|
||||
<div class="text-xs text-gray-500 mt-1">매주 월요일 아침 지난주의 학습 통계를 이메일로 받습니다.</div>
|
||||
</div>
|
||||
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
|
||||
<input type="checkbox" name="toggle" id="toggle3" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 z-10">
|
||||
<label for="toggle3" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-600 cursor-pointer transition-colors duration-300"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-span-12 lg:col-span-4 flex flex-col gap-6">
|
||||
|
||||
<section class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm font-medium text-gray-200 flex items-center gap-2">
|
||||
<i class="ph-fill ph-fire text-orange-400"></i> 연속 학습 기록
|
||||
</h2>
|
||||
<span class="text-lg font-display font-semibold text-white">15<span class="text-xs text-gray-500 font-sans font-normal ml-1">일</span></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between text-xs text-gray-500 mb-2 font-mono">
|
||||
<span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
|
||||
</div>
|
||||
<div class="calendar-grid">
|
||||
|
||||
<div class="w-full pt-[100%] rounded bg-surfaceHover relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-surfaceHover relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/20 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/40 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/60 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/80 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500 relative"></div>
|
||||
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/40 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/60 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/80 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/60 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/40 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/80 relative"></div>
|
||||
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/60 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-indigo-500/80 relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.4)] relative border border-orange-400"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-surfaceHover relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-surfaceHover relative"></div>
|
||||
<div class="w-full pt-[100%] rounded bg-surfaceHover relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
||||
<span>Less</span>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-3 h-3 rounded bg-surfaceHover"></div>
|
||||
<div class="w-3 h-3 rounded bg-indigo-500/20"></div>
|
||||
<div class="w-3 h-3 rounded bg-indigo-500/40"></div>
|
||||
<div class="w-3 h-3 rounded bg-indigo-500/60"></div>
|
||||
<div class="w-3 h-3 rounded bg-indigo-500"></div>
|
||||
</div>
|
||||
<span>More</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6">
|
||||
<h2 class="text-sm font-medium text-gray-200 mb-4">데이터 및 계정</h2>
|
||||
<div class="space-y-2">
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-surface transition-colors border border-transparent hover:border-white/5 group text-sm text-gray-300">
|
||||
<span class="flex items-center gap-2"><i class="ph ph-export text-gray-400 group-hover:text-white"></i> 학습 데이터 내보내기</span>
|
||||
<i class="ph ph-caret-right text-gray-500"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-surface transition-colors border border-transparent hover:border-white/5 group text-sm text-gray-300">
|
||||
<span class="flex items-center gap-2"><i class="ph ph-clock-counter-clockwise text-gray-400 group-hover:text-white"></i> 진행 상황 초기화</span>
|
||||
<i class="ph ph-caret-right text-gray-500"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-red-500/5 transition-colors border border-transparent hover:border-red-500/10 group text-sm text-red-400 mt-4">
|
||||
<span class="flex items-center gap-2"><i class="ph ph-sign-out"></i> 로그아웃</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex justify-end">
|
||||
<button class="bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-2.5 px-6 rounded-lg transition-colors flex items-center gap-2 shadow-[0_4px_14px_rgba(79,70,229,0.3)]">
|
||||
<i class="ph-bold ph-check"></i> 변경사항 저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
301
.claude/archive/designs/design-10.html
Normal file
301
.claude/archive/designs/design-10.html
Normal file
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 학습 기록</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-book-open text-lg text-indigo-400"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-indigo-500/20 text-indigo-300 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] right-[10%] w-[500px] h-[500px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-10 relative z-10">
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white mb-2">학습 기록</h1>
|
||||
<p class="text-gray-400 text-sm">과거의 모든 학습 세션과 결과를 상세하게 확인하세요.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 bg-surface border border-border text-gray-300 px-4 py-2 rounded-lg hover:bg-surfaceHover transition-colors text-sm font-medium">
|
||||
<i class="ph ph-funnel text-lg"></i>
|
||||
필터
|
||||
</button>
|
||||
<button class="flex items-center gap-2 bg-surface border border-border text-gray-300 px-4 py-2 rounded-lg hover:bg-surfaceHover transition-colors text-sm font-medium">
|
||||
<i class="ph ph-download-simple text-lg"></i>
|
||||
내보내기
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<i class="ph ph-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
|
||||
<input type="text" placeholder="검색어 (과목, 태그, 내용 등)..." class="w-full bg-surface border border-border rounded-lg py-2.5 pl-10 pr-4 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="bg-surface border border-border rounded-lg py-2.5 px-4 text-sm text-gray-300 focus:outline-none focus:border-indigo-500/50 appearance-none pr-8 relative">
|
||||
<option>모든 과목</option>
|
||||
<option>수학 I</option>
|
||||
<option>영어</option>
|
||||
<option>국어</option>
|
||||
<option>생명과학 I</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="bg-surface border border-border rounded-lg py-2.5 px-4 text-sm text-gray-300 focus:outline-none focus:border-indigo-500/50 appearance-none pr-8">
|
||||
<option>최근 7일</option>
|
||||
<option>최근 30일</option>
|
||||
<option>이번 달</option>
|
||||
<option>전체 기간</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface/50 border border-border rounded-2xl overflow-hidden flex flex-col">
|
||||
<div class="grid grid-cols-12 gap-4 p-4 border-b border-border bg-surface/80 text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
<div class="col-span-5">학습 항목</div>
|
||||
<div class="col-span-2 text-center">결과</div>
|
||||
<div class="col-span-2 text-center">소요 시간</div>
|
||||
<div class="col-span-3 text-right">학습 일시</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-border overflow-y-auto max-h-[600px]">
|
||||
<div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-surfaceHover transition-colors group">
|
||||
<div class="col-span-5 flex flex-col gap-1">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">24학년도 9평 수학 15번</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">수학 I</span>
|
||||
<span class="text-[11px] text-gray-500">수열의 귀납적 정의</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-1 rounded text-xs font-medium">
|
||||
<i class="ph-bold ph-check"></i>
|
||||
정답
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center text-sm font-mono text-gray-400">
|
||||
03:42
|
||||
</div>
|
||||
<div class="col-span-3 text-right flex flex-col gap-0.5">
|
||||
<span class="text-sm text-gray-300">오늘</span>
|
||||
<span class="text-xs text-gray-500 font-mono">14:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-surfaceHover transition-colors group">
|
||||
<div class="col-span-5 flex flex-col gap-1">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">영단어 Day 12 복습 세트</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">영어</span>
|
||||
<span class="text-[11px] text-gray-500">어휘</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="flex items-center gap-1.5 bg-amber-500/10 text-amber-400 border border-amber-500/20 px-2 py-1 rounded text-xs font-medium">
|
||||
<i class="ph-bold ph-triangle"></i>
|
||||
부분 정답
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center text-sm font-mono text-gray-400">
|
||||
08:15
|
||||
</div>
|
||||
<div class="col-span-3 text-right flex flex-col gap-0.5">
|
||||
<span class="text-sm text-gray-300">오늘</span>
|
||||
<span class="text-xs text-gray-500 font-mono">13:45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-surfaceHover transition-colors group">
|
||||
<div class="col-span-5 flex flex-col gap-1">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">23학년도 수능 국어 11번</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">국어</span>
|
||||
<span class="text-[11px] text-gray-500">독서 · 과학기술 지문</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="flex items-center gap-1.5 bg-rose-500/10 text-rose-400 border border-rose-500/20 px-2 py-1 rounded text-xs font-medium">
|
||||
<i class="ph-bold ph-x"></i>
|
||||
오답
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center text-sm font-mono text-gray-400">
|
||||
05:20
|
||||
</div>
|
||||
<div class="col-span-3 text-right flex flex-col gap-0.5">
|
||||
<span class="text-sm text-gray-300">오늘</span>
|
||||
<span class="text-xs text-gray-500 font-mono">12:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-surfaceHover transition-colors group">
|
||||
<div class="col-span-5 flex flex-col gap-1">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">EBS 수특 영어 5강 3번</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">영어</span>
|
||||
<span class="text-[11px] text-gray-500">빈칸 추론</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-1 rounded text-xs font-medium">
|
||||
<i class="ph-bold ph-check"></i>
|
||||
정답
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center text-sm font-mono text-gray-400">
|
||||
02:10
|
||||
</div>
|
||||
<div class="col-span-3 text-right flex flex-col gap-0.5">
|
||||
<span class="text-sm text-gray-300">어제</span>
|
||||
<span class="text-xs text-gray-500 font-mono">21:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 p-4 items-center hover:bg-surfaceHover transition-colors group">
|
||||
<div class="col-span-5 flex flex-col gap-1">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">물리학 I 역학 모의고사 1회</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] bg-white/5 text-gray-400 px-1.5 py-0.5 rounded border border-white/5">과학탐구</span>
|
||||
<span class="text-[11px] text-gray-500">물리학 I · 뉴턴 역학</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-1 rounded text-xs font-medium">
|
||||
<i class="ph-bold ph-check"></i>
|
||||
정답
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex justify-center text-sm font-mono text-gray-400">
|
||||
12:45
|
||||
</div>
|
||||
<div class="col-span-3 text-right flex flex-col gap-0.5">
|
||||
<span class="text-sm text-gray-300">어제</span>
|
||||
<span class="text-xs text-gray-500 font-mono">19:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t border-border bg-surface/30 flex items-center justify-between">
|
||||
<span class="text-sm text-gray-500">총 124개 항목 중 1-5</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-border text-gray-500 hover:text-white hover:bg-surfaceHover transition-colors disabled:opacity-50" disabled="">
|
||||
<i class="ph-bold ph-caret-left"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-medium text-sm">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-border text-gray-400 hover:text-white hover:bg-surfaceHover transition-colors font-medium text-sm">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-border text-gray-400 hover:text-white hover:bg-surfaceHover transition-colors font-medium text-sm">3</button>
|
||||
<span class="px-1 text-gray-600">...</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-border text-gray-500 hover:text-white hover:bg-surfaceHover transition-colors">
|
||||
<i class="ph-bold ph-caret-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
336
.claude/archive/designs/design-11.html
Normal file
336
.claude/archive/designs/design-11.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 통계</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #0F0F14; }
|
||||
::-webkit-scrollbar-thumb { background: #2A2A35; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #3A3A45; }
|
||||
|
||||
.heatmap-cell { transition: all 0.2s ease; cursor: pointer; }
|
||||
.heatmap-cell:hover { transform: scale(1.15); z-index: 10; border-radius: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-book-open text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-indigo-500/20 text-indigo-300 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-trend-up text-lg text-indigo-400"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] right-[10%] w-[600px] h-[600px] bg-indigo-500/5 rounded-full blur-[150px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-10 relative z-10">
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white flex items-center gap-2">
|
||||
학습 통계
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-1">지금까지의 성장을 데이터로 확인하세요.</p>
|
||||
</div>
|
||||
<div class="flex bg-surface border border-border rounded-lg p-1">
|
||||
<button class="px-4 py-1.5 text-sm font-medium bg-white/10 text-white rounded shadow-sm">이번 주</button>
|
||||
<button class="px-4 py-1.5 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors rounded">이번 달</button>
|
||||
<button class="px-4 py-1.5 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors rounded">전체</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<div class="col-span-2 bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6 flex flex-col relative">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="ph ph-calendar-blank text-gray-400 text-lg"></i>
|
||||
<h2 class="text-sm font-medium text-gray-200">학습 히트맵</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500 font-mono">
|
||||
<span>적음</span>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-3 h-3 rounded-sm bg-surfaceHover border border-border"></div>
|
||||
<div class="w-3 h-3 rounded-sm bg-indigo-500/20"></div>
|
||||
<div class="w-3 h-3 rounded-sm bg-indigo-500/40"></div>
|
||||
<div class="w-3 h-3 rounded-sm bg-indigo-500/60"></div>
|
||||
<div class="w-3 h-3 rounded-sm bg-indigo-500"></div>
|
||||
</div>
|
||||
<span>많음</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<div class="flex gap-2 w-full justify-between">
|
||||
<div class="flex flex-col gap-2 text-[10px] font-mono text-gray-500 mt-6 mr-1 justify-between">
|
||||
<span>Mon</span>
|
||||
<span>Wed</span>
|
||||
<span>Fri</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 flex-1">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-gray-500 mb-1">Oct</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/80 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/80 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-gray-500 mb-1">Nov</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/80 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-transparent mb-1">-</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/80 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-surfaceHover border border-border heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-[10px] font-mono text-gray-500 mb-1">Dec</span>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/20 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/80 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500 heatmap-cell shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/60 heatmap-cell"></div>
|
||||
<div class="w-4 h-4 rounded-sm bg-indigo-500/40 heatmap-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface/80 backdrop-blur-md border border-border rounded-2xl p-6 flex flex-col relative">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="ph ph-chart-pie-slice text-gray-400 text-lg"></i>
|
||||
<h2 class="text-sm font-medium text-gray-200">과목별 정답률</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-300">수학 I</span>
|
||||
<span class="text-sm font-mono text-white">82%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 rounded-full" style="width: 82%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-300">수학 II</span>
|
||||
<span class="text-sm font-mono text-white">76%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-400 rounded-full" style="width: 76%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-300">생명과학 I</span>
|
||||
<span class="text-sm font-mono text-white">88%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 rounded-full" style="width: 88%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-300">영어</span>
|
||||
<span class="text-sm font-mono text-white">65%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surfaceHover rounded-full overflow-hidden">
|
||||
<div class="h-full bg-amber-500 rounded-full" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="bg-surface/50 border border-border rounded-2xl p-6 flex flex-col">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="ph ph-chart-line-up text-gray-400 text-lg"></i>
|
||||
<h2 class="text-sm font-medium text-gray-200">마스터리 성장 곡선 (P-value)</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-indigo-500"></div>
|
||||
<span class="text-xs text-gray-400">수학 I</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<span class="text-xs text-gray-400">생명과학 I</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-64 relative w-full mt-4 border-l border-b border-border">
|
||||
<div class="absolute -left-6 bottom-0 text-[10px] font-mono text-gray-500">0.0</div>
|
||||
<div class="absolute -left-6 bottom-1/2 text-[10px] font-mono text-gray-500">0.5</div>
|
||||
<div class="absolute -left-6 top-0 text-[10px] font-mono text-gray-500">1.0</div>
|
||||
|
||||
<div class="absolute left-0 bottom-1/2 w-full border-t border-dashed border-white/5"></div>
|
||||
<div class="absolute left-0 top-[10%] w-full border-t border-dashed border-emerald-500/20">
|
||||
<span class="absolute -top-4 right-0 text-[10px] font-mono text-emerald-500/50">마스터리 임계점 (P=0.9)</span>
|
||||
</div>
|
||||
|
||||
<svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
|
||||
<path d="M 0,90 Q 20,80 40,50 T 80,20 T 100,10" fill="none" stroke="#4F46E5" stroke-width="2" vector-effect="non-scaling-stroke"></path>
|
||||
<path d="M 0,95 Q 30,85 50,60 T 70,30 T 100,20" fill="none" stroke="#10B981" stroke-width="2" vector-effect="non-scaling-stroke" stroke-dasharray="4"></path>
|
||||
</svg>
|
||||
|
||||
<div class="absolute bottom-[-20px] left-0 w-full flex justify-between text-[10px] font-mono text-gray-500">
|
||||
<span>1주차</span>
|
||||
<span>2주차</span>
|
||||
<span>3주차</span>
|
||||
<span>4주차</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
375
.claude/archive/designs/design-12.html
Normal file
375
.claude/archive/designs/design-12.html
Normal file
@@ -0,0 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ReLoop - 학습 기록</title>
|
||||
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
display: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
bg: '#0F0F14',
|
||||
surface: '#15151C',
|
||||
surfaceHover: '#1A1A24',
|
||||
border: 'rgba(255, 255, 255, 0.06)',
|
||||
accent: {
|
||||
500: '#7C3AED',
|
||||
600: '#6D28D9',
|
||||
DEFAULT: '#4F46E5',
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F0F14;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2A2A35;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3A3A45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg text-gray-200 font-sans h-screen w-screen overflow-hidden flex antialiased selection:bg-indigo-500/30">
|
||||
|
||||
|
||||
<aside class="w-64 border-r border-border bg-bg/50 flex flex-col justify-between flex-shrink-0 z-10 backdrop-blur-xl relative">
|
||||
<div class="absolute top-0 left-0 w-full h-64 bg-indigo-500/5 blur-[80px] pointer-events-none"></div>
|
||||
|
||||
<div class="p-6 relative z-10">
|
||||
<div class="flex items-center gap-2 mb-10 text-white cursor-pointer group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-[0_0_15px_rgba(79,70,229,0.3)] group-hover:shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all">
|
||||
<i class="ph-bold ph-infinity text-xl text-white"></i>
|
||||
</div>
|
||||
<span class="font-display font-semibold text-xl tracking-tight">ReLoop</span>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-squares-four text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
대시보드
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-white font-medium border border-white/5 transition-colors">
|
||||
<i class="ph ph-book-open text-lg text-indigo-400"></i>
|
||||
학습 기록
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-arrows-clockwise text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
복습
|
||||
<span class="ml-auto text-[10px] font-mono bg-indigo-500/20 text-indigo-300 py-0.5 px-2 rounded-full">12</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-trend-up text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
통계
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors group">
|
||||
<i class="ph ph-folders text-lg group-hover:text-gray-200 transition-colors"></i>
|
||||
과목 및 태그
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-6 relative z-10 border-t border-border">
|
||||
<a href="#" class="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border border-border flex items-center justify-center text-sm font-medium text-gray-300">
|
||||
M
|
||||
</div>
|
||||
<div class="flex flex-col text-left flex-1">
|
||||
<span class="text-sm font-medium text-white">MinStudent</span>
|
||||
<span class="text-xs text-gray-500 font-mono">Pro Plan</span>
|
||||
</div>
|
||||
<i class="ph ph-caret-up text-gray-500 text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="flex-1 h-full overflow-y-auto relative">
|
||||
<div class="absolute top-[-20%] left-[20%] w-[500px] h-[500px] bg-violet-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-10 relative z-10 flex flex-col h-full">
|
||||
|
||||
<header class="flex justify-between items-end mb-8 flex-shrink-0">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-white flex items-center gap-2">
|
||||
학습 기록
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-1">모든 과거 복습 세션을 상세하게 확인하고 분석하세요.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 bg-surface border border-border text-gray-300 px-4 py-2 rounded-lg hover:bg-surfaceHover hover:text-white transition-colors text-sm font-medium shadow-[0_4px_14px_rgba(0,0,0,0.2)]">
|
||||
<i class="ph ph-download-simple"></i>
|
||||
CSV로 내보내기
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="bg-surface/50 border border-border rounded-2xl flex flex-col flex-1 overflow-hidden">
|
||||
|
||||
<div class="p-4 border-b border-border flex items-center justify-between gap-4 bg-surface/80 backdrop-blur-md sticky top-0 z-20">
|
||||
<div class="flex-1 relative max-w-md">
|
||||
<i class="ph ph-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
|
||||
<input type="text" placeholder="항목 이름, 과목, 또는 태그로 검색..." class="w-full bg-bg border border-border rounded-lg pl-9 pr-4 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center gap-2 px-3 py-2 bg-bg border border-border rounded-lg text-sm text-gray-300 hover:bg-surface hover:text-white transition-colors">
|
||||
<i class="ph ph-funnel"></i>
|
||||
과목 필터
|
||||
<i class="ph-bold ph-caret-down text-[10px] text-gray-500 ml-1"></i>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-3 py-2 bg-bg border border-border rounded-lg text-sm text-gray-300 hover:bg-surface hover:text-white transition-colors">
|
||||
<i class="ph ph-calendar-blank"></i>
|
||||
날짜
|
||||
<i class="ph-bold ph-caret-down text-[10px] text-gray-500 ml-1"></i>
|
||||
</button>
|
||||
<div class="w-px h-6 bg-border mx-2"></div>
|
||||
<div class="flex bg-bg border border-border rounded-lg p-0.5">
|
||||
<button class="px-2.5 py-1.5 rounded-md bg-surface text-white text-sm font-medium shadow-sm transition-colors">전체</button>
|
||||
<button class="px-2.5 py-1.5 rounded-md text-gray-400 hover:text-gray-200 text-sm font-medium transition-colors">정답</button>
|
||||
<button class="px-2.5 py-1.5 rounded-md text-gray-400 hover:text-gray-200 text-sm font-medium transition-colors">오답</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-1 overflow-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="sticky top-0 bg-surface/95 backdrop-blur-sm z-10 border-b border-border shadow-sm">
|
||||
<tr>
|
||||
<th class="py-3 px-6 text-xs font-medium text-gray-400 uppercase tracking-wider w-[40%]">항목 정보</th>
|
||||
<th class="py-3 px-6 text-xs font-medium text-gray-400 uppercase tracking-wider w-[20%]">과목 / 태그</th>
|
||||
<th class="py-3 px-6 text-xs font-medium text-gray-400 uppercase tracking-wider w-[15%]">날짜 및 시간</th>
|
||||
<th class="py-3 px-6 text-xs font-medium text-gray-400 uppercase tracking-wider w-[10%] text-center">결과</th>
|
||||
<th class="py-3 px-6 text-xs font-medium text-gray-400 uppercase tracking-wider w-[15%] text-right">자신감 (응답)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border">
|
||||
|
||||
<tr class="hover:bg-surface/80 transition-colors group cursor-default">
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">24학년도 9평 수학 15번</span>
|
||||
<span class="text-xs text-gray-500 mt-0.5">객관식 · 풀이 시간 3분 12초</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded flex items-center justify-center bg-blue-500/10 text-blue-400 border border-blue-500/20 flex-shrink-0">
|
||||
<i class="ph ph-function text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-300">수학 I</span>
|
||||
<span class="text-[10px] text-gray-500 truncate max-w-[120px]">수열의 귀납적 정의</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 font-mono">24.10.24</span>
|
||||
<span class="text-xs text-gray-500 font-mono">14:32</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-7 h-7 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
<i class="ph-bold ph-check text-sm"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-right">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="text-xs font-medium text-emerald-400">높음</span>
|
||||
<div class="flex gap-0.5">
|
||||
<div class="w-2 h-2 rounded-sm bg-emerald-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-emerald-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="hover:bg-surface/80 transition-colors group cursor-default">
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">영단어 Day 12 복습 세트</span>
|
||||
<span class="text-xs text-gray-500 mt-0.5">플래시카드 · 20단어</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded flex items-center justify-center bg-amber-500/10 text-amber-400 border border-amber-500/20 flex-shrink-0">
|
||||
<i class="ph ph-translate text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-300">영어</span>
|
||||
<span class="text-[10px] text-gray-500 truncate max-w-[120px]">어휘</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 font-mono">24.10.24</span>
|
||||
<span class="text-xs text-gray-500 font-mono">13:15</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-7 h-7 rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
||||
<i class="ph-bold ph-triangle text-sm"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-right">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="text-xs font-medium text-amber-400">보통</span>
|
||||
<div class="flex gap-0.5">
|
||||
<div class="w-2 h-2 rounded-sm bg-amber-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-amber-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-surfaceHover border border-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="hover:bg-surface/80 transition-colors group cursor-default">
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">23학년도 수능 국어 11번</span>
|
||||
<span class="text-xs text-gray-500 mt-0.5">객관식 · 풀이 시간 5분 40초</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded flex items-center justify-center bg-orange-500/10 text-orange-400 border border-orange-500/20 flex-shrink-0">
|
||||
<i class="ph ph-book-open-text text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-300">국어</span>
|
||||
<span class="text-[10px] text-gray-500 truncate max-w-[120px]">독서 · 과학기술 지문</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 font-mono">24.10.24</span>
|
||||
<span class="text-xs text-gray-500 font-mono">11:05</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-7 h-7 rounded bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
||||
<i class="ph-bold ph-x text-sm"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-right">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="text-xs font-medium text-rose-400">낮음</span>
|
||||
<div class="flex gap-0.5">
|
||||
<div class="w-2 h-2 rounded-sm bg-rose-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-surfaceHover border border-border"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-surfaceHover border border-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="hover:bg-surface/80 transition-colors group cursor-default">
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">EBS 수특 영어 5강 3번</span>
|
||||
<span class="text-xs text-gray-500 mt-0.5">주관식 · 풀이 시간 2분 10초</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded flex items-center justify-center bg-amber-500/10 text-amber-400 border border-amber-500/20 flex-shrink-0">
|
||||
<i class="ph ph-translate text-xs"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-300">영어</span>
|
||||
<span class="text-[10px] text-gray-500 truncate max-w-[120px]">빈칸 추론</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm text-gray-300 font-mono">24.10.23</span>
|
||||
<span class="text-xs text-gray-500 font-mono">21:40</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-7 h-7 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
<i class="ph-bold ph-check text-sm"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-4 px-6 text-right">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="text-xs font-medium text-amber-400">보통</span>
|
||||
<div class="flex gap-0.5">
|
||||
<div class="w-2 h-2 rounded-sm bg-amber-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-amber-500"></div>
|
||||
<div class="w-2 h-2 rounded-sm bg-surfaceHover border border-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-4 border-t border-border bg-surface/80 flex items-center justify-between text-sm text-gray-400">
|
||||
<span>총 1,432개의 기록 중 1-20 표시</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-1.5 rounded-md hover:bg-white/5 transition-colors text-gray-500 disabled:opacity-50" disabled="">
|
||||
<i class="ph-bold ph-caret-left"></i>
|
||||
</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 rounded-md bg-indigo-500/20 text-indigo-300 font-medium border border-indigo-500/30 flex items-center justify-center">1</button>
|
||||
<button class="w-8 h-8 rounded-md hover:bg-white/5 transition-colors flex items-center justify-center">2</button>
|
||||
<button class="w-8 h-8 rounded-md hover:bg-white/5 transition-colors flex items-center justify-center">3</button>
|
||||
<span class="px-1">...</span>
|
||||
<button class="w-8 h-8 rounded-md hover:bg-white/5 transition-colors flex items-center justify-center">72</button>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-md hover:bg-white/5 transition-colors text-gray-300 hover:text-white">
|
||||
<i class="ph-bold ph-caret-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
28
Plans.md
28
Plans.md
@@ -81,18 +81,22 @@
|
||||
|
||||
| Task | 내용 | DoD | Depends | Status |
|
||||
|------|------|-----|---------|--------|
|
||||
| 7D.1 | **AppShell (사이드바)** — 디자인 1(Dashboard) 의 `aside.w-64` 레이아웃. 로고 gradient, nav 5개, user plan badge, indigo glow radial. 모바일 반응형 (BottomNav 유지) | `/dashboard` 진입 시 새 사이드바 렌더, 활성 라우트 강조, 로그아웃 드롭다운 동작 | 7C.5 | cc:TODO |
|
||||
| 7D.2 | **Landing (`/`)** — 디자인 2의 nav + hero + screenshot mockup + features 3카드 + how-it-works 4단계 + stats 카운터 + pricing teaser + FAQ + footer. SSR/하이드레이션 fix (hasToken 체크를 middleware 쿠키로) | 로그아웃 상태에서 `/` 200, 모든 섹션 스크롤 애니메이션 동작, 로그인 사용자는 `/dashboard` 리다이렉트 | 7C.5 | cc:TODO |
|
||||
| 7D.3 | **Auth (`/login` + `/register`)** — 디자인 4의 단일 탭 카드 UI. 로그인/회원가입 토글, 이메일/비번/닉네임 필드, 에러 shake 애니메이션, "로그인 없이 체험하기" = 데모 계정 자동 로그인 | 두 경로 모두 같은 컴포넌트 사용 (URL path 로 초기 탭 결정). 기존 flow 유지 + 에러 UI | 7C.5 | cc:TODO |
|
||||
| 7D.4 | **Pricing (`/pricing`)** — 디자인 3의 월/연 토글, Free/Pro(가장 인기)/School 3 카드, "모든 플랜 공통 4 기능", 상세 기능 비교 테이블(3 섹션 구조), FAQ 4개, 바닥 CTA | 토글 동작 시 가격 숫자 애니메이션, 테이블 모바일 숨김, FAQ 아코디언 | 7C.5 | cc:TODO |
|
||||
| 7D.5 | **Dashboard filled (`/dashboard`)** — 디자인 1의 헤더 (오늘 N개 복습 대기) + streak 배지, 3 통계 카드 (큐/주간 정답률/마스터리 원형), 곧 내 것이 되는 영역 카드, 최근 학습 리스트, 적응형 학습 코치 배너. 실제 API (/dashboard/summary) 연동 | 데모 계정 로그인 후 `/dashboard` 에서 실데이터 렌더, 마스터리 원형 SVG + streak 숫자 정확 | 7D.1 | cc:TODO |
|
||||
| 7D.6 | **Dashboard empty (`/dashboard`)** — 디자인 8의 Welcome + 3단계 체크리스트. 조건: `subjects.length === 0 && studyLogs.length === 0` 에 자동 전환 | 신규 계정 (/register 직후) 은 empty 상태 렌더, 과목 1개 이상 생기면 filled 로 | 7D.5 | cc:TODO |
|
||||
| 7D.7 | **Review 세션 (`/review`)** — 디자인 5의 집중 모드 헤더 (뒤로 + ReLoop 로고 + 집중 모드 뱃지), Day N 제목 + 진행률 바 + 키보드 힌트, 카드 스택 (3 layer stacked), 과목 뱃지 + 회차 + 예측 P%, 메모 블록, 4 액션 버튼 (틀림/부분/맞음/스킵) 색상별, slide-toast "결과 기록됨 + undo 2s" | 2026 수학 문제 15개 큐에서 전부 처리 + undo 동작 + 단축키 1/2/3/S 전부 동작 | 7D.1 | cc:TODO |
|
||||
| 7D.8 | **Study History (`/study/history`)** — 디자인 11의 5 컬럼 테이블 (항목/과목·태그/날짜·시간/결과/자신감). 검색 + 과목 필터 + 날짜 필터 + 결과 탭. 페이지네이션 (20건/페이지) | `/api/study-logs` 전체 목록이 테이블 렌더, 필터 동작, 빈 상태 UI | 7D.1 | cc:TODO |
|
||||
| 7D.9 | **Subjects & Tags (`/subjects`)** — 디자인 7의 상단 tabs (전체/과목별), 과목 섹션 카드 (색상 dot + 이름 + 마스터리 %), 각 섹션 안에 태그 리스트 (P-value + bar + 수정/보관 액션) | /subjects 에서 실제 데이터 렌더, 태그 편집 인라인, 보관 soft archive 동작 | 7D.1 | cc:TODO |
|
||||
| 7D.10 | **Stats (`/stats`)** — 디자인 9 의 히트맵 (주×월 grid) + 과목별 정답률 bar 리스트 + 마스터리 P-value 성장 곡선 (SVG path). 기존 `/api/stats/*` + `/api/stats/mastery-path` 활용. 디자인 6 의 bar chart 는 옵션 | 3 패널 전부 실데이터 렌더, 곡선 mastery-path 응답 기반, 히트맵 클릭 시 해당 일 세부 표시 | 7D.1 | cc:TODO |
|
||||
| 7D.11 | **Settings/Profile (`/profile`)** — 디자인 9 의 계정 + Pro plan 카드, 학습 목표 슬라이더, 알고리즘 민감도 3 카드, 3 toggle 알림, 연속 학습 달력 (7 열 heatmap), 데이터 export / 진행 초기화 / 로그아웃 | 모든 설정이 `/me/profile` PATCH 와 연동, 변경사항 저장 시 즉시 반영 | 7D.1 | cc:TODO |
|
||||
| 7D.12 | **Study 폼 (`/study`)** — 디자인 제외 영역. 기존 기능(직접 입력 탭 + 문제집 탭) 유지 + Phase 7B 의 "내 문제집" 탭 추가. Tailwind 클래스로 재작성 | 3 탭 전환 동작, 자동 채움 플로우 유지, tailwind + primitives.tw 사용 | 7B.4, 7C.5 | cc:TODO |
|
||||
참조 디자인 파일: `/home/erang/reloop-v2/.claude/archive/designs/design-NN.html` (Tailwind 기반 mockup, styled-components 로 1:1 이식). **Tailwind 도입하지 않음** — 클래스를 styled-components CSS 로 변환.
|
||||
|
||||
| Task | 내용 | DoD | Depends | Status |
|
||||
|------|------|-----|---------|--------|
|
||||
| 7D.1 | **AppShell (사이드바)** — design-01.html 의 `aside.w-64` 레이아웃 (256px, 다크 bgDeep, indigo radial glow blur-80px, backdrop-blur-xl). 로고 indigo→violet gradient + Phosphor `ph-infinity`, nav 5 항목(대시보드/복습/학습 기록/통계/과목 및 태그) Phosphor icons, 활성 라우트 bg-white/5 + border-white/5, 하단 user card (아바타 + nickname + plan badge + caret 드롭다운). 모바일에서는 BottomNav 로 대체 | 기존 SideNav.tsx 교체, `/dashboard` 진입 시 새 사이드바 렌더, 활성 라우트 강조, 로그아웃 클릭 동작 | 7C.5 | cc:TODO |
|
||||
| 7D.2 | **Landing (`/`)** — design-02.html 1:1 이식. nav + hero "잊기 직전에 딱 한 번 더" + screenshot mockup + features 3카드 + how-it-works 4단계 + stats 카운터 + pricing teaser + FAQ + footer. SSR/하이드레이션 (로그인 상태면 `/dashboard` 리다이렉트는 middleware 쿠키) | 로그아웃 상태에서 `/` 200, 모든 섹션 렌더, 로그인 사용자는 `/dashboard` 리다이렉트 | 7C.5 | cc:TODO |
|
||||
| 7D.3 | **Auth (`/login` + `/register`)** — design-04.html 이식. 단일 카드 UI, 로그인/회원가입 탭 토글, 이메일/비번/닉네임 필드, 에러 shake 애니메이션, "로그인 없이 체험하기" = 데모 계정 자동 로그인 | 두 경로 모두 같은 컴포넌트 사용 (URL path 로 초기 탭 결정), 기존 auth flow 유지 + 에러 UI | 7C.5 | cc:TODO |
|
||||
| 7D.4 | **Pricing (`/pricing`)** — design-03.html 이식. 월/연 토글, Free/Pro(가장 인기)/School 3 카드, "모든 플랜 공통 4 기능", 상세 기능 비교 테이블(3 섹션 구조), FAQ 4개, 바닥 CTA | 토글 동작 시 가격 숫자 전환, 테이블 모바일 숨김, FAQ 아코디언 | 7C.5 | cc:TODO |
|
||||
| 7D.5 | **Dashboard filled (`/dashboard`)** — design-01.html 우측 main 영역 이식. 헤더 (오늘 N개 복습 대기 + streak 뱃지 `ph-fill ph-fire`), 3 통계 카드 (오늘 큐 / 주간 정답률 + sparkline / 마스터리 원형 SVG 34%), "곧 내 것이 되는 영역" 리스트, "최근 학습" 리스트, 적응형 학습 코치 배너. 실제 API (/dashboard/summary) 연동 | 데모 계정 로그인 후 `/dashboard` 에서 실데이터 렌더, 마스터리 원형 SVG + streak 숫자 정확 | 7D.1 | cc:TODO |
|
||||
| 7D.6 | **Dashboard empty (`/dashboard`)** — design-08.html 이식. Welcome + 3단계 체크리스트. 조건: `subjects.length === 0 && studyLogs.length === 0` 에 자동 전환 | 신규 계정 (/register 직후) 은 empty 상태 렌더, 과목 1개 이상 생기면 filled 로 | 7D.5 | cc:TODO |
|
||||
| 7D.7 | **Review 세션 (`/review`)** — design-05.html 이식. 집중 모드 헤더 (뒤로 + ReLoop 로고 + 집중 모드 뱃지), Day N 제목 + 진행률 바 + 키보드 힌트, 카드 스택 (3 layer stacked), 과목 뱃지 + 회차 + 예측 P%, 메모 블록, 4 액션 버튼 (틀림/부분/맞음/스킵) 색상별, Toast "결과 기록됨 + undo 2s" | 2026 큐에서 카드 전체 처리 + undo 동작 + 단축키 1/2/3/S | 7D.1 | cc:TODO |
|
||||
| 7D.8 | **Study History (`/study/history`)** — design-10.html 5 컬럼 테이블 (항목/과목·태그/날짜·시간/결과/자신감) 이식. 검색 + 과목 필터 + 날짜 필터 + 결과 탭. 페이지네이션 (20건/페이지). design-12.html 는 참고용 대안 | `/api/study-logs` 전체 목록이 테이블 렌더, 필터 동작, 빈 상태 UI | 7D.1 | cc:TODO |
|
||||
| 7D.9 | **Subjects & Tags (`/subjects`)** — design-07.html 이식. 상단 tabs (전체/과목별), 과목 섹션 카드 (색상 dot + 이름 + 마스터리 %), 각 섹션 안에 태그 리스트 (P-value + bar + 수정/보관 액션) | /subjects 에서 실제 데이터 렌더, 태그 편집 인라인, 보관 soft archive 동작 | 7D.1 | cc:TODO |
|
||||
| 7D.10 | **Stats (`/stats`)** — design-11.html 이식. 학습 히트맵 (주×월 grid) + 과목별 정답률 bar 리스트 + 마스터리 P-value 성장 곡선 (SVG path). 기존 `/api/stats/*` + `/api/stats/mastery-path` 활용. design-06.html 는 참고용 대안 | 3 패널 전부 실데이터 렌더, 곡선 mastery-path 응답 기반 | 7D.1 | cc:TODO |
|
||||
| 7D.11 | **Settings/Profile (`/profile`)** — design-09.html 이식. 계정 + Pro plan 카드, 학습 목표 슬라이더, 알고리즘 민감도 3 카드, 3 toggle 알림, 연속 학습 달력 (7 열 heatmap), 데이터 export / 진행 초기화 / 로그아웃 | 모든 설정이 `/me/profile` PATCH 와 연동, 변경사항 저장 시 즉시 반영 | 7D.1 | cc:TODO |
|
||||
| 7D.12 | **Study 폼 (`/study`)** — 디자인 제외 영역. 기존 기능 유지 + Phase 7B 의 "내 문제집" 탭 추가는 7B 에서. 이 태스크는 기존 탭들을 새 theme/primitives 로 시각적 통일만 | 기존 플로우 유지, 새 theme 컬러/폰트 적용 | 7C.5 | cc:TODO |
|
||||
|
||||
### Phase 7E — 감사 + 배포
|
||||
|
||||
|
||||
Reference in New Issue
Block a user