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
Browse files- assistant.html +307 -0
- index.html +18 -18
- media.html +270 -0
- patterns.html +268 -0
- research.html +287 -0
- scheduling.html +266 -0
- tasks.html +260 -0
assistant.html
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AI Assistant | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.rings.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
| 18 |
+
}
|
| 19 |
+
.assistant-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.message-user {
|
| 24 |
+
background: rgba(255, 160, 122, 0.2);
|
| 25 |
+
border-left: 3px solid #FFA07A;
|
| 26 |
+
}
|
| 27 |
+
.message-ai {
|
| 28 |
+
background: rgba(118, 75, 162, 0.2);
|
| 29 |
+
border-left: 3px solid #4e4376;
|
| 30 |
+
}
|
| 31 |
+
.typing-indicator span {
|
| 32 |
+
display: inline-block;
|
| 33 |
+
width: 8px;
|
| 34 |
+
height: 8px;
|
| 35 |
+
border-radius: 50%;
|
| 36 |
+
background: #FFA07A;
|
| 37 |
+
margin: 0 2px;
|
| 38 |
+
animation: bounce 1.4s infinite ease-in-out;
|
| 39 |
+
}
|
| 40 |
+
.typing-indicator span:nth-child(2) {
|
| 41 |
+
animation-delay: 0.2s;
|
| 42 |
+
}
|
| 43 |
+
.typing-indicator span:nth-child(3) {
|
| 44 |
+
animation-delay: 0.4s;
|
| 45 |
+
}
|
| 46 |
+
@keyframes bounce {
|
| 47 |
+
0%, 60%, 100% { transform: translateY(0); }
|
| 48 |
+
30% { transform: translateY(-5px); }
|
| 49 |
+
}
|
| 50 |
+
</style>
|
| 51 |
+
</head>
|
| 52 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 53 |
+
<div class="container mx-auto px-4 py-8">
|
| 54 |
+
<header class="flex justify-between items-center mb-12">
|
| 55 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 56 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 57 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 58 |
+
</a>
|
| 59 |
+
<nav class="hidden md:flex space-x-6">
|
| 60 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 61 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 62 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 63 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 64 |
+
<a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
|
| 65 |
+
</nav>
|
| 66 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 67 |
+
My Account
|
| 68 |
+
</button>
|
| 69 |
+
</header>
|
| 70 |
+
|
| 71 |
+
<main>
|
| 72 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 73 |
+
<div class="lg:col-span-2">
|
| 74 |
+
<div class="assistant-card rounded-3xl p-8 mb-8 h-[600px] flex flex-col">
|
| 75 |
+
<h1 class="text-3xl font-bold mb-8">CircaAssistant</h1>
|
| 76 |
+
|
| 77 |
+
<div class="flex-1 space-y-4 overflow-y-auto mb-6 pr-4" id="chat-container">
|
| 78 |
+
<div class="message-ai rounded-lg p-4">
|
| 79 |
+
<div class="flex items-start">
|
| 80 |
+
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
|
| 81 |
+
<i data-feather="cpu" class="w-4 h-4"></i>
|
| 82 |
+
</div>
|
| 83 |
+
<div>
|
| 84 |
+
<div class="font-bold mb-1">CircaAssistant</div>
|
| 85 |
+
<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>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<div class="message-user rounded-lg p-4">
|
| 91 |
+
<div class="flex items-start">
|
| 92 |
+
<div class="w-8 h-8 rounded-full bg-[#FFA07A] flex items-center justify-center mr-3">
|
| 93 |
+
<i data-feather="user" class="w-4 h-4"></i>
|
| 94 |
+
</div>
|
| 95 |
+
<div>
|
| 96 |
+
<div class="font-bold mb-1">You</div>
|
| 97 |
+
<p>How can I improve my sleep quality?</p>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
|
| 102 |
+
<div class="message-ai rounded-lg p-4">
|
| 103 |
+
<div class="flex items-start">
|
| 104 |
+
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
|
| 105 |
+
<i data-feather="cpu" class="w-4 h-4"></i>
|
| 106 |
+
</div>
|
| 107 |
+
<div>
|
| 108 |
+
<div class="font-bold mb-1">CircaAssistant</div>
|
| 109 |
+
<p>Based on your sleep data, here are personalized recommendations:</p>
|
| 110 |
+
<ul class="list-disc pl-5 mt-2 space-y-2">
|
| 111 |
+
<li>Maintain consistent bedtime (try 11:00 PM based on your patterns)</li>
|
| 112 |
+
<li>Reduce screen time 1 hour before bed (your average is currently 30 mins)</li>
|
| 113 |
+
<li>Keep bedroom temperature between 65-68°F (currently 72°F)</li>
|
| 114 |
+
<li>Try our "Sleep Sounds" playlist featuring pink noise</li>
|
| 115 |
+
</ul>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="typing-indicator rounded-lg p-4 hidden">
|
| 121 |
+
<div class="flex items-center">
|
| 122 |
+
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
|
| 123 |
+
<i data-feather="cpu" class="w-4 h-4"></i>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="flex space-x-1">
|
| 126 |
+
<span></span>
|
| 127 |
+
<span></span>
|
| 128 |
+
<span></span>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<div class="relative">
|
| 135 |
+
<input type="text" placeholder="Ask me anything about sleep, productivity, or your schedule..."
|
| 136 |
+
class="w-full bg-white/10 border border-white/20 rounded-full px-6 py-4 pr-14">
|
| 137 |
+
<button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#FFA07A] p-2 rounded-full">
|
| 138 |
+
<i data-feather="send" class="w-5 h-5"></i>
|
| 139 |
+
</button>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
|
| 144 |
+
<div>
|
| 145 |
+
<div class="assistant-card rounded-3xl p-8 mb-8">
|
| 146 |
+
<h2 class="text-2xl font-bold mb-6">Quick Actions</h2>
|
| 147 |
+
<div class="grid grid-cols-2 gap-4">
|
| 148 |
+
<button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition">
|
| 149 |
+
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mb-2">
|
| 150 |
+
<i data-feather="moon" class="w-5 h-5"></i>
|
| 151 |
+
</div>
|
| 152 |
+
<span class="text-sm">Sleep Tips</span>
|
| 153 |
+
</button>
|
| 154 |
+
<button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition">
|
| 155 |
+
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mb-2">
|
| 156 |
+
<i data-feather="clock" class="w-5 h-5"></i>
|
| 157 |
+
</div>
|
| 158 |
+
<span class="text-sm">Schedule Review</span>
|
| 159 |
+
</button>
|
| 160 |
+
<button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition">
|
| 161 |
+
<div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mb-2">
|
| 162 |
+
<i data-feather="zap" class="w-5 h-5"></i>
|
| 163 |
+
</div>
|
| 164 |
+
<span class="text-sm">Energy Boost</span>
|
| 165 |
+
</button>
|
| 166 |
+
<button class="assistant-card rounded-xl p-4 flex flex-col items-center hover:bg-white/10 transition">
|
| 167 |
+
<div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mb-2">
|
| 168 |
+
<i data-feather="book" class="w-5 h-5"></i>
|
| 169 |
+
</div>
|
| 170 |
+
<span class="text-sm">Learning Tips</span>
|
| 171 |
+
</button>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
|
| 175 |
+
<div class="assistant-card rounded-3xl p-8 mb-8">
|
| 176 |
+
<h2 class="text-2xl font-bold mb-6">Your Stats</h2>
|
| 177 |
+
<div class="space-y-6">
|
| 178 |
+
<div>
|
| 179 |
+
<div class="flex justify-between mb-1">
|
| 180 |
+
<span class="font-medium">Sleep Quality</span>
|
| 181 |
+
<span class="text-[#FFA07A]">78%</span>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 184 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 78%"></div>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
<div>
|
| 188 |
+
<div class="flex justify-between mb-1">
|
| 189 |
+
<span class="font-medium">Productivity</span>
|
| 190 |
+
<span class="text-[#FFA07A]">85%</span>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 193 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 85%"></div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
<div>
|
| 197 |
+
<div class="flex justify-between mb-1">
|
| 198 |
+
<span class="font-medium">Consistency</span>
|
| 199 |
+
<span class="text-[#FFA07A]">64%</span>
|
| 200 |
+
</div>
|
| 201 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 202 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 64%"></div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
|
| 208 |
+
<div class="assistant-card rounded-3xl p-8">
|
| 209 |
+
<h2 class="text-2xl font-bold mb-6">Suggested Topics</h2>
|
| 210 |
+
<div class="flex flex-wrap gap-2">
|
| 211 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Sleep optimization</button>
|
| 212 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Time blocking</button>
|
| 213 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Focus techniques</button>
|
| 214 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Morning routine</button>
|
| 215 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Nutrition</button>
|
| 216 |
+
<button class="bg-white/10 hover:bg-[#FFA07A] hover:text-white px-3 py-1 rounded-full text-sm transition">Stress reduction</button>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</main>
|
| 222 |
+
|
| 223 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 224 |
+
<div class="text-center opacity-70 text-sm">
|
| 225 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 226 |
+
</div>
|
| 227 |
+
</footer>
|
| 228 |
+
</div>
|
| 229 |
+
|
| 230 |
+
<script>
|
| 231 |
+
// Initialize Vanta.js background
|
| 232 |
+
VANTA.RINGS({
|
| 233 |
+
el: "#vanta-bg",
|
| 234 |
+
mouseControls: true,
|
| 235 |
+
touchControls: true,
|
| 236 |
+
gyroControls: false,
|
| 237 |
+
minHeight: 200.00,
|
| 238 |
+
minWidth: 200.00,
|
| 239 |
+
scale: 1.00,
|
| 240 |
+
scaleMobile: 1.00,
|
| 241 |
+
color: 0xffa07a,
|
| 242 |
+
backgroundColor: 0x1a1b2f,
|
| 243 |
+
backgroundAlpha: 0.5
|
| 244 |
+
});
|
| 245 |
+
|
| 246 |
+
// Initialize feather icons
|
| 247 |
+
feather.replace();
|
| 248 |
+
|
| 249 |
+
// Simple chat functionality
|
| 250 |
+
document.querySelector('button').addEventListener('click', function() {
|
| 251 |
+
const input = document.querySelector('input');
|
| 252 |
+
const chatContainer = document.getElementById('chat-container');
|
| 253 |
+
|
| 254 |
+
if(input.value.trim() === '') return;
|
| 255 |
+
|
| 256 |
+
// Add user message
|
| 257 |
+
chatContainer.innerHTML += `
|
| 258 |
+
<div class="message-user rounded-lg p-4">
|
| 259 |
+
<div class="flex items-start">
|
| 260 |
+
<div class="w-8 h-8 rounded-full bg-[#FFA07A] flex items-center justify-center mr-3">
|
| 261 |
+
<i data-feather="user" class="w-4 h-4"></i>
|
| 262 |
+
</div>
|
| 263 |
+
<div>
|
| 264 |
+
<div class="font-bold mb-1">You</div>
|
| 265 |
+
<p>${input.value}</p>
|
| 266 |
+
</div>
|
| 267 |
+
</div>
|
| 268 |
+
</div>
|
| 269 |
+
`;
|
| 270 |
+
|
| 271 |
+
// Show typing indicator
|
| 272 |
+
document.querySelector('.typing-indicator').classList.remove('hidden');
|
| 273 |
+
|
| 274 |
+
// Scroll to bottom
|
| 275 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
| 276 |
+
|
| 277 |
+
// Simulate AI response after delay
|
| 278 |
+
setTimeout(() => {
|
| 279 |
+
document.querySelector('.typing-indicator').classList.add('hidden');
|
| 280 |
+
|
| 281 |
+
chatContainer.innerHTML += `
|
| 282 |
+
<div class="message-ai rounded-lg p-4">
|
| 283 |
+
<div class="flex items-start">
|
| 284 |
+
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
|
| 285 |
+
<i data-feather="cpu" class="w-4 h-4"></i>
|
| 286 |
+
</div>
|
| 287 |
+
<div>
|
| 288 |
+
<div class="font-bold mb-1">CircaAssistant</div>
|
| 289 |
+
<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>
|
| 290 |
+
</div>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
`;
|
| 294 |
+
|
| 295 |
+
// Scroll to bottom
|
| 296 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
| 297 |
+
|
| 298 |
+
// Re-initialize feather icons for new elements
|
| 299 |
+
feather.replace();
|
| 300 |
+
}, 2000);
|
| 301 |
+
|
| 302 |
+
// Clear input
|
| 303 |
+
input.value = '';
|
| 304 |
+
});
|
| 305 |
+
</script>
|
| 306 |
+
</body>
|
| 307 |
+
</html>
|
index.html
CHANGED
|
@@ -44,12 +44,12 @@
|
|
| 44 |
</div>
|
| 45 |
<nav class="hidden md:flex space-x-8">
|
| 46 |
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 47 |
-
<a href="
|
| 48 |
-
<a href="
|
| 49 |
-
<a href="
|
| 50 |
-
<a href="
|
| 51 |
</nav>
|
| 52 |
-
|
| 53 |
<i data-feather="menu" class="w-6 h-6"></i>
|
| 54 |
</button>
|
| 55 |
</header>
|
|
@@ -124,59 +124,59 @@
|
|
| 124 |
<h2 class="text-3xl font-bold mb-12 text-center">Your All-In-One <span class="text-purple-300">Life Orchestrator</span></h2>
|
| 125 |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 126 |
<!-- Feature 1 -->
|
| 127 |
-
<
|
| 128 |
<div class="w-12 h-12 rounded-lg bg-purple-600 flex items-center justify-center mb-4">
|
| 129 |
<i data-feather="clock" class="w-6 h-6"></i>
|
| 130 |
</div>
|
| 131 |
<h3 class="text-xl font-semibold mb-3">Smart Scheduling</h3>
|
| 132 |
<p class="opacity-80">AI-powered calendar that understands your rhythms and optimizes your time.</p>
|
| 133 |
-
</
|
| 134 |
|
| 135 |
<!-- Feature 2 -->
|
| 136 |
-
<
|
| 137 |
<div class="w-12 h-12 rounded-lg bg-pink-600 flex items-center justify-center mb-4">
|
| 138 |
<i data-feather="check-circle" class="w-6 h-6"></i>
|
| 139 |
</div>
|
| 140 |
<h3 class="text-xl font-semibold mb-3">Task Genius</h3>
|
| 141 |
<p class="opacity-80">Never forget a task with our predictive reminder system and behavior analysis.</p>
|
| 142 |
-
</
|
| 143 |
|
| 144 |
<!-- Feature 3 -->
|
| 145 |
-
<
|
| 146 |
<div class="w-12 h-12 rounded-lg bg-blue-600 flex items-center justify-center mb-4">
|
| 147 |
<i data-feather="bookmark" class="w-6 h-6"></i>
|
| 148 |
</div>
|
| 149 |
<h3 class="text-xl font-semibold mb-3">Research Hub</h3>
|
| 150 |
<p class="opacity-80">Organize bookmarks, notes, and files with intelligent tagging and search.</p>
|
| 151 |
-
</
|
| 152 |
|
| 153 |
<!-- Feature 4 -->
|
| 154 |
-
<
|
| 155 |
<div class="w-12 h-12 rounded-lg bg-green-600 flex items-center justify-center mb-4">
|
| 156 |
<i data-feather="music" class="w-6 h-6"></i>
|
| 157 |
</div>
|
| 158 |
<h3 class="text-xl font-semibold mb-3">Media Maestro</h3>
|
| 159 |
<p class="opacity-80">Create playlists for focus, relaxation, or sleep with our biorhythm-aware suggestions.</p>
|
| 160 |
-
</
|
| 161 |
|
| 162 |
<!-- Feature 5 -->
|
| 163 |
-
<
|
| 164 |
<div class="w-12 h-12 rounded-lg bg-yellow-600 flex items-center justify-center mb-4">
|
| 165 |
<i data-feather="zap" class="w-6 h-6"></i>
|
| 166 |
</div>
|
| 167 |
<h3 class="text-xl font-semibold mb-3">AI Assistant</h3>
|
| 168 |
<p class="opacity-80">Get personalized advice for productivity, health, shopping and problem solving.</p>
|
| 169 |
-
</
|
| 170 |
|
| 171 |
<!-- Feature 6 -->
|
| 172 |
-
<
|
| 173 |
<div class="w-12 h-12 rounded-lg bg-red-600 flex items-center justify-center mb-4">
|
| 174 |
<i data-feather="activity" class="w-6 h-6"></i>
|
| 175 |
</div>
|
| 176 |
<h3 class="text-xl font-semibold mb-3">Pattern Finder</h3>
|
| 177 |
<p class="opacity-80">Discover behavior patterns and get insights to optimize your daily routines.</p>
|
| 178 |
-
</
|
| 179 |
-
|
| 180 |
</section>
|
| 181 |
|
| 182 |
<!-- Wake Up Experience -->
|
|
|
|
| 44 |
</div>
|
| 45 |
<nav class="hidden md:flex space-x-8">
|
| 46 |
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 47 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 48 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 49 |
+
<a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
|
| 50 |
+
<a href="research.html" class="hover:text-[#FFA07A] transition">Research</a>
|
| 51 |
</nav>
|
| 52 |
+
<button class="md:hidden">
|
| 53 |
<i data-feather="menu" class="w-6 h-6"></i>
|
| 54 |
</button>
|
| 55 |
</header>
|
|
|
|
| 124 |
<h2 class="text-3xl font-bold mb-12 text-center">Your All-In-One <span class="text-purple-300">Life Orchestrator</span></h2>
|
| 125 |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 126 |
<!-- Feature 1 -->
|
| 127 |
+
<a href="scheduling.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 128 |
<div class="w-12 h-12 rounded-lg bg-purple-600 flex items-center justify-center mb-4">
|
| 129 |
<i data-feather="clock" class="w-6 h-6"></i>
|
| 130 |
</div>
|
| 131 |
<h3 class="text-xl font-semibold mb-3">Smart Scheduling</h3>
|
| 132 |
<p class="opacity-80">AI-powered calendar that understands your rhythms and optimizes your time.</p>
|
| 133 |
+
</a>
|
| 134 |
|
| 135 |
<!-- Feature 2 -->
|
| 136 |
+
<a href="tasks.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 137 |
<div class="w-12 h-12 rounded-lg bg-pink-600 flex items-center justify-center mb-4">
|
| 138 |
<i data-feather="check-circle" class="w-6 h-6"></i>
|
| 139 |
</div>
|
| 140 |
<h3 class="text-xl font-semibold mb-3">Task Genius</h3>
|
| 141 |
<p class="opacity-80">Never forget a task with our predictive reminder system and behavior analysis.</p>
|
| 142 |
+
</a>
|
| 143 |
|
| 144 |
<!-- Feature 3 -->
|
| 145 |
+
<a href="research.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 146 |
<div class="w-12 h-12 rounded-lg bg-blue-600 flex items-center justify-center mb-4">
|
| 147 |
<i data-feather="bookmark" class="w-6 h-6"></i>
|
| 148 |
</div>
|
| 149 |
<h3 class="text-xl font-semibold mb-3">Research Hub</h3>
|
| 150 |
<p class="opacity-80">Organize bookmarks, notes, and files with intelligent tagging and search.</p>
|
| 151 |
+
</a>
|
| 152 |
|
| 153 |
<!-- Feature 4 -->
|
| 154 |
+
<a href="media.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 155 |
<div class="w-12 h-12 rounded-lg bg-green-600 flex items-center justify-center mb-4">
|
| 156 |
<i data-feather="music" class="w-6 h-6"></i>
|
| 157 |
</div>
|
| 158 |
<h3 class="text-xl font-semibold mb-3">Media Maestro</h3>
|
| 159 |
<p class="opacity-80">Create playlists for focus, relaxation, or sleep with our biorhythm-aware suggestions.</p>
|
| 160 |
+
</a>
|
| 161 |
|
| 162 |
<!-- Feature 5 -->
|
| 163 |
+
<a href="assistant.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 164 |
<div class="w-12 h-12 rounded-lg bg-yellow-600 flex items-center justify-center mb-4">
|
| 165 |
<i data-feather="zap" class="w-6 h-6"></i>
|
| 166 |
</div>
|
| 167 |
<h3 class="text-xl font-semibold mb-3">AI Assistant</h3>
|
| 168 |
<p class="opacity-80">Get personalized advice for productivity, health, shopping and problem solving.</p>
|
| 169 |
+
</a>
|
| 170 |
|
| 171 |
<!-- Feature 6 -->
|
| 172 |
+
<a href="patterns.html" class="circa-card rounded-2xl p-6 hover:bg-white/10 transition">
|
| 173 |
<div class="w-12 h-12 rounded-lg bg-red-600 flex items-center justify-center mb-4">
|
| 174 |
<i data-feather="activity" class="w-6 h-6"></i>
|
| 175 |
</div>
|
| 176 |
<h3 class="text-xl font-semibold mb-3">Pattern Finder</h3>
|
| 177 |
<p class="opacity-80">Discover behavior patterns and get insights to optimize your daily routines.</p>
|
| 178 |
+
</a>
|
| 179 |
+
</div>
|
| 180 |
</section>
|
| 181 |
|
| 182 |
<!-- Wake Up Experience -->
|
media.html
ADDED
|
@@ -0,0 +1,270 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Media Maestro | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
|
| 18 |
+
}
|
| 19 |
+
.media-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.media-item {
|
| 24 |
+
transition: all 0.2s ease;
|
| 25 |
+
}
|
| 26 |
+
.media-item:hover {
|
| 27 |
+
transform: translateY(-2px);
|
| 28 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
| 29 |
+
}
|
| 30 |
+
.play-btn {
|
| 31 |
+
transition: all 0.3s ease;
|
| 32 |
+
}
|
| 33 |
+
.play-btn:hover {
|
| 34 |
+
transform: scale(1.1);
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 39 |
+
<div class="container mx-auto px-4 py-8">
|
| 40 |
+
<header class="flex justify-between items-center mb-12">
|
| 41 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 42 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 43 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 44 |
+
</a>
|
| 45 |
+
<nav class="hidden md:flex space-x-6">
|
| 46 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 47 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 48 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 49 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 50 |
+
<a href="#" class="text-[#FFA07A] font-medium">Media</a>
|
| 51 |
+
</nav>
|
| 52 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 53 |
+
My Account
|
| 54 |
+
</button>
|
| 55 |
+
</header>
|
| 56 |
+
|
| 57 |
+
<main>
|
| 58 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 59 |
+
<div class="lg:col-span-2">
|
| 60 |
+
<div class="media-card rounded-3xl p-8 mb-8">
|
| 61 |
+
<div class="flex justify-between items-center mb-8">
|
| 62 |
+
<h1 class="text-3xl font-bold">Media Maestro</h1>
|
| 63 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Create Playlist</button>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
| 67 |
+
<div class="media-card rounded-xl p-4">
|
| 68 |
+
<h3 class="font-medium mb-2">Current Playlist</h3>
|
| 69 |
+
<p class="text-2xl font-bold mb-1">Deep Focus</p>
|
| 70 |
+
<p class="text-sm opacity-80">12 tracks • 48 min</p>
|
| 71 |
+
</div>
|
| 72 |
+
<div class="media-card rounded-xl p-4">
|
| 73 |
+
<h3 class="font-medium mb-2">Suggested Now</h3>
|
| 74 |
+
<p class="text-2xl font-bold mb-1">Afternoon Boost</p>
|
| 75 |
+
<p class="text-sm opacity-80">Based on your energy levels</p>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="space-y-4">
|
| 80 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 81 |
+
<div class="w-16 h-16 bg-purple-600 rounded-lg flex items-center justify-center mr-4 overflow-hidden">
|
| 82 |
+
<img src="http://static.photos/music/200x200/1" alt="Album cover" class="w-full h-full object-cover">
|
| 83 |
+
</div>
|
| 84 |
+
<div class="flex-1">
|
| 85 |
+
<div class="font-bold">Brain Waves</div>
|
| 86 |
+
<div class="text-sm opacity-80">Ambient Focus</div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="flex items-center space-x-3">
|
| 89 |
+
<div class="text-sm opacity-80">3:42</div>
|
| 90 |
+
<button class="play-btn w-10 h-10 rounded-full bg-[#FFA07A] flex items-center justify-center">
|
| 91 |
+
<i data-feather="play" class="w-4 h-4"></i>
|
| 92 |
+
</button>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 97 |
+
<div class="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mr-4 overflow-hidden">
|
| 98 |
+
<img src="http://static.photos/music/200x200/2" alt="Album cover" class="w-full h-full object-cover">
|
| 99 |
+
</div>
|
| 100 |
+
<div class="flex-1">
|
| 101 |
+
<div class="font-bold">Cognitive Flow</div>
|
| 102 |
+
<div class="text-sm opacity-80">Binaural Beats</div>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="flex items-center space-x-3">
|
| 105 |
+
<div class="text-sm opacity-80">5:18</div>
|
| 106 |
+
<button class="play-btn w-10 h-10 rounded-full bg-[#FFA07A] flex items-center justify-center">
|
| 107 |
+
<i data-feather="play" class="w-4 h-4"></i>
|
| 108 |
+
</button>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
|
| 112 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 113 |
+
<div class="w-16 h-16 bg-green-600 rounded-lg flex items-center justify-center mr-4 overflow-hidden">
|
| 114 |
+
<img src="http://static.photos/music/200x200/3" alt="Album cover" class="w-full h-full object-cover">
|
| 115 |
+
</div>
|
| 116 |
+
<div class="flex-1">
|
| 117 |
+
<div class="font-bold">Alpha State</div>
|
| 118 |
+
<div class="text-sm opacity-80">Meditation</div>
|
| 119 |
+
</div>
|
| 120 |
+
<div class="flex items-center space-x-3">
|
| 121 |
+
<div class="text-sm opacity-80">8:24</div>
|
| 122 |
+
<button class="play-btn w-10 h-10 rounded-full bg-[#FFA07A] flex items-center justify-center">
|
| 123 |
+
<i data-feather="play" class="w-4 h-4"></i>
|
| 124 |
+
</button>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
|
| 130 |
+
<div class="media-card rounded-3xl p-8">
|
| 131 |
+
<h2 class="text-2xl font-bold mb-6">Media For Your Current State</h2>
|
| 132 |
+
<div class="grid md:grid-cols-2 gap-4">
|
| 133 |
+
<div class="media-card rounded-xl p-4">
|
| 134 |
+
<div class="flex items-center mb-3">
|
| 135 |
+
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 136 |
+
<i data-feather="music" class="w-5 h-5"></i>
|
| 137 |
+
</div>
|
| 138 |
+
<div>
|
| 139 |
+
<div class="font-bold">Focus Playlist</div>
|
| 140 |
+
<div class="text-xs opacity-80">For deep work</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
<p class="text-sm opacity-80">Algorithmically selected tracks to enhance concentration during your peak focus hours.</p>
|
| 144 |
+
</div>
|
| 145 |
+
<div class="media-card rounded-xl p-4">
|
| 146 |
+
<div class="flex items-center mb-3">
|
| 147 |
+
<div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 148 |
+
<i data-feather="headphones" class="w-5 h-5"></i>
|
| 149 |
+
</div>
|
| 150 |
+
<div>
|
| 151 |
+
<div class="font-bold">Wind Down</div>
|
| 152 |
+
<div class="text-xs opacity-80">For relaxation</div>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
<p class="text-sm opacity-80">Gentle melodies to transition from work to relaxation in your evening routine.</p>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
|
| 161 |
+
<div>
|
| 162 |
+
<div class="media-card rounded-3xl p-8 mb-8">
|
| 163 |
+
<h2 class="text-2xl font-bold mb-6">Your Playlists</h2>
|
| 164 |
+
<div class="space-y-4">
|
| 165 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 166 |
+
<div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mr-3">
|
| 167 |
+
<i data-feather="music" class="w-5 h-5"></i>
|
| 168 |
+
</div>
|
| 169 |
+
<div>
|
| 170 |
+
<div class="font-medium">Morning Energy</div>
|
| 171 |
+
<div class="text-xs opacity-80">8 tracks • 32 min</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 175 |
+
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
|
| 176 |
+
<i data-feather="music" class="w-5 h-5"></i>
|
| 177 |
+
</div>
|
| 178 |
+
<div>
|
| 179 |
+
<div class="font-medium">Deep Focus</div>
|
| 180 |
+
<div class="text-xs opacity-80">12 tracks • 48 min</div>
|
| 181 |
+
</div>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 184 |
+
<div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mr-3">
|
| 185 |
+
<i data-feather="music" class="w-5 h-5"></i>
|
| 186 |
+
</div>
|
| 187 |
+
<div>
|
| 188 |
+
<div class="font-medium">Sleep Sounds</div>
|
| 189 |
+
<div class="text-xs opacity-80">6 tracks • 45 min</div>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="media-item media-card rounded-xl p-4 flex items-center">
|
| 193 |
+
<div class="w-12 h-12 bg-yellow-600 rounded-lg flex items-center justify-center mr-3">
|
| 194 |
+
<i data-feather="music" class="w-5 h-5"></i>
|
| 195 |
+
</div>
|
| 196 |
+
<div>
|
| 197 |
+
<div class="font-medium">Creative Flow</div>
|
| 198 |
+
<div class="text-xs opacity-80">10 tracks • 42 min</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
<button class="w-full border border-dashed border-white/30 py-3 rounded-lg flex items-center justify-center text-sm hover:bg-white/10 transition">
|
| 202 |
+
<i data-feather="plus" class="w-4 h-4 mr-2"></i>
|
| 203 |
+
New Playlist
|
| 204 |
+
</button>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
|
| 208 |
+
<div class="media-card rounded-3xl p-8">
|
| 209 |
+
<h2 class="text-2xl font-bold mb-6">Podcast Picks</h2>
|
| 210 |
+
<div class="space-y-4">
|
| 211 |
+
<div class="media-item media-card rounded-xl p-4">
|
| 212 |
+
<div class="flex items-start mb-3">
|
| 213 |
+
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 214 |
+
<i data-feather="mic" class="w-5 h-5"></i>
|
| 215 |
+
</div>
|
| 216 |
+
<div>
|
| 217 |
+
<div class="font-bold">Huberman Lab</div>
|
| 218 |
+
<div class="text-xs opacity-80">Sleep Optimization</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
<p class="text-sm opacity-80 mb-3">Neuroscientist Andrew Huberman discusses optimal sleep protocols.</p>
|
| 222 |
+
<button class="text-[#FFA07A] text-sm font-medium">Listen Now</button>
|
| 223 |
+
</div>
|
| 224 |
+
<div class="media-item media-card rounded-xl p-4">
|
| 225 |
+
<div class="flex items-start mb-3">
|
| 226 |
+
<div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 227 |
+
<i data-feather="mic" class="w-5 h-5"></i>
|
| 228 |
+
</div>
|
| 229 |
+
<div>
|
| 230 |
+
<div class="font-bold">The Productivity Show</div>
|
| 231 |
+
<div class="text-xs opacity-80">Time Blocking</div>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
<p class="text-sm opacity-80 mb-3">How to structure your day for maximum productivity using time blocking.</p>
|
| 235 |
+
<button class="text-[#FFA07A] text-sm font-medium">Listen Now</button>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
</div>
|
| 240 |
+
</div>
|
| 241 |
+
</main>
|
| 242 |
+
|
| 243 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 244 |
+
<div class="text-center opacity-70 text-sm">
|
| 245 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 246 |
+
</div>
|
| 247 |
+
</footer>
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<script>
|
| 251 |
+
// Initialize Vanta.js background
|
| 252 |
+
VANTA.GLOBE({
|
| 253 |
+
el: "#vanta-bg",
|
| 254 |
+
mouseControls: true,
|
| 255 |
+
touchControls: true,
|
| 256 |
+
gyroControls: false,
|
| 257 |
+
minHeight: 200.00,
|
| 258 |
+
minWidth: 200.00,
|
| 259 |
+
scale: 1.00,
|
| 260 |
+
scaleMobile: 1.00,
|
| 261 |
+
color: 0xffa07a,
|
| 262 |
+
backgroundColor: 0x1a1b2f,
|
| 263 |
+
size: 0.60
|
| 264 |
+
});
|
| 265 |
+
|
| 266 |
+
// Initialize feather icons
|
| 267 |
+
feather.replace();
|
| 268 |
+
</script>
|
| 269 |
+
</body>
|
| 270 |
+
</html>
|
patterns.html
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Pattern Finder | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.topology.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
|
| 18 |
+
}
|
| 19 |
+
.pattern-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.pattern-item {
|
| 24 |
+
transition: all 0.2s ease;
|
| 25 |
+
}
|
| 26 |
+
.pattern-item:hover {
|
| 27 |
+
transform: translateY(-2px);
|
| 28 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
| 29 |
+
}
|
| 30 |
+
.insight-card {
|
| 31 |
+
transition: all 0.3s ease;
|
| 32 |
+
}
|
| 33 |
+
.insight-card:hover {
|
| 34 |
+
transform: scale(1.02);
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 39 |
+
<div class="container mx-auto px-4 py-8">
|
| 40 |
+
<header class="flex justify-between items-center mb-12">
|
| 41 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 42 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 43 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 44 |
+
</a>
|
| 45 |
+
<nav class="hidden md:flex space-x-6">
|
| 46 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 47 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 48 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 49 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 50 |
+
<a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
|
| 51 |
+
</nav>
|
| 52 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 53 |
+
My Account
|
| 54 |
+
</button>
|
| 55 |
+
</header>
|
| 56 |
+
|
| 57 |
+
<main>
|
| 58 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 59 |
+
<div class="lg:col-span-2">
|
| 60 |
+
<div class="pattern-card rounded-3xl p-8 mb-8">
|
| 61 |
+
<div class="flex justify-between items-center mb-8">
|
| 62 |
+
<h1 class="text-3xl font-bold">Pattern Finder</h1>
|
| 63 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Run Analysis</button>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
| 67 |
+
<div class="pattern-card rounded-xl p-4">
|
| 68 |
+
<h3 class="font-medium mb-2">Patterns Detected</h3>
|
| 69 |
+
<p class="text-2xl font-bold mb-1">12</p>
|
| 70 |
+
<p class="text-sm opacity-80">This month</p>
|
| 71 |
+
</div>
|
| 72 |
+
<div class="pattern-card rounded-xl p-4">
|
| 73 |
+
<h3 class="font-medium mb-2">Most Significant</h3>
|
| 74 |
+
<p class="text-2xl font-bold mb-1">Sleep & Productivity</p>
|
| 75 |
+
<p class="text-sm opacity-80">85% correlation</p>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="space-y-4">
|
| 80 |
+
<h3 class="font-medium">Recent Insights</h3>
|
| 81 |
+
<div class="pattern-item pattern-card rounded-xl p-4">
|
| 82 |
+
<div class="flex items-start mb-3">
|
| 83 |
+
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 84 |
+
<i data-feather="activity" class="w-5 h-5"></i>
|
| 85 |
+
</div>
|
| 86 |
+
<div>
|
| 87 |
+
<div class="font-bold">Sleep & Productivity</div>
|
| 88 |
+
<div class="text-sm opacity-80">Discovered 2 days ago</div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
<p class="text-sm mb-3">When you get at least 7 hours of sleep, your next day productivity increases by 32% on average.</p>
|
| 92 |
+
<div class="bg-white/5 rounded-lg p-3">
|
| 93 |
+
<div class="flex justify-between text-xs mb-1">
|
| 94 |
+
<span>Productivity</span>
|
| 95 |
+
<span>+32%</span>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 98 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 32%"></div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
|
| 103 |
+
<div class="pattern-item pattern-card rounded-xl p-4">
|
| 104 |
+
<div class="flex items-start mb-3">
|
| 105 |
+
<div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 106 |
+
<i data-feather="clock" class="w-5 h-5"></i>
|
| 107 |
+
</div>
|
| 108 |
+
<div>
|
| 109 |
+
<div class="font-bold">Creative Peak</div>
|
| 110 |
+
<div class="text-sm opacity-80">Discovered 1 week ago</div>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
<p class="text-sm mb-3">Your most creative work consistently happens between 9:30 AM and 11:30 AM.</p>
|
| 114 |
+
<div class="flex items-center text-sm">
|
| 115 |
+
<i data-feather="alert-circle" class="w-4 h-4 mr-1 text-yellow-400"></i>
|
| 116 |
+
<span class="opacity-80">Consider scheduling creative tasks during this window</span>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="pattern-item pattern-card rounded-xl p-4">
|
| 121 |
+
<div class="flex items-start mb-3">
|
| 122 |
+
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mr-3">
|
| 123 |
+
<i data-feather="coffee" class="w-5 h-5"></i>
|
| 124 |
+
</div>
|
| 125 |
+
<div>
|
| 126 |
+
<div class="font-bold">Caffeine Impact</div>
|
| 127 |
+
<div class="text-sm opacity-80">Discovered 2 weeks ago</div>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
<p class="text-sm mb-3">Caffeine consumption after 2 PM correlates with 27 minutes less sleep that night.</p>
|
| 131 |
+
<div class="bg-white/5 rounded-lg p-3">
|
| 132 |
+
<div class="flex justify-between text-xs">
|
| 133 |
+
<span>Before 2 PM</span>
|
| 134 |
+
<span>After 2 PM</span>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="flex justify-between mt-1">
|
| 137 |
+
<div class="text-center">
|
| 138 |
+
<div class="text-lg font-bold">7h 12m</div>
|
| 139 |
+
<div class="text-xs opacity-80">Avg sleep</div>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="text-center">
|
| 142 |
+
<div class="text-lg font-bold">6h 45m</div>
|
| 143 |
+
<div class="text-xs opacity-80">Avg sleep</div>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<div>
|
| 153 |
+
<div class="pattern-card rounded-3xl p-8 mb-8">
|
| 154 |
+
<h2 class="text-2xl font-bold mb-6">Key Insights</h2>
|
| 155 |
+
<div class="space-y-4">
|
| 156 |
+
<div class="insight-card pattern-card rounded-xl p-4">
|
| 157 |
+
<div class="flex items-center mb-2">
|
| 158 |
+
<div class="w-8 h-8 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 159 |
+
<i data-feather="trending-up" class="w-4 h-4"></i>
|
| 160 |
+
</div>
|
| 161 |
+
<div>
|
| 162 |
+
<div class="font-bold">Productivity Patterns</div>
|
| 163 |
+
<div class="text-xs opacity-80">Weekly trends</div>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
<p class="text-sm opacity-80">Your most productive day is Wednesday, with productivity declining toward the weekend.</p>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="insight-card pattern-card rounded-xl p-4">
|
| 169 |
+
<div class="flex items-center mb-2">
|
| 170 |
+
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 171 |
+
<i data-feather="moon" class="w-4 h-4"></i>
|
| 172 |
+
</div>
|
| 173 |
+
<div>
|
| 174 |
+
<div class="font-bold">Sleep Quality</div>
|
| 175 |
+
<div class="text-xs opacity-80">Monthly average</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
<p class="text-sm opacity-80">Your sleep quality is 18% better when you exercise during the day.</p>
|
| 179 |
+
</div>
|
| 180 |
+
<div class="insight-card pattern-card rounded-xl p-4">
|
| 181 |
+
<div class="flex items-center mb-2">
|
| 182 |
+
<div class="w-8 h-8 rounded-lg bg-green-600 flex items-center justify-center mr-3">
|
| 183 |
+
<i data-feather="clock" class="w-4 h-4"></i>
|
| 184 |
+
</div>
|
| 185 |
+
<div>
|
| 186 |
+
<div class="font-bold">Energy Levels</div>
|
| 187 |
+
<div class="text-xs opacity-80">Daily rhythm</div>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
<p class="text-sm opacity-80">Your energy consistently dips between 2 PM and 3 PM - consider a power nap.</p>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<div class="pattern-card rounded-3xl p-8">
|
| 196 |
+
<h2 class="text-2xl font-bold mb-6">Pattern Analysis</h2>
|
| 197 |
+
<div class="space-y-4">
|
| 198 |
+
<div>
|
| 199 |
+
<label class="block mb-2 text-sm">Analyze</label>
|
| 200 |
+
<select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 mb-4">
|
| 201 |
+
<option>Sleep vs. Productivity</option>
|
| 202 |
+
<option>Caffeine vs. Sleep</option>
|
| 203 |
+
<option>Exercise vs. Energy</option>
|
| 204 |
+
<option>Screen Time vs. Sleep</option>
|
| 205 |
+
<option>Custom Analysis</option>
|
| 206 |
+
</select>
|
| 207 |
+
</div>
|
| 208 |
+
<div>
|
| 209 |
+
<label class="block mb-2 text-sm">Time Frame</label>
|
| 210 |
+
<select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 mb-4">
|
| 211 |
+
<option>Last 7 days</option>
|
| 212 |
+
<option>Last 30 days</option>
|
| 213 |
+
<option>Last 3 months</option>
|
| 214 |
+
<option>Last year</option>
|
| 215 |
+
<option>All time</option>
|
| 216 |
+
</select>
|
| 217 |
+
</div>
|
| 218 |
+
<button class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
|
| 219 |
+
Discover Patterns
|
| 220 |
+
</button>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
</div>
|
| 224 |
+
</div>
|
| 225 |
+
|
| 226 |
+
<div class="pattern-card rounded-3xl p-8">
|
| 227 |
+
<h2 class="text-2xl font-bold mb-6">Visual Patterns</h2>
|
| 228 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 229 |
+
<div class="pattern-card rounded-xl p-6 h-64">
|
| 230 |
+
<h3 class="font-medium mb-4">Sleep vs. Productivity</h3>
|
| 231 |
+
<div class="h-40 bg-white/5 rounded-lg"></div>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="pattern-card rounded-xl p-6 h-64">
|
| 234 |
+
<h3 class="font-medium mb-4">Weekly Energy Flow</h3>
|
| 235 |
+
<div class="h-40 bg-white/5 rounded-lg"></div>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
</main>
|
| 240 |
+
|
| 241 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 242 |
+
<div class="text-center opacity-70 text-sm">
|
| 243 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 244 |
+
</div>
|
| 245 |
+
</footer>
|
| 246 |
+
</div>
|
| 247 |
+
|
| 248 |
+
<script>
|
| 249 |
+
// Initialize Vanta.js background
|
| 250 |
+
VANTA.TOPOLOGY({
|
| 251 |
+
el: "#vanta-bg",
|
| 252 |
+
mouseControls: true,
|
| 253 |
+
touchControls: true,
|
| 254 |
+
gyroControls: false,
|
| 255 |
+
minHeight: 200.00,
|
| 256 |
+
minWidth: 200.00,
|
| 257 |
+
scale: 1.00,
|
| 258 |
+
scaleMobile: 1.00,
|
| 259 |
+
color: 0xffa07a,
|
| 260 |
+
backgroundColor: 0x1a1b2f,
|
| 261 |
+
size: 1.20
|
| 262 |
+
});
|
| 263 |
+
|
| 264 |
+
// Initialize feather icons
|
| 265 |
+
feather.replace();
|
| 266 |
+
</script>
|
| 267 |
+
</body>
|
| 268 |
+
</html>
|
research.html
ADDED
|
@@ -0,0 +1,287 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Research Hub | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.cells.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
| 18 |
+
}
|
| 19 |
+
.research-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.research-item {
|
| 24 |
+
transition: all 0.2s ease;
|
| 25 |
+
}
|
| 26 |
+
.research-item:hover {
|
| 27 |
+
transform: translateY(-2px);
|
| 28 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
| 29 |
+
}
|
| 30 |
+
.tag {
|
| 31 |
+
transition: all 0.2s ease;
|
| 32 |
+
}
|
| 33 |
+
.tag:hover {
|
| 34 |
+
transform: scale(1.05);
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 39 |
+
<div class="container mx-auto px-4 py-8">
|
| 40 |
+
<header class="flex justify-between items-center mb-12">
|
| 41 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 42 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 43 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 44 |
+
</a>
|
| 45 |
+
<nav class="hidden md:flex space-x-6">
|
| 46 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 47 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 48 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 49 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 50 |
+
<a href="#" class="text-[#FFA07A] font-medium">Research</a>
|
| 51 |
+
</nav>
|
| 52 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 53 |
+
My Account
|
| 54 |
+
</button>
|
| 55 |
+
</header>
|
| 56 |
+
|
| 57 |
+
<main>
|
| 58 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 59 |
+
<div class="lg:col-span-2">
|
| 60 |
+
<div class="research-card rounded-3xl p-8 mb-8">
|
| 61 |
+
<div class="flex justify-between items-center mb-8">
|
| 62 |
+
<h1 class="text-3xl font-bold">Research Hub</h1>
|
| 63 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Resource</button>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
| 67 |
+
<div class="research-card rounded-xl p-4">
|
| 68 |
+
<h3 class="font-medium mb-2">Recent Activity</h3>
|
| 69 |
+
<p class="text-2xl font-bold mb-1">12 items</p>
|
| 70 |
+
<p class="text-sm opacity-80">Added this week</p>
|
| 71 |
+
</div>
|
| 72 |
+
<div class="research-card rounded-xl p-4">
|
| 73 |
+
<h3 class="font-medium mb-2">Top Category</h3>
|
| 74 |
+
<p class="text-2xl font-bold mb-1">Neuroscience</p>
|
| 75 |
+
<p class="text-sm opacity-80">8 resources</p>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="space-y-4">
|
| 80 |
+
<div class="research-item research-card rounded-xl p-4">
|
| 81 |
+
<div class="flex items-start mb-3">
|
| 82 |
+
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 83 |
+
<i data-feather="file-text" class="w-5 h-5"></i>
|
| 84 |
+
</div>
|
| 85 |
+
<div>
|
| 86 |
+
<div class="font-bold">Circadian Rhythm Research</div>
|
| 87 |
+
<div class="text-sm opacity-80">Journal of Sleep Medicine • 2022</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
<p class="text-sm mb-3">Latest findings on how circadian rhythms affect cognitive performance and productivity.</p>
|
| 91 |
+
<div class="flex flex-wrap gap-2">
|
| 92 |
+
<span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">sleep</span>
|
| 93 |
+
<span class="tag bg-blue-600/30 px-2 py-1 rounded-full text-xs">neuroscience</span>
|
| 94 |
+
<span class="tag bg-green-600/30 px-2 py-1 rounded-full text-xs">productivity</span>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
|
| 98 |
+
<div class="research-item research-card rounded-xl p-4">
|
| 99 |
+
<div class="flex items-start mb-3">
|
| 100 |
+
<div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 101 |
+
<i data-feather="link" class="w-5 h-5"></i>
|
| 102 |
+
</div>
|
| 103 |
+
<div>
|
| 104 |
+
<div class="font-bold">Productivity Techniques</div>
|
| 105 |
+
<div class="text-sm opacity-80">Website • Medium Article</div>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
<p class="text-sm mb-3">Comparison of different productivity methods and their neurological basis.</p>
|
| 109 |
+
<div class="flex flex-wrap gap-2">
|
| 110 |
+
<span class="tag bg-blue-600/30 px-2 py-1 rounded-full text-xs">productivity</span>
|
| 111 |
+
<span class="tag bg-yellow-600/30 px-2 py-1 rounded-full text-xs">methods</span>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
|
| 115 |
+
<div class="research-item research-card rounded-xl p-4">
|
| 116 |
+
<div class="flex items-start mb-3">
|
| 117 |
+
<div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mr-3">
|
| 118 |
+
<i data-feather="book" class="w-5 h-5"></i>
|
| 119 |
+
</div>
|
| 120 |
+
<div>
|
| 121 |
+
<div class="font-bold">Why We Sleep</div>
|
| 122 |
+
<div class="text-sm opacity-80">Book • Matthew Walker</div>
|
| 123 |
+
</div>
|
| 124 |
+
</div>
|
| 125 |
+
<p class="text-sm mb-3">Groundbreaking exploration of sleep, examining how it affects every aspect of our physical and mental well-being.</p>
|
| 126 |
+
<div class="flex flex-wrap gap-2">
|
| 127 |
+
<span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">sleep</span>
|
| 128 |
+
<span class="tag bg-red-600/30 px-2 py-1 rounded-full text-xs">health</span>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<div>
|
| 136 |
+
<div class="research-card rounded-3xl p-8 mb-8">
|
| 137 |
+
<h2 class="text-2xl font-bold mb-6">Categories</h2>
|
| 138 |
+
<div class="space-y-3">
|
| 139 |
+
<div class="flex items-center justify-between p-3 hover:bg-white/10 rounded-lg">
|
| 140 |
+
<div class="flex items-center">
|
| 141 |
+
<div class="w-8 h-8 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 142 |
+
<i data-feather="moon" class="w-4 h-4"></i>
|
| 143 |
+
</div>
|
| 144 |
+
<span>Sleep Science</span>
|
| 145 |
+
</div>
|
| 146 |
+
<span class="text-xs bg-white/10 px-2 py-1 rounded-full">24</span>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="flex items-center justify-between p-3 hover:bg-white/10 rounded-lg">
|
| 149 |
+
<div class="flex items-center">
|
| 150 |
+
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 151 |
+
<i data-feather="zap" class="w-4 h-4"></i>
|
| 152 |
+
</div>
|
| 153 |
+
<span>Productivity</span>
|
| 154 |
+
</div>
|
| 155 |
+
<span class="text-xs bg-white/10 px-2 py-1 rounded-full">18</span>
|
| 156 |
+
</div>
|
| 157 |
+
<div class="flex items-center justify-between p-3 hover:bg-white/10 rounded-lg">
|
| 158 |
+
<div class="flex items-center">
|
| 159 |
+
<div class="w-8 h-8 rounded-lg bg-green-600 flex items-center justify-center mr-3">
|
| 160 |
+
<i data-feather="activity" class="w-4 h-4"></i>
|
| 161 |
+
</div>
|
| 162 |
+
<span>Neuroscience</span>
|
| 163 |
+
</div>
|
| 164 |
+
<span class="text-xs bg-white/10 px-2 py-1 rounded-full">15</span>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="flex items-center justify-between p-3 hover:bg-white/10 rounded-lg">
|
| 167 |
+
<div class="flex items-center">
|
| 168 |
+
<div class="w-8 h-8 rounded-lg bg-yellow-600 flex items-center justify-center mr-3">
|
| 169 |
+
<i data-feather="heart" class="w-4 h-4"></i>
|
| 170 |
+
</div>
|
| 171 |
+
<span>Health & Wellness</span>
|
| 172 |
+
</div>
|
| 173 |
+
<span class="text-xs bg-white/10 px-2 py-1 rounded-full">12</span>
|
| 174 |
+
</div>
|
| 175 |
+
<div class="flex items-center justify-between p-3 hover:bg-white/10 rounded-lg">
|
| 176 |
+
<div class="flex items-center">
|
| 177 |
+
<div class="w-8 h-8 rounded-lg bg-red-600 flex items-center justify-center mr-3">
|
| 178 |
+
<i data-feather="cpu" class="w-4 h-4"></i>
|
| 179 |
+
</div>
|
| 180 |
+
<span>Technology</span>
|
| 181 |
+
</div>
|
| 182 |
+
<span class="text-xs bg-white/10 px-2 py-1 rounded-full">9</span>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
|
| 187 |
+
<div class="research-card rounded-3xl p-8">
|
| 188 |
+
<h2 class="text-2xl font-bold mb-6">Quick Add</h2>
|
| 189 |
+
<div class="space-y-4">
|
| 190 |
+
<div>
|
| 191 |
+
<label class="block mb-2 text-sm">Resource Type</label>
|
| 192 |
+
<select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
|
| 193 |
+
<option>Article</option>
|
| 194 |
+
<option>Book</option>
|
| 195 |
+
<option>Video</option>
|
| 196 |
+
<option>Podcast</option>
|
| 197 |
+
<option>Paper</option>
|
| 198 |
+
</select>
|
| 199 |
+
</div>
|
| 200 |
+
<div>
|
| 201 |
+
<label class="block mb-2 text-sm">Title</label>
|
| 202 |
+
<input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
|
| 203 |
+
</div>
|
| 204 |
+
<div>
|
| 205 |
+
<label class="block mb-2 text-sm">URL/Link</label>
|
| 206 |
+
<input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
|
| 207 |
+
</div>
|
| 208 |
+
<div>
|
| 209 |
+
<label class="block mb-2 text-sm">Tags</label>
|
| 210 |
+
<input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3" placeholder="Comma separated">
|
| 211 |
+
</div>
|
| 212 |
+
<button class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
|
| 213 |
+
Save Resource
|
| 214 |
+
</button>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
<div class="research-card rounded-3xl p-8">
|
| 221 |
+
<h2 class="text-2xl font-bold mb-6">Recommended Reading</h2>
|
| 222 |
+
<div class="grid md:grid-cols-3 gap-6">
|
| 223 |
+
<div class="research-item research-card rounded-xl p-6">
|
| 224 |
+
<div class="w-12 h-12 rounded-lg bg-purple-600 flex items-center justify-center mb-4">
|
| 225 |
+
<i data-feather="book-open" class="w-6 h-6"></i>
|
| 226 |
+
</div>
|
| 227 |
+
<h3 class="font-medium mb-2">The Circadian Code</h3>
|
| 228 |
+
<p class="text-sm opacity-80 mb-4">How optimizing your body clock can improve sleep, lose weight, and transform health.</p>
|
| 229 |
+
<div class="flex flex-wrap gap-2">
|
| 230 |
+
<span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">sleep</span>
|
| 231 |
+
<span class="tag bg-green-600/30 px-2 py-1 rounded-full text-xs">health</span>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
<div class="research-item research-card rounded-xl p-6">
|
| 235 |
+
<div class="w-12 h-12 rounded-lg bg-blue-600 flex items-center justify-center mb-4">
|
| 236 |
+
<i data-feather="file-text" class="w-6 h-6"></i>
|
| 237 |
+
</div>
|
| 238 |
+
<h3 class="font-medium mb-2">Ultradian Rhythms</h3>
|
| 239 |
+
<p class="text-sm opacity-80 mb-4">New research on 90-minute productivity cycles and how to harness them.</p>
|
| 240 |
+
<div class="flex flex-wrap gap-2">
|
| 241 |
+
<span class="tag bg-blue-600/30 px-2 py-1 rounded-full text-xs">productivity</span>
|
| 242 |
+
<span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">neuroscience</span>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="research-item research-card rounded-xl p-6">
|
| 246 |
+
<div class="w-12 h-12 rounded-lg bg-green-600 flex items-center justify-center mb-4">
|
| 247 |
+
<i data-feather="link" class="w-6 h-6"></i>
|
| 248 |
+
</div>
|
| 249 |
+
<h3 class="font-medium mb-2">Digital Minimalism</h3>
|
| 250 |
+
<p class="text-sm opacity-80 mb-4">How reducing screen time can improve sleep quality and cognitive function.</p>
|
| 251 |
+
<div class="flex flex-wrap gap-2">
|
| 252 |
+
<span class="tag bg-green-600/30 px-2 py-1 rounded-full text-xs">health</span>
|
| 253 |
+
<span class="tag bg-red-600/30 px-2 py-1 rounded-full text-xs">technology</span>
|
| 254 |
+
</div>
|
| 255 |
+
</div>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</main>
|
| 259 |
+
|
| 260 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 261 |
+
<div class="text-center opacity-70 text-sm">
|
| 262 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 263 |
+
</div>
|
| 264 |
+
</footer>
|
| 265 |
+
</div>
|
| 266 |
+
|
| 267 |
+
<script>
|
| 268 |
+
// Initialize Vanta.js background
|
| 269 |
+
VANTA.CELLS({
|
| 270 |
+
el: "#vanta-bg",
|
| 271 |
+
mouseControls: true,
|
| 272 |
+
touchControls: true,
|
| 273 |
+
gyroControls: false,
|
| 274 |
+
minHeight: 200.00,
|
| 275 |
+
minWidth: 200.00,
|
| 276 |
+
scale: 1.00,
|
| 277 |
+
color1: 0xffa07a,
|
| 278 |
+
color2: 0x1a1b2f,
|
| 279 |
+
size: 1.20,
|
| 280 |
+
speed: 1.30
|
| 281 |
+
});
|
| 282 |
+
|
| 283 |
+
// Initialize feather icons
|
| 284 |
+
feather.replace();
|
| 285 |
+
</script>
|
| 286 |
+
</body>
|
| 287 |
+
</html>
|
scheduling.html
ADDED
|
@@ -0,0 +1,266 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Smart Scheduling | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
|
| 18 |
+
}
|
| 19 |
+
.schedule-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.time-block {
|
| 24 |
+
transition: all 0.2s ease;
|
| 25 |
+
}
|
| 26 |
+
.time-block:hover {
|
| 27 |
+
transform: translateY(-2px);
|
| 28 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
| 29 |
+
}
|
| 30 |
+
</style>
|
| 31 |
+
</head>
|
| 32 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 33 |
+
<div class="container mx-auto px-4 py-8">
|
| 34 |
+
<header class="flex justify-between items-center mb-12">
|
| 35 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 36 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 37 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 38 |
+
</a>
|
| 39 |
+
<nav class="hidden md:flex space-x-6">
|
| 40 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 41 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 42 |
+
<a href="#" class="text-[#FFA07A] font-medium">Schedule</a>
|
| 43 |
+
<a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
|
| 44 |
+
<a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
|
| 45 |
+
</nav>
|
| 46 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 47 |
+
My Account
|
| 48 |
+
</button>
|
| 49 |
+
</header>
|
| 50 |
+
|
| 51 |
+
<main>
|
| 52 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 53 |
+
<div class="lg:col-span-2">
|
| 54 |
+
<div class="schedule-card rounded-3xl p-8 mb-8">
|
| 55 |
+
<div class="flex justify-between items-center mb-8">
|
| 56 |
+
<h1 class="text-3xl font-bold">Smart Schedule</h1>
|
| 57 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Event</button>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
| 61 |
+
<div class="schedule-card rounded-xl p-4">
|
| 62 |
+
<h3 class="font-medium mb-2">Current Focus</h3>
|
| 63 |
+
<p class="text-2xl font-bold mb-1">Deep Work</p>
|
| 64 |
+
<p class="text-sm opacity-80">9:00 AM - 11:30 AM</p>
|
| 65 |
+
</div>
|
| 66 |
+
<div class="schedule-card rounded-xl p-4">
|
| 67 |
+
<h3 class="font-medium mb-2">Next Break</h3>
|
| 68 |
+
<p class="text-2xl font-bold mb-1">Movement</p>
|
| 69 |
+
<p class="text-sm opacity-80">11:30 AM - 12:00 PM</p>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
|
| 73 |
+
<div class="space-y-4">
|
| 74 |
+
<h3 class="font-medium">Today's Schedule</h3>
|
| 75 |
+
<div class="time-block schedule-card rounded-xl p-4 flex items-start">
|
| 76 |
+
<div class="w-16 text-[#FFA07A] font-medium">8:00 AM</div>
|
| 77 |
+
<div class="flex-1">
|
| 78 |
+
<div class="font-bold">Morning Routine</div>
|
| 79 |
+
<div class="text-sm opacity-80">Meditation, Journaling, Light Exercise</div>
|
| 80 |
+
</div>
|
| 81 |
+
<i data-feather="check-circle" class="text-green-400 w-5 h-5"></i>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="time-block schedule-card rounded-xl p-4 flex items-start">
|
| 84 |
+
<div class="w-16 text-[#FFA07A] font-medium">9:00 AM</div>
|
| 85 |
+
<div class="flex-1">
|
| 86 |
+
<div class="font-bold">Deep Work Session</div>
|
| 87 |
+
<div class="text-sm opacity-80">Project X Development</div>
|
| 88 |
+
</div>
|
| 89 |
+
<i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="time-block schedule-card rounded-xl p-4 flex items-start">
|
| 92 |
+
<div class="w-16 text-[#FFA07A] font-medium">11:30 AM</div>
|
| 93 |
+
<div class="flex-1">
|
| 94 |
+
<div class="font-bold">Movement Break</div>
|
| 95 |
+
<div class="text-sm opacity-80">Stretching, Walking</div>
|
| 96 |
+
</div>
|
| 97 |
+
<i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="time-block schedule-card rounded-xl p-4 flex items-start">
|
| 100 |
+
<div class="w-16 text-[#FFA07A] font-medium">12:00 PM</div>
|
| 101 |
+
<div class="flex-1">
|
| 102 |
+
<div class="font-bold">Lunch & Learn</div>
|
| 103 |
+
<div class="text-sm opacity-80">Watch educational video</div>
|
| 104 |
+
</div>
|
| 105 |
+
<i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
|
| 111 |
+
<div>
|
| 112 |
+
<div class="schedule-card rounded-3xl p-8 mb-8">
|
| 113 |
+
<h2 class="text-2xl font-bold mb-6">Energy Levels</h2>
|
| 114 |
+
<div class="h-64 bg-white/5 rounded-xl mb-6 flex items-end">
|
| 115 |
+
<div class="flex-1 h-3/4 bg-[#FFA07A] rounded-b"></div>
|
| 116 |
+
<div class="flex-1 h-full bg-[#FFA07A] rounded-b"></div>
|
| 117 |
+
<div class="flex-1 h-1/2 bg-[#FFA07A] rounded-b"></div>
|
| 118 |
+
<div class="flex-1 h-1/4 bg-[#FFA07A] rounded-b"></div>
|
| 119 |
+
<div class="flex-1 h-3/4 bg-[#FFA07A] rounded-b"></div>
|
| 120 |
+
<div class="flex-1 h-full bg-[#FFA07A] rounded-b"></div>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="flex justify-between text-sm">
|
| 123 |
+
<span>6 AM</span>
|
| 124 |
+
<span>9 AM</span>
|
| 125 |
+
<span>12 PM</span>
|
| 126 |
+
<span>3 PM</span>
|
| 127 |
+
<span>6 PM</span>
|
| 128 |
+
<span>9 PM</span>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
|
| 132 |
+
<div class="schedule-card rounded-3xl p-8">
|
| 133 |
+
<h2 class="text-2xl font-bold mb-6">Optimal Times</h2>
|
| 134 |
+
<div class="space-y-4">
|
| 135 |
+
<div>
|
| 136 |
+
<div class="flex justify-between mb-1">
|
| 137 |
+
<span class="font-medium">Creative Work</span>
|
| 138 |
+
<span class="text-[#FFA07A]">9 AM - 11 AM</span>
|
| 139 |
+
</div>
|
| 140 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 141 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 80%"></div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
<div>
|
| 145 |
+
<div class="flex justify-between mb-1">
|
| 146 |
+
<span class="font-medium">Analytical Work</span>
|
| 147 |
+
<span class="text-[#FFA07A]">2 PM - 4 PM</span>
|
| 148 |
+
</div>
|
| 149 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 150 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 65%"></div>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
<div>
|
| 154 |
+
<div class="flex justify-between mb-1">
|
| 155 |
+
<span class="font-medium">Physical Activity</span>
|
| 156 |
+
<span class="text-[#FFA07A]">5 PM - 7 PM</span>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 159 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 90%"></div>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
<div>
|
| 163 |
+
<div class="flex justify-between mb-1">
|
| 164 |
+
<span class="font-medium">Learning</span>
|
| 165 |
+
<span class="text-[#FFA07A]">7 PM - 9 PM</span>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="w-full bg-white/10 rounded-full h-2">
|
| 168 |
+
<div class="bg-[#FFA07A] h-2 rounded-full" style="width: 75%"></div>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<div class="schedule-card rounded-3xl p-8">
|
| 177 |
+
<div class="flex justify-between items-center mb-6">
|
| 178 |
+
<h2 class="text-2xl font-bold">Weekly Overview</h2>
|
| 179 |
+
<div class="flex space-x-2">
|
| 180 |
+
<button class="bg-white/10 px-3 py-1 rounded-lg text-sm">Week</button>
|
| 181 |
+
<button class="bg-[#FFA07A] px-3 py-1 rounded-lg text-sm">Month</button>
|
| 182 |
+
<button class="bg-white/10 px-3 py-1 rounded-lg text-sm">Year</button>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<div class="overflow-x-auto">
|
| 187 |
+
<table class="w-full">
|
| 188 |
+
<thead>
|
| 189 |
+
<tr class="text-left border-b border-white/10 text-sm">
|
| 190 |
+
<th class="pb-3">Time</th>
|
| 191 |
+
<th class="pb-3">Mon</th>
|
| 192 |
+
<th class="pb-3">Tue</th>
|
| 193 |
+
<th class="pb-3">Wed</th>
|
| 194 |
+
<th class="pb-3">Thu</th>
|
| 195 |
+
<th class="pb-3">Fri</th>
|
| 196 |
+
<th class="pb-3">Sat</th>
|
| 197 |
+
<th class="pb-3">Sun</th>
|
| 198 |
+
</tr>
|
| 199 |
+
</thead>
|
| 200 |
+
<tbody class="divide-y divide-white/10 text-sm">
|
| 201 |
+
<tr>
|
| 202 |
+
<td class="py-3">6 AM</td>
|
| 203 |
+
<td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
|
| 204 |
+
<td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
|
| 205 |
+
<td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
|
| 206 |
+
<td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
|
| 207 |
+
<td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
|
| 208 |
+
<td></td>
|
| 209 |
+
<td></td>
|
| 210 |
+
</tr>
|
| 211 |
+
<tr>
|
| 212 |
+
<td class="py-3">8 AM</td>
|
| 213 |
+
<td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
|
| 214 |
+
<td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
|
| 215 |
+
<td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
|
| 216 |
+
<td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
|
| 217 |
+
<td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
|
| 218 |
+
<td></td>
|
| 219 |
+
<td></td>
|
| 220 |
+
</tr>
|
| 221 |
+
<tr>
|
| 222 |
+
<td class="py-3">12 PM</td>
|
| 223 |
+
<td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
|
| 224 |
+
<td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
|
| 225 |
+
<td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
|
| 226 |
+
<td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
|
| 227 |
+
<td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
|
| 228 |
+
<td><div class="w-6 h-6 rounded bg-yellow-500 mx-auto"></div></td>
|
| 229 |
+
<td><div class="w-6 h-6 rounded bg-yellow-500 mx-auto"></div></td>
|
| 230 |
+
</tr>
|
| 231 |
+
</tbody>
|
| 232 |
+
</table>
|
| 233 |
+
</div>
|
| 234 |
+
</div>
|
| 235 |
+
</main>
|
| 236 |
+
|
| 237 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 238 |
+
<div class="text-center opacity-70 text-sm">
|
| 239 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 240 |
+
</div>
|
| 241 |
+
</footer>
|
| 242 |
+
</div>
|
| 243 |
+
|
| 244 |
+
<script>
|
| 245 |
+
// Initialize Vanta.js background
|
| 246 |
+
VANTA.NET({
|
| 247 |
+
el: "#vanta-bg",
|
| 248 |
+
mouseControls: true,
|
| 249 |
+
touchControls: true,
|
| 250 |
+
gyroControls: false,
|
| 251 |
+
minHeight: 200.00,
|
| 252 |
+
minWidth: 200.00,
|
| 253 |
+
scale: 1.00,
|
| 254 |
+
scaleMobile: 1.00,
|
| 255 |
+
color: 0xffa07a,
|
| 256 |
+
backgroundColor: 0x1a1b2f,
|
| 257 |
+
points: 12.00,
|
| 258 |
+
maxDistance: 22.00,
|
| 259 |
+
spacing: 18.00
|
| 260 |
+
});
|
| 261 |
+
|
| 262 |
+
// Initialize feather icons
|
| 263 |
+
feather.replace();
|
| 264 |
+
</script>
|
| 265 |
+
</body>
|
| 266 |
+
</html>
|
tasks.html
ADDED
|
@@ -0,0 +1,260 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Task Genius | CircaSnooze</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Space Grotesk', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
|
| 18 |
+
}
|
| 19 |
+
.task-card {
|
| 20 |
+
backdrop-filter: blur(10px);
|
| 21 |
+
background-color: rgba(255, 255, 255, 0.08);
|
| 22 |
+
}
|
| 23 |
+
.task-item {
|
| 24 |
+
transition: all 0.2s ease;
|
| 25 |
+
}
|
| 26 |
+
.task-item:hover {
|
| 27 |
+
transform: translateY(-2px);
|
| 28 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
| 29 |
+
}
|
| 30 |
+
.priority-high {
|
| 31 |
+
border-left: 4px solid #f87171;
|
| 32 |
+
}
|
| 33 |
+
.priority-medium {
|
| 34 |
+
border-left: 4px solid #fbbf24;
|
| 35 |
+
}
|
| 36 |
+
.priority-low {
|
| 37 |
+
border-left: 4px solid #34d399;
|
| 38 |
+
}
|
| 39 |
+
</style>
|
| 40 |
+
</head>
|
| 41 |
+
<body class="min-h-screen text-white gradient-bg" id="vanta-bg">
|
| 42 |
+
<div class="container mx-auto px-4 py-8">
|
| 43 |
+
<header class="flex justify-between items-center mb-12">
|
| 44 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 45 |
+
<i data-feather="moon" class="w-6 h-6"></i>
|
| 46 |
+
<span class="text-xl font-bold">CircaSnooze</span>
|
| 47 |
+
</a>
|
| 48 |
+
<nav class="hidden md:flex space-x-6">
|
| 49 |
+
<a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
|
| 50 |
+
<a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
|
| 51 |
+
<a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
|
| 52 |
+
<a href="#" class="text-[#FFA07A] font-medium">Tasks</a>
|
| 53 |
+
<a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
|
| 54 |
+
</nav>
|
| 55 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
|
| 56 |
+
My Account
|
| 57 |
+
</button>
|
| 58 |
+
</header>
|
| 59 |
+
|
| 60 |
+
<main>
|
| 61 |
+
<div class="grid lg:grid-cols-3 gap-8 mb-8">
|
| 62 |
+
<div class="lg:col-span-2">
|
| 63 |
+
<div class="task-card rounded-3xl p-8 mb-8">
|
| 64 |
+
<div class="flex justify-between items-center mb-8">
|
| 65 |
+
<h1 class="text-3xl font-bold">Task Genius</h1>
|
| 66 |
+
<button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Task</button>
|
| 67 |
+
</div>
|
| 68 |
+
|
| 69 |
+
<div class="space-y-4">
|
| 70 |
+
<div class="task-item task-card rounded-xl p-4 flex items-center priority-high">
|
| 71 |
+
<input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
|
| 72 |
+
<div class="flex-1">
|
| 73 |
+
<div class="font-bold">Finish project proposal</div>
|
| 74 |
+
<div class="text-sm opacity-80 flex items-center">
|
| 75 |
+
<i data-feather="clock" class="w-3 h-3 mr-1"></i>
|
| 76 |
+
Due tomorrow at 9:00 AM
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
<div class="flex space-x-2">
|
| 80 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 81 |
+
<i data-feather="edit-2" class="w-4 h-4"></i>
|
| 82 |
+
</button>
|
| 83 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 84 |
+
<i data-feather="trash-2" class="w-4 h-4"></i>
|
| 85 |
+
</button>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="task-item task-card rounded-xl p-4 flex items-center priority-medium">
|
| 90 |
+
<input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
|
| 91 |
+
<div class="flex-1">
|
| 92 |
+
<div class="font-bold">Grocery shopping</div>
|
| 93 |
+
<div class="text-sm opacity-80 flex items-center">
|
| 94 |
+
<i data-feather="clock" class="w-3 h-3 mr-1"></i>
|
| 95 |
+
Due tomorrow
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="flex space-x-2">
|
| 99 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 100 |
+
<i data-feather="edit-2" class="w-4 h-4"></i>
|
| 101 |
+
</button>
|
| 102 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 103 |
+
<i data-feather="trash-2" class="w-4 h-4"></i>
|
| 104 |
+
</button>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<div class="task-item task-card rounded-xl p-4 flex items-center">
|
| 109 |
+
<input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
|
| 110 |
+
<div class="flex-1">
|
| 111 |
+
<div class="font-bold">Read new research paper</div>
|
| 112 |
+
<div class="text-sm opacity-80 flex items-center">
|
| 113 |
+
<i data-feather="clock" class="w-3 h-3 mr-1"></i>
|
| 114 |
+
Due Friday
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
<div class="flex space-x-2">
|
| 118 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 119 |
+
<i data-feather="edit-2" class="w-4 h-4"></i>
|
| 120 |
+
</button>
|
| 121 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 122 |
+
<i data-feather="trash-2" class="w-4 h-4"></i>
|
| 123 |
+
</button>
|
| 124 |
+
</div>
|
| 125 |
+
</div>
|
| 126 |
+
|
| 127 |
+
<div class="task-item task-card rounded-xl p-4 flex items-center priority-low">
|
| 128 |
+
<input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5" checked>
|
| 129 |
+
<div class="flex-1 opacity-60">
|
| 130 |
+
<div class="font-bold line-through">Call mom</div>
|
| 131 |
+
<div class="text-sm opacity-80 flex items-center">
|
| 132 |
+
<i data-feather="check" class="w-3 h-3 mr-1"></i>
|
| 133 |
+
Completed today
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="flex space-x-2">
|
| 137 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 138 |
+
<i data-feather="edit-2" class="w-4 h-4"></i>
|
| 139 |
+
</button>
|
| 140 |
+
<button class="p-1 rounded-full hover:bg-white/10">
|
| 141 |
+
<i data-feather="trash-2" class="w-4 h-4"></i>
|
| 142 |
+
</button>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
|
| 148 |
+
<div class="task-card rounded-3xl p-8">
|
| 149 |
+
<h2 class="text-2xl font-bold mb-6">Smart Suggestions</h2>
|
| 150 |
+
<div class="grid md:grid-cols-2 gap-4">
|
| 151 |
+
<div class="task-card rounded-xl p-4">
|
| 152 |
+
<div class="flex items-center mb-3">
|
| 153 |
+
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
|
| 154 |
+
<i data-feather="zap" class="w-5 h-5"></i>
|
| 155 |
+
</div>
|
| 156 |
+
<div>
|
| 157 |
+
<div class="font-bold">Energy Peak</div>
|
| 158 |
+
<div class="text-xs opacity-80">9:00 AM - 11:00 AM</div>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
<p class="text-sm opacity-80">Schedule your most demanding tasks during your natural energy peak.</p>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="task-card rounded-xl p-4">
|
| 164 |
+
<div class="flex items-center mb-3">
|
| 165 |
+
<div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
|
| 166 |
+
<i data-feather="clock" class="w-5 h-5"></i>
|
| 167 |
+
</div>
|
| 168 |
+
<div>
|
| 169 |
+
<div class="font-bold">Recurring Tasks</div>
|
| 170 |
+
<div class="text-xs opacity-80">Pattern detected</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
<p class="text-sm opacity-80">You usually grocery shop on Saturdays. Would you like to set a weekly reminder?</p>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<div>
|
| 180 |
+
<div class="task-card rounded-3xl p-8 mb-8">
|
| 181 |
+
<h2 class="text-2xl font-bold mb-6">Productivity Stats</h2>
|
| 182 |
+
<div class="flex items-center justify-between mb-4">
|
| 183 |
+
<div>
|
| 184 |
+
<div class="text-3xl font-bold">87%</div>
|
| 185 |
+
<div class="text-sm opacity-80">Completion Rate</div>
|
| 186 |
+
</div>
|
| 187 |
+
<div>
|
| 188 |
+
<div class="text-3xl font-bold">24</div>
|
| 189 |
+
<div class="text-sm opacity-80">Tasks This Week</div>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="h-48 bg-white/5 rounded-xl mb-6"></div>
|
| 193 |
+
<div class="flex justify-between text-sm">
|
| 194 |
+
<span>Mon</span>
|
| 195 |
+
<span>Tue</span>
|
| 196 |
+
<span>Wed</span>
|
| 197 |
+
<span>Thu</span>
|
| 198 |
+
<span>Fri</span>
|
| 199 |
+
<span>Sat</span>
|
| 200 |
+
<span>Sun</span>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
|
| 204 |
+
<div class="task-card rounded-3xl p-8">
|
| 205 |
+
<h2 class="text-2xl font-bold mb-6">Quick Add</h2>
|
| 206 |
+
<div class="space-y-4">
|
| 207 |
+
<div>
|
| 208 |
+
<label class="block mb-2 text-sm">Task Name</label>
|
| 209 |
+
<input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
|
| 210 |
+
</div>
|
| 211 |
+
<div>
|
| 212 |
+
<label class="block mb-2 text-sm">Due Date</label>
|
| 213 |
+
<input type="datetime-local" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
|
| 214 |
+
</div>
|
| 215 |
+
<div>
|
| 216 |
+
<label class="block mb-2 text-sm">Priority</label>
|
| 217 |
+
<div class="flex space-x-2">
|
| 218 |
+
<button class="bg-red-600/50 px-3 py-1 rounded-lg text-sm">High</button>
|
| 219 |
+
<button class="bg-yellow-600/50 px-3 py-1 rounded-lg text-sm">Medium</button>
|
| 220 |
+
<button class="bg-green-600/50 px-3 py-1 rounded-lg text-sm">Low</button>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
<button class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
|
| 224 |
+
Add Task
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</main>
|
| 231 |
+
|
| 232 |
+
<footer class="border-t border-white/20 mt-12 pt-8 pb-12">
|
| 233 |
+
<div class="text-center opacity-70 text-sm">
|
| 234 |
+
© 2023 CircaSnooze. All rights reserved.
|
| 235 |
+
</div>
|
| 236 |
+
</footer>
|
| 237 |
+
</div>
|
| 238 |
+
|
| 239 |
+
<script>
|
| 240 |
+
// Initialize Vanta.js background
|
| 241 |
+
VANTA.DOTS({
|
| 242 |
+
el: "#vanta-bg",
|
| 243 |
+
mouseControls: true,
|
| 244 |
+
touchControls: true,
|
| 245 |
+
gyroControls: false,
|
| 246 |
+
minHeight: 200.00,
|
| 247 |
+
minWidth: 200.00,
|
| 248 |
+
scale: 1.00,
|
| 249 |
+
scaleMobile: 1.00,
|
| 250 |
+
color: 0xffa07a,
|
| 251 |
+
backgroundColor: 0x1a1b2f,
|
| 252 |
+
size: 3.10,
|
| 253 |
+
spacing: 23.00
|
| 254 |
+
});
|
| 255 |
+
|
| 256 |
+
// Initialize feather icons
|
| 257 |
+
feather.replace();
|
| 258 |
+
</script>
|
| 259 |
+
</body>
|
| 260 |
+
</html>
|