clauditate
Version:
A menubar meditation app that helps you stay mindful while Claude Code works
563 lines (507 loc) • 38.7 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Breathe - Meditation</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'confetti-fall': 'confettiFall 3s ease-in-out forwards',
'fade-in': 'fadeIn 0.3s ease-out'
},
keyframes: {
confettiFall: {
'0%': { transform: 'translateY(-100vh) rotate(0deg)', opacity: '1' },
'100%': { transform: 'translateY(100vh) rotate(720deg)', opacity: '0' }
},
fadeIn: {
'0%': { opacity: '0', transform: 'scale(0.9)' },
'100%': { opacity: '1', transform: 'scale(1)' }
}
}
}
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Simple breathing animation - just scale, nothing else */
.breath-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 5s ease-in-out;
}
/* Initial sizes */
.breath-circle-1 {
width: 50px;
height: 50px;
opacity: 0.8;
}
.breath-circle-2 {
width: 70px;
height: 70px;
opacity: 0.6;
}
.breath-circle-3 {
width: 90px;
height: 90px;
opacity: 0.4;
}
.breath-circle-4 {
width: 110px;
height: 110px;
opacity: 0.25;
}
.breath-circle-5 {
width: 130px;
height: 130px;
opacity: 0.15;
}
/* Breathing in - circles expand */
.breathing-in .breath-circle-1 { transform: translate(-50%, -50%) scale(2); }
.breathing-in .breath-circle-2 { transform: translate(-50%, -50%) scale(1.8); }
.breathing-in .breath-circle-3 { transform: translate(-50%, -50%) scale(1.7); }
.breathing-in .breath-circle-4 { transform: translate(-50%, -50%) scale(1.6); }
.breathing-in .breath-circle-5 { transform: translate(-50%, -50%) scale(1.5); }
/* Breathing out - circles contract */
.breathing-out .breath-circle-1 { transform: translate(-50%, -50%) scale(0.8); }
.breathing-out .breath-circle-2 { transform: translate(-50%, -50%) scale(0.85); }
.breathing-out .breath-circle-3 { transform: translate(-50%, -50%) scale(0.9); }
.breathing-out .breath-circle-4 { transform: translate(-50%, -50%) scale(0.92); }
.breathing-out .breath-circle-5 { transform: translate(-50%, -50%) scale(0.95); }
/* Center dot */
.center-dot {
transition: transform 5s ease-in-out, box-shadow 5s ease-in-out;
}
.breathing-in .center-dot {
transform: translate(-50%, -50%) scale(1.5);
box-shadow: 0 0 30px rgba(255,255,255,0.9), 0 0 50px rgba(79,158,255,0.6);
}
.breathing-out .center-dot {
transform: translate(-50%, -50%) scale(0.8);
box-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(79,158,255,0.2);
}
/* Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
width: 3px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
/* Radio button active states using CSS */
input[type="radio"]:checked + div {
background-color: rgba(255,255,255,0.08);
border-color: #4F9EFF;
color: rgba(255,255,255,0.95);
}
/* Cycle button active state */
.cycle-btn.active {
background-color: rgba(255,255,255,0.08);
border-color: #4F9EFF;
color: rgba(255,255,255,0.95);
}
</style>
</head>
<body class="bg-[#0a0a0b] text-white select-none overflow-hidden w-[300px] h-[480px]">
<div class="w-full h-full flex flex-col">
<!-- Header -->
<div class="flex justify-between items-center px-5 py-4">
<div class="text-white/90 text-sm font-semibold tracking-tight">Clauditate</div>
<div class="flex gap-1.5">
<button class="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/[0.06] transition-all group" id="snoozeIcon" title="Snooze notifications">
<svg class="w-[18px] h-[18px] text-white/40 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</button>
<button class="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/[0.06] transition-all group" id="insightsIcon">
<svg class="w-[18px] h-[18px] text-white/40 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</button>
<button class="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/[0.06] transition-all group" id="settingsIcon">
<svg class="w-[18px] h-[18px] text-white/40 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.50 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
<button class="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-white/[0.06] transition-all group" id="aboutIcon">
<svg class="w-[18px] h-[18px] text-white/40 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</button>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col items-center px-6 py-4" id="breatheContainer">
<!-- Breath Count Info -->
<div class="text-white/70 text-sm font-medium mb-4 tracking-wide" id="cycleInfo">5 breaths</div>
<!-- Breathing Visual -->
<div class="relative w-40 h-40 mb-4" id="breatheVisual">
<div class="absolute inset-0 flex items-center justify-center">
<div class="breath-circle breath-circle-1 rounded-full border border-blue-400/20 bg-gradient-to-br from-blue-400/10 via-blue-500/5 to-transparent shadow-[0_0_30px_rgba(79,158,255,0.15)] shadow-[inset_0_0_30px_rgba(79,158,255,0.08)]"></div>
<div class="breath-circle breath-circle-2 rounded-full border border-blue-400/15 bg-gradient-to-br from-blue-400/8 via-transparent to-transparent shadow-[0_0_25px_rgba(79,158,255,0.1)]"></div>
<div class="breath-circle breath-circle-3 rounded-full border border-blue-400/10 bg-gradient-to-br from-blue-400/5 to-transparent"></div>
<div class="breath-circle breath-circle-4 rounded-full border border-blue-400/8 bg-gradient-to-br from-blue-400/3 to-transparent"></div>
<div class="breath-circle breath-circle-5 rounded-full border border-blue-400/5 bg-gradient-to-br from-blue-400/2 to-transparent"></div>
<div class="center-dot absolute w-2 h-2 bg-white/90 rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-[0_0_20px_rgba(255,255,255,0.6),0_0_40px_rgba(79,158,255,0.4)]"></div>
</div>
</div>
<!-- Instruction (fixed height to prevent layout shift) -->
<div class="text-white text-lg font-light mb-4 opacity-85 tracking-[0.1px] min-h-[28px] flex items-center justify-center" id="instruction"> </div>
<!-- Cycle Selector -->
<div class="grid grid-cols-4 gap-2 w-full mb-4 max-w-[220px]">
<button class="cycle-btn w-11 h-11 border-2 border-white/15 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal flex items-center justify-center hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80" data-cycles="5">5</button>
<button class="cycle-btn w-11 h-11 border-2 border-white/15 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal flex items-center justify-center hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80" data-cycles="10">10</button>
<button class="cycle-btn w-11 h-11 border-2 border-white/15 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal flex items-center justify-center hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80" data-cycles="20">20</button>
<button class="cycle-btn w-11 h-11 border-2 border-white/15 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal flex items-center justify-center hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80" data-cycles="30">30</button>
</div>
<!-- Start/Stop Button -->
<button class="px-12 py-3 border-none rounded-3xl text-[15px] font-medium cursor-pointer transition-all duration-200 bg-white/[0.08] text-white/90 backdrop-blur-[10px] tracking-[-0.1px] hover:bg-white/[0.12] hover:-translate-y-[1px] hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)] active:translate-y-0 active:bg-white/10" id="startBtn">Start</button>
<button class="hidden px-12 py-3 border-none rounded-3xl text-[15px] font-medium cursor-pointer transition-all duration-200 backdrop-blur-[10px] tracking-[-0.1px] hover:-translate-y-[1px] hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)] active:translate-y-0" id="stopBtn" style="background: rgba(239, 68, 68, 0.15); color: rgba(252, 165, 165, 0.9);">Stop</button>
</div>
<!-- Completion Message -->
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden animate-fade-in" id="completionOverlay">
<div class="bg-gradient-to-br from-[#1a1a2e] to-[#16213e] p-8 rounded-2xl border border-white/20 text-center max-w-sm mx-4 relative overflow-hidden">
<!-- Zen background symbols -->
<div class="absolute inset-0 pointer-events-none">
<div class="zen-symbol">☯</div>
<div class="zen-symbol">🕉</div>
<div class="zen-symbol">☯</div>
<div class="zen-symbol">🧘</div>
<div class="zen-symbol">☯</div>
<div class="zen-symbol">🕉</div>
</div>
<!-- Confetti -->
<div class="absolute inset-0 pointer-events-none" id="confettiContainer"></div>
<!-- Main content -->
<div class="relative z-10">
<div class="text-4xl mb-4">🧘♀️</div>
<h2 class="text-xl font-semibold text-white mb-3">Mindfulness Complete!</h2>
<p class="text-white/70 mb-6" id="completionMessage">Great job! You completed 5 breathing cycles.</p>
<button class="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-medium px-6 py-2 rounded-full transition-all duration-200 shadow-lg hover:shadow-xl" id="completionCloseBtn">
Continue Journey
</button>
</div>
</div>
</div>
</div>
<!-- About Container -->
<div class="fixed top-0 left-0 w-[300px] h-[480px] bg-[#0a0a0b] z-[100] flex flex-col overflow-hidden hidden" id="aboutContainer">
<!-- Header -->
<div class="flex justify-between items-center p-[15px] flex-shrink-0">
<h2 class="m-0 text-sm font-medium text-white/90 tracking-[-0.2px]">About</h2>
<button class="w-7 h-7 flex items-center justify-center text-sm cursor-pointer opacity-60 transition-all duration-200 rounded-lg bg-white/[0.04] hover:opacity-100 hover:bg-white/[0.08]" id="aboutBackIcon">
<svg class="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-4 pb-4">
<div class="space-y-4">
<!-- Version -->
<div class="text-center py-2">
<div class="text-2xl mb-2">🧘♀️</div>
<div class="text-white/90 font-medium text-sm">Clauditate</div>
<div class="text-white/40 text-xs">v1.2.0</div>
</div>
<!-- Description -->
<div class="bg-white/[0.03] rounded-xl p-3.5 border border-white/[0.05]">
<p class="text-white/70 text-xs leading-relaxed">
Clauditate helps you stay mindful while Claude Code works by providing gentle breathing exercises during processing moments.
</p>
</div>
<!-- How it works -->
<div class="bg-white/[0.03] rounded-xl p-3.5 border border-white/[0.05]">
<h3 class="text-white/90 font-medium text-xs mb-2">Smart Timing</h3>
<p class="text-white/60 text-xs leading-relaxed">
Uses intelligent algorithms to appear only when you need mindful moments, respecting your workflow and building sustainable meditation habits.
</p>
</div>
<!-- Privacy -->
<div class="bg-white/[0.03] rounded-xl p-3.5 border border-white/[0.05]">
<h3 class="text-white/90 font-medium text-xs mb-2">Privacy First</h3>
<p class="text-white/60 text-xs leading-relaxed">
All data stays local on your machine. No tracking, no analytics, just pure mindfulness.
</p>
</div>
<!-- GitHub -->
<div class="bg-white/[0.03] rounded-xl p-3.5 border border-white/[0.05]">
<button class="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-medium px-4 py-2.5 rounded-lg transition-all duration-200 text-xs" id="githubBtn">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
</svg>
Leave a ⭐ on GitHub
</button>
</div>
</div>
</div>
</div>
<!-- Settings Container -->
<div class="fixed top-0 left-0 w-[300px] h-[480px] bg-[#0a0a0b] z-[100] flex flex-col overflow-hidden hidden" id="settingsContainer">
<!-- Header -->
<div class="flex justify-between items-center p-[15px] flex-shrink-0">
<h2 class="m-0 text-sm font-medium text-white/90 tracking-[-0.2px]">Settings</h2>
<button class="w-7 h-7 flex items-center justify-center text-sm cursor-pointer opacity-60 transition-all duration-200 rounded-lg bg-white/[0.04] hover:opacity-100 hover:bg-white/[0.08]" id="backIcon">
<svg class="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-[15px] pb-[15px] custom-scrollbar">
<!-- Daily Target -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mb-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<label class="block text-[13px] font-normal mb-3 text-white/65">Daily target (minutes)</label>
<div class="flex justify-between gap-1.5">
<label class="relative">
<input type="radio" name="dailyTarget" value="5" class="sr-only" id="target5">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">5</div>
</label>
<label class="relative">
<input type="radio" name="dailyTarget" value="10" class="sr-only" id="target10" checked>
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">10</div>
</label>
<label class="relative">
<input type="radio" name="dailyTarget" value="15" class="sr-only" id="target15">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">15</div>
</label>
<label class="relative">
<input type="radio" name="dailyTarget" value="20" class="sr-only" id="target20">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">20</div>
</label>
</div>
</div>
<!-- Default Cycle Count -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mb-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<label class="block text-[13px] font-normal mb-3 text-white/65">Default cycles</label>
<div class="flex justify-between gap-1.5">
<label class="relative">
<input type="radio" name="cycles" value="5" class="sr-only" id="cycles5">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">5</div>
</label>
<label class="relative">
<input type="radio" name="cycles" value="10" class="sr-only" id="cycles10" checked>
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">10</div>
</label>
<label class="relative">
<input type="radio" name="cycles" value="20" class="sr-only" id="cycles20">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">20</div>
</label>
<label class="relative">
<input type="radio" name="cycles" value="30" class="sr-only" id="cycles30">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">30</div>
</label>
</div>
</div>
<!-- Work Hours -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mb-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<label class="block text-[13px] font-normal mb-3 text-white/65">Work hours</label>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="block text-xs text-white/50 mb-2 font-normal">Start</label>
<select class="w-full appearance-none bg-white/[0.02] border border-white/[0.08] rounded-lg px-3 pr-7 py-2 text-white/85 text-[13px] font-normal cursor-pointer transition-all duration-200 hover:bg-white/[0.04] hover:border-white/10 focus:outline-none focus:border-white/20 focus:bg-white/[0.05]" id="workHoursStart" style="background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center;">
<option value="06:00" class="bg-[#0a0a0b] text-white/90">6:00 AM</option>
<option value="07:00" class="bg-[#0a0a0b] text-white/90">7:00 AM</option>
<option value="08:00" class="bg-[#0a0a0b] text-white/90">8:00 AM</option>
<option value="09:00" selected class="bg-[#0a0a0b] text-white/90">9:00 AM</option>
<option value="10:00" class="bg-[#0a0a0b] text-white/90">10:00 AM</option>
</select>
</div>
<div>
<label class="block text-xs text-white/50 mb-2 font-normal">End</label>
<select class="w-full appearance-none bg-white/[0.02] border border-white/[0.08] rounded-lg px-3 pr-7 py-2 text-white/85 text-[13px] font-normal cursor-pointer transition-all duration-200 hover:bg-white/[0.04] hover:border-white/10 focus:outline-none focus:border-white/20 focus:bg-white/[0.05]" id="workHoursEnd" style="background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center;">
<option value="16:00" class="bg-[#0a0a0b] text-white/90">4:00 PM</option>
<option value="17:00" class="bg-[#0a0a0b] text-white/90">5:00 PM</option>
<option value="18:00" selected class="bg-[#0a0a0b] text-white/90">6:00 PM</option>
<option value="19:00" class="bg-[#0a0a0b] text-white/90">7:00 PM</option>
<option value="20:00" class="bg-[#0a0a0b] text-white/90">8:00 PM</option>
</select>
</div>
</div>
</div>
<!-- Reminder Frequency -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mb-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<label class="block text-[13px] font-normal mb-3 text-white/65">Reminder frequency</label>
<div class="flex justify-between gap-1.5">
<label class="relative">
<input type="radio" name="frequency" value="gentle" class="sr-only" id="freqGentle">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">Lo</div>
</label>
<label class="relative">
<input type="radio" name="frequency" value="balanced" class="sr-only" id="freqBalanced" checked>
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">Med</div>
</label>
<label class="relative">
<input type="radio" name="frequency" value="intensive" class="sr-only" id="freqIntensive">
<div class="w-11 h-11 bg-white/[0.02] text-white/60 rounded-full text-sm cursor-pointer transition-all duration-200 font-normal border-2 border-white/15 flex items-center justify-center mx-auto hover:bg-white/[0.04] hover:border-white/25 hover:text-white/80">Hi</div>
</label>
</div>
</div>
<!-- Notifications -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mb-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<div class="flex items-center justify-between">
<span class="text-[13px] font-normal text-white/65">Notifications</span>
<input type="checkbox" id="notificationsToggle" checked class="appearance-none w-9 h-5 bg-white/[0.08] rounded-[10px] relative cursor-pointer transition-all duration-300 border border-white/10 checked:bg-white/15 checked:border-white/20 after:content-[''] after:absolute after:w-3.5 after:h-3.5 after:bg-white/90 after:rounded-[7px] after:top-0.5 after:left-0.5 after:transition-all after:duration-300 after:shadow-[0_1px_3px_rgba(0,0,0,0.3)] checked:after:translate-x-4 checked:after:bg-white">
</div>
</div>
<!-- Quit Button -->
<div class="mt-6 mb-2">
<button class="w-full py-3 bg-red-900/20 hover:bg-red-800/30 border border-red-800/40 hover:border-red-700/50 text-red-300/80 hover:text-red-200 font-normal rounded-xl transition-all text-sm" id="quitBtn">
Quit App
</button>
</div>
</div>
</div>
<!-- Insights Container -->
<div class="fixed top-0 left-0 w-[300px] h-[450px] bg-[#0a0a0b] z-[100] flex flex-col overflow-hidden hidden" id="insightsContainer">
<!-- Header -->
<div class="flex justify-between items-center p-[15px] flex-shrink-0">
<h2 class="m-0 text-sm font-medium text-white/90 tracking-[-0.2px]">Insights</h2>
<button class="w-7 h-7 flex items-center justify-center text-sm cursor-pointer opacity-60 transition-all duration-200 rounded-lg bg-white/[0.04] hover:opacity-100 hover:bg-white/[0.08]" id="insightsBackIcon">
<svg class="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-[15px] pb-[15px] custom-scrollbar">
<!-- Stats Cards -->
<div class="grid grid-cols-3 gap-2">
<div class="bg-white/[0.03] rounded-xl py-3 text-center border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<div class="text-xl font-medium text-white/90" id="todayMinutes">0</div>
<div class="text-[10px] text-white/50 font-normal mt-0.5 whitespace-nowrap">TODAY</div>
</div>
<div class="bg-white/[0.03] rounded-xl py-3 text-center border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<div class="text-xl font-medium text-white/90" id="weekMinutes">0</div>
<div class="text-[10px] text-white/50 font-normal mt-0.5 whitespace-nowrap">WEEK</div>
</div>
<div class="bg-white/[0.03] rounded-xl py-3 text-center border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<div class="text-xl font-medium text-white/90" id="monthMinutes">0</div>
<div class="text-[10px] text-white/50 font-normal mt-0.5 whitespace-nowrap">MONTH</div>
</div>
</div>
<!-- Weekly Chart -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mt-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<div class="flex items-center justify-between mb-3">
<label class="text-xs font-medium text-white/70">Weekly Progress</label>
<div class="flex items-center gap-2">
<button class="w-6 h-6 flex items-center justify-center rounded-lg bg-white/[0.03] hover:bg-white/[0.06] transition-all" id="prevWeek">
<svg class="w-3 h-3 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<span class="text-[11px] text-white/50 font-normal min-w-[70px] text-center" id="weekRange">Loading...</span>
<button class="w-6 h-6 flex items-center justify-center rounded-lg bg-white/[0.03] hover:bg-white/[0.06] transition-all" id="nextWeek">
<svg class="w-3 h-3 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<!-- Chart Container -->
<div class="relative">
<div class="h-20 flex items-end justify-between gap-1 bg-white/[0.01] rounded-lg border border-white/[0.03] p-2" id="weeklyChart">
<!-- Days will be populated by JS -->
</div>
<!-- Day Labels -->
<div class="flex justify-between mt-1.5 px-2 text-[10px] text-white/40">
<span class="flex-1 text-center">S</span>
<span class="flex-1 text-center">M</span>
<span class="flex-1 text-center">T</span>
<span class="flex-1 text-center">W</span>
<span class="flex-1 text-center">T</span>
<span class="flex-1 text-center">F</span>
<span class="flex-1 text-center">S</span>
</div>
</div>
</div>
<!-- Smart Timing Status - Subtle hint -->
<div class="mt-3 px-1">
<div class="flex items-center justify-between text-[10px] text-white/30">
<span>Smart timing</span>
<span id="smartStatus" class="text-white/40">• Active</span>
</div>
</div>
<!-- Recent Sessions -->
<div class="bg-white/[0.03] rounded-xl p-3.5 mt-2.5 border border-white/[0.05] transition-all duration-200 hover:bg-white/[0.04] hover:border-white/[0.08]">
<label class="text-xs font-medium text-white/70 mb-3 block">Recent Sessions</label>
<div class="space-y-1.5" id="recentSessions">
<!-- Sessions will be populated by JS -->
</div>
</div>
</div>
</div>
</div>
<!-- Confetti styles -->
<style>
.confetti-piece {
position: absolute;
width: 8px;
height: 8px;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
animation: confettiFall 3s ease-in-out forwards;
opacity: 0.8;
}
.confetti-piece:nth-child(2n) {
background: linear-gradient(45deg, #8b5cf6, #a78bfa);
width: 6px;
height: 6px;
animation-delay: 0.1s;
}
.confetti-piece:nth-child(3n) {
background: linear-gradient(45deg, #06b6d4, #67e8f9);
width: 10px;
height: 4px;
animation-delay: 0.2s;
}
.confetti-piece:nth-child(4n) {
background: linear-gradient(45deg, #10b981, #6ee7b7);
width: 4px;
height: 10px;
animation-delay: 0.15s;
}
/* Zen background elements */
@keyframes zenFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.1;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.2;
}
}
.zen-symbol {
position: absolute;
font-size: 2rem;
opacity: 0.08;
animation: zenFloat 15s ease-in-out infinite;
pointer-events: none;
color: rgba(255, 255, 255, 0.15);
}
.zen-symbol:nth-child(2) { animation-delay: 2s; top: 20%; left: 15%; font-size: 1.5rem; }
.zen-symbol:nth-child(3) { animation-delay: 5s; top: 70%; right: 20%; font-size: 1.8rem; }
.zen-symbol:nth-child(4) { animation-delay: 8s; top: 45%; left: 5%; font-size: 1.2rem; }
.zen-symbol:nth-child(5) { animation-delay: 11s; top: 15%; right: 10%; font-size: 2.2rem; }
.zen-symbol:nth-child(6) { animation-delay: 14s; top: 80%; left: 30%; font-size: 1.4rem; }
</style>
<script src="dist/renderer.js"></script>
</body>
</html>