mirror of
https://github.com/Zetaphor/browser-recall.git
synced 2025-12-06 10:29:38 +00:00
Add a basic UI
This commit is contained in:
64
app/templates/base.html
Normal file
64
app/templates/base.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Browser History{% endblock %}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#60a5fa',
|
||||
dark: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark-900 text-gray-100">
|
||||
<nav class="bg-dark-800 shadow-lg border-b border-dark-700">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<a href="/" class="text-xl font-bold text-primary">Browser History</a>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="/"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Home</a>
|
||||
<a href="/search"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Search</a>
|
||||
<a href="/bookmarks"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Bookmarks</a>
|
||||
<a href="/docs"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">API
|
||||
Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
32
app/templates/bookmarks.html
Normal file
32
app/templates/bookmarks.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Browser History - Bookmarks{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow overflow-hidden sm:rounded-lg border border-dark-700">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-100">Bookmarks</h3>
|
||||
</div>
|
||||
<div class="border-t border-dark-700">
|
||||
<ul class="divide-y divide-gray-200" id="bookmarks-list">
|
||||
{% for bookmark in bookmarks %}
|
||||
<li class="px-4 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
{{ bookmark.domain }} • {{ bookmark.added_time }}
|
||||
{% if bookmark.folder %}
|
||||
<span class="ml-2 px-2 py-1 text-xs rounded-full bg-dark-700 text-gray-300">{{ bookmark.folder }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
29
app/templates/index.html
Normal file
29
app/templates/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Browser History - Home{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow overflow-hidden sm:rounded-lg border border-dark-700">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-100">Recent History</h3>
|
||||
</div>
|
||||
<div class="border-t border-dark-700">
|
||||
<ul class="divide-y divide-gray-200" id="history-list">
|
||||
{% for entry in entries %}
|
||||
<li class="px-4 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<a href="{{ entry.url }}" target="_blank">{{ entry.title }}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
{{ entry.domain }} • {{ entry.visit_time }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
82
app/templates/search.html
Normal file
82
app/templates/search.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Browser History - Search{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow sm:rounded-lg p-6 border border-dark-700">
|
||||
<form id="search-form" class="space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="search-term" class="block text-sm font-medium text-gray-300">Search Term</label>
|
||||
<input type="text" name="search-term" id="search-term"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
</div>
|
||||
<div>
|
||||
<label for="domain" class="block text-sm font-medium text-gray-300">Domain</label>
|
||||
<input type="text" name="domain" id="domain"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
</div>
|
||||
<div>
|
||||
<label for="start-date" class="block text-sm font-medium text-gray-300">Start Date</label>
|
||||
<input type="date" name="start-date" id="start-date"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end-date" class="block text-sm font-medium text-gray-300">End Date</label>
|
||||
<input type="date" name="end-date" id="end-date"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="results" class="mt-8">
|
||||
<div class="border-t border-dark-700 mt-4">
|
||||
<ul class="divide-y divide-gray-200" id="search-results">
|
||||
<!-- Results will be populated here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('search-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const searchTerm = document.getElementById('search-term').value;
|
||||
const domain = document.getElementById('domain').value;
|
||||
const startDate = document.getElementById('start-date').value;
|
||||
const endDate = document.getElementById('end-date').value;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) params.append('search_term', searchTerm);
|
||||
if (domain) params.append('domain', domain);
|
||||
if (startDate) params.append('start_date', startDate);
|
||||
if (endDate) params.append('end_date', endDate);
|
||||
|
||||
const response = await fetch(`/history/search?${params.toString()}`);
|
||||
const results = await response.json();
|
||||
|
||||
const resultsContainer = document.getElementById('search-results');
|
||||
resultsContainer.innerHTML = results.map(entry => `
|
||||
<li class="px-4 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<a href="${entry.url}" target="_blank">${entry.title}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`).join('');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user