diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 14:28:50 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 14:28:50 -1000 |
| commit | 06c7485a7d05de86f9898e388161e8d932d5f3e6 (patch) | |
| tree | 376083a75278c9758f53c0062742062dedb75633 /web/templates/index.html | |
| parent | 9ef5b7f37883f846f105da9dc5d2ba1415e594e3 (diff) | |
Modernize frontend with tabs, HTMX, and Tailwind build pipeline
Complete UI overhaul implementing modern design patterns with HTMX for
dynamic updates, proper Tailwind build pipeline, and improved UX.
Build Pipeline:
- Add npm + PostCSS + Tailwind CSS configuration
- Custom design system with brand colors
- Compiled CSS: 27KB (vs 3MB CDN), 99% reduction
- Makefile for unified build commands
- Inter font for improved typography
Tab Interface:
- Separate Tasks tab from Notes tab using HTMX
- Partial page updates without full refreshes
- Tab state management with proper refresh handling
- New endpoints: /tabs/tasks, /tabs/notes, /tabs/refresh
Template Architecture:
- Modular partials system (7 reusable components)
- Cleaner separation of concerns
Empty Board Management:
- Active boards in main 3-column grid
- Empty boards in collapsible section
- Reduces visual clutter
Visual Design Enhancements:
- Inter font, brand color accents
- Improved typography hierarchy and spacing
- Enhanced card styling with hover effects
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates/index.html')
| -rw-r--r-- | web/templates/index.html | 193 |
1 files changed, 32 insertions, 161 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 7668a94..2d35b37 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -4,182 +4,53 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Personal Dashboard</title> - <link rel="stylesheet" href="/static/css/styles.css"> - <script src="https://cdn.tailwindcss.com"></script> + <link rel="stylesheet" href="/static/css/output.css"> </head> -<body class="bg-gray-100 min-h-screen"> - <div class="container mx-auto px-4 py-8 max-w-7xl"> +<body class="min-h-screen"> + <div class="content-max-width py-8"> <!-- Header --> - <header class="mb-8 flex justify-between items-center"> - <h1 class="text-3xl font-bold text-gray-800">Personal Dashboard</h1> + <header class="mb-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"> + <h1 class="text-4xl font-bold text-gray-900">Personal Dashboard</h1> <div class="flex items-center gap-4"> <span class="text-sm text-gray-600"> Last updated: <span id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span> </span> - <button onclick="refreshData()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> - Refresh + <button onclick="refreshData()" + class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors font-medium no-print"> + <span id="refresh-text">Refresh</span> </button> </div> </header> - <!-- Error Messages --> - {{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> - <ul class="list-disc list-inside"> - {{range .Errors}} - <li>{{.}}</li> - {{end}} - </ul> - </div> - {{end}} - - <!-- Main Grid --> - <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> - <!-- Trello Boards Section (PRIORITY) --> - <div class="lg:col-span-3"> - {{if .Boards}} - <div class="bg-white rounded-lg shadow-md p-6 mb-6"> - <h2 class="text-xl font-semibold mb-4 text-gray-800">📋 Trello Boards</h2> - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - {{range .Boards}} - <div class="border border-gray-300 rounded-lg p-4 bg-gradient-to-br from-blue-50 to-white"> - <h3 class="font-bold text-lg text-gray-800 mb-3">{{.Name}}</h3> - {{if .Cards}} - <div class="space-y-2 max-h-96 overflow-y-auto"> - {{range .Cards}} - <div class="bg-white border border-gray-200 rounded p-3 hover:shadow-md transition"> - <p class="font-medium text-gray-800 text-sm">{{.Name}}</p> - {{if .ListName}} - <span class="inline-block mt-1 text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded"> - {{.ListName}} - </span> - {{end}} - {{if .DueDate}} - <span class="inline-block mt-1 text-xs bg-red-100 text-red-800 px-2 py-1 rounded"> - Due: {{.DueDate.Format "Jan 2"}} - </span> - {{end}} - {{if .URL}} - <a href="{{.URL}}" target="_blank" class="text-blue-600 hover:text-blue-800 text-xs mt-1 inline-block"> - View → - </a> - {{end}} - </div> - {{end}} - </div> - {{else}} - <p class="text-gray-500 text-sm text-center py-4">No cards</p> - {{end}} - </div> - {{end}} - </div> - </div> - {{end}} - </div> - - <!-- Tasks Section --> - <div class="lg:col-span-2"> - <div class="bg-white rounded-lg shadow-md p-6"> - <h2 class="text-xl font-semibold mb-4 text-gray-800">✓ Todoist Tasks</h2> - - {{if .Tasks}} - <div class="space-y-3"> - {{range .Tasks}} - <div class="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition"> - <input type="checkbox" {{if .Completed}}checked{{end}} - class="mt-1 h-5 w-5 text-blue-600 rounded" disabled> - <div class="flex-1"> - <p class="font-medium text-gray-800 {{if .Completed}}line-through text-gray-500{{end}}"> - {{.Content}} - </p> - {{if .Description}} - <p class="text-sm text-gray-600 mt-1">{{.Description}}</p> - {{end}} - <div class="flex gap-2 mt-2 text-xs text-gray-500"> - {{if .ProjectName}} - <span class="bg-gray-200 px-2 py-1 rounded">{{.ProjectName}}</span> - {{end}} - {{if .DueDate}} - <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded"> - Due: {{.DueDate.Format "Jan 2"}} - </span> - {{end}} - {{range .Labels}} - <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">{{.}}</span> - {{end}} - </div> - </div> - {{if .URL}} - <a href="{{.URL}}" target="_blank" class="text-blue-600 hover:text-blue-800"> - <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> - </a> - {{end}} - </div> - {{end}} - </div> - {{else}} - <p class="text-gray-500 text-center py-8">No tasks found</p> - {{end}} - </div> - </div> - - <!-- Meals Section --> - <div> - <div class="bg-white rounded-lg shadow-md p-6"> - <h2 class="text-xl font-semibold mb-4 text-gray-800">Upcoming Meals</h2> - - {{if .Meals}} - <div class="space-y-3"> - {{range .Meals}} - <div class="border-l-4 border-green-500 pl-3 py-2"> - <p class="font-medium text-gray-800">{{.RecipeName}}</p> - <div class="flex justify-between items-center mt-1"> - <span class="text-sm text-gray-600">{{.Date.Format "Mon, Jan 2"}}</span> - <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded capitalize"> - {{.MealType}} - </span> - </div> - </div> - {{end}} - </div> - {{else}} - <p class="text-gray-500 text-center py-8">No meals planned</p> - {{end}} - </div> - </div> + <!-- Tab Navigation --> + <div class="border-b border-gray-200 mb-8 no-print"> + <nav class="-mb-px flex space-x-8"> + <button + class="tab-button tab-button-active" + hx-get="/tabs/tasks" + hx-target="#tab-content" + hx-push-url="false" + onclick="setActiveTab(this)"> + 📋 Tasks & Planning + </button> + <button + class="tab-button" + hx-get="/tabs/notes" + hx-target="#tab-content" + hx-push-url="false" + onclick="setActiveTab(this)"> + 📝 Notes + </button> + </nav> </div> - <!-- Notes Section --> - {{if .Notes}} - <div class="mt-6"> - <div class="bg-white rounded-lg shadow-md p-6"> - <h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Notes</h2> - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - {{range .Notes}} - <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> - <h3 class="font-semibold text-gray-800 mb-2">{{.Title}}</h3> - <p class="text-sm text-gray-600 mb-2 line-clamp-3">{{.Content}}</p> - <div class="flex justify-between items-center text-xs text-gray-500"> - <span>{{.Modified.Format "Jan 2, 3:04 PM"}}</span> - {{if .Tags}} - <div class="flex gap-1"> - {{range .Tags}} - <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">#{{.}}</span> - {{end}} - </div> - {{end}} - </div> - </div> - {{end}} - </div> - </div> + <!-- Tab Content --> + <div id="tab-content"> + {{template "tasks-tab" .}} </div> - {{end}} </div> + <script src="/static/js/htmx.min.js"></script> <script src="/static/js/app.js"></script> </body> </html> |