forked from Rockachopa/Timmy-time-dashboard
128 lines
5.9 KiB
HTML
128 lines
5.9 KiB
HTML
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}Timmy Calm{% endblock %}
|
|
|
|
{% block extra_styles %}
|
|
<style>
|
|
.calm-container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
|
.calm-header { text-align: center; margin-bottom: 30px; }
|
|
.calm-title { font-size: 2.5rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.05em; }
|
|
.calm-subtitle { font-size: 1.1rem; color: var(--text-dim); margin-top: 5px; }
|
|
|
|
.task-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.task-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
|
|
|
|
.now-card {
|
|
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(124, 58, 237, 0.1) 100%);
|
|
border-color: rgba(124, 58, 237, 0.4);
|
|
}
|
|
.now-card .task-title { font-size: 2.2rem; font-weight: 800; color: var(--green); margin-bottom: 15px; }
|
|
.now-card .task-description { font-size: 1.1rem; color: var(--text); line-height: 1.6; margin-bottom: 20px; }
|
|
.now-card .task-actions { display: flex; gap: 15px; justify-content: center; }
|
|
.now-card .task-btn { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
|
|
.now-card .task-btn-complete { background: var(--green); color: var(--bg-secondary); border: none; }
|
|
.now-card .task-btn-complete:hover { background: var(--green-dark); }
|
|
.now-card .task-btn-defer { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
|
|
.now-card .task-btn-defer:hover { background: var(--bg-tertiary-hover); }
|
|
|
|
.next-card {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--border);
|
|
padding: 15px 20px;
|
|
}
|
|
.next-card .task-title { font-size: 1.3rem; font-weight: 600; color: var(--info); margin-bottom: 5px; }
|
|
.next-card .task-description { font-size: 0.9rem; color: var(--text-dim); max-height: 40px; overflow: hidden; }
|
|
|
|
.later-section {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
margin-top: 20px;
|
|
}
|
|
.later-summary { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: var(--text-bright); }
|
|
.later-summary:hover { background: var(--bg-tertiary-hover); border-radius: var(--radius-lg); }
|
|
.later-content { padding: 10px 20px 20px; border-top: 1px solid var(--border); }
|
|
.later-task-item { padding: 8px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; }
|
|
.later-task-item:last-child { border-bottom: none; }
|
|
.later-task-title { font-size: 0.95rem; color: var(--text); }
|
|
.later-task-actions .task-btn { font-size: 0.75rem; padding: 5px 10px; }
|
|
|
|
.empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 1rem; }
|
|
|
|
.ritual-btn { display: block; width: fit-content; margin: 20px auto; padding: 10px 20px; background: var(--purple); color: white; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; }
|
|
.ritual-btn:hover { opacity: 0.9; }
|
|
|
|
/* Inter font - assuming it's available or linked in base.html */
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="calm-container py-3">
|
|
<div class="calm-header">
|
|
<h1 class="calm-title">Timmy Calm</h1>
|
|
<p class="calm-subtitle">Your focused attention stack</p>
|
|
</div>
|
|
|
|
<div id="now-next-later-stack" hx-trigger="load, taskPromoted from:body" hx-get="/calm/partials/now_next_later" hx-swap="outerHTML">
|
|
{% include "calm/partials/now_next_later.html" %}
|
|
</div>
|
|
|
|
{% if not now_task and not next_task and later_tasks_count == 0 %}
|
|
<div class="empty-state">
|
|
<p>It looks like you have no tasks. Start your day with a morning ritual!</p>
|
|
<a href="/calm/ritual/morning" class="ritual-btn">Start Morning Ritual</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="add-task-section" style="text-align: center; margin-top: 30px;">
|
|
<button class="task-btn task-btn-defer" onclick="openAddTaskModal()">+ Add New Task</button>
|
|
</div>
|
|
|
|
<!-- Add Task Modal (simple example, can be expanded) -->
|
|
<div id="add-task-modal" class="task-modal-overlay">
|
|
<div class="task-modal">
|
|
<h3>Add New Task</h3>
|
|
<form hx-post="/calm/tasks" hx-target="#later-count-container" hx-swap="outerHTML" hx-on::after-request="closeAddTaskModal()">
|
|
<label>Title</label>
|
|
<input type="text" name="title" required>
|
|
<label>Description (optional)</label>
|
|
<textarea name="description"></textarea>
|
|
<label>
|
|
<input type="checkbox" name="is_mit" value="true"> Is this a Most Important Task (MIT)?
|
|
</label>
|
|
<div class="task-modal-actions">
|
|
<button type="button" class="task-btn task-btn-cancel" onclick="closeAddTaskModal()">Cancel</button>
|
|
<button type="submit" class="task-btn task-btn-complete">Add Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function openAddTaskModal() {
|
|
document.getElementById('add-task-modal').classList.add('open');
|
|
}
|
|
function closeAddTaskModal() {
|
|
document.getElementById('add-task-modal').classList.remove('open');
|
|
}
|
|
document.getElementById('add-task-modal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeAddTaskModal();
|
|
});
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') closeAddTaskModal();
|
|
});
|
|
</script>
|
|
{% endblock %}
|