Let's dive into setting up a basic HTML template for our IoT Device Manager application. This will be the foundation for our user interface, and we'll build upon it in subsequent tasks. ### Step-by-Step Implementation #### 1. Create the HTML Template File First, let's create a basic HTML template using Thymeleaf, which is Spring Boot's default templating engine. Create a new file called `devices.html` in the `src/main/resources/templates` directory. ```html IoT Device Manager

IoT Device Manager

Device Name

Status

``` #### 2. Create CSS Styling Create a new CSS file called `styles.css` in the `src/main/resources/static/css` directory to style our template: ```css body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; } .container { max-width: 1200px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .devices-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .device-card { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; } .device-card:hover { transform: translateY(-2px); } .device-info { margin-bottom: 15px; } .device-info h2 { color: #333; margin-bottom: 5px; } .device-info p { color: #666; } ``` #### 3. Create JavaScript File Create a new JavaScript file called `app.js` in the `src/main/resources/static/js` directory. This will handle client-side interactions: ```javascript document.addEventListener('DOMContentLoaded', function() { console.log('IoT Device Manager application loaded'); // We'll add WebSocket connection logic here later }); ``` #### 4. Create a Thymeleaf Layout Fragment To make our template more maintainable, let's create a layout fragment. Create a new file called `layout.html` in the `src/main/resources/templates/fragments` directory: ```html IoT Device Manager

``` #### 5. Update the Main Template Now let's update our main `devices.html` template to use the layout fragment: ```html