Enhance README.md with keyboard shortcuts, info button details, and status indicator examples

README.md

@@ -93,8 +93,46 @@ The service URL is built using this priority:
 
 <!-- Local service (uses page hostname) -->
 <service name="Portainer" proto="https" port="9443" logo="portainer.svg" />
+
+<!-- Service with status indicator -->
+<service name="Home Assistant" proto="http" port="8123" logo="homeassistant.svg" status="online" />
 ```
 
+## Keyboard Shortcuts
+
+- **`/`** - Focus the search bar (press from anywhere)
+- **Arrow Keys** - Navigate between service cards (Up/Down/Left/Right)
+- **Enter** - Open the selected service in a new tab
+- **Esc** - Clear the current selection
+
+## Info Button
+
+When a service has both a hostname and port configured, a small info button (ⓘ) appears in the bottom-right corner of the card. Click it to view connection details including:
+- Service name
+- Hostname
+- Port number
+- Protocol
+
+## Status Indicators
+
+Add optional status indicators to services by including a `status` attribute:
+
+```xml
+<!-- Green pulsing dot for online services -->
+<service name="Jellyfin" status="online" proto="http" port="8096" logo="jellyfin.svg" />
+
+<!-- Red dot for offline services -->
+<service name="Legacy App" status="offline" proto="http" port="8080" logo="app.svg" />
+
+<!-- Orange dot for services under maintenance -->
+<service name="Nextcloud" status="maintenance" host="cloud.example.com" logo="nextcloud.svg" />
+```
+
+Status colors:
+- **Green** (online) - Service is running normally, pulsing animation
+- **Red** (offline) - Service is not available
+- **Orange** (maintenance) - Service is under maintenance
+
 ## Icon Management
 
 ### Using Included Icons