csssds/notevault-your-digital-memory-palace
0
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>NoteVault - Your Digital Memory Palace</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 <script src="https://cdn.jsdelivr.net/npm/speech-recognition-polyfill/dist/speech-recognition-polyfill.min.js"></script>12<style>13 .note-tile {14 transition: all 0.3s ease;15 transform-style: preserve-3d;16 }17 .note-tile:hover {18 transform: translateY(-5px) rotateX(5deg);19 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);20 }21 .gradient-bg {22 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);23 }24 .editor-toolbar {25 scrollbar-width: thin;26 }27 .editor-toolbar::-webkit-scrollbar {28 height: 4px;29 }30 </style>31</head>32<body class="min-h-screen bg-gray-50">33 <div id="vanta-bg" class="fixed inset-0 z-0"></div>34 35 <!-- Main Content -->36 <div class="relative z-10 min-h-screen">37 <!-- Header -->38 <header class="gradient-bg text-white shadow-lg">39 <div class="container mx-auto px-4 py-6">40 <div class="flex justify-between items-center">41 <div class="flex items-center space-x-2">42 <i data-feather="book" class="w-8 h-8"></i>43 <h1 class="text-2xl font-bold">NoteVault</h1>44 </div>45 <div class="flex items-center space-x-4">46 <button class="p-2 rounded-full hover:bg-white/10 transition">47 <i data-feather="search" class="w-5 h-5"></i>48 </button>49 <button class="p-2 rounded-full hover:bg-white/10 transition">50 <i data-feather="bell" class="w-5 h-5"></i>51 </button>52 <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">53 <i data-feather="user" class="w-4 h-4"></i>54 </div>55 </div>56 </div>57 </div>58 </header>59 60 <!-- Main Content Area -->61 <main class="container mx-auto px-4 py-8">62 <!-- Action Bar -->63 <div class="flex justify-between items-center mb-8">64 <h2 class="text-xl font-semibold text-gray-800">My Notes</h2>65 <div class="flex space-x-4">66 <button id="voiceNoteBtn" class="bg-white text-purple-600 border border-purple-600 px-4 py-2 rounded-lg flex items-center space-x-2 hover:bg-purple-50 transition">67 <i data-feather="mic" class="w-4 h-4"></i>68 <span>Voice Note</span>69 </button>70 <button class="gradient-bg text-white px-4 py-2 rounded-lg flex items-center space-x-2 hover:opacity-90 transition">71 <i data-feather="plus" class="w-4 h-4"></i>72 <span>New Note</span>73 </button>74 </div>75 </div>76<!-- Filter Bar -->77 <div class="flex items-center space-x-4 mb-6 overflow-x-auto pb-2 editor-toolbar">78 <button class="px-3 py-1 rounded-full bg-purple-100 text-purple-800 text-sm flex items-center space-x-1">79 <span>All</span>80 <span class="bg-purple-600 text-white rounded-full px-2 py-0.5 text-xs">24</span>81 </button>82 <button class="px-3 py-1 rounded-full bg-gray-200 text-gray-700 text-sm flex items-center space-x-1">83 <span>Work</span>84 </button>85 <button class="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm flex items-center space-x-1">86 <span>Personal</span>87 </button>88 <button class="px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm flex items-center space-x-1">89 <span>Ideas</span>90 </button>91 <button class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-sm flex items-center space-x-1">92 <span>To-Do</span>93 </button>94 </div>95 96 <!-- Notes Grid -->97 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">98 <!-- Note Tile 1 -->99 <div class="note-tile bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-purple-500">100 <div class="p-4">101 <h3 class="font-bold text-lg mb-2 text-gray-800">Product Roadmap 2025</h3>102 <p class="text-gray-600 text-sm mb-3">Finalize features for Q1. Discuss with design team about new UI components. Schedule meeting with...</p>103 <div class="flex justify-between items-center">104 <span class="text-xs text-gray-500">Updated 2h ago</span>105 <div class="flex space-x-2">106 <button class="text-gray-400 hover:text-gray-600">107 <i data-feather="edit-2" class="w-4 h-4"></i>108 </button>109 <button class="text-gray-400 hover:text-gray-600">110 <i data-feather="trash-2" class="w-4 h-4"></i>111 </button>112 </div>113 </div>114 </div>115 </div>116 117 <!-- Note Tile 2 -->118 <div class="note-tile bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-blue-500">119 <div class="p-4">120 <h3 class="font-bold text-lg mb-2 text-gray-800">Grocery List</h3>121 <ul class="text-gray-600 text-sm mb-3 space-y-1">122 <li class="flex items-center">123 <i data-feather="check-square" class="w-3 h-3 mr-2 text-green-500"></i>124 <span>Organic milk</span>125 </li>126 <li class="flex items-center">127 <i data-feather="check-square" class="w-3 h-3 mr-2 text-green-500"></i>128 <span>Whole grain bread</span>129 </li>130 <li class="flex items-center">131 <i data-feather="square" class="w-3 h-3 mr-2 text-gray-400"></i>132 <span>Fresh strawberries</span>133 </li>134 </ul>135 <div class="flex justify-between items-center">136 <span class="text-xs text-gray-500">Updated 1d ago</span>137 <div class="flex space-x-2">138 <button class="text-gray-400 hover:text-gray-600">139 <i data-feather="edit-2" class="w-4 h-4"></i>140 </button>141 <button class="text-gray-400 hover:text-gray-600">142 <i data-feather="trash-2" class="w-4 h-4"></i>143 </button>144 </div>145 </div>146 </div>147 </div>148 149 <!-- Note Tile 3 -->150 <div class="note-tile bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-green-500">151 <div class="p-4">152 <h3 class="font-bold text-lg mb-2 text-gray-800">Book Recommendations</h3>153 <p class="text-gray-600 text-sm mb-3">- Atomic Habits by James Clear<br>- Deep Work by Cal Newport<br>- The Psychology of Money by Morgan Housel</p>154 <div class="flex justify-between items-center">155 <span class="text-xs text-gray-500">Updated 3d ago</span>156 <div class="flex space-x-2">157 <button class="text-gray-400 hover:text-gray-600">158 <i data-feather="edit-2" class="w-4 h-4"></i>159 </button>160 <button class="text-gray-400 hover:text-gray-600">161 <i data-feather="trash-2" class="w-4 h-4"></i>162 </button>163 </div>164 </div>165 </div>166 </div>167 168 <!-- Note Tile 4 -->169 <div class="note-tile bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-yellow-500">170 <div class="p-4">171 <h3 class="font-bold text-lg mb-2 text-gray-800">Meeting Notes</h3>172 <p class="text-gray-600 text-sm mb-3">Discussed project timeline and resource allocation. Need to follow up with marketing team about campaign...</p>173 <div class="flex justify-between items-center">174 <span class="text-xs text-gray-500">Updated 5d ago</span>175 <div class="flex space-x-2">176 <button class="text-gray-400 hover:text-gray-600">177 <i data-feather="edit-2" class="w-4 h-4"></i>178 </button>179 <button class="text-gray-400 hover:text-gray-600">180 <i data-feather="trash-2" class="w-4 h-4"></i>181 </button>182 </div>183 </div>184 </div>185 </div>186 187 <!-- Note Tile 5 (Empty State) -->188 <div class="note-tile border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center p-8 text-center hover:border-gray-400 transition cursor-pointer">189 <i data-feather="plus" class="w-8 h-8 text-gray-400 mb-2"></i>190 <h3 class="font-medium text-gray-600">Add new note</h3>191 <p class="text-sm text-gray-500 mt-1">Tap to create</p>192 </div>193 </div>194 </main>195 196 <!-- Bottom Navigation (Mobile) -->197 <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg md:hidden">198 <div class="flex justify-around items-center py-3">199 <button class="p-2 text-purple-600">200 <i data-feather="home" class="w-6 h-6"></i>201 </button>202 <button class="p-2 text-gray-500">203 <i data-feather="search" class="w-6 h-6"></i>204 </button>205 <button class="p-2 text-gray-500">206 <i data-feather="file-text" class="w-6 h-6"></i>207 </button>208 <button class="p-2 text-gray-500">209 <i data-feather="settings" class="w-6 h-6"></i>210 </button>211 </div>212 </nav>213 </div>214 <!-- Voice Note Modal -->215 <div id="voiceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">216 <div class="bg-white rounded-xl p-6 w-full max-w-md">217 <div class="flex justify-between items-center mb-4">218 <h3 class="text-lg font-semibold">Voice Note</h3>219 <button id="closeVoiceModal" class="text-gray-500 hover:text-gray-700">220 <i data-feather="x" class="w-5 h-5"></i>221 </button>222 </div>223 <div id="voiceNoteOutput" class="bg-gray-100 rounded-lg p-4 min-h-48 mb-4">224 <p class="text-gray-500 italic" id="voiceStatus">Click the microphone and start speaking...</p>225 </div>226 <div class="flex justify-center">227 <button id="recordBtn" class="bg-red-500 hover:bg-red-600 text-white rounded-full p-4 flex items-center justify-center">228 <i data-feather="mic" class="w-6 h-6"></i>229 </button>230 </div>231 <div class="flex justify-end space-x-3 mt-6">232 <button id="cancelVoiceNote" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700">Cancel</button>233 <button id="saveVoiceNote" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">Save Note</button>234 </div>235 </div>236 </div>237 238 <script>239 // Voice to text functionality240 let recognition;241 let isRecording = false;242 243 function initVoiceRecognition() {244 recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();245 recognition.continuous = true;246 recognition.interimResults = true;247 248 recognition.onresult = (event) => {249 const transcript = Array.from(event.results)250 .map(result => result[0])251 .map(result => result.transcript)252 .join('');253 document.getElementById('voiceNoteOutput').innerHTML = transcript;254 };255 256 recognition.onerror = (event) => {257 document.getElementById('voiceStatus').textContent = 'Error occurred: ' + event.error;258 };259 260 recognition.onend = () => {261 if (isRecording) {262 recognition.start();263 }264 };265 }266 267 document.getElementById('voiceNoteBtn').addEventListener('click', () => {268 document.getElementById('voiceModal').classList.remove('hidden');269 document.getElementById('voiceNoteOutput').innerHTML = '<p class="text-gray-500 italic" id="voiceStatus">Click the microphone and start speaking...</p>';270 });271 272 document.getElementById('closeVoiceModal').addEventListener('click', () => {273 document.getElementById('voiceModal').classList.add('hidden');274 if (isRecording) {275 recognition.stop();276 isRecording = false;277 }278 });279 280 document.getElementById('cancelVoiceNote').addEventListener('click', () => {281 document.getElementById('voiceModal').classList.add('hidden');282 if (isRecording) {283 recognition.stop();284 isRecording = false;285 }286 });287 288 document.getElementById('recordBtn').addEventListener('click', () => {289 if (!isRecording) {290 if (!recognition) initVoiceRecognition();291 recognition.start();292 isRecording = true;293 document.getElementById('recordBtn').classList.remove('bg-red-500');294 document.getElementById('recordBtn').classList.add('bg-red-600');295 document.getElementById('voiceStatus').textContent = 'Listening...';296 } else {297 recognition.stop();298 isRecording = false;299 document.getElementById('recordBtn').classList.remove('bg-red-600');300 document.getElementById('recordBtn').classList.add('bg-red-500');301 document.getElementById('voiceStatus').textContent = 'Click microphone to continue speaking';302 }303 });304 305 document.getElementById('saveVoiceNote').addEventListener('click', () => {306 const noteContent = document.getElementById('voiceNoteOutput').textContent;307 if (noteContent.trim() && !noteContent.includes('Click the microphone')) {308 // Here you would typically save the note to your backend309 alert('Note saved: ' + noteContent);310 document.getElementById('voiceModal').classList.add('hidden');311 if (isRecording) {312 recognition.stop();313 isRecording = false;314 }315 } else {316 alert('Please record some content before saving');317 }318 });319 320 // Initialize Vanta.js background321VANTA.NET({322 el: "#vanta-bg",323 mouseControls: true,324 touchControls: true,325 gyroControls: false,326 minHeight: 200.00,327 minWidth: 200.00,328 scale: 1.00,329 scaleMobile: 1.00,330 color: 0x7c72e8,331 backgroundColor: 0xf8fafc,332 points: 12.00,333 maxDistance: 22.00,334 spacing: 18.00335 });336 337 // Initialize Feather Icons338 document.addEventListener('DOMContentLoaded', function() {339 feather.replace();340 341 // Add animation to note tiles on page load342 anime({343 targets: '.note-tile',344 opacity: [0, 1],345 translateY: [20, 0],346 delay: anime.stagger(100),347 easing: 'easeOutQuad'348 });349 });350 </script>351</body>352</html>353