File: //home/primrwxj/app.healthrestoration.us/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Daily Reset System • Focus Edition</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
/* ----- THEME (light/dark) ----- */
:root {
--bg-gradient-start: #eef2f3;
--bg-gradient-end: #d9e4e8;
--card-bg: rgba(255, 255, 250, 0.96);
--text-primary: #1f3e3a;
--text-secondary: #2c5f6e;
--accent: #3b8b6e;
--accent-hover: #2c6e54;
--border-light: #ddebe4;
--checklist-bg: #fafbf7;
--danger: #b8735f;
--shadow-sm: 0 10px 25px rgba(0,0,0,0.05);
--focus-gold: #e6b422;
--focus-glow: rgba(230, 180, 34, 0.2);
}
body.dark-mode {
--bg-gradient-start: #121b1f;
--bg-gradient-end: #0e171c;
--card-bg: #1f2c2c;
--text-primary: #e4ece8;
--text-secondary: #9fc7bc;
--accent: #5fad92;
--accent-hover: #489b7e;
--border-light: #2e4545;
--checklist-bg: #253535;
--danger: #cf8a74;
--shadow-sm: 0 10px 25px rgba(0,0,0,0.3);
--focus-gold: #f5c542;
--focus-glow: rgba(245, 197, 66, 0.2);
}
body {
background: linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
min-height: 100vh;
padding: 1.5rem 1rem 3rem;
transition: background 0.3s, color 0.2s;
color: var(--text-primary);
}
.app-container {
max-width: 1400px;
margin: 0 auto;
}
/* navigation */
.nav-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-bottom: 2rem;
background: rgba(255,255,245,0.5);
backdrop-filter: blur(8px);
padding: 0.75rem 1rem;
border-radius: 60px;
}
body.dark-mode .nav-tabs {
background: rgba(20,30,30,0.7);
}
.tab-btn {
background: transparent;
border: none;
padding: 0.6rem 1.4rem;
font-weight: 600;
border-radius: 40px;
cursor: pointer;
transition: all 0.2s;
color: var(--text-secondary);
background: var(--card-bg);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.tab-btn.active {
background: var(--accent);
color: white;
}
.panel { display: none; animation: fadeSlide 0.3s ease; }
.panel.active-panel { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
/* cards */
.dashboard-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 1.8rem;
}
.stat-card {
background: var(--card-bg);
backdrop-filter: blur(2px);
border-radius: 2rem;
padding: 1.5rem;
flex: 1;
min-width: 200px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-3px); }
.phase-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 1.8rem;
margin-top: 1rem;
}
.phase-card {
background: var(--card-bg);
border-radius: 2rem;
padding: 1.4rem;
border: 1px solid var(--border-light);
transition: all 0.2s;
position: relative;
}
.phase-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 1rem;
border-bottom: 2px solid var(--border-light);
padding-bottom: 0.6rem;
}
.phase-icon { font-size: 2rem; }
.phase-title { font-size: 1.4rem; font-weight: 700; color: var(--accent);}
.time-range { font-size: 0.7rem; background: var(--border-light); padding: 0.2rem 0.8rem; border-radius: 20px; }
.focus-badge {
background: var(--focus-gold);
color: #2c2b1f;
font-size: 0.7rem;
padding: 0.2rem 0.7rem;
border-radius: 30px;
font-weight: bold;
margin-left: auto;
}
.checklist { list-style: none; margin: 1rem 0; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.checklist li {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
background: var(--checklist-bg);
padding: 8px 12px;
border-radius: 60px;
transition: all 0.15s;
position: relative;
}
.checklist li.focus-task {
background: var(--focus-glow);
border-left: 4px solid var(--focus-gold);
}
.checklist li input { width: 18px; height: 18px; cursor: pointer; }
.task-label {
flex: 1;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
}
.focus-star {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
opacity: 0.6;
transition: 0.1s;
padding: 0 4px;
}
.focus-star.active {
opacity: 1;
color: var(--focus-gold);
text-shadow: 0 0 2px gold;
}
.progress-bar-bg { background: #e2e8e4; border-radius: 30px; height: 10px; overflow: hidden; }
.progress-fill { background: var(--accent); width: 0%; height: 100%; transition: width 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1); }
.why-content { background: var(--checklist-bg); padding: 0.7rem; border-radius: 1rem; margin-top: 0.5rem; display: none; font-size: 0.8rem; }
button, .continue-btn, .export-btn {
background: var(--accent);
border: none;
color: white;
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
button:hover { background: var(--accent-hover); transform: scale(0.97); }
.danger-btn { background: var(--danger); }
.income-area, .reflection-area { background: var(--checklist-bg); border-radius: 1.2rem; padding: 1rem; margin: 1rem 0; }
textarea, input { width: 100%; padding: 0.7rem; border-radius: 1.2rem; border: 1px solid var(--border-light); background: var(--card-bg); color: var(--text-primary); }
.toast-notify {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--accent);
color: white;
padding: 12px 24px;
border-radius: 60px;
font-weight: 500;
z-index: 10000;
animation: slideInRight 0.3s ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.floating-controls {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
display: flex;
gap: 12px;
}
.btn-circle {
background: var(--accent);
border-radius: 40px;
padding: 10px 18px;
font-size: 0.85rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
canvas#weeklyChart { max-width: 100%; height: auto; background: transparent; }
.focus-summary {
font-size: 0.75rem;
margin-top: 8px;
padding: 6px;
background: var(--checklist-bg);
border-radius: 30px;
text-align: center;
}
@media (max-width: 680px) { .phase-grid { grid-template-columns: 1fr; } .dashboard-grid { flex-direction: column; } }
</style>
</head>
<body>
<div class="app-container">
<div class="nav-tabs">
<button class="tab-btn active" data-tab="dashboard">📊 Dashboard</button>
<button class="tab-btn" data-tab="phases">🌿 All Phases</button>
</div>
<!-- DASHBOARD -->
<div id="dashboardPanel" class="panel active-panel">
<div class="dashboard-grid">
<div class="stat-card"><h3>✨ Overall Daily Score</h3><div style="font-size: 3rem; font-weight:800;" id="overallPercent">0%</div><div id="scoreMessage" class="score-message" style="margin-top: 8px;"></div></div>
<div class="stat-card"><h3>🔥 Current Phase</h3><div id="currentPhaseName" style="font-size: 1.4rem; font-weight:bold;">Morning Reset</div><button id="continueResetBtn" class="continue-btn" style="margin-top: 12px;">▶ Start / Continue Reset</button></div>
<div class="stat-card"><h3>🏆 Streak</h3><div id="streakCount" style="font-size: 2.8rem;">0</div><div>consecutive days ≥70%</div><div id="nextMilestone" style="font-size:0.7rem; margin-top:6px;"></div></div>
</div>
<div class="stat-card" style="margin-bottom: 1rem;"><h3>⭐ Today's Focus Summary</h3><div id="focusSummaryDashboard">No focus tasks selected. Click ⭐ on any task to prioritize.</div></div>
<div class="stat-card" style="margin-bottom: 1rem;"><h3>⏰ Smart Suggestion</h3><div id="smartSuggestion">✨ Analyzing best phase...</div></div>
<div class="stat-card" style="margin-bottom: 1rem;"><h3>📈 Weekly Progress</h3><canvas id="weeklyChart" height="120" style="width:100%; max-width:100%;"></canvas></div>
<div class="income-area"><h3>💰 Income Tracker</h3><textarea id="incomeInput" rows="2" placeholder="What did you do today to improve your income?"></textarea><div class="flex-between" style="margin-top: 8px; display:flex; justify-content:space-between;"><span>💡 Your daily income action</span><button id="saveIncomeBtn">Save</button></div><div id="incomePreview" style="margin-top: 10px; font-style:italic;"></div></div>
<div style="display: flex; gap: 12px; margin-top: 1rem; flex-wrap: wrap;"><button id="exportSummaryBtn" class="export-btn">📎 Export Daily Summary</button><button id="globalResetBtn" class="danger-btn">🔄 Reset All Data</button></div>
</div>
<!-- PHASES PANEL -->
<div id="phasesPanel" class="panel"><div class="phase-grid" id="phaseGridContainer"></div></div>
</div>
<div class="floating-controls"><button id="darkModeToggleBtn" class="btn-circle">🌙 Dark Mode</button><button id="weeklyInsightBtn" class="btn-circle">📊 Insight</button></div>
<script>
// ---------- DATA ----------
const PHASE_KEYS = ['morning', 'midday', 'afternoon', 'evening', 'night'];
const phaseMeta = {
morning: { title: 'Morning Reset', timeRange: '0–90 min after waking', icon: '🌅', why: 'Morning habits set executive tone; sunlight & hydration boost circadian rhythm.' },
midday: { title: 'Midday Reset', timeRange: 'Late morning – noon', icon: '☀️', why: 'Prevents decision fatigue & sustains energy for high-value tasks.' },
afternoon: { title: 'Afternoon Reset', timeRange: '1PM – 4PM', icon: '🌤️', why: 'Movement & hydration restore focus for deep work sessions.' },
evening: { title: 'Evening Reset', timeRange: '5PM – 8PM', icon: '🌙', why: 'Transition rituals lower cortisol, improve relationships & sleep onset.' },
night: { title: 'Night Reset', timeRange: 'Before bed', icon: '🌌', why: 'Shutdown & planning boost memory consolidation & next-day clarity.' }
};
const checklistsData = {
morning: ["Wake up (no snooze)", "Brush teeth", "Drink warm lemon water", "Cold water face rinse (optional)", "Stretch or move", "Get sunlight", "Set top 3 priorities"],
midday: ["Pause awareness check", "Hydrate", "Eat intentional meal", "Walk or stretch", "Mental reset", "Income action"],
afternoon: ["Energy awareness", "Hydrate", "Smart snack (optional)", "Movement reset", "Remove distractions", "Deep work session", "Progress check", "Income alignment"],
evening: ["Transition out of work", "Shower / refresh", "Light dinner", "Walk", "Connect with loved ones", "Mental unload (journal)", "Digital detox", "Calm routine", "Prepare for sleep"],
night: ["Full shutdown", "Reflect on day", "Plan tomorrow (top 3 tasks)", "Hygiene routine", "No phone usage", "Breathing / meditation", "Optional reading", "Optimize sleep environment", "Sleep on time"]
};
// Load data
let completedState = JSON.parse(localStorage.getItem('dailyReset_completed')) || (() => { let s = {}; PHASE_KEYS.forEach(p => { s[p] = new Array(checklistsData[p].length).fill(false); }); return s; })();
let incomeAction = localStorage.getItem('dailyReset_income') || '';
let reflectionNotes = JSON.parse(localStorage.getItem('dailyReset_reflections')) || { morning: '', midday: '', afternoon: '', evening: '', night: '' };
let lastStreakDate = localStorage.getItem('dailyReset_streakDate') || '';
let streakDays = parseInt(localStorage.getItem('dailyReset_streak')) || 0;
let weeklyHistory = JSON.parse(localStorage.getItem('weeklyHistory')) || [];
// NEW: Focus tasks storage (today's priorities)
let focusTasks = JSON.parse(localStorage.getItem('dailyReset_focus')) || { morning: [], midday: [], afternoon: [], evening: [], night: [] };
function saveFocus() { localStorage.setItem('dailyReset_focus', JSON.stringify(focusTasks)); }
// helpers
function computeTotalCompletion() { let total=0, done=0; PHASE_KEYS.forEach(p => { total += completedState[p].length; done += completedState[p].filter(v=>v===true).length; }); return total===0?0:(done/total)*100; }
function phaseCompletionPercent(phaseKey) { let arr = completedState[phaseKey]; if(!arr.length) return 0; return (arr.filter(v=>v===true).length/arr.length)*100; }
function persistAll() {
localStorage.setItem('dailyReset_completed', JSON.stringify(completedState));
localStorage.setItem('dailyReset_income', incomeAction);
localStorage.setItem('dailyReset_reflections', JSON.stringify(reflectionNotes));
localStorage.setItem('dailyReset_streak', streakDays);
localStorage.setItem('dailyReset_streakDate', lastStreakDate);
localStorage.setItem('weeklyHistory', JSON.stringify(weeklyHistory));
saveFocus();
}
function updateStreak() {
const overall = computeTotalCompletion();
const todayStr = new Date().toDateString();
const yesterdayStr = new Date(Date.now() - 86400000).toDateString();
if (overall >= 70) {
if (lastStreakDate !== todayStr) {
if (lastStreakDate === yesterdayStr) streakDays++;
else streakDays = 1;
lastStreakDate = todayStr;
}
} else {
if (lastStreakDate && lastStreakDate !== todayStr && lastStreakDate !== yesterdayStr) streakDays = 0;
}
persistAll();
return streakDays;
}
function showToast(message, type = 'success') {
const toast = document.createElement('div');
toast.className = 'toast-notify';
toast.textContent = message;
if (type === 'error') toast.style.background = '#b8735f';
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2800);
}
function triggerConfetti() {
const canvas = document.createElement('canvas');
canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.pointerEvents = 'none'; canvas.style.zIndex = '9999';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
let particles = [];
for(let i=0;i<130;i++) particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height - canvas.height, size: Math.random() * 7 + 2, color: `hsl(${Math.random() * 360}, 75%, 65%)`, vx: (Math.random() - 0.5) * 3, vy: Math.random() * 5 + 3 });
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
let alive = false;
particles.forEach(p => { p.x += p.vx; p.y += p.vy; if(p.y < canvas.height + 100) alive = true; ctx.fillStyle = p.color; ctx.fillRect(p.x, p.y, p.size, p.size); });
if(alive) requestAnimationFrame(animate); else canvas.remove();
}
animate();
showToast('🎉 Milestone unlocked!', 'success');
}
let previousOverall = computeTotalCompletion();
function renderDashboard() {
const overall = computeTotalCompletion();
document.getElementById('overallPercent').innerText = Math.floor(overall) + '%';
let msg = overall >= 80 ? '✨ You are in control ✨' : (overall >= 50 ? '🌊 You are drifting — refocus' : '⚡ You are reacting — reclaim your day');
const msgDiv = document.getElementById('scoreMessage');
msgDiv.innerText = msg; msgDiv.style.background = overall>=80 ? '#dff0e6' : (overall>=50?'#fff0cf':'#ffe0db');
let currentPhaseName = 'Morning Reset';
for(let p of PHASE_KEYS) if(phaseCompletionPercent(p) < 100) { currentPhaseName = phaseMeta[p].title; break; }
document.getElementById('currentPhaseName').innerText = currentPhaseName;
updateStreak();
document.getElementById('streakCount').innerText = streakDays;
document.getElementById('nextMilestone').innerHTML = streakDays>=5 ? '🔥 On fire!' : (streakDays>0 ? `${5-streakDays} days to veteran` : 'Complete 70% today to start streak');
document.getElementById('incomePreview').innerHTML = incomeAction ? `📌 "${incomeAction.substring(0, 100)}"` : 'No income action recorded today.';
if(previousOverall !== overall && overall === 100) triggerConfetti();
previousOverall = overall;
drawWeeklyChart();
updateSmartSuggestion();
updateFocusSummaryDashboard();
}
function updateFocusSummaryDashboard() {
let totalFocus = 0;
let completedFocus = 0;
for(let phase of PHASE_KEYS) {
const focusIndices = focusTasks[phase] || [];
focusIndices.forEach(idx => {
totalFocus++;
if(completedState[phase][idx]) completedFocus++;
});
}
const focusPercent = totalFocus === 0 ? 100 : (completedFocus / totalFocus) * 100;
const focusDiv = document.getElementById('focusSummaryDashboard');
if(totalFocus === 0) {
focusDiv.innerHTML = '⭐ No focus tasks selected. Click the star ★ on any task to make it a priority for today.';
} else {
focusDiv.innerHTML = `⭐ You have ${totalFocus} priority task${totalFocus !== 1 ? 's' : ''} today. ${completedFocus} completed (${Math.floor(focusPercent)}%). Focus on these first!`;
}
}
function drawWeeklyChart() {
const canvas = document.getElementById('weeklyChart');
if(!canvas) return;
const ctx = canvas.getContext('2d');
const width = canvas.clientWidth; canvas.width = width; canvas.height = 150;
ctx.clearRect(0,0,canvas.width,canvas.height);
const last7 = weeklyHistory.slice(-7);
if(last7.length === 0) { ctx.fillStyle = 'gray'; ctx.fillText('Complete days to see trend', 20, 80); return; }
const barWidth = (canvas.width - 50) / 7;
last7.forEach((item, idx) => {
let score = item.score;
let h = (score/100) * canvas.height;
ctx.fillStyle = '#5fad92';
ctx.fillRect(45 + idx * barWidth, canvas.height - h, barWidth - 5, h);
ctx.fillStyle = '#2c5f6e';
ctx.font = '10px system-ui';
ctx.fillText(`${Math.floor(score)}%`, 45 + idx * barWidth, canvas.height - h - 3);
});
}
function updateSmartSuggestion() {
const hour = new Date().getHours();
let suggested = 'morning';
if (hour >= 12 && hour < 15) suggested = 'midday';
else if (hour >= 15 && hour < 18) suggested = 'afternoon';
else if (hour >= 18 && hour < 22) suggested = 'evening';
else if (hour >= 22 || hour < 5) suggested = 'night';
const phaseName = phaseMeta[suggested].title;
const comp = phaseCompletionPercent(suggested);
const suggestionMsg = comp < 70 ? `🌱 It's ${phaseName} time! Focus on these tasks for better flow.` : `✅ ${phaseName} looks solid. Keep the rhythm.`;
document.getElementById('smartSuggestion').innerHTML = suggestionMsg + (comp===100 ? ' 🎉 complete!' : '');
}
// Render phases with focus stars
function renderPhaseGrid() {
const container = document.getElementById('phaseGridContainer');
if(!container) return;
container.innerHTML = '';
for(let phaseKey of PHASE_KEYS) {
const meta = phaseMeta[phaseKey];
const tasks = checklistsData[phaseKey];
const completedArr = completedState[phaseKey];
const doneCount = completedArr.filter(v=>v===true).length;
const percent = (doneCount/tasks.length)*100;
const focusIndices = focusTasks[phaseKey] || [];
const card = document.createElement('div'); card.className = 'phase-card'; card.dataset.phase = phaseKey;
card.innerHTML = `
<div class="phase-header">
<span class="phase-icon">${meta.icon}</span>
<span class="phase-title">${meta.title}</span>
<span class="time-range">${meta.timeRange}</span>
<span class="focus-badge" id="focusBadge-${phaseKey}">⭐ ${focusIndices.length} priority</span>
</div>
<ul class="checklist" id="checklist-${phaseKey}"></ul>
<div class="progress-section">
<div class="flex-between"><span>Progress</span><span id="progressText-${phaseKey}">${doneCount}/${tasks.length}</span></div>
<div class="progress-bar-bg"><div class="progress-fill" id="progressFill-${phaseKey}" style="width: ${percent}%;"></div></div>
</div>
<div class="focus-summary" id="focusMsg-${phaseKey}">⭐ Focus tasks will appear highlighted</div>
<div class="why-matter"><button class="why-btn" data-phase="${phaseKey}">❓ Why it matters</button><div id="whyContent-${phaseKey}" class="why-content">${meta.why}</div></div>
<div class="reflection-area"><label>📝 Reflection note</label><textarea id="note-${phaseKey}" rows="2" placeholder="Your insights...">${reflectionNotes[phaseKey] || ''}</textarea><button class="save-note-btn" data-phase="${phaseKey}" style="margin-top:6px;">Save note</button></div>
`;
container.appendChild(card);
const checklistContainer = card.querySelector(`.checklist`);
tasks.forEach((task, idx) => {
const isFocus = focusIndices.includes(idx);
const li = document.createElement('li');
if(isFocus) li.classList.add('focus-task');
const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = completedArr[idx];
cb.addEventListener('change', (e) => {
completedState[phaseKey][idx] = cb.checked;
persistAll();
renderAll();
saveDailyScoreToHistory();
if(cb.checked && isFocus) showToast(`⭐ Priority done: ${task.substring(0,40)}`, 'success');
});
const label = document.createElement('label'); label.className = 'task-label'; label.innerText = task;
const starBtn = document.createElement('button');
starBtn.innerHTML = isFocus ? '★' : '☆';
starBtn.className = `focus-star ${isFocus ? 'active' : ''}`;
starBtn.title = isFocus ? 'Remove from focus' : 'Mark as today\'s priority (non-negotiable)';
starBtn.addEventListener('click', (e) => {
e.preventDefault();
let currentFocus = [...(focusTasks[phaseKey] || [])];
if(currentFocus.includes(idx)) {
currentFocus = currentFocus.filter(i => i !== idx);
showToast(`Removed priority: ${task}`, 'info');
} else {
if(currentFocus.length >= 3) {
showToast(`⚠️ Max 3 focus tasks per phase. Remove one first.`, 'error');
return;
}
currentFocus.push(idx);
showToast(`⭐ Added to focus: ${task} (non-negotiable today)`, 'success');
}
focusTasks[phaseKey] = currentFocus;
saveFocus();
renderAll();
});
li.appendChild(cb); li.appendChild(label); li.appendChild(starBtn);
checklistContainer.appendChild(li);
});
const whyBtn = card.querySelector(`.why-btn`);
const whyDiv = card.querySelector(`.why-content`);
whyBtn.addEventListener('click', () => { whyDiv.style.display = whyDiv.style.display === 'block' ? 'none' : 'block'; });
whyDiv.style.display = 'none';
const saveNoteBtn = card.querySelector(`.save-note-btn`);
const noteTA = card.querySelector(`textarea`);
saveNoteBtn.addEventListener('click', () => { reflectionNotes[phaseKey] = noteTA.value; persistAll(); showToast(`📘 ${meta.title} reflection saved`, 'success'); });
}
}
function saveDailyScoreToHistory() {
const todayStr = new Date().toDateString();
const currentScore = computeTotalCompletion();
const existing = weeklyHistory.findIndex(entry => entry.date === todayStr);
if(existing !== -1) weeklyHistory[existing].score = currentScore;
else weeklyHistory.push({ date: todayStr, score: currentScore });
if(weeklyHistory.length > 7) weeklyHistory = weeklyHistory.slice(-7);
persistAll();
drawWeeklyChart();
}
function renderAll() { renderDashboard(); renderPhaseGrid(); saveDailyScoreToHistory(); updateStreak(); }
// Export summary (include focus tasks)
function exportSummary() {
const overall = computeTotalCompletion();
let completedTasksList = [];
let focusReport = [];
PHASE_KEYS.forEach(p => {
const tasks = checklistsData[p];
const doneTasks = tasks.filter((_,idx)=>completedState[p][idx]);
if(doneTasks.length) completedTasksList.push(`📌 ${phaseMeta[p].title}: ${doneTasks.join(', ')}`);
const focusIndices = focusTasks[p] || [];
if(focusIndices.length) {
const focusNames = focusIndices.map(idx => tasks[idx]);
focusReport.push(`⭐ ${phaseMeta[p].title}: ${focusNames.join(', ')}`);
}
});
const rating = overall>=80?'You are in control':(overall>=50?'You are drifting':'You are reacting');
const content = `⭐ DAILY RESET · ${new Date().toLocaleDateString()} ⭐\nScore: ${Math.floor(overall)}% (${rating})\nStreak: ${streakDays} day(s)\n\n🎯 TODAY'S PRIORITIES (Focus):\n${focusReport.length ? focusReport.join('\n') : 'No focus tasks selected'}\n\n✅ COMPLETED TASKS:\n${completedTasksList.join('\n') || 'None yet'}\n\n💰 INCOME ACTION:\n${incomeAction || '—'}\n\n📓 REFLECTIONS:\n${Object.entries(reflectionNotes).map(([ph,note])=>`- ${phaseMeta[ph].title}: ${note||'—'}`).join('\n')}\n\n🌿 Keep resetting daily.`;
const blob = new Blob([content], {type:'text/plain'}); const a=document.createElement('a'); const url=URL.createObjectURL(blob); a.href=url; a.download=`daily_reset_focus_${new Date().toISOString().slice(0,10)}.txt`; a.click(); URL.revokeObjectURL(url);
showToast('📄 Summary exported with focus tasks!', 'success');
}
function fullReset() {
if(confirm('⚠️ This will erase ALL progress, focus tasks, reflections & streak. Continue?')) {
completedState = {}; PHASE_KEYS.forEach(p => { completedState[p] = new Array(checklistsData[p].length).fill(false); });
incomeAction = ''; reflectionNotes = { morning:'', midday:'', afternoon:'', evening:'', night:'' };
streakDays = 0; lastStreakDate = ''; weeklyHistory = [];
focusTasks = { morning: [], midday: [], afternoon: [], evening: [], night: [] };
persistAll();
document.getElementById('incomeInput').value = '';
renderAll();
showToast('🗑️ All data reset. Fresh start.', 'error');
}
}
// theme
function initTheme() {
const savedTheme = localStorage.getItem('theme');
if(savedTheme === 'dark') document.body.classList.add('dark-mode');
const toggleBtn = document.getElementById('darkModeToggleBtn');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const isDark = document.body.classList.contains('dark-mode');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
toggleBtn.innerHTML = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
});
if(document.body.classList.contains('dark-mode')) toggleBtn.innerHTML = '☀️ Light Mode';
else toggleBtn.innerHTML = '🌙 Dark Mode';
}
document.getElementById('saveIncomeBtn')?.addEventListener('click', () => { incomeAction = document.getElementById('incomeInput').value; persistAll(); renderDashboard(); showToast('Income action saved', 'success'); });
document.getElementById('exportSummaryBtn')?.addEventListener('click', exportSummary);
document.getElementById('globalResetBtn')?.addEventListener('click', fullReset);
document.getElementById('continueResetBtn')?.addEventListener('click', () => { document.querySelector('.tab-btn[data-tab="phases"]').click(); setTimeout(()=>{ let firstInc = PHASE_KEYS.find(p=>phaseCompletionPercent(p)<100) || 'morning'; document.querySelector(`.phase-card[data-phase="${firstInc}"]`)?.scrollIntoView({behavior:'smooth',block:'center'}); },150); });
document.getElementById('weeklyInsightBtn')?.addEventListener('click', () => { showToast(`📊 Weekly avg: ${Math.floor(weeklyHistory.reduce((a,b)=>a+b.score,0)/(weeklyHistory.length||1))}% · keep going!`, 'success'); });
const tabs = document.querySelectorAll('.tab-btn');
const dashboardDiv = document.getElementById('dashboardPanel');
const phasesDiv = document.getElementById('phasesPanel');
tabs.forEach(btn => { btn.addEventListener('click', () => { tabs.forEach(b=>b.classList.remove('active')); btn.classList.add('active'); if(btn.dataset.tab === 'dashboard') { dashboardDiv.classList.add('active-panel'); phasesDiv.classList.remove('active-panel'); renderDashboard(); } else { dashboardDiv.classList.remove('active-panel'); phasesDiv.classList.add('active-panel'); renderPhaseGrid(); } }); });
document.getElementById('incomeInput').value = incomeAction;
setInterval(()=>{ updateSmartSuggestion(); saveDailyScoreToHistory(); renderDashboard(); }, 60000);
initTheme();
renderAll();
saveDailyScoreToHistory();
</script>
</body>
</html>