<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eternity MCP</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Outfit', sans-serif;
}
h1,
h2,
h3 {
font-family: 'Clash Display', sans-serif;
}
</style>
</head>
<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col items-center py-12 px-4">
<div class="w-full max-w-2xl">
<header class="mb-10 text-center">
<h1
class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-violet-600 mb-2">
Eternity MCP</h1>
<p class="text-slate-500">Your eternal second brain.</p>
</header>
<!-- Add Memory Form -->
<div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-indigo-50">
<h2 class="text-xl font-semibold mb-6 flex items-center gap-2">
<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-indigo-600">
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</svg>
Add Memory
</h2>
<form action="/add" method="post" enctype="multipart/form-data" class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Content</label>
<textarea name="content" rows="3"
class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
placeholder="What do you want to remember?"></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Tags (comma separated)</label>
<input type="text" name="tags"
class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
placeholder="work, ideas, links">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Attachment</label>
<input type="file" name="file"
class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all">
</div>
</div>
<div class="pt-2">
<button type="submit"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-xl shadow-lg shadow-indigo-200 transition-all transform active:scale-[0.98]">
Save Memory
</button>
</div>
</form>
{% if error %}
<div class="mt-4 p-3 bg-red-50 text-red-600 rounded-lg text-sm text-center">
{{ error }}
</div>
{% endif %}
</div>
<!-- Search Section -->
<div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-indigo-50">
<h2 class="text-xl font-semibold mb-6 flex items-center gap-2">
<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-indigo-600">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
Search
</h2>
<form action="/search_ui" method="get" class="flex gap-2">
<input type="text" name="q" value="{{ query if query else '' }}"
class="flex-1 px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
placeholder="Search your second brain...">
<button type="submit"
class="bg-slate-800 hover:bg-slate-900 text-white px-6 rounded-lg font-medium transition-colors">Search</button>
</form>
{% if search_results %}
<div class="mt-6 space-y-4">
<h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Top Results</h3>
{% for result in search_results %}
<div class="p-4 rounded-xl bg-indigo-50 border border-indigo-100 transition-all">
<p class="text-slate-800 mb-2">{{ result.content[:300] }}{{ '...' if result.content|length > 300
else '' }}</p>
<div class="flex flex-wrap gap-2 items-center justify-between text-xs">
<div class="flex gap-2">
{% for tag in result.tags %}
<span
class="px-2 py-1 rounded-md bg-white text-indigo-600 font-medium border border-indigo-100">#{{
tag }}</span>
{% endfor %}
</div>
<span class="text-indigo-400 font-medium">Score: {{ "%.2f"|format(result.distance) }}</span>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Recent Memories -->
{% if not search_results %}
<div class="space-y-4">
<h3 class="text-lg font-semibold text-slate-700 px-2">Recent Memories</h3>
{% for memory in memories %}
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
<div class="mb-3 prose prose-slate max-w-none text-slate-600">
{{ memory.content[:200] }}{{ '...' if memory.content|length > 200 else '' }}
</div>
<div class="flex items-center justify-between">
<div class="flex gap-2 flex-wrap">
{% for tag in memory.tags %}
<span class="px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs font-medium">#{{ tag
}}</span>
{% endfor %}
{% if memory.file_path %}
<span
class="px-2 py-1 rounded-full bg-orange-50 text-orange-600 text-xs font-medium border border-orange-100 flex items-center gap-1">
📎 {{ memory.file_type.split('/')[-1] if memory.file_type else 'File' }}
</span>
{% endif %}
</div>
<span class="text-xs text-slate-400">{{ memory.created_at[:10] }}</span>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</body>
</html>
