refactor(frontend): separate html from js

static/css/style.css

@@ -19,6 +19,7 @@
 /* Drive cards styling */
 .drive-card {
     transition: all 0.3s ease;
+    height: 100%;
 }
 
 .drive-card.available {

static/js/main.js

@@ -0,0 +1,61 @@
+/**
+ * Disk Checker - Main JavaScript
+ * Handles HTMX events and dynamic content rendering
+ */
+
+// Render drives after HTMX loads them
+function renderDrives(data) {
+    const container = document.getElementById('drives-content');
+    if (!container) return;
+    
+    container.innerHTML = '';
+
+    if (!data.drives || data.drives.length === 0) {
+        container.innerHTML = '<div class="col-12"><p class="text-muted">No drives found.</p></div>';
+        return;
+    }
+
+    data.drives.forEach(drive => {
+        const col = document.createElement('div');
+        col.className = 'col-md-4 mb-3';
+
+        const card = document.createElement('div');
+        card.className = `drive-card ${drive.mounted ? 'disabled' : 'available'}`;
+
+        card.innerHTML = `
+            <div class="card-body">
+                <h5 class="card-title">${drive.name}</h5>
+                <p class="card-text">
+                    <strong>Size:</strong> ${drive.size}<br>
+                    <strong>Model:</strong> ${drive.model || 'Unknown'}<br>
+                    ${drive.serial ? `<strong>Serial:</strong> ${drive.serial}<br>` : ''}
+                    ${drive.mount_point ? `<strong>Mounted at:</strong> ${drive.mount_point}<br>` : ''}
+                </p>
+                <div>
+                    ${drive.mounted
+                        ? '<span class="badge bg-secondary">Mounted - Unavailable</span>'
+                        : '<span class="badge bg-success">Available for Benchmark</span>'
+                    }
+                </div>
+            </div>
+        `;
+
+        col.appendChild(card);
+        container.appendChild(col);
+    });
+}
+
+// Listen for HTMX events
+document.addEventListener('htmx:afterRequest', function(evt) {
+    if (evt.detail.target.id === 'drives-content') {
+        renderDrives(JSON.parse(evt.detail.xhr.response));
+    }
+});
+
+// Optional: Listen for HTMX load event as fallback
+document.addEventListener('htmx:load', function(evt) {
+    if (evt.target.id === 'drives-content') {
+        // HTMX will load the content via hx-get
+        // The afterRequest event will handle rendering
+    }
+});