Edward20115/scribblesync-pro-smart-notes-app
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>ScribbleSync - Smart Note Taking</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');14 body {15 font-family: 'Inter', sans-serif;16 }17 .dynamic-bg {18 background: linear-gradient(135deg, #6e8efb, #a777e3);19 }20 .note-card:hover {21 transform: translateY(-5px);22 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);23 }24 .floating-btn {25 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);26 }27 </style>28</head>29<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">30 <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>31 32 <!-- Navigation -->33 <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6 flex justify-between items-center sticky top-0 z-50">34 <div class="flex items-center space-x-2">35 <i data-feather="edit-3" class="text-indigo-600 dark:text-indigo-400"></i>36 <h1 class="text-xl font-bold text-gray-800 dark:text-white">ScribbleSync Pro</h1>37 </div>38<div class="flex items-center space-x-4">39 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">40 <i data-feather="moon" class="text-gray-600 dark:text-gray-300"></i>41 </button>42 <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">43 <i data-feather="search" class="text-gray-600 dark:text-gray-300"></i>44 </button>45 <div class="relative">46 <img src="http://static.photos/people/200x200/42" alt="Profile" class="w-8 h-8 rounded-full object-cover">47 </div>48 </div>49 </nav>50 51 <!-- Main Content -->52 <main class="container mx-auto px-4 py-8">53 <!-- Categories -->54 <div class="mb-8">55 <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Categories</h2>56 <div class="flex space-x-3 overflow-x-auto pb-2">57 <button class="px-4 py-2 bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 rounded-full text-sm font-medium whitespace-nowrap">All Notes</button>58 <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-full text-sm font-medium whitespace-nowrap">Work</button>59 <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-full text-sm font-medium whitespace-nowrap">Personal</button>60 <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-full text-sm font-medium whitespace-nowrap">Ideas</button>61 <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-full text-sm font-medium whitespace-nowrap">+ New</button>62 </div>63 </div>64 65 <!-- Notes Grid -->66 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">67 <!-- Note Card 1 -->68 <div class="note-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 transition-all duration-300 cursor-pointer">69 <div class="flex justify-between items-start mb-3">70 <h3 class="font-semibold text-gray-800 dark:text-white">Project Brainstorm</h3>71 <i data-feather="more-vertical" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"></i>72 </div>73 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">Ideas for the new marketing campaign including social media strategy and influencer collaborations...</p>74 <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">75 <span>Work</span>76 <span>2 days ago</span>77 </div>78 </div>79 80 <!-- Note Card 2 -->81 <div class="note-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 transition-all duration-300 cursor-pointer">82 <div class="flex justify-between items-start mb-3">83 <h3 class="font-semibold text-gray-800 dark:text-white">Shopping List</h3>84 <i data-feather="more-vertical" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"></i>85 </div>86 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">- Milk, Eggs, Bread, Coffee, Fruits, Vegetables, Chicken, Pasta...</p>87 <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">88 <span>Personal</span>89 <span>Today</span>90 </div>91 </div>92 93 <!-- Note Card 3 -->94 <div class="note-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 transition-all duration-300 cursor-pointer">95 <div class="flex justify-between items-start mb-3">96 <h3 class="font-semibold text-gray-800 dark:text-white">App UI Ideas</h3>97 <i data-feather="more-vertical" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"></i>98 </div>99 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">Dark mode toggle, minimalist design, gesture controls, customizable themes...</p>100 <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">101 <span>Ideas</span>102 <span>1 week ago</span>103 </div>104 </div>105 106 <!-- New Note Card -->107 <div class="note-card bg-gray-50 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-5 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300">108 <i data-feather="plus" class="text-gray-400 dark:text-gray-300 mb-2"></i>109 <p class="text-gray-500 dark:text-gray-300 text-sm">New Note</p>110 </div>111 </div>112 </main>113 <!-- Floating Action Button -->114 <button class="floating-btn fixed bottom-6 right-6 w-14 h-14 bg-indigo-600 dark:bg-indigo-500 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors duration-300">115 <i data-feather="plus" class="w-6 h-6"></i>116 </button>117 118 <!-- Play Store Badge -->119 <div class="fixed bottom-6 left-6 z-50">120 <a href="https://play.google.com/store/apps/details?id=com.scribblesync.pro" target="_blank" rel="noopener noreferrer">121 <img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" class="h-14">122 </a>123 </div>124<!-- Bottom Navigation (Mobile) -->125 <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg md:hidden flex justify-around items-center py-3 px-4 z-50">126 <a href="#" class="text-indigo-600 dark:text-indigo-400">127 <i data-feather="home" class="w-5 h-5"></i>128 </a>129 <a href="#" class="text-gray-500 dark:text-gray-400">130 <i data-feather="search" class="w-5 h-5"></i>131 </a>132 <a href="#" class="text-gray-500 dark:text-gray-400">133 <i data-feather="bookmark" class="w-5 h-5"></i>134 </a>135 <a href="#" class="text-gray-500 dark:text-gray-400">136 <i data-feather="settings" class="w-5 h-5"></i>137 </a>138 <a href="app.html" class="text-gray-500 dark:text-gray-400">139 <i data-feather="smartphone" class="w-5 h-5"></i>140 </a>141</div>142 <script>143 // Initialize Vanta.js background144 VANTA.NET({145 el: "#vanta-bg",146 color: 0x6e8efb,147 backgroundColor: 0xffffff,148 points: 12,149 maxDistance: 20,150 spacing: 15151 });152 153 // Theme toggle154 const themeToggle = document.getElementById('theme-toggle');155 const html = document.documentElement;156 157 themeToggle.addEventListener('click', () => {158 html.classList.toggle('dark');159 const isDark = html.classList.contains('dark');160 localStorage.setItem('darkMode', isDark);161 themeToggle.innerHTML = `<i data-feather="${isDark ? 'sun' : 'moon'}" class="text-gray-600 dark:text-gray-300"></i>`;162 feather.replace();163 });164 165 // Initialize feather icons166 feather.replace();167</body>168</html>