File: /home/primrwxj/adepejuadeyemi.com/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Reset System</title>
<style>
:root {
--bg: #f3f7f6;
--card: #ffffff;
--text: #1f2a2e;
--muted: #6b7a80;
--primary: #5aa89e;
--primary-dark: #3f867d;
--accent: #8cc7bf;
--warning: #f0b86f;
--danger: #df7f7f;
--success: #5cab82;
--shadow: 0 8px 24px rgba(35, 60, 72, 0.08);
--radius: 14px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color: var(--text);
background: linear-gradient(180deg, #eef5f4 0%, #f7fbfa 50%, #edf3f2 100%);
min-height: 100vh;
}
.app {
max-width: 1100px;
margin: 0 auto;
padding: 16px;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.title {
font-size: clamp(1.25rem, 1.5vw + 1rem, 2rem);
margin: 0;
font-weight: 700;
letter-spacing: 0.2px;
}
.subtitle {
margin: 4px 0 0;
color: var(--muted);
font-size: 0.95rem;
}
.tabs {
display: inline-flex;
background: #e6efed;
border-radius: 999px;
padding: 4px;
gap: 4px;
}
.tab {
border: none;
background: transparent;
padding: 8px 14px;
border-radius: 999px;
font-weight: 600;
color: #486269;
cursor: pointer;
transition: 0.25s ease;
}
.tab.active {
background: var(--card);
color: var(--primary-dark);
box-shadow: var(--shadow);
}
.view {
display: none;
animation: fadeIn 250ms ease;
}
.view.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.grid {
display: grid;
gap: 14px;
}
.dashboard-grid {
grid-template-columns: repeat(12, 1fr);
}
.card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
}
.kpi { grid-column: span 6; }
.kpi.large { grid-column: span 12; }
.kpi-label {
font-size: 0.84rem;
color: var(--muted);
margin-bottom: 8px;
font-weight: 600;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.kpi-value {
font-size: clamp(1.4rem, 2.4vw, 2.2rem);
font-weight: 750;
}
.message {
margin-top: 8px;
font-weight: 600;
color: var(--primary-dark);
}
.btn {
border: none;
background: var(--primary);
color: #fff;
padding: 10px 14px;
border-radius: 10px;
font-weight: 650;
cursor: pointer;
transition: transform 0.15s ease, background 0.25s ease;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn.secondary {
background: #dae8e6;
color: #2d4f51;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.meter {
background: #e5efed;
border-radius: 999px;
height: 12px;
overflow: hidden;
position: relative;
}
.meter > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, #7bc0b7, #4ca395);
transition: width 350ms ease;
}
.phase-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.phase-chip {
border: none;
background: #e8f1ef;
color: #315356;
border-radius: 999px;
padding: 8px 11px;
font-size: 0.88rem;
cursor: pointer;
font-weight: 600;
}
.phase-chip.active {
background: #d1e7e3;
color: #17444a;
}
.phase-card {
margin-bottom: 12px;
border-left: 5px solid transparent;
transition: border-color 240ms ease;
}
.phase-card.active {
border-color: var(--primary);
}
.phase-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.phase-title {
margin: 0;
font-size: 1.1rem;
}
.phase-time {
color: var(--muted);
font-size: 0.9rem;
margin-top: 4px;
}
.checklist {
list-style: none;
margin: 10px 0;
padding: 0;
display: grid;
gap: 8px;
}
.checklist li {
display: flex;
align-items: center;
gap: 10px;
background: #f6fbfa;
border-radius: 10px;
padding: 9px;
}
input[type="checkbox"] {
width: 19px;
height: 19px;
accent-color: var(--primary-dark);
cursor: pointer;
}
.checklist label {
flex: 1;
cursor: pointer;
}
details {
background: #f7fbfa;
border-radius: 10px;
padding: 8px 10px;
margin: 8px 0;
}
summary {
cursor: pointer;
font-weight: 600;
color: #2e5b60;
}
textarea,
input[type="text"] {
width: 100%;
border: 1px solid #d0dfdd;
background: #fcfffe;
border-radius: 10px;
padding: 10px;
font-size: 0.95rem;
font-family: inherit;
}
textarea {
min-height: 76px;
resize: vertical;
margin-top: 8px;
}
.field-label {
font-size: 0.86rem;
color: #4e6a6f;
margin-top: 8px;
margin-bottom: 4px;
font-weight: 600;
}
.muted {
color: var(--muted);
font-size: 0.9rem;
}
.phase-count {
font-size: 0.9rem;
color: #40676c;
font-weight: 600;
}
@media (max-width: 800px) {
.kpi { grid-column: span 12; }
}
</style>
</head>
<body>
<main class="app">
<header class="topbar">
<div>
<h1 class="title">🧭 Daily Reset System</h1>
<p class="subtitle">A calm, structured daily flow through 5 reset phases.</p>
</div>
<nav class="tabs">
<button class="tab active" data-view="dashboard">Dashboard</button>
<button class="tab" data-view="phases">Phases</button>
</nav>
</header>
<section class="view active" id="dashboardView">
<div class="grid dashboard-grid">
<article class="card kpi large">
<div class="kpi-label">Overall Daily Progress</div>
<div class="kpi-value" id="overallPct">0%</div>
<div class="meter" aria-label="Daily progress"><span id="overallBar"></span></div>
<div class="message" id="scoreMessage">You are reacting</div>
<div class="btn-row">
<button class="btn" id="continueBtn">Start / Continue Reset</button>
<button class="btn secondary" id="exportBtn">Export Daily Summary</button>
<button class="btn secondary" id="clearTodayBtn">Daily Reset (Clear Today)</button>
</div>
</article>
<article class="card kpi">
<div class="kpi-label">Current Phase</div>
<div class="kpi-value" id="currentPhase">Morning Reset</div>
<p class="muted">Moves forward as you complete each phase.</p>
</article>
<article class="card kpi">
<div class="kpi-label">Streak</div>
<div class="kpi-value"><span id="streakValue">0</span> day(s)</div>
<p class="muted">Consecutive days with all tasks completed.</p>
</article>
<article class="card kpi large">
<div class="kpi-label">Income Tracker</div>
<label class="field-label" for="incomeInput">What did you do today to improve your income?</label>
<input id="incomeInput" type="text" placeholder="Example: Sent 3 client follow-ups" />
<p class="muted">Saved automatically for today.</p>
</article>
</div>
</section>
<section class="view" id="phasesView">
<div class="phase-nav" id="phaseNav"></div>
<div id="phaseContainer"></div>
</section>
</main>
<script>
const appKey = 'dailyResetSystemV1';
const todayKey = new Date().toISOString().slice(0, 10);
const PHASES = [
{
id: 'morning',
icon: '🌅',
name: 'Morning Reset',
time: '0–90 minutes after waking',
why: 'Sets your baseline state and intention before the day pulls on you.',
items: [
'Wake up (no snooze)',
'Brush teeth',
'Drink warm lemon water',
'Cold water face rinse (optional)',
'Stretch or move',
'Get sunlight',
'Set top 3 priorities'
]
},
{
id: 'midday',
icon: '☀️',
name: 'Midday Reset',
time: 'Midday check-in window',
why: 'Resets attention so your afternoon is intentional instead of reactive.',
items: [
'Pause awareness check',
'Hydrate',
'Eat intentional meal',
'Walk or stretch',
'Mental reset',
'Income action'
]
},
{
id: 'afternoon',
icon: '🧠',
name: 'Afternoon Reset',
time: 'Afternoon productivity block',
why: 'Protects your best work hours and prevents distraction drift.',
items: [
'Energy awareness',
'Hydrate',
'Smart snack (optional)',
'Movement reset',
'Remove distractions',
'Deep work session',
'Progress check',
'Income alignment'
]
},
{
id: 'evening',
icon: '🌇',
name: 'Evening Reset',
time: 'After work transition',
why: 'Helps your nervous system downshift and recover from daily load.',
items: [
'Transition out of work',
'Shower / refresh',
'Light dinner',
'Walk',
'Connect with loved ones',
'Mental unload (journal)',
'Digital detox',
'Calm routine',
'Prepare for sleep'
]
},
{
id: 'night',
icon: '🌙',
name: 'Night Reset',
time: 'Final pre-sleep routine',
why: 'Closes loops, improves sleep quality, and protects tomorrow\'s energy.',
items: [
'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'
]
}
];
const state = loadState();
const tabs = document.querySelectorAll('.tab');
const dashboardView = document.getElementById('dashboardView');
const phasesView = document.getElementById('phasesView');
const overallPct = document.getElementById('overallPct');
const overallBar = document.getElementById('overallBar');
const currentPhase = document.getElementById('currentPhase');
const scoreMessage = document.getElementById('scoreMessage');
const streakValue = document.getElementById('streakValue');
const incomeInput = document.getElementById('incomeInput');
const phaseContainer = document.getElementById('phaseContainer');
const phaseNav = document.getElementById('phaseNav');
function defaultDayData() {
const phases = {};
for (const phase of PHASES) {
phases[phase.id] = {
checks: Array(phase.items.length).fill(false),
note: ''
};
}
return { phases, income: '' };
}
function loadState() {
const parsed = JSON.parse(localStorage.getItem(appKey) || '{}');
if (!parsed.days) parsed.days = {};
if (!parsed.streak) parsed.streak = { count: 0, lastCompletedDate: null };
if (!parsed.days[todayKey]) parsed.days[todayKey] = defaultDayData();
return parsed;
}
function saveState() {
localStorage.setItem(appKey, JSON.stringify(state));
}
function getToday() {
if (!state.days[todayKey]) state.days[todayKey] = defaultDayData();
return state.days[todayKey];
}
function completionMetrics() {
const day = getToday();
let total = 0;
let done = 0;
const phaseStats = PHASES.map((phase) => {
const checks = day.phases[phase.id]?.checks || [];
const completed = checks.filter(Boolean).length;
total += phase.items.length;
done += completed;
return { phaseId: phase.id, completed, total: phase.items.length };
});
const pct = total ? Math.round((done / total) * 100) : 0;
return { total, done, pct, phaseStats };
}
function phaseCompletion(phaseId) {
const day = getToday();
const phase = PHASES.find((p) => p.id === phaseId);
const checks = day.phases[phaseId].checks;
const completed = checks.filter(Boolean).length;
const pct = phase.items.length ? Math.round((completed / phase.items.length) * 100) : 0;
return { completed, total: phase.items.length, pct };
}
function getCurrentPhaseName() {
const day = getToday();
for (const phase of PHASES) {
const checks = day.phases[phase.id].checks;
const isFull = checks.every(Boolean);
if (!isFull) return phase.name;
}
return 'All phases complete ✅';
}
function getScoreLabel(pct) {
if (pct >= 80) return 'You are in control';
if (pct >= 50) return 'You are drifting';
return 'You are reacting';
}
function updateStreakIfNeeded() {
const { pct } = completionMetrics();
const allDone = pct === 100;
if (!allDone) return;
const streak = state.streak;
if (streak.lastCompletedDate === todayKey) return;
if (streak.lastCompletedDate) {
const last = new Date(streak.lastCompletedDate + 'T00:00:00Z');
const today = new Date(todayKey + 'T00:00:00Z');
const diff = Math.floor((today - last) / 86400000);
streak.count = diff === 1 ? streak.count + 1 : 1;
} else {
streak.count = 1;
}
streak.lastCompletedDate = todayKey;
saveState();
}
function renderDashboard() {
const { pct } = completionMetrics();
overallPct.textContent = `${pct}%`;
overallBar.style.width = `${pct}%`;
scoreMessage.textContent = getScoreLabel(pct);
currentPhase.textContent = getCurrentPhaseName();
streakValue.textContent = state.streak.count || 0;
incomeInput.value = getToday().income || '';
}
function renderPhaseNav(activePhaseId) {
phaseNav.innerHTML = PHASES.map((phase) => {
const active = activePhaseId === phase.id ? 'active' : '';
return `<button class="phase-chip ${active}" data-jump="${phase.id}">${phase.icon} ${phase.name}</button>`;
}).join('');
phaseNav.querySelectorAll('[data-jump]').forEach((btn) => {
btn.addEventListener('click', () => {
const target = document.getElementById(`phase-${btn.dataset.jump}`);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
renderPhaseNav(btn.dataset.jump);
setActiveCard(btn.dataset.jump);
}
});
});
}
function setActiveCard(phaseId) {
document.querySelectorAll('.phase-card').forEach((card) => {
card.classList.toggle('active', card.dataset.phaseId === phaseId);
});
}
function renderPhases() {
const day = getToday();
phaseContainer.innerHTML = '';
PHASES.forEach((phase) => {
const data = day.phases[phase.id];
const { completed, total, pct } = phaseCompletion(phase.id);
const card = document.createElement('article');
card.className = 'card phase-card';
card.id = `phase-${phase.id}`;
card.dataset.phaseId = phase.id;
card.innerHTML = `
<header class="phase-header">
<div>
<h3 class="phase-title">${phase.icon} ${phase.name}</h3>
<div class="phase-time">${phase.time}</div>
</div>
<div class="phase-count">${completed}/${total} completed</div>
</header>
<div class="meter"><span style="width:${pct}%"></span></div>
<ul class="checklist">
${phase.items.map((item, idx) => `
<li>
<input type="checkbox" id="${phase.id}-${idx}" data-phase="${phase.id}" data-index="${idx}" ${data.checks[idx] ? 'checked' : ''}>
<label for="${phase.id}-${idx}">${item}</label>
</li>
`).join('')}
</ul>
<details>
<summary>Why it matters</summary>
<p class="muted">${phase.why}</p>
</details>
<label class="field-label" for="note-${phase.id}">Reflection Notes</label>
<textarea id="note-${phase.id}" data-note-phase="${phase.id}" placeholder="Quick reflection for this phase...">${data.note || ''}</textarea>
`;
phaseContainer.appendChild(card);
});
phaseContainer.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
checkbox.addEventListener('change', () => {
const phaseId = checkbox.dataset.phase;
const idx = Number(checkbox.dataset.index);
getToday().phases[phaseId].checks[idx] = checkbox.checked;
saveState();
updateStreakIfNeeded();
renderAll(phaseId);
});
});
phaseContainer.querySelectorAll('textarea[data-note-phase]').forEach((textarea) => {
textarea.addEventListener('input', () => {
const phaseId = textarea.dataset.notePhase;
getToday().phases[phaseId].note = textarea.value;
saveState();
});
});
}
function renderAll(activePhaseId = PHASES[0].id) {
renderDashboard();
renderPhases();
renderPhaseNav(activePhaseId);
setActiveCard(activePhaseId);
}
function exportSummary() {
const day = getToday();
const { pct, phaseStats } = completionMetrics();
const lines = [];
lines.push(`Daily Reset Summary - ${todayKey}`);
lines.push('---------------------------------');
lines.push(`Overall Score: ${pct}% (${getScoreLabel(pct)})`);
lines.push(`Streak: ${state.streak.count} day(s)`);
lines.push(`Income Action: ${day.income || 'None recorded'}`);
lines.push('');
PHASES.forEach((phase, i) => {
const stats = phaseStats[i];
lines.push(`${phase.name} (${stats.completed}/${stats.total})`);
phase.items.forEach((item, idx) => {
const mark = day.phases[phase.id].checks[idx] ? '[x]' : '[ ]';
lines.push(` ${mark} ${item}`);
});
if (day.phases[phase.id].note?.trim()) {
lines.push(` Note: ${day.phases[phase.id].note.trim()}`);
}
lines.push('');
});
const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `daily-reset-summary-${todayKey}.txt`;
a.click();
URL.revokeObjectURL(url);
}
function clearTodayData() {
state.days[todayKey] = defaultDayData();
saveState();
renderAll();
}
tabs.forEach((btn) => {
btn.addEventListener('click', () => {
tabs.forEach((b) => b.classList.toggle('active', b === btn));
const showDashboard = btn.dataset.view === 'dashboard';
dashboardView.classList.toggle('active', showDashboard);
phasesView.classList.toggle('active', !showDashboard);
});
});
document.getElementById('continueBtn').addEventListener('click', () => {
tabs.forEach((b) => b.classList.toggle('active', b.dataset.view === 'phases'));
dashboardView.classList.remove('active');
phasesView.classList.add('active');
const targetPhase = PHASES.find((p) => {
const checks = getToday().phases[p.id].checks;
return !checks.every(Boolean);
}) || PHASES[PHASES.length - 1];
renderAll(targetPhase.id);
document.getElementById(`phase-${targetPhase.id}`)?.scrollIntoView({ behavior: 'smooth' });
});
document.getElementById('exportBtn').addEventListener('click', exportSummary);
document.getElementById('clearTodayBtn').addEventListener('click', clearTodayData);
incomeInput.addEventListener('input', () => {
getToday().income = incomeInput.value;
saveState();
});
renderAll();
</script>
</body>
</html>