DRnorespec/studypulse-planner
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>StudyPulse Planner</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.clouds.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Poppins', sans-serif;15 }16 .vanta-bg {17 position: fixed;18 top: 0;19 left: 0;20 width: 100%;21 height: 100%;22 z-index: -1;23 }24 .glass-card {25 backdrop-filter: blur(16px) saturate(180%);26 -webkit-backdrop-filter: blur(16px) saturate(180%);27 background-color: rgba(255, 255, 255, 0.75);28 border-radius: 12px;29 border: 1px solid rgba(209, 213, 219, 0.3);30 }31 </style>32</head>33<body>34 <div id="vanta-bg" class="vanta-bg"></div>35 36 <div class="min-h-screen flex flex-col">37 <!-- Header -->38 <header class="py-6 px-4 sm:px-6 lg:px-8">39 <div class="flex justify-between items-center glass-card p-4">40 <div class="flex items-center space-x-2">41 <i data-feather="book" class="text-indigo-600 w-8 h-8"></i>42 <h1 class="text-2xl font-bold text-gray-800">StudyPulse</h1>43 </div>44 <div class="flex items-center space-x-4">45 <button class="p-2 rounded-full hover:bg-gray-100 transition">46 <i data-feather="bell" class="text-gray-600"></i>47 </button>48 <button class="p-2 rounded-full hover:bg-gray-100 transition">49 <i data-feather="user" class="text-gray-600"></i>50 </button>51 </div>52 </div>53 </header>54 55 <!-- Main Content -->56 <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">57 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">58 <!-- Today's Tasks -->59 <div class="glass-card p-6 col-span-1 md:col-span-2">60 <div class="flex justify-between items-center mb-6">61 <h2 class="text-xl font-semibold text-gray-800">Today's Tasks</h2>62 <span class="text-sm text-gray-500">Monday, June 5</span>63 </div>64 <div class="space-y-4">65 <!-- Task Item -->66 <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-indigo-500">67 <div class="flex justify-between items-start">68 <div>69 <h3 class="font-medium text-gray-800">Complete Flutter Assignment</h3>70 <p class="text-sm text-gray-500 mt-1">Build a study planner app with local storage</p>71 </div>72 <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">High</span>73 </div>74 <div class="flex items-center mt-3 text-sm text-gray-500">75 <i data-feather="clock" class="w-4 h-4 mr-1"></i>76 <span>Due: Today, 5:00 PM</span>77 </div>78 </div>79 80 <!-- Task Item -->81 <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500">82 <div class="flex justify-between items-start">83 <div>84 <h3 class="font-medium text-gray-800">Study Algorithms</h3>85 <p class="text-sm text-gray-500 mt-1">Dijkstra's algorithm practice</p>86 </div>87 <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Medium</span>88 </div>89 <div class="flex items-center mt-3 text-sm text-gray-500">90 <i data-feather="clock" class="w-4 h-4 mr-1"></i>91 <span>Due: Today, 8:00 PM</span>92 </div>93 </div>94 </div>95 96 <!-- Add Task Button -->97 <button class="mt-6 w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center justify-center transition">98 <i data-feather="plus" class="mr-2"></i>99 Add New Task100 </button>101 </div>102 103 <!-- Upcoming Tasks -->104 <div class="glass-card p-6">105 <h2 class="text-xl font-semibold text-gray-800 mb-6">Upcoming</h2>106 <div class="space-y-4">107 <!-- Upcoming Task -->108 <div class="p-3 bg-white rounded-lg shadow-sm">109 <h3 class="font-medium text-gray-800">Database Project Meeting</h3>110 <div class="flex items-center mt-2 text-sm text-gray-500">111 <i data-feather="calendar" class="w-4 h-4 mr-1"></i>112 <span>Tomorrow, 10:00 AM</span>113 </div>114 </div>115 116 <!-- Upcoming Task -->117 <div class="p-3 bg-white rounded-lg shadow-sm">118 <h3 class="font-medium text-gray-800">Submit Math Homework</h3>119 <div class="flex items-center mt-2 text-sm text-gray-500">120 <i data-feather="calendar" class="w-4 h-4 mr-1"></i>121 <span>June 7, 11:59 PM</span>122 </div>123 </div>124 125 <!-- Upcoming Task -->126 <div class="p-3 bg-white rounded-lg shadow-sm">127 <h3 class="font-medium text-gray-800">Group Study Session</h3>128 <div class="flex items-center mt-2 text-sm text-gray-500">129 <i data-feather="calendar" class="w-4 h-4 mr-1"></i>130 <span>June 8, 2:00 PM</span>131 </div>132 </div>133 </div>134 </div>135 </div>136 </main>137 138 <!-- Bottom Navigation -->139 <nav class="bg-white shadow-lg py-3 px-6">140 <div class="flex justify-around">141 <a href="#" class="flex flex-col items-center text-indigo-600">142 <i data-feather="home" class="w-6 h-6"></i>143 <span class="text-xs mt-1">Today</span>144 </a>145 <a href="#" class="flex flex-col items-center text-gray-500 hover:text-indigo-600">146 <i data-feather="calendar" class="w-6 h-6"></i>147 <span class="text-xs mt-1">Calendar</span>148 </a>149 <a href="#" class="flex flex-col items-center text-gray-500 hover:text-indigo-600">150 <i data-feather="settings" class="w-6 h-6"></i>151 <span class="text-xs mt-1">Settings</span>152 </a>153 </div>154 </nav>155 </div>156 157 <script>158 // Initialize Vanta.js background159 VANTA.CLOUDS({160 el: "#vanta-bg",161 mouseControls: true,162 touchControls: true,163 gyroControls: false,164 minHeight: 200.00,165 minWidth: 200.00,166 skyColor: 0xb1c8f2,167 cloudColor: 0xd7e5f8,168 cloudShadowColor: 0x90a0c0,169 sunColor: 0xffb600,170 sunGlareColor: 0xff6600,171 sunlightColor: 0xff9933172 });173 174 // Initialize feather icons175 feather.replace();176 </script>177</body>178</html>179