<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pensieve - 대화 관리</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
color: '#374151',
pre: {
backgroundColor: '#f3f4f6',
color: '#1f2937',
},
code: {
backgroundColor: '#f3f4f6',
color: '#1f2937',
padding: '0.125rem 0.25rem',
borderRadius: '0.25rem',
fontWeight: '500'
},
'code::before': {
content: '""'
},
'code::after': {
content: '""'
}
}
}
}
}
},
plugins: [
require('@tailwindcss/typography')
]
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.2/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/timezone.js"></script>
<style>
/* Custom markdown styles */
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-code: #1f2937;
--tw-prose-pre-code: #1f2937;
--tw-prose-pre-bg: #f3f4f6;
}
.prose pre {
background-color: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.prose code {
background-color: #f3f4f6;
color: #1f2937;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-weight: 500;
font-size: 0.875em;
}
.prose pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
font-weight: 400;
}
.prose blockquote {
border-left: 4px solid #6366f1;
background-color: #f8fafc;
padding: 0.5rem 1rem;
margin: 1rem 0;
}
.prose table {
border-collapse: collapse;
width: 100%;
}
.prose th, .prose td {
border: 1px solid #e5e7eb;
padding: 0.5rem;
text-align: left;
}
.prose th {
background-color: #f3f4f6;
font-weight: 600;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<h1 class="text-xl font-bold text-indigo-600">🔮 Pensieve</h1>
</div>
</div>
<div class="flex items-center space-x-4">
<span id="username" class="text-gray-700"></span>
<button id="logout-btn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Dashboard Header -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900">대화 관리</h2>
<p class="mt-1 text-sm text-gray-600">저장된 AI 대화를 관리하고 검색하세요</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-comments text-indigo-600 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">총 대화</p>
<p id="total-conversations" class="text-2xl font-semibold text-gray-900">-</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-calendar text-green-600 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">이번 달</p>
<p id="month-conversations" class="text-2xl font-semibold text-gray-900">-</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-tags text-purple-600 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">태그</p>
<p id="total-tags" class="text-2xl font-semibold text-gray-900">-</p>
</div>
</div>
</div>
</div>
<!-- Search and Filter -->
<div class="bg-white rounded-lg shadow mb-6">
<div class="p-6">
<div class="flex flex-col sm:flex-row gap-4">
<div class="flex-1">
<input
type="text"
id="search-input"
placeholder="대화 검색..."
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<button id="search-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
<i class="fas fa-search mr-2"></i>검색
</button>
</div>
</div>
</div>
<!-- Conversations List -->
<div class="bg-white rounded-lg shadow">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">저장된 대화</h3>
</div>
<div id="conversations-list" class="divide-y divide-gray-200">
<!-- Conversations will be loaded here -->
<div class="p-6 text-center text-gray-500">
<i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
<p>대화를 불러오는 중...</p>
</div>
</div>
</div>
</div>
<script src="/static/js/dashboard.js"></script>
</body>
</html>