| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Assistant | 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.rings.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, #0f0c29 0%, #302b63 50%, #24243e 100%); |
| } |
| .assistant-card { |
| backdrop-filter: blur(10px); |
| background-color: rgba(255, 255, 255, 0.08); |
| } |
| .message-user { |
| background: rgba(255, 160, 122, 0.2); |
| border-left: 3px solid #FFA07A; |
| } |
| .message-ai { |
| background: rgba(118, 75, 162, 0.2); |
| border-left: 3px solid #4e4376; |
| } |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #FFA07A; |
| margin: 0 2px; |
| animation: bounce 1.4s infinite ease-in-out; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| @keyframes bounce { |
| 0%, 60%, 100% { transform: translateY(0); } |
| 30% { transform: translateY(-5px); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen text-white gradient-bg" id="vanta-bg"> |
| <div class="container mx-auto px-4 py-8"> |
| <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-[#FFA07A] transition">Home</a> |
| <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a> |
| <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a> |
| <a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a> |
| <a href="media.html" class="hover:text-[#FFA07A] transition">Media</a> |
| </nav> |
| <button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition"> |
| My Account |
| </button> |
| </header> |
|
|
| <main> |
| <div class="grid lg:grid-cols-3 gap-8 mb-8"> |
| <div class="lg:col-span-2"> |
| <div class="assistant-card rounded-3xl p-8 mb-8 h-[600px] flex flex-col"> |
| <h1 class="text-3xl font-bold mb-8">CircaAssistant</h1> |
| |
| <div class="flex-1 space-y-4 overflow-y-auto mb-6 pr-4" id="chat-container"> |
| <div class="message-ai rounded-lg p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| <div> |
| <div class="font-bold mb-1">CircaAssistant</div> |
| <p>Hi there! I'm your circadian rhythm AI assistant. I can help you optimize your sleep, schedule, productivity, and more based on your biological patterns. What would you like to know today?</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message-user rounded-lg p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-[#FFA07A] flex items-center justify-center mr-3"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| <div> |
| <div class="font-bold mb-1">You</div> |
| <p>How can I improve my sleep quality?</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message-ai rounded-lg p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| <div> |
| <div class="font-bold mb-1">CircaAssistant</div> |
| <p>Based on your sleep data, here are personalized recommendations:</p> |
| <ul class="list-disc pl-5 mt-2 space-y-2"> |
| <li>Maintain consistent bedtime (try 11:00 PM based on your patterns)</li> |
| <li>Reduce screen time 1 hour before bed (your average is currently 30 mins)</li> |
| <li>Keep bedroom temperature between 65-68°F (currently 72°F)</li> |
| <li>Try our "Sleep Sounds" playlist featuring pink noise</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="typing-indicator rounded-lg p-4 hidden"> |
| <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="cpu" class="w-4 h-4"></i> |
| </div> |
| <div class="flex space-x-1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="relative"> |
| <input type="text" placeholder="Ask me anything about sleep, productivity, or your schedule..." |
| class="w-full bg-white/10 border border-white/20 rounded-full px-6 py-4 pr-14"> |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#FFA07A] p-2 rounded-full"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="assistant-card rounded-3xl p-8 mb-8"> |
| <h2 class="text-2xl font-bold mb-6">Quick Actions</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition"> |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mb-2"> |
| <i data-feather="moon" class="w-5 h-5"></i> |
| </div> |
| <span class="text-sm">Sleep Tips</span> |
| </button> |
| <button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition"> |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mb-2"> |
| <i data-feather="clock" class="w-5 h-5"></i> |
| </div> |
| <span class="text-sm">Schedule Review</span> |
| </button> |
| <button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition"> |
| <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mb-2"> |
| <i data-feather="zap" class="w-5 h-5"></i> |
| </div> |
| <span class="text-sm">Energy Boost</span> |
| </button> |
| <button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition"> |
| <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mb-2"> |
| <i data-feather="book" class="w-5 h-5"></i> |
| </div> |
| <span class="text-sm">Learning Tips</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="assistant-card rounded-3xl p-8 mb-8"> |
| <h2 class="text-2xl font-bold mb-6">Your Stats</h2> |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Sleep Quality</span> |
| <span class="text-[#FFA07A]">78%</span> |
| </div> |
| <div class="w-full bg-white/10 rounded-full h-2"> |
| <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 78%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Productivity</span> |
| <span class="text-[#FFA07A]">85%</span> |
| </div> |
| <div class="w-full bg-white/10 rounded-full h-2"> |
| <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Consistency</span> |
| <span class="text-[#FFA07A]">64%</span> |
| </div> |
| <div class="w-full bg-white/10 rounded-full h-2"> |
| <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 64%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="assistant-card rounded-3xl p-8"> |
| <h2 class="text-2xl font-bold mb-6">Suggested Topics</h2> |
| <div class="flex flex-wrap gap-2"> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Sleep optimization</button> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Time blocking</button> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Focus techniques</button> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Morning routine</button> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Nutrition</button> |
| <button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Stress reduction</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="border-t border-white/20 mt-12 pt-8 pb-12"> |
| <div class="text-center opacity-70 text-sm"> |
| © 2023 CircaSnooze. All rights reserved. |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| VANTA.RINGS({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0xffa07a, |
| backgroundColor: 0x1a1b2f, |
| backgroundAlpha: 0.5 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| document.querySelector('button').addEventListener('click', function() { |
| const input = document.querySelector('input'); |
| const chatContainer = document.getElementById('chat-container'); |
| |
| if(input.value.trim() === '') return; |
| |
| |
| chatContainer.innerHTML += ` |
| <div class="message-user rounded-lg p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-[#FFA07A] flex items-center justify-center mr-3"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| <div> |
| <div class="font-bold mb-1">You</div> |
| <p>${input.value}</p> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| |
| document.querySelector('.typing-indicator').classList.remove('hidden'); |
| |
| |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| |
| setTimeout(() => { |
| document.querySelector('.typing-indicator').classList.add('hidden'); |
| |
| chatContainer.innerHTML += ` |
| <div class="message-ai rounded-lg p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| <div> |
| <div class="font-bold mb-1">CircaAssistant</div> |
| <p>I'm analyzing your question about "${input.value}". This is a simulated response - in a real application, I would provide personalized advice based on your data.</p> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| |
| feather.replace(); |
| }, 2000); |
| |
| |
| input.value = ''; |
| }); |
| </script> |
| </body> |
| </html> |
