522 lines
17 KiB
HTML
522 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg+xml" href="/echo/favicon.svg">
|
|
<title>Echo · Habits</title>
|
|
<link rel="stylesheet" href="/echo/common.css">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script src="/echo/swipe-nav.js"></script>
|
|
<style>
|
|
.main {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-6);
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--text-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Habits grid */
|
|
.habits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.habits-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1200px) {
|
|
.habits-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1201px) {
|
|
.habits-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--space-10);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: var(--space-4);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: var(--text-lg);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.empty-state .hint {
|
|
font-size: var(--text-sm);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Habit card */
|
|
.habit-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
border-left: 4px solid var(--accent);
|
|
padding: var(--space-4);
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.habit-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.habit-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.habit-card-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.habit-card-name {
|
|
flex: 1;
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.habit-card-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.habit-card-action-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: var(--space-1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.habit-card-action-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.habit-card-action-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.habit-card-streaks {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.habit-card-streak {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.habit-card-check-btn {
|
|
width: 100%;
|
|
padding: var(--space-3);
|
|
border: 2px solid var(--accent);
|
|
background: var(--accent);
|
|
color: white;
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.habit-card-check-btn:hover:not(:disabled) {
|
|
background: var(--accent-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.habit-card-check-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background: var(--bg-muted);
|
|
border-color: var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.habit-card-last-check {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.habit-card-lives {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-1);
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.habit-card-completion {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.habit-card-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: var(--space-2);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.habit-card-category {
|
|
font-size: var(--text-xs);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-muted);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.habit-card-priority {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.priority-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.priority-high {
|
|
background: var(--error);
|
|
}
|
|
|
|
.priority-medium {
|
|
background: var(--warning);
|
|
}
|
|
|
|
.priority-low {
|
|
background: var(--success);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<a href="/echo/index.html" class="logo">
|
|
<i data-lucide="circle-dot"></i>
|
|
Echo
|
|
</a>
|
|
<nav class="nav">
|
|
<a href="/echo/index.html" class="nav-item">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="/echo/workspace.html" class="nav-item">
|
|
<i data-lucide="code"></i>
|
|
<span>Workspace</span>
|
|
</a>
|
|
<a href="/echo/notes.html" class="nav-item">
|
|
<i data-lucide="file-text"></i>
|
|
<span>KB</span>
|
|
</a>
|
|
<a href="/echo/habits.html" class="nav-item active">
|
|
<i data-lucide="dumbbell"></i>
|
|
<span>Habits</span>
|
|
</a>
|
|
<a href="/echo/files.html" class="nav-item">
|
|
<i data-lucide="folder"></i>
|
|
<span>Files</span>
|
|
</a>
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Schimbă tema">
|
|
<i data-lucide="sun" id="themeIcon"></i>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Habits</h1>
|
|
<button class="btn btn-primary" onclick="showAddHabitModal()">
|
|
<i data-lucide="plus"></i>
|
|
Add Habit
|
|
</button>
|
|
</div>
|
|
|
|
<div id="habitsContainer">
|
|
<div class="empty-state">
|
|
<i data-lucide="loader"></i>
|
|
<p>Loading habits...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// Theme management
|
|
function initTheme() {
|
|
const saved = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', saved);
|
|
updateThemeIcon(saved);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
updateThemeIcon(next);
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const icon = document.getElementById('themeIcon');
|
|
if (icon) {
|
|
icon.setAttribute('data-lucide', theme === 'dark' ? 'sun' : 'moon');
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
initTheme();
|
|
|
|
// Habits state
|
|
let habits = [];
|
|
|
|
// Load habits from API
|
|
async function loadHabits() {
|
|
try {
|
|
const response = await fetch('/echo/api/habits');
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
habits = await response.json();
|
|
renderHabits();
|
|
} catch (error) {
|
|
console.error('Failed to load habits:', error);
|
|
showError('Failed to load habits: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Render habits grid
|
|
function renderHabits() {
|
|
const container = document.getElementById('habitsContainer');
|
|
|
|
if (habits.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="dumbbell"></i>
|
|
<p>No habits yet. Create your first habit!</p>
|
|
<p class="hint">Click "Add Habit" to get started</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
const habitsHtml = habits.map(habit => renderHabitCard(habit)).join('');
|
|
container.innerHTML = `<div class="habits-grid">${habitsHtml}</div>`;
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Render single habit card
|
|
function renderHabitCard(habit) {
|
|
const isDoneToday = isCheckedToday(habit);
|
|
const lastCheckInfo = getLastCheckInfo(habit);
|
|
const livesHtml = renderLives(habit.lives || 3);
|
|
const completionRate = habit.completion_rate_30d || 0;
|
|
|
|
return `
|
|
<div class="habit-card" style="border-left-color: ${habit.color}">
|
|
<div class="habit-card-header">
|
|
<i data-lucide="${habit.icon || 'circle'}" class="habit-card-icon"></i>
|
|
<span class="habit-card-name">${escapeHtml(habit.name)}</span>
|
|
<div class="habit-card-actions">
|
|
<button class="habit-card-action-btn" onclick="showEditHabitModal('${habit.id}')" title="Edit">
|
|
<i data-lucide="settings"></i>
|
|
</button>
|
|
<button class="habit-card-action-btn" onclick="deleteHabit('${habit.id}')" title="Delete">
|
|
<i data-lucide="trash-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="habit-card-streaks">
|
|
<div class="habit-card-streak">
|
|
🔥 ${habit.streak?.current || 0}
|
|
</div>
|
|
<div class="habit-card-streak">
|
|
🏆 ${habit.streak?.best || 0}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="habit-card-check-btn"
|
|
onclick="checkInHabit('${habit.id}')"
|
|
${isDoneToday ? 'disabled' : ''}
|
|
>
|
|
${isDoneToday ? '✓ Done today' : 'Check In'}
|
|
</button>
|
|
|
|
<div class="habit-card-last-check">${lastCheckInfo}</div>
|
|
|
|
<div class="habit-card-lives">${livesHtml}</div>
|
|
|
|
<div class="habit-card-completion">${completionRate}% (30d)</div>
|
|
|
|
<div class="habit-card-footer">
|
|
<span class="habit-card-category">${escapeHtml(habit.category || 'General')}</span>
|
|
<span class="habit-card-priority">
|
|
<span class="priority-indicator priority-${getPriorityLevel(habit.priority || 3)}"></span>
|
|
P${habit.priority || 3}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Check if habit was checked today
|
|
function isCheckedToday(habit) {
|
|
if (!habit.completions || habit.completions.length === 0) {
|
|
return false;
|
|
}
|
|
const today = new Date().toISOString().split('T')[0];
|
|
return habit.completions.some(c => c.date === today);
|
|
}
|
|
|
|
// Get last check-in info text
|
|
function getLastCheckInfo(habit) {
|
|
if (!habit.completions || habit.completions.length === 0) {
|
|
return 'Last: Never';
|
|
}
|
|
|
|
const lastCompletion = habit.completions[habit.completions.length - 1];
|
|
const lastDate = new Date(lastCompletion.date);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
lastDate.setHours(0, 0, 0, 0);
|
|
|
|
const diffDays = Math.floor((today - lastDate) / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffDays === 0) {
|
|
return 'Last: Today';
|
|
} else if (diffDays === 1) {
|
|
return 'Last: Yesterday';
|
|
} else {
|
|
return `Last: ${diffDays} days ago`;
|
|
}
|
|
}
|
|
|
|
// Render lives as hearts
|
|
function renderLives(lives) {
|
|
const totalLives = 3;
|
|
let html = '';
|
|
for (let i = 0; i < totalLives; i++) {
|
|
html += i < lives ? '❤️' : '🖤';
|
|
}
|
|
return html;
|
|
}
|
|
|
|
// Get priority level string
|
|
function getPriorityLevel(priority) {
|
|
if (priority === 1) return 'high';
|
|
if (priority === 2) return 'medium';
|
|
return 'low';
|
|
}
|
|
|
|
// Show add habit modal (placeholder - full modal in next stories)
|
|
function showAddHabitModal() {
|
|
alert('Add Habit modal - coming in next story!');
|
|
}
|
|
|
|
// Show edit habit modal (placeholder)
|
|
function showEditHabitModal(habitId) {
|
|
alert('Edit Habit modal - coming in next story!');
|
|
}
|
|
|
|
// Delete habit (placeholder)
|
|
async function deleteHabit(habitId) {
|
|
if (!confirm('Are you sure you want to delete this habit?')) {
|
|
return;
|
|
}
|
|
alert('Delete functionality - coming in next story!');
|
|
}
|
|
|
|
// Check in habit (placeholder)
|
|
async function checkInHabit(habitId) {
|
|
alert('Check-in functionality - coming in next story!');
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
const container = document.getElementById('habitsContainer');
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="alert-circle"></i>
|
|
<p style="color: var(--error)">${escapeHtml(message)}</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Escape HTML to prevent XSS
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Initialize page
|
|
lucide.createIcons();
|
|
loadHabits();
|
|
</script>
|
|
</body>
|
|
</html>
|