Internal
Public Access
Keith SmithandClaude Sonnet 5
ae9ab596bb
The real dashboard is server-rendered before any client JS runs, so the first page load after reconnecting always reflects the pre-sync database state -- the background sync then completes silently, but nothing told that already-rendered page to update. A task created offline would appear to vanish until the next navigation happened to load fresh data. runBackgroundSync() now reports whether it pushed pending changes, and both places that trigger it automatically reload the page when it did. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
156 lines
7.4 KiB
HTML
156 lines
7.4 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}KeepItGoing{% endblock %}</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
|
|
<link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="{% static 'favicons/apple-touch-icon-180.png' %}">
|
|
|
|
<!-- PWA -->
|
|
<link rel="manifest" href="{% url 'manifest' %}">
|
|
<meta name="theme-color" content="#3B82F6">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=6">
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
{% block body %}
|
|
{% if user.is_authenticated %}
|
|
<div class="app-layout {% if not selected_task %}detail-closed{% endif %}" id="app">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div style="display: flex; align-items: center; gap: var(--space-md);">
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle sidebar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 12h18M3 6h18M3 18h18"/>
|
|
</svg>
|
|
</button>
|
|
<a href="{% url 'dashboard' %}" class="app-brand">KeepItGoing</a>
|
|
</div>
|
|
|
|
<div class="app-header-actions">
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme" title="Toggle dark/light mode">
|
|
<svg id="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
<svg id="theme-icon-dark" style="display: none;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="header-user">
|
|
<span>{{ user.email }}</span>
|
|
<a href="{% url 'profile' %}" class="btn btn-secondary btn-sm">Profile</a>
|
|
<a href="{% url 'logout' %}" class="btn btn-secondary btn-sm">Logout</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="app-sidebar" id="sidebar">
|
|
{% include 'tasks/_sidebar.html' %}
|
|
</aside>
|
|
|
|
<!-- Main Task Pane -->
|
|
<main class="task-pane">
|
|
{% if messages %}
|
|
<div class="messages">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Detail Panel -->
|
|
<aside class="detail-pane {% if not selected_task %}hidden{% endif %}" id="detail-pane">
|
|
{% block detail %}
|
|
{% if selected_task %}
|
|
{% include 'tasks/_task_detail.html' with task=selected_task %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>Select a task to view details</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
</aside>
|
|
|
|
<!-- Mobile overlay -->
|
|
<div class="mobile-overlay" id="mobile-overlay" onclick="closeMobileMenus()"></div>
|
|
</div>
|
|
|
|
<!-- Tag Edit/Create Modal (outside app-layout for proper fixed positioning) -->
|
|
<div class="modal-backdrop" id="tag-modal-backdrop">
|
|
<div class="modal" onclick="event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="tag-modal-title">New Tag</h2>
|
|
<button type="button" class="modal-close" onclick="closeTagModal()">
|
|
<svg style="width: 20px; height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="tag-form" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="tag-id" name="group_id" value="">
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="tag-name">Name</label>
|
|
<input type="text" class="form-input" id="tag-name" name="name" required placeholder="Tag name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Color</label>
|
|
<div class="color-presets">
|
|
<button type="button" class="color-preset" data-color="#3b82f6" style="background-color: #3b82f6"></button>
|
|
<button type="button" class="color-preset" data-color="#ef4444" style="background-color: #ef4444"></button>
|
|
<button type="button" class="color-preset" data-color="#10b981" style="background-color: #10b981"></button>
|
|
<button type="button" class="color-preset" data-color="#f59e0b" style="background-color: #f59e0b"></button>
|
|
<button type="button" class="color-preset" data-color="#8b5cf6" style="background-color: #8b5cf6"></button>
|
|
<button type="button" class="color-preset" data-color="#ec4899" style="background-color: #ec4899"></button>
|
|
<button type="button" class="color-preset" data-color="#06b6d4" style="background-color: #06b6d4"></button>
|
|
<button type="button" class="color-preset" data-color="#84cc16" style="background-color: #84cc16"></button>
|
|
</div>
|
|
<div class="color-custom-row">
|
|
<label class="color-custom-label">Custom:</label>
|
|
<input type="color" id="tag-color" name="color" value="#3b82f6" class="color-custom-input">
|
|
</div>
|
|
<input type="hidden" id="tag-color-hidden" name="color" value="#3b82f6">
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeTagModal()">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="tag-delete-btn" onclick="deleteTag()" style="display: none;">Delete</button>
|
|
<button type="submit" class="btn btn-primary" id="tag-submit-btn">Create</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Non-authenticated layout (auth pages) -->
|
|
<div class="auth-layout">
|
|
{% block auth_content %}{% endblock %}
|
|
</div>
|
|
<footer class="footer">
|
|
<p>© 2025 Firebug IT. All rights reserved.</p>
|
|
</footer>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
<script src="{% static 'js/offline-db.js' %}?v=7"></script>
|
|
<script src="{% static 'js/offline-sync.js' %}?v=8"></script>
|
|
<script src="{% static 'js/app.js' %}?v=8"></script>
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|