fix the buttons so that they do what they are supposed to do. incorporate the other suggestions I had originally recommended and change the color scheme slightly to create a color palette and experience that is a little more immersive and soothing. change the white font lettering to a more salmon color
70a5fe0 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sleep Calculator | CircaSnooze</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); | |
| } | |
| .sleep-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.08); | |
| } | |
| .sleep-cycle { | |
| height: 4px; | |
| border-radius: 2px; | |
| } | |
| .rem-cycle { | |
| background-color: #8b5cf6; | |
| } | |
| .deep-cycle { | |
| background-color: #6366f1; | |
| } | |
| .light-cycle { | |
| background-color: #a5b4fc; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen text-white gradient-bg" id="vanta-bg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <i data-feather="moon" class="w-6 h-6"></i> | |
| <span class="text-xl font-bold">CircaSnooze</span> | |
| </a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="hover:text-purple-200 transition">Home</a> | |
| <a href="#" class="text-purple-300 font-medium">Sleep</a> | |
| <a href="#" class="hover:text-purple-200 transition">Schedule</a> | |
| <a href="#" class="hover:text-purple-200 transition">Tasks</a> | |
| </nav> | |
| <button class="bg-purple-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition"> | |
| My Account | |
| </button> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="grid lg:grid-cols-2 gap-12 mb-8"> | |
| <!-- Sleep Calculator --> | |
| <div class="sleep-card rounded-3xl p-8"> | |
| <h1 class="text-3xl font-bold mb-2">Sleep Calculator</h1> | |
| <p class="text-lg opacity-80 mb-8">Find your perfect sleep time based on circadian science</p> | |
| <div class="mb-8"> | |
| <div class="flex space-x-4 mb-6"> | |
| <button id="sleepTimeBtn" class="bg-[#4e4376] text-[#FFA07A] px-4 py-2 rounded-lg font-medium">Sleep Time</button> | |
| <button id="wakeTimeBtn" class="text-[#FFA07A] px-4 py-2 rounded-lg font-medium hover:bg-[#2c5364]/50">Wake Time</button> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-medium">I want to fall asleep at:</label> | |
| <input type="time" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-medium">Sleep duration:</label> | |
| <div class="relative"> | |
| <input type="range" min="4" max="10" step="0.5" value="7.5" class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer"> | |
| <div class="absolute top-0 left-0 right-0 flex justify-between text-xs mt-3"> | |
| <span>4h</span> | |
| <span>5h</span> | |
| <span>6h</span> | |
| <span>7h</span> | |
| <span>8h</span> | |
| <span>9h</span> | |
| <span>10h</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="calculateBtn" class="w-full bg-[#4e4376] text-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#3a2a7a] transition"> | |
| Calculate Sleep Cycles | |
| </button> | |
| </div> | |
| <div class="border-t border-white/10 pt-6"> | |
| <h3 class="font-medium mb-4">Sleep Preferences</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="gentle-alarm" class="mr-2 rounded bg-white/10 border-white/20"> | |
| <label for="gentle-alarm" class="text-sm">Gentle Alarm</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="sleep-sounds" class="mr-2 rounded bg-white/10 border-white/20" checked> | |
| <label for="sleep-sounds" class="text-sm">Sleep Sounds</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="smart-lights" class="mr-2 rounded bg-white/10 border-white/20"> | |
| <label for="smart-lights" class="text-sm">Smart Lights</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="sleep-tracking" class="mr-2 rounded bg-white/10 border-white/20" checked> | |
| <label for="sleep-tracking" class="text-sm">Sleep Tracking</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div class="sleep-card rounded-3xl p-8"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-1">Your Sleep Plan</h2> | |
| <p class="opacity-80">Based on your chronotype & sleep cycles</p> | |
| </div> | |
| <div class="flex items-center space-x-2 bg-white/10 px-3 py-1 rounded-full"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| <span class="text-sm">Night Owl</span> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium mb-4">Recommended Bedtimes</h3> | |
| <div class="grid grid-cols-3 gap-3 mb-4"> | |
| <div class="bg-purple-700/50 rounded-lg p-3 text-center"> | |
| <div class="text-lg font-bold">10:30 PM</div> | |
| <div class="text-xs opacity-80">5 full cycles</div> | |
| </div> | |
| <div class="bg-purple-600 rounded-lg p-3 text-center"> | |
| <div class="text-lg font-bold">12:00 AM</div> | |
| <div class="text-xs opacity-80">4.5 cycles</div> | |
| </div> | |
| <div class="bg-purple-700/50 rounded-lg p-3 text-center"> | |
| <div class="text-lg font-bold">1:30 AM</div> | |
| <div class="text-xs opacity-80">4 cycles</div> | |
| </div> | |
| </div> | |
| <p class="text-sm opacity-80">Each sleep cycle lasts ~90 minutes. Waking between cycles reduces grogginess.</p> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium mb-4">Your Sleep Architecture</h3> | |
| <div class="bg-white/5 rounded-xl p-4 mb-4"> | |
| <div class="flex justify-between text-xs mb-2"> | |
| <span>10:30 PM</span> | |
| <span>6:00 AM</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs opacity-70">Cycle 1</div> | |
| <div class="flex-1 flex space-x-px"> | |
| <div class="sleep-cycle rem-cycle w-1/6"></div> | |
| <div class="sleep-cycle deep-cycle w-2/6"></div> | |
| <div class="sleep-cycle light-cycle w-3/6"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs opacity-70">Cycle 2</div> | |
| <div class="flex-1 flex space-x-px"> | |
| <div class="sleep-cycle rem-cycle w-2/6"></div> | |
| <div class="sleep-cycle deep-cycle w-2/6"></div> | |
| <div class="sleep-cycle light-cycle w-2/6"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs opacity-70">Cycle 3</div> | |
| <div class="flex-1 flex space-x-px"> | |
| <div class="sleep-cycle rem-cycle w-1/6"></div> | |
| <div class="sleep-cycle deep-cycle w-1/6"></div> | |
| <div class="sleep-cycle light-cycle w-4/6"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs opacity-70">Cycle 4</div> | |
| <div class="flex-1 flex space-x-px"> | |
| <div class="sleep-cycle rem-cycle w-3/6"></div> | |
| <div class="sleep-cycle deep-cycle w-1/6"></div> | |
| <div class="sleep-cycle light-cycle w-2/6"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs opacity-70">Cycle 5</div> | |
| <div class="flex-1 flex space-x-px"> | |
| <div class="sleep-cycle rem-cycle w-4/6"></div> | |
| <div class="sleep-cycle light-cycle w-2/6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-6 text-xs"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-1"></div> | |
| <span>REM</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div> | |
| <span>Deep</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-indigo-300 mr-1"></div> | |
| <span>Light</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-4">Morning Routine Suggestions</h3> | |
| <div class="bg-white/5 rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3"> | |
| <i data-feather="sun" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Light Therapy</div> | |
| <div class="text-xs opacity-70">Start 30 mins before alarm</div> | |
| </div> | |
| </div> | |
| <button class="text-purple-300 text-sm font-medium">Enable</button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-3"> | |
| <i data-feather="droplet" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Hydration</div> | |
| <div class="text-xs opacity-70">500ml water on waking</div> | |
| </div> | |
| </div> | |
| <button class="text-purple-300 text-sm font-medium">Enable</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sleep Tips --> | |
| <div class="sleep-card rounded-3xl p-8 mb-8"> | |
| <h2 class="text-2xl font-bold mb-6">Sleep Optimization Tips</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white/5 rounded-xl p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mb-4"> | |
| <i data-feather="sunset" class="w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-medium mb-2">Evening Routine</h3> | |
| <p class="text-sm opacity-80">Reduce blue light exposure 2 hours before bed. Try our screen dimming feature.</p> | |
| </div> | |
| <div class="bg-white/5 rounded-xl p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mb-4"> | |
| <i data-feather="thermometer" class="w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-medium mb-2">Environment</h3> | |
| <p class="text-sm opacity-80">Keep bedroom at 18-22°C (65-72°F) for optimal sleep temperature.</p> | |
| </div> | |
| <div class="bg-white/5 rounded-xl p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mb-4"> | |
| <i data-feather="wind" class="w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-medium mb-2">Breathing</h3> | |
| <p class="text-sm opacity-80">Try the 4-7-8 technique: Inhale 4s, hold 7s, exhale 8s to fall asleep faster.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sleep History --> | |
| <div class="sleep-card rounded-3xl p-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Your Sleep History</h2> | |
| <button class="flex items-center text-sm text-purple-300"> | |
| <span>View All</span> | |
| <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left border-b border-white/10 text-sm opacity-80"> | |
| <th class="pb-3">Date</th> | |
| <th class="pb-3">Bedtime</th> | |
| <th class="pb-3">Wake Time</th> | |
| <th class="pb-3">Duration</th> | |
| <th class="pb-3">Quality</th> | |
| <th class="pb-3">Notes</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-white/10"> | |
| <tr> | |
| <td class="py-4">Today</td> | |
| <td>12:15 AM</td> | |
| <td>7:45 AM</td> | |
| <td>7h 30m</td> | |
| <td> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="text-purple-300 text-sm font-medium">View</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">Yesterday</td> | |
| <td>1:30 AM</td> | |
| <td>9:00 AM</td> | |
| <td>7h 30m</td> | |
| <td> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-gray-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="text-purple-300 text-sm font-medium">View</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">May 12</td> | |
| <td>11:45 PM</td> | |
| <td>6:30 AM</td> | |
| <td>6h 45m</td> | |
| <td> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="text-purple-300 text-sm font-medium">View</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-white/20 mt-12 pt-8 pb-12"> | |
| <div class="grid md:grid-cols-3 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="moon" class="w-6 h-6"></i> | |
| <h3 class="text-xl font-bold">CircaSnooze</h3> | |
| </div> | |
| <p class="opacity-80">Optimizing your biological rhythm for peak performance.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Sleep Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-purple-200 transition">Sleep Science</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Circadian Rhythm</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Sleep Disorders</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Productivity Tips</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-purple-200 transition">Help Center</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-center opacity-70 text-sm"> | |
| © 2023 CircaSnooze. All rights reserved. | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.FOG({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| highlightColor: 0x5d3dc9, | |
| midtoneColor: 0x3a2a7a, | |
| lowlightColor: 0x1a1b2f, | |
| baseColor: 0x0, | |
| blurFactor: 0.44, | |
| speed: 1.50, | |
| zoom: 0.85 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Button functionality | |
| document.getElementById('sleepTimeBtn').addEventListener('click', function() { | |
| document.getElementById('wakeTimeBtn').classList.remove('bg-[#4e4376]'); | |
| this.classList.add('bg-[#4e4376]'); | |
| }); | |
| document.getElementById('wakeTimeBtn').addEventListener('click', function() { | |
| document.getElementById('sleepTimeBtn').classList.remove('bg-[#4e4376]'); | |
| this.classList.add('bg-[#4e4376]'); | |
| }); | |
| document.getElementById('calculateBtn').addEventListener('click', function() { | |
| const timeInput = document.querySelector('input[type="time"]').value; | |
| const duration = document.querySelector('input[type="range"]').value; | |
| if(!timeInput) { | |
| alert('Please enter a time'); | |
| return; | |
| } | |
| // Calculate sleep cycles (demo logic) | |
| const [hours, minutes] = timeInput.split(':').map(Number); | |
| const totalMinutes = hours * 60 + minutes; | |
| // Show results (in a real app, this would be more sophisticated) | |
| alert(`Calculated sleep cycles based on ${duration} hours of sleep starting at ${timeInput}`); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |