2231 lines
79 KiB
HTML
2231 lines
79 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);
|
|
}
|
|
|
|
/* Filter bar */
|
|
.filter-bar {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-4);
|
|
padding: var(--space-3);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 150px;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.filter-select {
|
|
padding: var(--space-2) var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.filter-select:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-alpha);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.filter-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-group {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Mobile touch targets - minimum 44px */
|
|
.habit-card-action-btn {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.habit-card-check-btn {
|
|
min-height: 48px;
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.habit-card-skip-btn {
|
|
min-height: 44px;
|
|
padding: var(--space-2) var(--space-3);
|
|
}
|
|
|
|
.modal-close {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Stats row 2x2 on mobile */
|
|
.stats-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* Icon and color pickers wrap properly */
|
|
.color-picker-swatches {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.icon-picker-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
max-height: 300px;
|
|
}
|
|
|
|
/* Day checkboxes wrap on small screens */
|
|
.day-checkboxes {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Modal padding adjustment */
|
|
.modal {
|
|
margin: var(--space-2);
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-header,
|
|
.modal-footer {
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
/* Touch-friendly form elements */
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
min-height: 44px;
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
/* Larger touch targets for pickers */
|
|
.color-swatch {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.icon-option {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.icon-option svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.day-checkbox-label {
|
|
min-height: 44px;
|
|
padding: var(--space-1);
|
|
}
|
|
|
|
/* Mood and rating buttons */
|
|
.mood-btn {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.habit-card-lives-hearts {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.habit-card-skip-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-xs);
|
|
cursor: pointer;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.habit-card-skip-btn:hover:not(:disabled) {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.habit-card-skip-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Modal overlay */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--bg-surface);
|
|
border-radius: var(--radius-lg);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-close {
|
|
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);
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-close svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* Form fields */
|
|
.form-field {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: '*';
|
|
color: var(--error);
|
|
margin-left: var(--space-1);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-muted);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Color picker */
|
|
.color-picker-swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.color-swatch:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.color-swatch.selected {
|
|
border-color: var(--text-primary);
|
|
box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
|
|
}
|
|
|
|
/* Icon picker */
|
|
.icon-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: var(--space-2);
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-base);
|
|
}
|
|
|
|
.icon-option {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.icon-option:hover {
|
|
background: var(--bg-hover);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.icon-option.selected {
|
|
border-color: var(--accent);
|
|
background: var(--accent-muted);
|
|
}
|
|
|
|
.icon-option svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Frequency params */
|
|
.frequency-params {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.day-checkboxes {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.day-checkbox-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.day-checkbox-label:has(input:checked) {
|
|
background: var(--accent-muted);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.day-checkbox-label input {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Toast notification */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: var(--space-4);
|
|
right: var(--space-4);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.toast.success {
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.toast.error {
|
|
border-color: var(--error);
|
|
}
|
|
|
|
.toast svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toast.success svg {
|
|
color: var(--success);
|
|
}
|
|
|
|
.toast.error svg {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* Pulse animation */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Check-in detail modal */
|
|
.checkin-modal {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
justify-content: center;
|
|
margin: var(--space-3) 0;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rating-star.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rating-star:hover {
|
|
transform: scale(1.2);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.mood-buttons {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
justify-content: center;
|
|
margin: var(--space-3) 0;
|
|
}
|
|
|
|
.mood-btn {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
padding: var(--space-2);
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-base);
|
|
background: none;
|
|
}
|
|
|
|
.mood-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mood-btn.selected {
|
|
border-color: var(--accent);
|
|
background: var(--accent-muted);
|
|
}
|
|
|
|
/* Stats section */
|
|
.stats-section {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Weekly summary */
|
|
.weekly-summary {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.weekly-summary-header {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-muted);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background var(--transition-base);
|
|
}
|
|
|
|
.weekly-summary-header:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.weekly-summary-title {
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.weekly-summary-chevron {
|
|
transition: transform var(--transition-base);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.weekly-summary-chevron.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.weekly-summary-content {
|
|
display: none;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.weekly-summary-content.visible {
|
|
display: block;
|
|
}
|
|
|
|
.weekly-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
height: 150px;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.weekly-bar-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.weekly-bar {
|
|
width: 100%;
|
|
background: var(--accent);
|
|
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
|
transition: all var(--transition-base);
|
|
min-height: 4px;
|
|
}
|
|
|
|
.weekly-bar:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.weekly-day-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.weekly-stats {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</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 class="filter-bar">
|
|
<div class="filter-group">
|
|
<label class="filter-label">Category</label>
|
|
<select id="categoryFilter" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="all">All</option>
|
|
<option value="work">Work</option>
|
|
<option value="health">Health</option>
|
|
<option value="growth">Growth</option>
|
|
<option value="personal">Personal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-label">Status</label>
|
|
<select id="statusFilter" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="all">All</option>
|
|
<option value="active_today">Active Today</option>
|
|
<option value="done_today">Done Today</option>
|
|
<option value="overdue">Overdue</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-label">Sort By</label>
|
|
<select id="sortSelect" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="priority_asc">Priority (Low to High)</option>
|
|
<option value="priority_desc">Priority (High to Low)</option>
|
|
<option value="name_asc">Name A-Z</option>
|
|
<option value="name_desc">Name Z-A</option>
|
|
<option value="streak_desc">Streak (Highest)</option>
|
|
<option value="streak_asc">Streak (Lowest)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div id="statsSection" class="stats-section" style="display: none;">
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Habits</div>
|
|
<div class="stat-value" id="statTotalHabits">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Avg Completion (30d)</div>
|
|
<div class="stat-value" id="statAvgCompletion">0%</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Best Streak 🏆</div>
|
|
<div class="stat-value" id="statBestStreak">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Lives</div>
|
|
<div class="stat-value" id="statTotalLives">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weekly-summary">
|
|
<div class="weekly-summary-header" onclick="toggleWeeklySummary()">
|
|
<div class="weekly-summary-title">Weekly Summary</div>
|
|
<i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
|
|
</div>
|
|
<div class="weekly-summary-content" id="weeklySummaryContent">
|
|
<div class="weekly-chart" id="weeklyChart"></div>
|
|
<div class="weekly-stats" id="weeklyStats">
|
|
<span id="weeklyCompletedText">0 completed this week</span>
|
|
<span id="weeklySkippedText">0 skipped this week</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="habitsContainer">
|
|
<div class="empty-state">
|
|
<i data-lucide="loader"></i>
|
|
<p>Loading habits...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Add/Edit Habit Modal -->
|
|
<div id="habitModal" class="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Add Habit</h2>
|
|
<button class="modal-close" onclick="closeHabitModal()">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="habitForm">
|
|
<!-- Name -->
|
|
<div class="form-field">
|
|
<label class="form-label required" for="habitName">Name</label>
|
|
<input type="text" id="habitName" class="form-input" maxlength="100" required>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitCategory">Category</label>
|
|
<select id="habitCategory" class="form-select">
|
|
<option value="work">Work</option>
|
|
<option value="health">Health</option>
|
|
<option value="growth">Growth</option>
|
|
<option value="personal">Personal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Color -->
|
|
<div class="form-field">
|
|
<label class="form-label">Color</label>
|
|
<div class="color-picker-swatches" id="colorSwatches"></div>
|
|
<input type="text" id="customColor" class="form-input" placeholder="#RRGGBB" pattern="^#[0-9A-Fa-f]{6}$">
|
|
</div>
|
|
|
|
<!-- Icon -->
|
|
<div class="form-field">
|
|
<label class="form-label">Icon</label>
|
|
<div class="icon-picker-grid" id="iconPicker"></div>
|
|
</div>
|
|
|
|
<!-- Priority -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitPriority">Priority (1-100)</label>
|
|
<input type="number" id="habitPriority" class="form-input" min="1" max="100" value="50">
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitNotes">Notes</label>
|
|
<textarea id="habitNotes" class="form-textarea"></textarea>
|
|
</div>
|
|
|
|
<!-- Frequency Type -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="frequencyType">Frequency</label>
|
|
<select id="frequencyType" class="form-select" onchange="updateFrequencyParams()">
|
|
<option value="daily">Daily</option>
|
|
<option value="specific_days">Specific Days</option>
|
|
<option value="x_per_week">X times per week</option>
|
|
<option value="weekly">Weekly</option>
|
|
<option value="monthly">Monthly</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Frequency Params (conditional) -->
|
|
<div id="frequencyParams" class="frequency-params"></div>
|
|
|
|
<!-- Reminder Time -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="reminderTime">Reminder Time (optional)</label>
|
|
<input type="time" id="reminderTime" class="form-input">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" onclick="closeHabitModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submitHabitBtn" onclick="submitHabitForm(event)">
|
|
<span id="submitBtnText">Create Habit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check-in Detail Modal -->
|
|
<div id="checkinModal" class="modal-overlay">
|
|
<div class="modal checkin-modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Check-In Details</h2>
|
|
<button class="modal-close" onclick="closeCheckinModal()">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Note -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="checkinNote">Note (optional)</label>
|
|
<textarea id="checkinNote" class="form-textarea" placeholder="How did it go?"></textarea>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="form-field">
|
|
<label class="form-label">Rating (optional)</label>
|
|
<div class="rating-stars" id="ratingStars">
|
|
<span class="rating-star" data-rating="1" onclick="selectRating(1)">⭐</span>
|
|
<span class="rating-star" data-rating="2" onclick="selectRating(2)">⭐</span>
|
|
<span class="rating-star" data-rating="3" onclick="selectRating(3)">⭐</span>
|
|
<span class="rating-star" data-rating="4" onclick="selectRating(4)">⭐</span>
|
|
<span class="rating-star" data-rating="5" onclick="selectRating(5)">⭐</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mood -->
|
|
<div class="form-field">
|
|
<label class="form-label">Mood (optional)</label>
|
|
<div class="mood-buttons">
|
|
<button class="mood-btn" data-mood="happy" onclick="selectMood('happy')">😊</button>
|
|
<button class="mood-btn" data-mood="neutral" onclick="selectMood('neutral')">😐</button>
|
|
<button class="mood-btn" data-mood="sad" onclick="selectMood('sad')">😞</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" onclick="closeCheckinModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submitCheckinBtn" onclick="submitCheckInDetail()">
|
|
Done!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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();
|
|
// Cache habits for delete confirmation
|
|
localStorage.setItem('habitsCache', JSON.stringify(habits));
|
|
renderHabits();
|
|
} catch (error) {
|
|
console.error('Failed to load habits:', error);
|
|
showError('Failed to load habits: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Apply filters and sort
|
|
function applyFiltersAndSort() {
|
|
const categoryFilter = document.getElementById('categoryFilter').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const sortSelect = document.getElementById('sortSelect').value;
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('habitCategoryFilter', categoryFilter);
|
|
localStorage.setItem('habitStatusFilter', statusFilter);
|
|
localStorage.setItem('habitSort', sortSelect);
|
|
|
|
renderHabits();
|
|
}
|
|
|
|
// Restore filters from localStorage
|
|
function restoreFilters() {
|
|
const categoryFilter = localStorage.getItem('habitCategoryFilter') || 'all';
|
|
const statusFilter = localStorage.getItem('habitStatusFilter') || 'all';
|
|
const sortSelect = localStorage.getItem('habitSort') || 'priority_asc';
|
|
|
|
document.getElementById('categoryFilter').value = categoryFilter;
|
|
document.getElementById('statusFilter').value = statusFilter;
|
|
document.getElementById('sortSelect').value = sortSelect;
|
|
}
|
|
|
|
// Filter habits based on selected filters
|
|
function filterHabits(habits) {
|
|
const categoryFilter = document.getElementById('categoryFilter').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
return habits.filter(habit => {
|
|
// Category filter
|
|
if (categoryFilter !== 'all' && habit.category !== categoryFilter) {
|
|
return false;
|
|
}
|
|
|
|
// Status filter
|
|
if (statusFilter !== 'all') {
|
|
const isDoneToday = isCheckedToday(habit);
|
|
const shouldCheckToday = habit.should_check_today; // Added by backend in GET endpoint
|
|
|
|
if (statusFilter === 'active_today' && !shouldCheckToday) {
|
|
return false;
|
|
}
|
|
if (statusFilter === 'done_today' && !isDoneToday) {
|
|
return false;
|
|
}
|
|
if (statusFilter === 'overdue' && (!shouldCheckToday || isDoneToday)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}
|
|
|
|
// Sort habits based on selected sort option
|
|
function sortHabits(habits) {
|
|
const sortOption = document.getElementById('sortSelect').value;
|
|
const sorted = [...habits];
|
|
|
|
switch (sortOption) {
|
|
case 'priority_asc':
|
|
sorted.sort((a, b) => (a.priority || 50) - (b.priority || 50));
|
|
break;
|
|
case 'priority_desc':
|
|
sorted.sort((a, b) => (b.priority || 50) - (a.priority || 50));
|
|
break;
|
|
case 'name_asc':
|
|
sorted.sort((a, b) => a.name.localeCompare(b.name));
|
|
break;
|
|
case 'name_desc':
|
|
sorted.sort((a, b) => b.name.localeCompare(a.name));
|
|
break;
|
|
case 'streak_desc':
|
|
sorted.sort((a, b) => (b.current_streak || 0) - (a.current_streak || 0));
|
|
break;
|
|
case 'streak_asc':
|
|
sorted.sort((a, b) => (a.current_streak || 0) - (b.current_streak || 0));
|
|
break;
|
|
}
|
|
|
|
return sorted;
|
|
}
|
|
|
|
// Render habits grid
|
|
function renderHabits() {
|
|
const container = document.getElementById('habitsContainer');
|
|
|
|
// Render stats section
|
|
renderStats();
|
|
|
|
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;
|
|
}
|
|
|
|
// Apply filters and sort
|
|
let filteredHabits = filterHabits(habits);
|
|
let sortedHabits = sortHabits(filteredHabits);
|
|
|
|
if (sortedHabits.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="filter"></i>
|
|
<p>No habits match your filters</p>
|
|
<p class="hint">Try adjusting the filters above</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
const habitsHtml = sortedHabits.map(habit => renderHabitCard(habit)).join('');
|
|
container.innerHTML = `<div class="habits-grid">${habitsHtml}</div>`;
|
|
lucide.createIcons();
|
|
|
|
// Attach event handlers to check-in buttons
|
|
habits.forEach(habit => {
|
|
if (!isCheckedToday(habit)) {
|
|
const btn = document.getElementById(`checkin-btn-${habit.id}`);
|
|
if (btn) {
|
|
// Right-click to open detail modal
|
|
btn.addEventListener('contextmenu', (e) => handleCheckInButtonPress(habit.id, e, true));
|
|
|
|
// Mouse/touch events for long-press detection
|
|
btn.addEventListener('mousedown', (e) => handleCheckInButtonPress(habit.id, e, true));
|
|
btn.addEventListener('mouseup', (e) => handleCheckInButtonRelease(habit.id, e));
|
|
btn.addEventListener('mouseleave', () => handleCheckInButtonCancel());
|
|
|
|
btn.addEventListener('touchstart', (e) => handleCheckInButtonPress(habit.id, e, false));
|
|
btn.addEventListener('touchend', (e) => handleCheckInButtonRelease(habit.id, e));
|
|
btn.addEventListener('touchcancel', () => handleCheckInButtonCancel());
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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"
|
|
id="checkin-btn-${habit.id}"
|
|
${isDoneToday ? 'disabled' : ''}
|
|
>
|
|
${isDoneToday ? '✓ Done today' : 'Check In'}
|
|
</button>
|
|
|
|
<div class="habit-card-last-check">${lastCheckInfo}</div>
|
|
|
|
<div class="habit-card-lives">
|
|
<div class="habit-card-lives-hearts">${livesHtml}</div>
|
|
<button
|
|
class="habit-card-skip-btn"
|
|
onclick="skipHabitDay('${habit.id}', '${escapeHtml(habit.name)}')"
|
|
${habit.lives === 0 ? 'disabled' : ''}
|
|
title="${habit.lives === 0 ? 'No lives left' : 'Skip today and use 1 life'}"
|
|
>
|
|
Skip day
|
|
</button>
|
|
</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';
|
|
}
|
|
|
|
// Stats calculation and rendering
|
|
function renderStats() {
|
|
const statsSection = document.getElementById('statsSection');
|
|
|
|
if (habits.length === 0) {
|
|
statsSection.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
statsSection.style.display = 'block';
|
|
|
|
// Calculate stats
|
|
const totalHabits = habits.length;
|
|
|
|
// Average completion rate (30d) across all habits
|
|
const avgCompletion = habits.length > 0
|
|
? Math.round(habits.reduce((sum, h) => sum + (h.completion_rate_30d || 0), 0) / habits.length)
|
|
: 0;
|
|
|
|
// Best streak across all habits
|
|
const bestStreak = Math.max(...habits.map(h => h.streak?.best || 0), 0);
|
|
|
|
// Total lives available
|
|
const totalLives = habits.reduce((sum, h) => sum + (h.lives || 0), 0);
|
|
|
|
// Update DOM
|
|
document.getElementById('statTotalHabits').textContent = totalHabits;
|
|
document.getElementById('statAvgCompletion').textContent = `${avgCompletion}%`;
|
|
document.getElementById('statBestStreak').textContent = bestStreak;
|
|
document.getElementById('statTotalLives').textContent = totalLives;
|
|
|
|
// Render weekly summary
|
|
renderWeeklySummary();
|
|
}
|
|
|
|
function renderWeeklySummary() {
|
|
const chartContainer = document.getElementById('weeklyChart');
|
|
|
|
// Get current week's data (Mon-Sun)
|
|
const today = new Date();
|
|
const currentDayOfWeek = today.getDay(); // 0 = Sunday, 1 = Monday, etc.
|
|
const mondayOffset = currentDayOfWeek === 0 ? -6 : 1 - currentDayOfWeek;
|
|
const monday = new Date(today);
|
|
monday.setDate(today.getDate() + mondayOffset);
|
|
monday.setHours(0, 0, 0, 0);
|
|
|
|
// Calculate completions per day (Mon-Sun)
|
|
const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
const completionsPerDay = new Array(7).fill(0);
|
|
let weeklyCompleted = 0;
|
|
let weeklySkipped = 0;
|
|
|
|
habits.forEach(habit => {
|
|
(habit.completions || []).forEach(completion => {
|
|
const compDate = new Date(completion.date);
|
|
compDate.setHours(0, 0, 0, 0);
|
|
|
|
// Check if completion is in current week
|
|
const daysDiff = Math.floor((compDate - monday) / (1000 * 60 * 60 * 24));
|
|
if (daysDiff >= 0 && daysDiff < 7) {
|
|
if (completion.type === 'check') {
|
|
completionsPerDay[daysDiff]++;
|
|
weeklyCompleted++;
|
|
} else if (completion.type === 'skip') {
|
|
weeklySkipped++;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Find max for scaling bars
|
|
const maxCompletions = Math.max(...completionsPerDay, 1);
|
|
|
|
// Render bars
|
|
let barsHtml = '';
|
|
for (let i = 0; i < 7; i++) {
|
|
const count = completionsPerDay[i];
|
|
const height = (count / maxCompletions) * 100;
|
|
barsHtml += `
|
|
<div class="weekly-bar-wrapper">
|
|
<div class="weekly-bar" style="height: ${height}%" title="${count} completed"></div>
|
|
<div class="weekly-day-label">${daysOfWeek[i]}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
chartContainer.innerHTML = barsHtml;
|
|
|
|
// Update weekly stats text
|
|
document.getElementById('weeklyCompletedText').textContent = `${weeklyCompleted} completed this week`;
|
|
document.getElementById('weeklySkippedText').textContent = `${weeklySkipped} skipped this week`;
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function toggleWeeklySummary() {
|
|
const content = document.getElementById('weeklySummaryContent');
|
|
const chevron = document.getElementById('weeklySummaryChevron');
|
|
|
|
if (content.classList.contains('visible')) {
|
|
content.classList.remove('visible');
|
|
chevron.classList.remove('expanded');
|
|
} else {
|
|
content.classList.add('visible');
|
|
chevron.classList.add('expanded');
|
|
}
|
|
}
|
|
|
|
// Modal state
|
|
let selectedColor = '#3B82F6';
|
|
let selectedIcon = 'dumbbell';
|
|
|
|
// Preset colors
|
|
const presetColors = [
|
|
'#EF4444', '#F97316', '#F59E0B', '#10B981',
|
|
'#3B82F6', '#8B5CF6', '#EC4899', '#6B7280'
|
|
];
|
|
|
|
// Common icons
|
|
const commonIcons = [
|
|
'dumbbell', 'moon', 'book', 'brain', 'heart', 'flame',
|
|
'star', 'target', 'trophy', 'coffee', 'music', 'camera',
|
|
'zap', 'sun', 'droplet', 'leaf', 'feather', 'pencil',
|
|
'smile', 'watch', 'footprints', 'activity', 'battery', 'headphones',
|
|
'utensils', 'apple', 'pizza', 'glass-water', 'pill', 'stethoscope',
|
|
'briefcase', 'laptop', 'smartphone', 'mail', 'calendar', 'clock'
|
|
];
|
|
|
|
// Show add habit modal
|
|
function showAddHabitModal() {
|
|
const modal = document.getElementById('habitModal');
|
|
const form = document.getElementById('habitForm');
|
|
const modalTitle = document.querySelector('.modal-title');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Reset editing state
|
|
editingHabitId = null;
|
|
|
|
// Reset modal title and button text to create mode
|
|
modalTitle.textContent = 'Add Habit';
|
|
submitBtnText.textContent = 'Create Habit';
|
|
|
|
// Reset form
|
|
form.reset();
|
|
selectedColor = '#3B82F6';
|
|
selectedIcon = 'dumbbell';
|
|
|
|
// Initialize color picker
|
|
initColorPicker();
|
|
|
|
// Initialize icon picker
|
|
initIconPicker();
|
|
|
|
// Update frequency params for initial selection
|
|
updateFrequencyParams();
|
|
|
|
// Show modal
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Close habit modal
|
|
function closeHabitModal() {
|
|
const modal = document.getElementById('habitModal');
|
|
modal.classList.remove('active');
|
|
|
|
// Reset editing state
|
|
editingHabitId = null;
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
const modal = document.getElementById('habitModal');
|
|
if (e.target === modal) {
|
|
closeHabitModal();
|
|
}
|
|
|
|
const checkinModal = document.getElementById('checkinModal');
|
|
if (e.target === checkinModal) {
|
|
closeCheckinModal();
|
|
}
|
|
});
|
|
|
|
// Initialize color picker
|
|
function initColorPicker() {
|
|
const swatchesContainer = document.getElementById('colorSwatches');
|
|
swatchesContainer.innerHTML = presetColors.map(color =>
|
|
`<div class="color-swatch ${color === selectedColor ? 'selected' : ''}"
|
|
style="background-color: ${color}"
|
|
onclick="selectColor('${color}')"></div>`
|
|
).join('');
|
|
|
|
// Handle custom color input
|
|
const customColorInput = document.getElementById('customColor');
|
|
customColorInput.addEventListener('input', (e) => {
|
|
const value = e.target.value;
|
|
if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
|
|
selectColor(value);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Select color
|
|
function selectColor(color) {
|
|
selectedColor = color;
|
|
|
|
// Update swatches
|
|
const swatches = document.querySelectorAll('.color-swatch');
|
|
swatches.forEach(swatch => {
|
|
if (swatch.style.backgroundColor === color || rgbToHex(swatch.style.backgroundColor) === color) {
|
|
swatch.classList.add('selected');
|
|
} else {
|
|
swatch.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
// Update custom color input if not a preset
|
|
if (!presetColors.includes(color)) {
|
|
document.getElementById('customColor').value = color;
|
|
}
|
|
}
|
|
|
|
// Convert RGB to Hex
|
|
function rgbToHex(rgb) {
|
|
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
if (!match) return rgb;
|
|
return '#' + [1, 2, 3].map(i => {
|
|
const hex = parseInt(match[i]).toString(16);
|
|
return hex.length === 1 ? '0' + hex : hex;
|
|
}).join('').toUpperCase();
|
|
}
|
|
|
|
// Initialize icon picker
|
|
function initIconPicker() {
|
|
const iconPickerContainer = document.getElementById('iconPicker');
|
|
iconPickerContainer.innerHTML = commonIcons.map(icon =>
|
|
`<div class="icon-option ${icon === selectedIcon ? 'selected' : ''}"
|
|
onclick="selectIcon('${icon}')">
|
|
<i data-lucide="${icon}"></i>
|
|
</div>`
|
|
).join('');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Select icon
|
|
function selectIcon(icon) {
|
|
selectedIcon = icon;
|
|
|
|
// Update icon options
|
|
const iconOptions = document.querySelectorAll('.icon-option');
|
|
iconOptions.forEach((option, index) => {
|
|
if (commonIcons[index] === icon) {
|
|
option.classList.add('selected');
|
|
} else {
|
|
option.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update frequency params based on selected type
|
|
function updateFrequencyParams() {
|
|
const frequencyType = document.getElementById('frequencyType').value;
|
|
const paramsContainer = document.getElementById('frequencyParams');
|
|
|
|
let html = '';
|
|
|
|
if (frequencyType === 'specific_days') {
|
|
html = `
|
|
<label class="form-label">Select Days</label>
|
|
<div class="day-checkboxes">
|
|
${['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => `
|
|
<label class="day-checkbox-label">
|
|
<input type="checkbox" name="day" value="${index}" checked>
|
|
<span>${day}</span>
|
|
</label>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
} else if (frequencyType === 'x_per_week') {
|
|
html = `
|
|
<label class="form-label" for="xPerWeek">Times per week</label>
|
|
<input type="number" id="xPerWeek" class="form-input" min="1" max="7" value="3">
|
|
`;
|
|
} else if (frequencyType === 'custom') {
|
|
html = `
|
|
<label class="form-label" for="customInterval">Interval (days)</label>
|
|
<input type="number" id="customInterval" class="form-input" min="1" value="7">
|
|
`;
|
|
}
|
|
|
|
paramsContainer.innerHTML = html;
|
|
}
|
|
|
|
// Submit habit form
|
|
async function submitHabitForm(event) {
|
|
event.preventDefault();
|
|
|
|
const submitBtn = document.getElementById('submitHabitBtn');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Determine if we're creating or editing
|
|
const isEditing = editingHabitId !== null;
|
|
|
|
// Get form values
|
|
const name = document.getElementById('habitName').value.trim();
|
|
const category = document.getElementById('habitCategory').value;
|
|
const priority = parseInt(document.getElementById('habitPriority').value);
|
|
const notes = document.getElementById('habitNotes').value.trim();
|
|
const frequencyType = document.getElementById('frequencyType').value;
|
|
const reminderTime = document.getElementById('reminderTime').value;
|
|
|
|
// Validate name
|
|
if (!name) {
|
|
showToast('Please enter a habit name', 'error');
|
|
return;
|
|
}
|
|
|
|
if (name.length > 100) {
|
|
showToast('Habit name must be 100 characters or less', 'error');
|
|
return;
|
|
}
|
|
|
|
// Validate color
|
|
if (!/^#[0-9A-Fa-f]{6}$/.test(selectedColor)) {
|
|
showToast('Invalid color format', 'error');
|
|
return;
|
|
}
|
|
|
|
// Build frequency params
|
|
let frequencyParams = {};
|
|
|
|
if (frequencyType === 'specific_days') {
|
|
const checkedDays = Array.from(document.querySelectorAll('input[name="day"]:checked'))
|
|
.map(cb => parseInt(cb.value));
|
|
frequencyParams = { days: checkedDays };
|
|
} else if (frequencyType === 'x_per_week') {
|
|
const xPerWeek = parseInt(document.getElementById('xPerWeek').value);
|
|
frequencyParams = { count: xPerWeek };
|
|
} else if (frequencyType === 'custom') {
|
|
const interval = parseInt(document.getElementById('customInterval').value);
|
|
frequencyParams = { interval };
|
|
}
|
|
|
|
// Build habit object
|
|
const habitData = {
|
|
name,
|
|
category,
|
|
color: selectedColor,
|
|
icon: selectedIcon,
|
|
priority,
|
|
notes: notes || undefined,
|
|
frequency: {
|
|
type: frequencyType,
|
|
...frequencyParams
|
|
},
|
|
reminderTime: reminderTime || undefined
|
|
};
|
|
|
|
// Show loading state
|
|
submitBtn.disabled = true;
|
|
submitBtnText.textContent = isEditing ? 'Saving...' : 'Creating...';
|
|
|
|
try {
|
|
const url = isEditing ? `/echo/api/habits/${editingHabitId}` : '/echo/api/habits';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(habitData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
// Success
|
|
showToast(isEditing ? 'Habit updated!' : 'Habit created successfully!', 'success');
|
|
closeHabitModal();
|
|
await loadHabits();
|
|
|
|
} catch (error) {
|
|
console.error(`Failed to ${isEditing ? 'update' : 'create'} habit:`, error);
|
|
showToast(`Failed to ${isEditing ? 'update' : 'create'} habit: ` + error.message, 'error');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtnText.textContent = isEditing ? 'Save Changes' : 'Create Habit';
|
|
}
|
|
}
|
|
|
|
// Show toast notification
|
|
function showToast(message, type = 'success') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.innerHTML = `
|
|
<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}"></i>
|
|
<span>${escapeHtml(message)}</span>
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
lucide.createIcons();
|
|
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Show edit habit modal
|
|
let editingHabitId = null; // Track which habit we're editing
|
|
|
|
function showEditHabitModal(habitId) {
|
|
const habit = habits.find(h => h.id === habitId);
|
|
if (!habit) {
|
|
showToast('Habit not found', 'error');
|
|
return;
|
|
}
|
|
|
|
editingHabitId = habitId;
|
|
|
|
const modal = document.getElementById('habitModal');
|
|
const form = document.getElementById('habitForm');
|
|
const modalTitle = document.querySelector('.modal-title');
|
|
const submitBtn = document.getElementById('submitHabitBtn');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Change modal title and button text
|
|
modalTitle.textContent = 'Edit Habit';
|
|
submitBtnText.textContent = 'Save Changes';
|
|
|
|
// Pre-populate form fields
|
|
document.getElementById('habitName').value = habit.name;
|
|
document.getElementById('habitCategory').value = habit.category || 'health';
|
|
document.getElementById('habitPriority').value = habit.priority || 3;
|
|
document.getElementById('habitNotes').value = habit.notes || '';
|
|
document.getElementById('frequencyType').value = habit.frequency?.type || 'daily';
|
|
document.getElementById('reminderTime').value = habit.reminderTime || '';
|
|
|
|
// Set selected color and icon
|
|
selectedColor = habit.color || '#3B82F6';
|
|
selectedIcon = habit.icon || 'dumbbell';
|
|
|
|
// Initialize color picker with current selection
|
|
initColorPicker();
|
|
|
|
// Initialize icon picker with current selection
|
|
initIconPicker();
|
|
|
|
// Update frequency params and pre-populate
|
|
updateFrequencyParams();
|
|
|
|
// Pre-populate frequency params based on type
|
|
const frequencyType = habit.frequency?.type;
|
|
if (frequencyType === 'specific_days' && habit.frequency.days) {
|
|
const dayCheckboxes = document.querySelectorAll('input[name="day"]');
|
|
dayCheckboxes.forEach(cb => {
|
|
cb.checked = habit.frequency.days.includes(parseInt(cb.value));
|
|
});
|
|
} else if (frequencyType === 'x_per_week' && habit.frequency.count) {
|
|
const xPerWeekInput = document.getElementById('xPerWeek');
|
|
if (xPerWeekInput) {
|
|
xPerWeekInput.value = habit.frequency.count;
|
|
}
|
|
} else if (frequencyType === 'custom' && habit.frequency.interval) {
|
|
const customIntervalInput = document.getElementById('customInterval');
|
|
if (customIntervalInput) {
|
|
customIntervalInput.value = habit.frequency.interval;
|
|
}
|
|
}
|
|
|
|
// Show modal
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Delete habit (placeholder)
|
|
async function deleteHabit(habitId) {
|
|
// Find habit to get its name for confirmation
|
|
const habits = JSON.parse(localStorage.getItem('habitsCache') || '[]');
|
|
const habit = habits.find(h => h.id === habitId);
|
|
const habitName = habit ? habit.name : 'this habit';
|
|
|
|
if (!confirm(`Delete ${habitName}? This cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/echo/api/habits/${habitId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
// Show success toast
|
|
showToast('Habit deleted', 'success');
|
|
|
|
// Refresh habits list (will remove card from DOM)
|
|
await loadHabits();
|
|
} catch (error) {
|
|
console.error('Failed to delete habit:', error);
|
|
showToast(`Failed to delete habit: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Skip a habit day using a life
|
|
async function skipHabitDay(habitId, habitName) {
|
|
if (!confirm('Use 1 life to skip today?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/echo/api/habits/${habitId}/skip`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Show success toast with remaining lives
|
|
const remainingLives = updatedHabit.lives;
|
|
showToast(`Day skipped. ${remainingLives} ${remainingLives === 1 ? 'life' : 'lives'} remaining.`, 'success');
|
|
|
|
// Refresh habits list
|
|
await loadHabits();
|
|
} catch (error) {
|
|
console.error('Failed to skip habit day:', error);
|
|
showToast(`Failed to skip: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Check-in state
|
|
let checkInHabitId = null;
|
|
let checkInRating = null;
|
|
let checkInMood = null;
|
|
let longPressTimer = null;
|
|
|
|
// Check in habit (simple click)
|
|
async function checkInHabit(habitId, event) {
|
|
// Prevent simple check-in if this was triggered during long-press detection
|
|
if (event && event.type === 'mousedown') {
|
|
return; // Let the long-press handler deal with it
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/echo/api/habits/${habitId}/check`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Show success toast with streak
|
|
showToast(`Habit checked! 🔥 Streak: ${updatedHabit.streak?.current || 0}`, 'success');
|
|
|
|
// Refresh habits list
|
|
await loadHabits();
|
|
|
|
// Add pulse animation to the updated card
|
|
setTimeout(() => {
|
|
const card = event?.target?.closest('.habit-card');
|
|
if (card) {
|
|
card.classList.add('pulse');
|
|
setTimeout(() => card.classList.remove('pulse'), 500);
|
|
}
|
|
}, 100);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to check in:', error);
|
|
showToast('Failed to check in: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Show check-in detail modal
|
|
function showCheckInDetailModal(habitId) {
|
|
checkInHabitId = habitId;
|
|
checkInRating = null;
|
|
checkInMood = null;
|
|
|
|
// Reset form
|
|
document.getElementById('checkinNote').value = '';
|
|
|
|
// Reset rating stars
|
|
document.querySelectorAll('.rating-star').forEach(star => {
|
|
star.classList.remove('active');
|
|
});
|
|
|
|
// Reset mood buttons
|
|
document.querySelectorAll('.mood-btn').forEach(btn => {
|
|
btn.classList.remove('selected');
|
|
});
|
|
|
|
// Show modal
|
|
const modal = document.getElementById('checkinModal');
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Close check-in detail modal
|
|
function closeCheckinModal() {
|
|
const modal = document.getElementById('checkinModal');
|
|
modal.classList.remove('active');
|
|
checkInHabitId = null;
|
|
checkInRating = null;
|
|
checkInMood = null;
|
|
}
|
|
|
|
// Select rating
|
|
function selectRating(rating) {
|
|
checkInRating = rating;
|
|
|
|
// Update star display
|
|
document.querySelectorAll('.rating-star').forEach((star, index) => {
|
|
if (index < rating) {
|
|
star.classList.add('active');
|
|
} else {
|
|
star.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Select mood
|
|
function selectMood(mood) {
|
|
checkInMood = mood;
|
|
|
|
// Update mood button display
|
|
document.querySelectorAll('.mood-btn').forEach(btn => {
|
|
if (btn.dataset.mood === mood) {
|
|
btn.classList.add('selected');
|
|
} else {
|
|
btn.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Submit check-in with details
|
|
async function submitCheckInDetail() {
|
|
if (!checkInHabitId) {
|
|
showToast('No habit selected', 'error');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = document.getElementById('submitCheckinBtn');
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const note = document.getElementById('checkinNote').value.trim();
|
|
|
|
// Build request body with optional fields
|
|
const body = {};
|
|
if (note) body.note = note;
|
|
if (checkInRating) body.rating = checkInRating;
|
|
if (checkInMood) body.mood = checkInMood;
|
|
|
|
const response = await fetch(`/echo/api/habits/${checkInHabitId}/check`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Show success toast with streak
|
|
showToast(`Habit checked! 🔥 Streak: ${updatedHabit.streak?.current || 0}`, 'success');
|
|
|
|
// Close modal
|
|
closeCheckinModal();
|
|
|
|
// Refresh habits list
|
|
await loadHabits();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to check in:', error);
|
|
showToast('Failed to check in: ' + error.message, 'error');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Handle long-press for check-in detail modal
|
|
function handleCheckInButtonPress(habitId, event, isMouseEvent) {
|
|
// Prevent default context menu on right-click
|
|
if (event.type === 'contextmenu') {
|
|
event.preventDefault();
|
|
showCheckInDetailModal(habitId);
|
|
return;
|
|
}
|
|
|
|
// For touch/mouse press, start long-press timer
|
|
if (event.type === 'mousedown' || event.type === 'touchstart') {
|
|
event.preventDefault();
|
|
|
|
longPressTimer = setTimeout(() => {
|
|
showCheckInDetailModal(habitId);
|
|
longPressTimer = null;
|
|
}, 500); // 500ms for long-press
|
|
}
|
|
}
|
|
|
|
// Handle release of check-in button
|
|
function handleCheckInButtonRelease(habitId, event) {
|
|
if (event.type === 'mouseup' || event.type === 'touchend') {
|
|
// If long-press timer is still running, it was a short press
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
|
|
// Perform simple check-in
|
|
checkInHabit(habitId, event);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cancel long-press if moved away
|
|
function handleCheckInButtonCancel() {
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
}
|
|
}
|
|
|
|
// 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();
|
|
restoreFilters();
|
|
loadHabits();
|
|
</script>
|
|
</body>
|
|
</html>
|