summaryrefslogtreecommitdiff
path: root/web/templates
diff options
context:
space:
mode:
Diffstat (limited to 'web/templates')
-rw-r--r--web/templates/index.html57
-rw-r--r--web/templates/login.html21
-rw-r--r--web/templates/partials/error-banner.html4
-rw-r--r--web/templates/partials/planning-tab.html31
-rw-r--r--web/templates/partials/plantoeat-meals.html18
-rw-r--r--web/templates/partials/tasks-tab.html60
-rw-r--r--web/templates/partials/todoist-tasks.html34
-rw-r--r--web/templates/partials/trello-board.html22
-rw-r--r--web/templates/partials/trello-boards.html16
9 files changed, 148 insertions, 115 deletions
diff --git a/web/templates/index.html b/web/templates/index.html
index da27e74..f525a09 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -72,7 +72,8 @@
<!-- Unified Action Button (FAB) -->
<button onclick="openActionModal()"
- class="fixed bottom-4 right-4 bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-full shadow-lg no-print"
+ class="fixed bottom-4 right-4 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white p-4 rounded-full no-print"
+ style="box-shadow: 0 0 12px black;"
title="Quick Actions (Ctrl+K)">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
@@ -80,20 +81,20 @@
</button>
<!-- Unified Action Modal -->
- <div id="action-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
- <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
- <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+ <div id="action-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
+ <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+ <div class="p-4 border-b border-white/10 flex justify-between items-center">
<div class="flex gap-2">
<button onclick="switchActionTab('add')" id="tab-add"
- class="px-3 py-1 rounded-lg text-sm font-medium bg-primary-100 text-primary-700">
+ class="px-3 py-1 rounded-lg text-sm font-medium bg-white/20 text-white">
✓ Quick Add
</button>
<button onclick="switchActionTab('bug')" id="tab-bug"
- class="px-3 py-1 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100">
+ class="px-3 py-1 rounded-lg text-sm font-medium text-white/60 hover:bg-white/10">
🐛 Bug
</button>
</div>
- <button onclick="closeActionModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+ <button onclick="closeActionModal()" class="text-white/40 hover:text-white">✕</button>
</div>
<!-- Quick Add Tab -->
@@ -104,21 +105,21 @@
<input type="text"
name="title"
placeholder="Task name..."
- class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3"
+ class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
required
autofocus>
<div class="flex gap-2 mb-3">
<input type="date"
name="due_date"
id="modal-add-date"
- class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm">
- <select name="source" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
+ class="flex-1 bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+ <select name="source" class="bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
<option value="todoist">Todoist</option>
<option value="trello">Trello</option>
</select>
</div>
<button type="submit"
- class="w-full bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
+ class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium">
Add Task
</button>
</form>
@@ -132,20 +133,20 @@
hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); }">
<textarea name="description"
placeholder="Describe the bug..."
- class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3 h-24"
+ class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
required></textarea>
<button type="submit"
- class="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
+ class="w-full bg-red-900/50 hover:bg-red-900/70 text-red-300 px-4 py-2 rounded-lg text-sm font-medium">
Submit Bug Report
</button>
</form>
- <div class="mt-4 border-t border-gray-200 pt-4">
- <h3 class="text-sm font-medium text-gray-700 mb-2">Recent Reports</h3>
+ <div class="mt-4 border-t border-white/10 pt-4">
+ <h3 class="text-sm font-medium text-white/70 mb-2">Recent Reports</h3>
<div id="bug-list"
class="max-h-32 overflow-y-auto"
hx-get="/bugs"
hx-trigger="load">
- <p class="text-gray-400 text-sm">Loading...</p>
+ <p class="text-white/40 text-sm">Loading...</p>
</div>
</div>
</div>
@@ -171,12 +172,12 @@
function switchActionTab(tab) {
document.getElementById('panel-add').classList.toggle('hidden', tab !== 'add');
document.getElementById('panel-bug').classList.toggle('hidden', tab !== 'bug');
- document.getElementById('tab-add').classList.toggle('bg-primary-100', tab === 'add');
- document.getElementById('tab-add').classList.toggle('text-primary-700', tab === 'add');
- document.getElementById('tab-add').classList.toggle('text-gray-600', tab !== 'add');
- document.getElementById('tab-bug').classList.toggle('bg-red-100', tab === 'bug');
- document.getElementById('tab-bug').classList.toggle('text-red-700', tab === 'bug');
- document.getElementById('tab-bug').classList.toggle('text-gray-600', tab !== 'bug');
+ document.getElementById('tab-add').classList.toggle('bg-white/20', tab === 'add');
+ document.getElementById('tab-add').classList.toggle('text-white', tab === 'add');
+ document.getElementById('tab-add').classList.toggle('text-white/60', tab !== 'add');
+ document.getElementById('tab-bug').classList.toggle('bg-red-900/50', tab === 'bug');
+ document.getElementById('tab-bug').classList.toggle('text-red-300', tab === 'bug');
+ document.getElementById('tab-bug').classList.toggle('text-white/60', tab !== 'bug');
}
// Keyboard shortcut: Ctrl+K or Cmd+K
document.addEventListener('keydown', function(e) {
@@ -200,14 +201,14 @@
</script>
<!-- Task Edit Modal -->
- <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
- <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
- <div class="p-4 border-b border-gray-200 flex justify-between items-center">
- <h2 class="font-semibold text-gray-900">Edit Task</h2>
- <button onclick="closeTaskModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+ <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
+ <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+ <div class="p-4 border-b border-white/10 flex justify-between items-center">
+ <h2 class="font-medium text-white">Edit Task</h2>
+ <button onclick="closeTaskModal()" class="text-white/40 hover:text-white">✕</button>
</div>
<div id="task-edit-content">
- <p class="p-4 text-gray-500 text-sm">Loading...</p>
+ <p class="p-4 text-white/50 text-sm">Loading...</p>
</div>
</div>
</div>
diff --git a/web/templates/login.html b/web/templates/login.html
index e255de8..ce72dc0 100644
--- a/web/templates/login.html
+++ b/web/templates/login.html
@@ -6,14 +6,17 @@
<title>Login - Personal Dashboard</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
+ <style>
+ .text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; }
+ </style>
</head>
-<body class="min-h-screen flex items-center justify-center bg-gray-50">
+<body class="min-h-screen flex items-center justify-center bg-gray-900" style="background-image: url('https://picsum.photos/1920/1080?random=login'); background-size: cover; background-position: center;">
<div class="w-full max-w-md p-8">
- <div class="bg-white rounded-xl shadow-lg p-8">
- <h1 class="text-2xl font-bold text-gray-900 text-center mb-8">Personal Dashboard</h1>
+ <div class="bg-black/60 backdrop-blur-sm rounded-xl p-8 text-shadow" style="box-shadow: 0 0 12px black;">
+ <h1 class="text-2xl font-light text-white text-center mb-8 tracking-wide">Personal Dashboard</h1>
{{if .Error}}
- <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+ <div class="mb-6 p-4 bg-red-900/50 border border-red-500/30 rounded-lg text-red-300 text-sm">
{{.Error}}
</div>
{{end}}
@@ -21,7 +24,7 @@
<form method="POST" action="/login" class="space-y-6">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
<div>
- <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
+ <label for="username" class="block text-sm font-medium text-white/70 mb-2">
Username
</label>
<input
@@ -30,12 +33,12 @@
name="username"
required
autofocus
- class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
+ class="w-full px-4 py-3 bg-black/40 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30 transition-colors"
placeholder="Enter your username">
</div>
<div>
- <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+ <label for="password" class="block text-sm font-medium text-white/70 mb-2">
Password
</label>
<input
@@ -43,13 +46,13 @@
id="password"
name="password"
required
- class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
+ class="w-full px-4 py-3 bg-black/40 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30 transition-colors"
placeholder="Enter your password">
</div>
<button
type="submit"
- class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition-colors">
+ class="w-full bg-white/20 hover:bg-white/30 text-white font-medium py-3 px-4 rounded-lg transition-colors">
Sign In
</button>
</form>
diff --git a/web/templates/partials/error-banner.html b/web/templates/partials/error-banner.html
index eb4c08d..628424f 100644
--- a/web/templates/partials/error-banner.html
+++ b/web/templates/partials/error-banner.html
@@ -1,7 +1,7 @@
{{define "error-banner"}}
{{if .Errors}}
-<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
- <p class="font-bold">Errors:</p>
+<div class="bg-red-900/50 border border-red-500/30 text-red-300 px-4 py-3 rounded-lg mb-6">
+ <p class="font-medium">Errors:</p>
<ul class="list-disc list-inside">
{{range .Errors}}
<li>{{.}}</li>
diff --git a/web/templates/partials/planning-tab.html b/web/templates/partials/planning-tab.html
index f2beda5..17879ff 100644
--- a/web/templates/partials/planning-tab.html
+++ b/web/templates/partials/planning-tab.html
@@ -1,6 +1,35 @@
{{define "planning-tab"}}
<div class="space-y-6">
+ <!-- Google Calendar Events -->
+ {{if .Events}}
+ <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/10">
+ <h2 class="text-xl font-semibold mb-4 flex items-center gap-2 text-shadow-sm">
+ <span>📅</span> Upcoming Events
+ </h2>
+ <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+ {{range .Events}}
+ <a href="{{.HTMLLink}}" target="_blank" class="block bg-white/5 hover:bg-white/10 transition-colors rounded-lg p-3 border border-white/5 group">
+ <div class="flex justify-between items-start mb-1">
+ <h3 class="font-medium text-white group-hover:text-primary-300 transition-colors truncate">{{.Summary}}</h3>
+ <span class="text-xs text-white/50 bg-white/10 px-1.5 py-0.5 rounded">{{.Start.Format "Jan 2"}}</span>
+ </div>
+ <div class="text-xs text-white/60 mb-1">
+ {{if eq (.Start.Format "15:04") "00:00"}}
+ All Day
+ {{else}}
+ {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
+ {{end}}
+ </div>
+ {{if .Description}}
+ <p class="text-xs text-white/40 line-clamp-2">{{.Description}}</p>
+ {{end}}
+ </a>
+ {{end}}
+ </div>
+ </div>
+ {{end}}
+
<!-- Trello Boards Section -->
{{template "trello-boards" .}}
</div>
-{{end}} \ No newline at end of file
+{{end}}
diff --git a/web/templates/partials/plantoeat-meals.html b/web/templates/partials/plantoeat-meals.html
index 78e403e..1f016ef 100644
--- a/web/templates/partials/plantoeat-meals.html
+++ b/web/templates/partials/plantoeat-meals.html
@@ -1,19 +1,19 @@
{{define "plantoeat-meals"}}
-<section class="card">
+<section class="card text-shadow-sm">
<!-- Section Header with Brand Color -->
<div class="flex items-center gap-3 mb-6">
<div class="w-1 h-8 bg-plantoeat rounded"></div>
- <h2 class="text-2xl font-bold text-gray-900">Upcoming Meals</h2>
+ <h2 class="text-2xl font-light text-white tracking-wide">Upcoming Meals</h2>
</div>
{{if .Meals}}
<div class="space-y-3">
{{range .Meals}}
- <div class="border-l-4 border-plantoeat bg-green-50/50 pl-4 py-3 rounded-r-lg hover:bg-green-50 transition-colors">
- <p class="font-medium text-gray-900">{{.RecipeName}}</p>
+ <div class="border-l-4 border-plantoeat bg-black/30 pl-4 py-3 rounded-r-lg hover:bg-black/40 transition-colors">
+ <p class="font-medium text-white">{{.RecipeName}}</p>
<div class="flex justify-between items-center mt-2">
- <span class="text-sm text-gray-600">{{.Date.Format "Mon, Jan 2"}}</span>
- <span class="badge bg-green-100 text-green-800 capitalize">
+ <span class="text-sm text-white/60">{{.Date.Format "Mon, Jan 2"}}</span>
+ <span class="badge bg-green-900/50 text-green-300 capitalize">
{{.MealType}}
</span>
</div>
@@ -22,11 +22,11 @@
</div>
{{else}}
<div class="text-center py-16">
- <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
</svg>
- <h3 class="mt-4 text-lg font-medium text-gray-900">No meals planned</h3>
- <p class="mt-2 text-sm text-gray-500">
+ <h3 class="mt-4 text-lg font-medium text-white">No meals planned</h3>
+ <p class="mt-2 text-sm text-white/50">
Schedule your meals to see them here.
</p>
</div>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index afbbe2c..92e7979 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -1,19 +1,19 @@
{{define "tasks-tab"}}
-<div class="space-y-6"
+<div class="space-y-6 text-shadow-sm"
hx-get="/tabs/tasks"
hx-trigger="refresh-tasks from:body"
hx-target="#tab-content"
hx-swap="innerHTML">
<!-- Quick Add Form - Collapsible -->
- <section class="bg-white rounded-lg shadow-sm">
+ <section class="card">
<button type="button"
onclick="document.getElementById('quick-add-form').classList.toggle('hidden')"
class="w-full p-3 sm:p-4 text-left flex justify-between items-center">
- <span class="font-semibold text-gray-900">+ Quick Add</span>
- <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+ <span class="font-medium text-white">+ Quick Add</span>
+ <svg class="w-4 h-4 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<form id="quick-add-form"
- class="hidden p-3 sm:p-4 pt-0 border-t border-gray-100"
+ class="hidden p-3 sm:p-4 pt-0 border-t border-white/10"
hx-post="/unified-add"
hx-swap="none"
hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('trello-fields').style.display = 'none'; }">
@@ -22,14 +22,14 @@
<input type="text"
name="title"
placeholder="Task name..."
- class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+ class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30"
required>
</div>
<div>
<input type="date"
name="due_date"
id="quick-add-date"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500">
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30">
<script>
(function() {
var d = new Date();
@@ -40,14 +40,14 @@
</div>
<div>
<select name="source"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500"
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30"
onchange="document.getElementById('trello-fields').style.display = this.value === 'trello' ? 'flex' : 'none'">
<option value="todoist">Todoist</option>
<option value="trello">Trello</option>
</select>
</div>
<button type="submit"
- class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
+ class="bg-white/20 hover:bg-white/30 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
Add
</button>
</div>
@@ -56,7 +56,7 @@
<div id="trello-fields" class="flex flex-wrap gap-2 mt-3" style="display: none;">
<div>
<select name="board_id"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm"
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white"
hx-get="/partials/lists"
hx-target="#list-select"
hx-trigger="change"
@@ -68,7 +68,7 @@
</select>
</div>
<div>
- <select id="list-select" name="list_id" class="border border-gray-300 rounded-lg px-2 py-2 text-sm">
+ <select id="list-select" name="list_id" class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white">
<option value="">Select List...</option>
</select>
</div>
@@ -80,7 +80,7 @@
{{if .Atoms}}
<div class="space-y-2">
{{range .Atoms}}
- <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
+ <div class="task-item border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
<div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
<!-- Checkbox for completing -->
<input type="checkbox"
@@ -88,81 +88,81 @@
hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
hx-target="closest .task-item"
hx-swap="outerHTML"
- class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+ class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
<span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2">
- <h3 class="text-sm {{if .IsOverdue}}text-red-600 font-semibold{{else if .IsFuture}}text-gray-400 font-normal{{else}}text-gray-900 font-medium{{end}} break-words cursor-pointer hover:underline"
+ <h3 class="text-sm {{if .IsOverdue}}text-red-400 font-semibold{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
hx-target="#task-edit-content"
hx-swap="innerHTML"
onclick="document.getElementById('task-edit-modal').classList.remove('hidden')">{{.Title}}</h3>
{{if .URL}}
- <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
+ <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white flex-shrink-0" onclick="event.stopPropagation()">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
{{end}}
</div>
- <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+ <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
{{if .DueDate}}
- <span class="{{if .IsOverdue}}text-red-500 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+ <span class="{{if .IsOverdue}}text-red-400 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
{{end}}
{{if gt .Priority 2}}
- <span class="text-red-500 font-medium">P{{.Priority}}</span>
+ <span class="text-red-400 font-medium">P{{.Priority}}</span>
{{end}}
{{if .Description}}
- <span class="text-gray-400">+details</span>
+ <span class="text-white/40">+details</span>
{{end}}
</div>
</div>
</div>
{{if .Description}}
- <details class="border-t border-gray-100">
- <summary class="px-3 sm:px-4 py-2 text-xs text-gray-500 cursor-pointer hover:bg-gray-50">Tap to expand</summary>
- <div class="px-3 sm:px-4 pb-3 text-sm text-gray-600">{{.Description}}</div>
+ <details class="border-t border-white/10">
+ <summary class="px-3 sm:px-4 py-2 text-xs text-white/50 cursor-pointer hover:bg-white/5">Tap to expand</summary>
+ <div class="px-3 sm:px-4 pb-3 text-sm text-white/70">{{.Description}}</div>
</details>
{{end}}
</div>
{{end}}
</div>
{{else}}
- <div class="bg-white/50 rounded-lg p-6 text-center">
- <p class="text-gray-500 text-sm">No current tasks.</p>
+ <div class="card p-6 text-center">
+ <p class="text-white/50 text-sm">No current tasks.</p>
</div>
{{end}}
<!-- Future Tasks (Collapsed by default) -->
{{if .FutureAtoms}}
<details class="mt-4">
- <summary class="bg-white/70 rounded-lg p-3 cursor-pointer hover:bg-white/90 transition-colors text-sm text-gray-600 flex items-center justify-between">
+ <summary class="bg-black/40 backdrop-blur-sm rounded-lg p-3 cursor-pointer hover:bg-black/50 transition-colors text-sm text-white/60 flex items-center justify-between">
<span>+{{len .FutureAtoms}} later</span>
<svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</summary>
<div class="space-y-2 mt-2">
{{range .FutureAtoms}}
- <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} opacity-60">
+ <div class="task-item border-l-4 {{.ColorClass}} opacity-60">
<div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
<input type="checkbox"
hx-post="/complete-atom"
hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
hx-target="closest .task-item"
hx-swap="outerHTML"
- class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+ class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
<span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2">
- <h3 class="text-sm text-gray-400 font-normal break-words">{{.Title}}</h3>
+ <h3 class="text-sm text-white/50 font-normal break-words">{{.Title}}</h3>
{{if .URL}}
- <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0">
+ <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white/70 flex-shrink-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
{{end}}
</div>
- <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+ <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/40">
{{if .DueDate}}
<span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
{{end}}
diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html
index 25faf47..3296745 100644
--- a/web/templates/partials/todoist-tasks.html
+++ b/web/templates/partials/todoist-tasks.html
@@ -1,30 +1,30 @@
{{define "todoist-tasks"}}
-<section class="card" id="todoist-list">
+<section class="card text-shadow-sm" id="todoist-list">
<!-- Section Header with Brand Color -->
<div class="flex items-center gap-3 mb-6">
<div class="w-1 h-8 bg-todoist rounded"></div>
- <h2 class="text-2xl font-bold text-gray-900">Todoist Tasks</h2>
+ <h2 class="text-2xl font-light text-white tracking-wide">Todoist Tasks</h2>
</div>
<!-- Quick Add Form -->
{{if .Projects}}
<details class="mb-6" open>
- <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors mb-2">
+ <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors mb-2">
+ Quick Add Task
</summary>
<form hx-post="/tasks"
hx-target="#todoist-list"
hx-swap="outerHTML"
- class="mt-3 space-y-3 bg-white/40 p-4 rounded-lg">
+ class="mt-3 space-y-3 bg-black/30 p-4 rounded-lg">
<input type="text"
name="content"
placeholder="Task content"
required
- class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+ class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent">
<select name="project_id"
- class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+ class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent">
<option value="">Select project (optional)...</option>
{{range .Projects}}
<option value="{{.ID}}">{{.Name}}</option>
@@ -32,7 +32,7 @@
</select>
<button type="submit"
- class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+ class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
Add Task
</button>
</form>
@@ -51,31 +51,31 @@
hx-vals='{"task_id": "{{.ID}}"}'
hx-target="closest .todoist-task-item"
hx-swap="outerHTML"
- class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+ class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer">
<div class="flex-1">
- <p class="font-medium text-gray-900 {{if .Completed}}line-through text-gray-500{{end}}">
+ <p class="font-medium text-white {{if .Completed}}line-through text-white/50{{end}}">
{{.Content}}
</p>
{{if .Description}}
- <p class="text-sm text-gray-600 mt-1">{{.Description}}</p>
+ <p class="text-sm text-white/60 mt-1">{{.Description}}</p>
{{end}}
<div class="flex flex-wrap gap-2 mt-2">
{{if .ProjectName}}
- <span class="badge bg-gray-100 text-gray-700">{{.ProjectName}}</span>
+ <span class="badge bg-white/10 text-white/70">{{.ProjectName}}</span>
{{end}}
{{if .DueDate}}
- <span class="badge bg-yellow-100 text-yellow-800">
+ <span class="badge bg-yellow-900/50 text-yellow-300">
Due: {{.DueDate.Format "Jan 2"}}
</span>
{{end}}
{{range .Labels}}
- <span class="badge bg-blue-100 text-blue-800">{{.}}</span>
+ <span class="badge bg-blue-900/50 text-blue-300">{{.}}</span>
{{end}}
</div>
</div>
{{if .URL}}
- <a href="{{.URL}}" target="_blank" class="text-todoist hover:text-todoist/80 transition-colors">
+ <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
@@ -86,11 +86,11 @@
</div>
{{else}}
<div class="text-center py-16">
- <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
- <h3 class="mt-4 text-lg font-medium text-gray-900">No tasks found</h3>
- <p class="mt-2 text-sm text-gray-500">
+ <h3 class="mt-4 text-lg font-medium text-white">No tasks found</h3>
+ <p class="mt-2 text-sm text-white/50">
All tasks completed or no tasks available.
</p>
</div>
diff --git a/web/templates/partials/trello-board.html b/web/templates/partials/trello-board.html
index 0b176cd..513c6e6 100644
--- a/web/templates/partials/trello-board.html
+++ b/web/templates/partials/trello-board.html
@@ -2,24 +2,24 @@
<div class="board-card">
<!-- Board Header -->
<div class="flex items-center justify-between mb-4">
- <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
+ <h3 class="font-medium text-lg text-white">{{.Name}}</h3>
</div>
<!-- Add Card Form (Collapsible) -->
{{if .Lists}}
<details class="mb-4">
- <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
+ <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors">
+ Add Card
</summary>
<form hx-post="/cards"
hx-target="closest .board-card"
hx-swap="outerHTML"
- class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
+ class="mt-3 space-y-2 bg-black/30 p-3 rounded-lg">
<input type="hidden" name="board_id" value="{{.ID}}">
<select name="list_id"
required
- class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+ class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent">
<option value="">Select list...</option>
{{range .Lists}}
<option value="{{.ID}}">{{.Name}}</option>
@@ -30,10 +30,10 @@
name="name"
placeholder="Card title"
required
- class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+ class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent">
<button type="submit"
- class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+ class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
Add Card
</button>
</form>
@@ -51,24 +51,24 @@
hx-vals='{"card_id": "{{.ID}}"}'
hx-target="closest .trello-card-item"
hx-swap="outerHTML"
- class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+ class="mt-1 h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer">
<div class="flex-1">
- <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
+ <p class="font-medium text-sm text-white mb-2">{{.Name}}</p>
<div class="flex flex-wrap gap-2 items-center">
{{if .ListName}}
- <span class="badge bg-gray-100 text-gray-700">
+ <span class="badge bg-white/10 text-white/70">
{{.ListName}}
</span>
{{end}}
{{if .DueDate}}
- <span class="badge bg-red-100 text-red-800">
+ <span class="badge bg-red-900/50 text-red-300">
Due: {{.DueDate.Format "Jan 2"}}
</span>
{{end}}
{{if .URL}}
<a href="{{.URL}}" target="_blank"
- class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
+ class="text-white/70 hover:text-white text-xs font-medium ml-auto transition-colors">
View →
</a>
{{end}}
diff --git a/web/templates/partials/trello-boards.html b/web/templates/partials/trello-boards.html
index 3d42517..d51446d 100644
--- a/web/templates/partials/trello-boards.html
+++ b/web/templates/partials/trello-boards.html
@@ -1,10 +1,10 @@
{{define "trello-boards"}}
{{if .Boards}}
-<section class="card section-spacing">
+<section class="card section-spacing text-shadow-sm">
<!-- Section Header with Brand Color -->
<div class="flex items-center gap-3 mb-6">
<div class="w-1 h-8 bg-trello rounded"></div>
- <h2 class="text-2xl font-bold text-gray-900">Trello Boards</h2>
+ <h2 class="text-2xl font-light text-white tracking-wide">Trello Boards</h2>
</div>
<!-- Active Boards Grid (boards with cards) -->
@@ -17,12 +17,12 @@
</div>
<!-- Empty Boards Collapsible (boards without cards) -->
- <details class="mt-6 border-t border-gray-200 pt-6">
+ <details class="mt-6 border-t border-white/10 pt-6">
<summary class="cursor-pointer flex items-center justify-between group">
- <span class="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors">
+ <span class="text-sm font-medium text-white/50 group-hover:text-white/80 transition-colors">
Empty Boards
</span>
- <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600 transition-all"
+ <svg class="w-5 h-5 text-white/40 group-hover:text-white/60 transition-all"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
@@ -31,9 +31,9 @@
<div class="card-grid">
{{range .Boards}}
{{if not .Cards}}
- <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 opacity-70 hover:opacity-100 transition-opacity">
- <h3 class="font-semibold text-gray-700">{{.Name}}</h3>
- <p class="text-sm text-gray-500 mt-2">No cards</p>
+ <div class="border border-white/10 rounded-lg p-4 bg-black/30 opacity-70 hover:opacity-100 transition-opacity">
+ <h3 class="font-medium text-white/70">{{.Name}}</h3>
+ <p class="text-sm text-white/40 mt-2">No cards</p>
</div>
{{end}}
{{end}}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 13:36:49 +0000