<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Life Circuit Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.breath-circle {
transition: all 1s ease-in-out;
}
.breath-inhale {
transform: scale(1.1);
border-color: #4ade80;
background-color: #f0fdf4;
}
.breath-hold {
border-color: #facc15;
background-color: #fefce8;
}
.breath-exhale {
transform: scale(0.9);
border-color: #60a5fa;
background-color: #eff6ff;
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
<div class="max-w-4xl mx-auto p-6">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-slate-800 mb-2">Life Circuit Dashboard</h1>
<p class="text-slate-600">Tune into your natural rhythms</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Circadian Tracker -->
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center gap-3 mb-4">
<svg id="sun-icon" class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<h2 class="text-xl font-semibold text-slate-800">Circadian Rhythm</h2>
</div>
<div class="space-y-4">
<div class="text-center p-4 bg-slate-50 rounded-lg">
<div id="current-time" class="text-2xl font-bold text-slate-800"></div>
<div id="sun-phase" class="text-sm text-yellow-500"></div>
<div id="moon-phase" class="text-xs text-slate-500 mt-1"></div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-2">
Morning Light Exposure
</label>
<select id="morning-light" class="w-full p-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select...</option>
<option value="none">No morning light</option>
<option value="indoor">Indoor light only</option>
<option value="brief">Brief outdoor (5-10 min)</option>
<option value="good">Good exposure (15-30 min)</option>
<option value="excellent">Excellent (30+ min)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-2">
Energy Level (1-5)
</label>
<input type="range" min="1" max="5" value="3" id="energy-slider" class="w-full">
<div class="text-center text-sm text-slate-600 mt-1">
<span id="energy-value">3</span>/5
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-2">
Last Night's Sleep
</label>
<select id="sleep-quality" class="w-full p-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select...</option>
<option value="poor">Poor (restless, wired)</option>
<option value="fair">Fair (some waking)</option>
<option value="good">Good (mostly restful)</option>
<option value="excellent">Excellent (deep, refreshing)</option>
</select>
</div>
</div>
</div>
<!-- CO2 Breath Trainer -->
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center gap-3 mb-4">
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
<path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
<path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
</svg>
<h2 class="text-xl font-semibold text-slate-800">CO₂ Breath Trainer</h2>
</div>
<div class="text-center">
<div class="mb-6">
<div id="breath-circle" class="w-32 h-32 mx-auto rounded-full border-4 border-slate-300 bg-slate-50 flex items-center justify-center breath-circle">
<svg class="w-12 h-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<polyline points="22,12 18,12 15,21 9,3 6,12 2,12"></polyline>
</svg>
</div>
</div>
<button id="breath-button" class="px-6 py-3 rounded-lg font-medium bg-blue-500 hover:bg-blue-600 text-white transition-all">
Start Breath Cycle
</button>
<div id="breath-instruction" class="mt-4 text-sm text-slate-600">
Click to start breath cycle
</div>
<div class="mt-4 text-xs text-slate-500">
Completed cycles: <span id="breath-count">0</span>
</div>
<div class="mt-6 p-4 bg-slate-50 rounded-lg text-left">
<h3 class="font-medium text-slate-700 mb-2">Rhythm Pattern:</h3>
<p class="text-sm text-slate-600">
4s inhale → 2s hold → 8s exhale
</p>
<p class="text-xs text-slate-500 mt-2">
This 2:1 exhale ratio builds CO₂ tolerance and activates parasympathetic rhythm
</p>
</div>
</div>
</div>
<!-- Daily Rhythm Notes -->
<div class="bg-white rounded-xl shadow-lg p-6 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<h2 class="text-xl font-semibold text-slate-800">Rhythm Observations</h2>
</div>
<textarea id="rhythm-notes" placeholder="How is your rhythm today? Notice energy patterns, food cravings, mood shifts, sleep quality..." class="w-full h-24 p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"></textarea>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="p-3 bg-blue-50 rounded-lg">
<div class="font-medium text-blue-800">Morning Questions</div>
<div class="text-blue-600 text-xs mt-1">
Did I get bright light? How's my energy?
</div>
</div>
<div class="p-3 bg-yellow-50 rounded-lg">
<div class="font-medium text-yellow-800">Afternoon Check</div>
<div class="text-yellow-600 text-xs mt-1">
Energy dip? Craving stimulation?
</div>
</div>
<div class="p-3 bg-purple-50 rounded-lg">
<div class="font-medium text-purple-800">Evening Tune-in</div>
<div class="text-purple-600 text-xs mt-1">
Winding down naturally? Light sensitivity?
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center text-xs text-slate-500">
Life Circuit Dashboard • Track rhythm, not perfection
</div>
</div>
<script>
// Global state
let breathCount = 0;
let breathPhase = 'ready';
// Update time and circadian info
function updateTime() {
const now = new Date();
const timeEl = document.getElementById('current-time');
const phaseEl = document.getElementById('sun-phase');
const moonEl = document.getElementById('moon-phase');
const sunIcon = document.getElementById('sun-icon');
timeEl.textContent = now.toLocaleTimeString();
const hour = now.getHours();
let phase, iconClass;
if (hour >= 6 && hour < 12) {
phase = 'Morning Phase';
iconClass = 'text-yellow-500';
} else if (hour >= 12 && hour < 18) {
phase = 'Afternoon Phase';
iconClass = 'text-orange-500';
} else if (hour >= 18 && hour < 22) {
phase = 'Evening Phase';
iconClass = 'text-red-500';
} else {
phase = 'Night Phase';
iconClass = 'text-blue-300';
// Change to moon icon for night
sunIcon.innerHTML = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>`;
}
phaseEl.textContent = phase;
phaseEl.className = `text-sm ${iconClass}`;
sunIcon.className = `w-6 h-6 ${iconClass}`;
// Simple moon phase calculation
const day = now.getDate();
let moonPhase;
if (day < 8) moonPhase = '🌑 New Moon';
else if (day < 15) moonPhase = '🌓 First Quarter';
else if (day < 23) moonPhase = '🌕 Full Moon';
else moonPhase = '🌗 Last Quarter';
moonEl.textContent = moonPhase;
}
// Energy slider
const energySlider = document.getElementById('energy-slider');
const energyValue = document.getElementById('energy-value');
energySlider.addEventListener('input', (e) => {
energyValue.textContent = e.target.value;
});
// Breath trainer
const breathButton = document.getElementById('breath-button');
const breathCircle = document.getElementById('breath-circle');
const breathInstruction = document.getElementById('breath-instruction');
const breathCountEl = document.getElementById('breath-count');
function startBreathCycle() {
if (breathPhase !== 'ready') return;
breathPhase = 'inhale';
breathButton.disabled = true;
breathButton.textContent = 'Breathing...';
breathButton.className = 'px-6 py-3 rounded-lg font-medium bg-slate-200 text-slate-500 cursor-not-allowed';
// Inhale phase (4s)
breathCircle.className = 'w-32 h-32 mx-auto rounded-full border-4 flex items-center justify-center breath-circle breath-inhale';
breathInstruction.textContent = 'Breathe in slowly through nose... (4s)';
setTimeout(() => {
// Hold phase (2s)
breathPhase = 'hold';
breathCircle.className = 'w-32 h-32 mx-auto rounded-full border-4 flex items-center justify-center breath-circle breath-hold';
breathInstruction.textContent = 'Hold gently... (2s)';
setTimeout(() => {
// Exhale phase (8s)
breathPhase = 'exhale';
breathCircle.className = 'w-32 h-32 mx-auto rounded-full border-4 flex items-center justify-center breath-circle breath-exhale';
breathInstruction.textContent = 'Exhale slower through nose... (8s)';
setTimeout(() => {
// Reset
breathPhase = 'ready';
breathCount++;
breathCountEl.textContent = breathCount;
breathCircle.className = 'w-32 h-32 mx-auto rounded-full border-4 border-slate-300 bg-slate-50 flex items-center justify-center breath-circle';
breathInstruction.textContent = 'Click to start breath cycle';
breathButton.disabled = false;
breathButton.textContent = 'Start Breath Cycle';
breathButton.className = 'px-6 py-3 rounded-lg font-medium bg-blue-500 hover:bg-blue-600 text-white transition-all';
}, 8000);
}, 2000);
}, 4000);
}
breathButton.addEventListener('click', startBreathCycle);
// Initialize
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
