Hugging Face's logo

Spaces:
ttcgroup
/
undefined
Running

App Files Community
undefined / assistant.html
ttcgroup's picture
ttcgroup
this is good. now flesh out the individual components of the "all in one life orchestrator" so that clicking on the individual boxes brings you to the examples of what that page/feature holds
1e37053 verified
Raw History Blame Contribute Delete
16.5 kB
<!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>
// Initialize Vanta.js background
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
});
// Initialize feather icons
feather.replace();
// Simple chat functionality
document.querySelector('button').addEventListener('click', function() {
const input = document.querySelector('input');
const chatContainer = document.getElementById('chat-container');
if(input.value.trim() === '') return;
// Add user message
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>
`;
// Show typing indicator
document.querySelector('.typing-indicator').classList.remove('hidden');
// Scroll to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
// Simulate AI response after delay
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>
`;
// Scroll to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
// Re-initialize feather icons for new elements
feather.replace();
}, 2000);
// Clear input
input.value = '';
});
</script>
</body>
</html>