Natxus/android-code-qa-system
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>Dashboard - Android Code QA System</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/chart.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);15 }16 .sidebar {17 background: #0f172a;18 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);19 }20 .content-container {21 background: #0f172a;22 border-radius: 1rem;23 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);24 }25 .stat-card {26 background: linear-gradient(135deg, #1e293b 0%, #334155 100%);27 border-radius: 0.75rem;28 transition: transform 0.3s ease;29 }30 .stat-card:hover {31 transform: translateY(-5px);32 }33 .issue-card {34 background: #1e293b;35 border-radius: 0.75rem;36 border-left: 4px solid #8b5cf6;37 }38 .code-block {39 background: #1e293b;40 border-radius: 0.5rem;41 padding: 1rem;42 overflow-x: auto;43 }44 </style>45</head>46<body class="min-h-screen text-gray-100">47 <div class="flex">48 <!-- Sidebar -->49 <div class="sidebar w-64 min-h-screen p-6 flex flex-col">50 <div class="flex items-center space-x-3 mb-10">51 <div class="bg-indigo-600 p-2 rounded-lg">52 <i data-feather="code" class="w-6 h-6"></i>53 </div>54 <h1 class="text-xl font-bold">Android Code QA</h1>55 </div>56 57 <nav class="flex-1">58 <ul class="space-y-2">59 <li>60 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-600 text-white">61 <i data-feather="home" class="w-5 h-5"></i>62 <span>Dashboard</span>63 </a>64 </li>65 <li>66 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition">67 <i data-feather="folder" class="w-5 h-5"></i>68 <span>Projects</span>69 </a>70 </li>71 <li>72 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition">73 <i data-feather="bar-chart-2" class="w-5 h-5"></i>74 <span>Analytics</span>75 </a>76 </li>77 <li>78 <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition">79 <i data-feather="settings" class="w-5 h-5"></i>80 <span>Settings</span>81 </a>82 </li>83 </ul>84 </nav>85 86 <div class="mt-auto">87 <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-800 transition cursor-pointer">88 <div class="bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center">89 <i data-feather="user" class="w-5 h-5"></i>90 </div>91 <div>92 <p class="font-medium">Developer User</p>93 <p class="text-sm text-gray-400">developer@example.com</p>94 </div>95 </div>96 </div>97 </div>98 99 <!-- Main Content -->100 <div class="flex-1 p-8">101 <!-- Header -->102 <div class="flex justify-between items-center mb-8">103 <div>104 <h1 class="text-3xl font-bold">Dashboard</h1>105 <p class="text-gray-400">Welcome back! Here's what's happening with your projects.</p>106 </div>107 <div class="flex space-x-4">108 <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center">109 <i data-feather="plus" class="w-4 h-4 mr-2"></i>110 New Analysis111 </button>112 <button class="bg-slate-800 hover:bg-slate-700 text-white font-medium py-2 px-4 rounded-lg transition">113 <i data-feather="refresh-cw" class="w-4 h-4"></i>114 </button>115 </div>116 </div>117 118 <!-- Stats Overview -->119 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">120 <div class="stat-card p-6">121 <div class="flex justify-between items-start">122 <div>123 <p class="text-gray-400">Total Projects</p>124 <p class="text-3xl font-bold mt-2">12</p>125 </div>126 <div class="bg-indigo-500/10 p-3 rounded-lg">127 <i data-feather="folder" class="w-6 h-6 text-indigo-400"></i>128 </div>129 </div>130 <p class="text-green-400 text-sm mt-4 flex items-center">131 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>132 2 new this month133 </p>134 </div>135 136 <div class="stat-card p-6">137 <div class="flex justify-between items-start">138 <div>139 <p class="text-gray-400">Issues Detected</p>140 <p class="text-3xl font-bold mt-2">142</p>141 </div>142 <div class="bg-red-500/10 p-3 rounded-lg">143 <i data-feather="alert-triangle" class="w-6 h-6 text-red-400"></i>144 </div>145 </div>146 <p class="text-red-400 text-sm mt-4 flex items-center">147 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>148 12 unresolved149 </p>150 </div>151 152 <div class="stat-card p-6">153 <div class="flex justify-between items-start">154 <div>155 <p class="text-gray-400">Memory Leaks</p>156 <p class="text-3xl font-bold mt-2">38</p>157 </div>158 <div class="bg-purple-500/10 p-3 rounded-lg">159 <i data-feather="droplet" class="w-6 h-6 text-purple-400"></i>160 </div>161 </div>162 <p class="text-green-400 text-sm mt-4 flex items-center">163 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>164 8 fixed this week165 </p>166 </div>167 168 <div class="stat-card p-6">169 <div class="flex justify-between items-start">170 <div>171 <p class="text-gray-400">Performance Issues</p>172 <p class="text-3xl font-bold mt-2">24</p>173 </div>174 <div class="bg-yellow-500/10 p-3 rounded-lg">175 <i data-feather="zap" class="w-6 h-6 text-yellow-400"></i>176 </div>177 </div>178 <p class="text-green-400 text-sm mt-4 flex items-center">179 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>180 5 resolved181 </p>182 </div>183 </div>184 185 <!-- Charts and Issues -->186 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">187 <!-- Issues Chart -->188 <div class="content-container p-6">189 <div class="flex justify-between items-center mb-6">190 <h2 class="text-xl font-semibold">Issues Overview</h2>191 <select class="bg-slate-800 text-gray-300 rounded-lg px-3 py-2">192 <option>Last 7 days</option>193 <option>Last 30 days</option>194 <option>Last 90 days</option>195 </select>196 </div>197 <canvas id="issuesChart" height="300"></canvas>198 </div>199 200 <!-- Recent Activity -->201 <div class="content-container p-6">202 <h2 class="text-xl font-semibold mb-6">Recent Activity</h2>203 <div class="space-y-4">204 <div class="flex items-start">205 <div class="bg-green-500/10 p-2 rounded-full mr-3">206 <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>207 </div>208 <div>209 <p class="font-medium">Memory leak fixed in MainActivity</p>210 <p class="text-gray-400 text-sm">2 hours ago</p>211 </div>212 </div>213 <div class="flex items-start">214 <div class="bg-blue-500/10 p-2 rounded-full mr-3">215 <i data-feather="plus-circle" class="w-4 h-4 text-blue-400"></i>216 </div>217 <div>218 <p class="font-medium">New project analyzed: E-commerce App</p>219 <p class="text-gray-400 text-sm">5 hours ago</p>220 </div>221 </div>222 <div class="flex items-start">223 <div class="bg-yellow-500/10 p-2 rounded-full mr-3">224 <i data-feather="alert-triangle" class="w-4 h-4 text-yellow-400"></i>225 </div>226 <div>227 <p class="font-medium">Performance issue detected in RecyclerView</p>228 <p class="text-gray-400 text-sm">1 day ago</p>229 </div>230 </div>231 <div class="flex items-start">232 <div class="bg-purple-500/10 p-2 rounded-full mr-3">233 <i data-feather="file-text" class="w-4 h-4 text-purple-400"></i>234 </div>235 <div>236 <p class="font-medium">Report generated for Finance App</p>237 <p class="text-gray-400 text-sm">2 days ago</p>238 </div>239 </div>240 </div>241 </div>242 </div>243 244 <!-- Recent Issues -->245 <div class="content-container p-6 mb-8">246 <div class="flex justify-between items-center mb-6">247 <h2 class="text-xl font-semibold">Recent Issues</h2>248 <a href="#" class="text-indigo-400 hover:text-indigo-300 text-sm">View All</a>249 </div>250 251 <div class="space-y-4">252 <div class="issue-card p-5 border-l-purple-500">253 <div class="flex justify-between">254 <h3 class="font-semibold">Static Context Leak in LoginActivity</h3>255 <span class="bg-red-500/10 text-red-400 text-xs px-2 py-1 rounded">Critical</span>256 </div>257 <p class="text-gray-400 text-sm mt-2">Storing a static reference to context in LoginActivity can cause memory leaks.</p>258 <div class="flex items-center mt-3 text-sm">259 <span class="bg-slate-700 px-2 py-1 rounded mr-2">Memory Leak</span>260 <span class="text-gray-500">com.example.app.LoginActivity:42</span>261 </div>262 </div>263 264 <div class="issue-card p-5 border-l-yellow-500">265 <div class="flex justify-between">266 <h3 class="font-semibold">Bitmap Memory Leak in ImageLoader</h3>267 <span class="bg-yellow-500/10 text-yellow-400 text-xs px-2 py-1 rounded">High</span>268 </div>269 <p class="text-gray-400 text-sm mt-2">Large bitmaps not properly recycled in ImageLoader class.</p>270 <div class="flex items-center mt-3 text-sm">271 <span class="bg-slate-700 px-2 py-1 rounded mr-2">Memory Leak</span>272 <span class="text-gray-500">com.example.app.utils.ImageLoader:128</span>273 </div>274 </div>275 276 <div class="issue-card p-5 border-l-blue-500">277 <div class="flex justify-between">278 <h3 class="font-semibold">ANR in Background Thread</h3>279 <span class="bg-blue-500/10 text-blue-400 text-xs px-2 py-1 rounded">Medium</span>280 </div>281 <p class="text-gray-400 text-sm mt-2">Network operation on main thread causing Application Not Responding.</p>282 <div class="flex items-center mt-3 text-sm">283 <span class="bg-slate-700 px-2 py-1 rounded mr-2">Performance</span>284 <span class="text-gray-500">com.example.app.MainActivity:75</span>285 </div>286 </div>287 </div>288 </div>289 290 <!-- Sample Analysis Result -->291 <div class="content-container p-6">292 <div class="flex justify-between items-center mb-6">293 <h2 class="text-xl font-semibold">Sample Analysis Result</h2>294 <div class="flex space-x-2">295 <button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded text-sm">Copy</button>296 <button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded text-sm">Export</button>297 </div>298 </div>299 300 <div class="code-block">301 <div class="font-mono text-sm text-gray-300">302 <div class="text-green-400">// Memory Leak Detection Result</div>303 <div class="mt-2 text-gray-300">Issue: Static Context Reference</div>304 <div class="text-gray-300">Location: com.example.app.LoginActivity:42</div>305 <div class="text-gray-300">Severity: Critical</div>306 <div class="mt-3 text-gray-300">Description:</div>307 <div class="text-gray-300 ml-4">Storing a static reference to context can prevent the entire activity from being garbage collected, leading to memory leaks.</div>308 <div class="mt-3 text-gray-300">Solution:</div>309 <div class="text-green-400 ml-4">1. Replace static context with WeakReference:</div>310 <div class="text-gray-300 ml-8">private static WeakReference<Context> contextRef;</div>311 <div class="text-green-400 ml-4">2. Clear reference in onDestroy():</div>312 <div class="text-gray-300 ml-8">@Override</div>313 <div class="text-gray-300 ml-8">protected void onDestroy() {</div>314 <div class="text-gray-300 ml-12">if (contextRef != null) contextRef.clear();</div>315 <div class="text-gray-300 ml-8">}</div>316 <div class="text-green-400 ml-4">3. Access context safely:</div>317 <div class="text-gray-300 ml-8">Context context = contextRef.get();</div>318 <div class="text-gray-300 ml-8">if (context != null) { /* use context */ }</div>319 </div>320 </div>321 </div>322 </div>323 </div>324 325 <script>326 // Initialize Feather Icons327 feather.replace();328 329 // Initialize Chart.js330 document.addEventListener('DOMContentLoaded', function() {331 const ctx = document.getElementById('issuesChart').getContext('2d');332 const issuesChart = new Chart(ctx, {333 type: 'line',334 data: {335 labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],336 datasets: [{337 label: 'Memory Leaks',338 data: [12, 19, 15, 17, 10, 8, 5],339 borderColor: '#8b5cf6',340 backgroundColor: 'rgba(139, 92, 246, 0.1)',341 borderWidth: 2,342 tension: 0.4,343 fill: true344 }, {345 label: 'Performance Issues',346 data: [8, 12, 10, 14, 9, 7, 6],347 borderColor: '#f59e0b',348 backgroundColor: 'rgba(245, 158, 11, 0.1)',349 borderWidth: 2,350 tension: 0.4,351 fill: true352 }, {353 label: 'Crashes',354 data: [5, 7, 9, 6, 4, 3, 2],355 borderColor: '#ef4444',356 backgroundColor: 'rgba(239, 68, 68, 0.1)',357 borderWidth: 2,358 tension: 0.4,359 fill: true360 }]361 },362 options: {363 responsive: true,364 maintainAspectRatio: false,365 plugins: {366 legend: {367 labels: {368 color: '#94a3b8'369 }370 }371 },372 scales: {373 y: {374 beginAtZero: true,375 grid: {376 color: 'rgba(148, 163, 184, 0.1)'377 },378 ticks: {379 color: '#94a3b8'380 }381 },382 x: {383 grid: {384 color: 'rgba(148, 163, 184, 0.1)'385 },386 ticks: {387 color: '#94a3b8'388 }389 }390 }391 }392 });393 });394 </script>395</body>396</html>397 