Task Manager - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task Manager</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #e3e6e8; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; height: 100vh; } .task-manager { width: 80%; max-width: 900px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .task-manager-header { background: #0078d7; color: #fff; padding: 15px; display: flex; justify-content: space-between; align-items: center; } .task-manager-header h1 { margin: 0; font-size: 1.2em; } .task-manager-header .actions { display: flex; align-items: center; } .task-manager-header .actions i { margin: 0 10px; cursor: pointer; } .task-manager-body { flex: 1; padding: 20px; display: flex; flex-direction: column; } .task-manager-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .task-manager-table th, .task-manager-table td { padding: 10px; border: 1px solid #d0d0d0; } .task-manager-table th { background: #f1f1f1; } .task-manager-table tbody tr:hover { background: #f1f1f1; } .task-manager-footer { padding: 15px; background: #f7f7f7; border-top: 1px solid #d0d0d0; text-align: right; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="task-manager"> <div class="task-manager-header"> <h1>Task Manager</h1> <div class="actions"> <i class="fas fa-plus"></i> <i class="fas fa-sync-alt"></i> <i class="fas fa-cog"></i> <i class="fas fa-times"></i> </div> </div> <div class="task-manager-body"> <table class="task-manager-table"> <thead> <tr> <th>Process</th> <th>CPU</th> <th>Memory</th> <th>Disk</th> <th>Network</th> </tr> </thead> <tbody> <tr> <td>Process 1</td> <td>10%</td> <td>200 MB</td> <td>5 MB/s</td> <td>1 MB/s</td> </tr> <tr> <td>Process 2</td> <td>20%</td> <td>300 MB</td> <td>10 MB/s</td> <td>2 MB/s</td> </tr> <tr> <td>Process 3</td> <td>30%</td> <td>400 MB</td> <td>15 MB/s</td> <td>3 MB/s</td> </tr> </tbody> </table> </div> <div class="task-manager-footer"> <p>Windows Task Manager Footer</p> </div> </div> </body> </html>