dynamic overview

app.py

@@ -153,3 +153,9 @@ if __name__ == '__main__':
     status_thread = threading.Thread(target=update_status, daemon=True)
     status_thread.start()
     app.run(debug=True)
+
+
+@app.route('/')
+def home():
+    config = load_config()
+    return render_template('index.html', devices=config['devices'])

index.html

@@ -16,17 +16,21 @@
             <div class="metric-card">
                 <h2>Network Overview</h2>
                 <div id="network-health">
-                    <div class="device-status">
+                    {% for device in devices %}
+                    <div class="device-status" data-device-id="{{ device.device_id }}">
                         <span class="status-indicator"></span>
                         <div class="device-info">
-                            <span class="device-name">UniFi Dream Machine Pro</span>
-                            <span class="device-details">10.10.10.1</span>
+                            <span class="device-name">{{ device.name }}</span>
+                            <span class="device-details">{{ device.ip }}</span>
+                            <span class="device-type">{{ device.type }} ({{ device.connection_type }})</span>
                         </div>
                     </div>
-                    <!-- Repeat for other devices -->
+                    {% endfor %}
                 </div>
             </div>
         </div>
+
+    </div>
     <script src="{{ url_for('static', filename='app.js') }}"></script>
 </body>
 </html>