<!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">
<!-- Simple Navigation -->
<div class="bg-white border-b border-gray-200">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<button id="back-btn" class="flex items-center text-indigo-600 hover:text-indigo-800">
<i class="fas fa-arrow-left mr-2"></i>
뒤로
</button>
<div class="flex-1 text-center">
<h1 id="detail-title" class="text-lg font-semibold text-gray-900 truncate px-4"></h1>
</div>
<div class="w-16"></div> <!-- 균형 맞추기 -->
</div>
</div>
</div>
<div class="max-w-4xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Metadata -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">제목</label>
<p id="detail-title-display" class="px-3 py-2 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">마지막 대화</label>
<p id="detail-date" class="px-3 py-2 text-gray-900"></p>
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-2">태그</label>
<div id="detail-tags" class="flex flex-wrap gap-2"></div>
</div>
<div class="mt-6 pt-4 border-t border-gray-200">
<div class="flex justify-end space-x-3">
<button id="download-conversation" class="inline-flex items-center px-3 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
<i class="fas fa-download mr-2 text-xs"></i>다운로드
</button>
<button id="delete-conversation" class="inline-flex items-center px-3 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-red-50 hover:text-red-600 rounded-md transition-colors">
<i class="fas fa-trash mr-2 text-xs"></i>삭제
</button>
</div>
</div>
</div>
<!-- Messages -->
<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>
<p class="text-sm text-gray-600">총 <span id="message-count">0</span>개 메시지</p>
</div>
<div id="messages-container" class="divide-y divide-gray-200">
<!-- Messages 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>
<!-- Login Modal -->
<div id="login-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">로그인</h2>
<form id="login-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="password"
required
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
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
로그인
</button>
<p class="mt-4 text-center text-sm text-gray-600">
계정이 없으신가요?
<button type="button" id="show-register" class="text-indigo-600 hover:text-indigo-500">회원가입</button>
</p>
</form>
</div>
</div>
<!-- Register Modal -->
<div id="register-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">회원가입</h2>
<form id="register-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="register-email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="register-password"
required
minlength="6"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<p class="mt-1 text-sm text-gray-500">최소 6자 이상</p>
</div>
<button
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
회원가입
</button>
<p class="mt-4 text-center text-sm text-gray-600">
이미 계정이 있으신가요?
<button type="button" id="show-login" class="text-indigo-600 hover:text-indigo-500">로그인</button>
</p>
</form>
</div>
</div>
<script src="/static/js/conversation.js"></script>
</body>
</html>