Team Ai
Apppublic

Natxus/android-code-qa-system

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
dashboard.html397 linesDownload Raw Back to root
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&lt;Context&gt; 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