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
+    }
+});

templates/base.html

@@ -18,9 +18,9 @@
    
     <div class="container">
         {% block content %}{% endblock %}
-        {% block extra_js %}{% endblock %}
     </div>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
 </body>
 </html>

templates/index.html

@@ -43,51 +43,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
+<script src="/static/js/main.js"></script>
-    // HTMX event to render drives after loading
-    document.addEventListener('htmx:afterRequest', function (evt) {
-        if (evt.detail.target.id === 'drives-content') {
-            renderDrives(JSON.parse(evt.detail.xhr.response));
-        }
-    });
-
-    function renderDrives(data) {
-        const container = document.getElementById('drives-content');
-        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);
-        });
-    }
-</script>
 {% endblock %}