HelloWorld97/layeredlearner-assignment-mastermind
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>LayeredLearner - Assignment Mastermind</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: '#3b82f6',18 secondary: '#10b981',19 accent: '#8b5cf6'20 }21 }22 }23 }24 </script>25</head>26<body class="bg-gray-50 min-h-screen">27 <!-- Navigation -->28 <custom-navbar></custom-navbar>29 30 <main class="container mx-auto px-4 py-8">31 <!-- Header -->32 <div class="mb-8">33 <h1 class="text-4xl font-bold text-gray-800 mb-2">Assignment Mastermind 📚</h1>34 <p class="text-gray-600">Track, organize, and enhance your academic work with AI-powered insights</p>35 </div>36 37 <!-- Stats Overview -->38 <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">39 <div class="bg-white rounded-xl shadow p-6">40 <div class="flex items-center justify-between">41 <div>42 <p class="text-sm text-gray-500">Total Courses</p>43 <h3 class="text-2xl font-bold text-gray-800" id="total-courses">0</h3>44 </div>45 <i data-feather="book" class="text-primary w-8 h-8"></i>46 </div>47 </div>48 <div class="bg-white rounded-xl shadow p-6">49 <div class="flex items-center justify-between">50 <div>51 <p class="text-sm text-gray-500">Active Assignments</p>52 <h3 class="text-2xl font-bold text-gray-800" id="total-assignments">0</h3>53 </div>54 <i data-feather="file-text" class="text-secondary w-8 h-8"></i>55 </div>56 </div>57 <div class="bg-white rounded-xl shadow p-6">58 <div class="flex items-center justify-between">59 <div>60 <p class="text-sm text-gray-500">In Progress</p>61 <h3 class="text-2xl font-bold text-gray-800" id="in-progress">0</h3>62 </div>63 <i data-feather="trending-up" class="text-accent w-8 h-8"></i>64 </div>65 </div>66 <div class="bg-white rounded-xl shadow p-6">67 <div class="flex items-center justify-between">68 <div>69 <p class="text-sm text-gray-500">Completed</p>70 <h3 class="text-2xl font-bold text-gray-800" id="completed">0</h3>71 </div>72 <i data-feather="check-circle" class="text-green-500 w-8 h-8"></i>73 </div>74 </div>75 </div>76 77 <!-- Main Content Area -->78 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">79 <!-- Left Column - Courses -->80 <div class="lg:col-span-1">81 <div class="bg-white rounded-xl shadow-lg p-6 mb-6">82 <div class="flex justify-between items-center mb-6">83 <h2 class="text-xl font-bold text-gray-800">Your Courses</h2>84 <button id="add-course-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition flex items-center gap-2">85 <i data-feather="plus" class="w-4 h-4"></i>86 Add Course87 </button>88 </div>89 <div id="courses-list" class="space-y-4">90 <!-- Courses will be loaded here -->91 </div>92 </div>93 94 <!-- Quick Actions -->95 <div class="bg-white rounded-xl shadow-lg p-6">96 <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Actions</h2>97 <div class="space-y-3">98 <button id="export-data" class="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition flex items-center gap-3">99 <i data-feather="download" class="text-gray-600"></i>100 <span>Export All Data</span>101 </button>102 <button id="import-data" class="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition flex items-center gap-3">103 <i data-feather="upload" class="text-gray-600"></i>104 <span>Import Data</span>105 </button>106 <button id="reset-sample" class="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition flex items-center gap-3">107 <i data-feather="refresh-cw" class="text-gray-600"></i>108 <span>Load Sample Data</span>109 </button>110 </div>111 </div>112 </div>113 114 <!-- Right Column - Assignments Table -->115 <div class="lg:col-span-2">116 <div class="bg-white rounded-xl shadow-lg overflow-hidden">117 <!-- Table Header -->118 <div class="p-6 border-b border-gray-200">119 <div class="flex justify-between items-center">120 <h2 class="text-xl font-bold text-gray-800">All Assignments</h2>121 <button id="add-assignment-btn" class="bg-secondary text-white px-4 py-2 rounded-lg hover:bg-secondary/90 transition flex items-center gap-2">122 <i data-feather="plus" class="w-4 h-4"></i>123 Add Assignment124 </button>125 </div>126 127 <!-- Filters -->128 <custom-filter-bar></custom-filter-bar>129 </div>130 131 <!-- Table -->132 <div class="overflow-x-auto">133 <table class="w-full">134 <thead>135 <tr class="bg-gray-50">136 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 cursor-pointer sortable" data-sort="course">137 Course <i data-feather="chevron-down" class="inline w-4 h-4"></i>138 </th>139 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 cursor-pointer sortable" data-sort="unit">140 Unit <i data-feather="chevron-down" class="inline w-4 h-4"></i>141 </th>142 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 cursor-pointer sortable" data-sort="name">143 Assignment <i data-feather="chevron-down" class="inline w-4 h-4"></i>144 </th>145 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 cursor-pointer sortable" data-sort="type">146 Type <i data-feather="chevron-down" class="inline w-4 h-4"></i>147 </th>148 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 cursor-pointer sortable" data-sort="status">149 Status <i data-feather="chevron-down" class="inline w-4 h-4"></i>150 </th>151 <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600">Actions</th>152 </tr>153 </thead>154 <tbody id="assignments-table-body">155 <!-- Assignments will be loaded here -->156 </tbody>157 </table>158 </div>159 160 <!-- Empty State -->161 <div id="empty-state" class="hidden p-12 text-center">162 <i data-feather="file-text" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>163 <h3 class="text-lg font-medium text-gray-700 mb-2">No assignments yet</h3>164 <p class="text-gray-500 mb-4">Get started by adding your first assignment</p>165 <button id="empty-add-btn" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90 transition">166 Add Assignment167 </button>168 </div>169 </div>170 171 <!-- AI Assistant Panel -->172 <div class="mt-6 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl shadow-lg p-6">173 <div class="flex items-center gap-3 mb-4">174 <i data-feather="zap" class="w-6 h-6 text-accent"></i>175 <h3 class="text-lg font-bold text-gray-800">AI Assistant Ready</h3>176 </div>177 <p class="text-gray-600 mb-4">Select an assignment to access AI-powered tools for structure generation, draft feedback, and practice tests.</p>178 <div class="grid grid-cols-2 md:grid-cols-4 gap-3">179 <div class="text-center p-3 bg-white rounded-lg">180 <i data-feather="layers" class="w-5 h-5 text-primary mx-auto mb-2"></i>181 <span class="text-sm font-medium">Structure</span>182 </div>183 <div class="text-center p-3 bg-white rounded-lg">184 <i data-feather="edit" class="w-5 h-5 text-secondary mx-auto mb-2"></i>185 <span class="text-sm font-medium">Feedback</span>186 </div>187 <div class="text-center p-3 bg-white rounded-lg">188 <i data-feather="clipboard" class="w-5 h-5 text-accent mx-auto mb-2"></i>189 <span class="text-sm font-medium">Practice Tests</span>190 </div>191 <div class="text-center p-3 bg-white rounded-lg">192 <i data-feather="check-square" class="w-5 h-5 text-green-500 mx-auto mb-2"></i>193 <span class="text-sm font-medium">Grading</span>194 </div>195 </div>196 </div>197 </div>198 </div>199 </main>200 201 <!-- Footer -->202 <custom-footer></custom-footer>203 204 <!-- Modals will be injected here -->205 <div id="modal-container"></div>206 207 <!-- Scripts -->208 <script src="components/navbar.js"></script>209 <script src="components/footer.js"></script>210 <script src="components/filter-bar.js"></script>211 <script src="components/course-modal.js"></script>212 <script src="components/assignment-modal.js"></script>213 <script src="components/confirm-dialog.js"></script>214 <script src="script.js"></script>215 <script>216 feather.replace();217 // Initialize on load218 document.addEventListener('DOMContentLoaded', () => {219 if (typeof initApp === 'function') {220 initApp();221 }222 });223 </script>224<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>225</body>226</html>