Move WLED config tips to footer, add Web UI link, move preview to calibration

- Move WLED Configuration tips from Add Device modal to page footer
- Add WLED Web UI link in footer (auto-populated with first device URL)
- Add WLED Web UI button (globe icon) to device card actions
- Move pixel preview button from device card to calibration modal footer
- Add en/ru i18n keys for new UI elements

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/app.js

@@ -452,6 +452,14 @@ async function loadDevices() {
 
         container.innerHTML = devicesWithState.map(device => createDeviceCard(device)).join('');
 
+        // Update footer WLED Web UI link with first device's URL
+        const webuiLink = document.querySelector('.wled-webui-link');
+        if (webuiLink && devicesWithState.length > 0 && devicesWithState[0].url) {
+            webuiLink.href = devicesWithState[0].url;
+            webuiLink.target = '_blank';
+            webuiLink.rel = 'noopener';
+        }
+
         // Attach event listeners
         devicesWithState.forEach(device => {
             attachDeviceListeners(device.id);
@@ -569,9 +577,11 @@ function createDeviceCard(device) {
                 <button class="btn btn-icon btn-secondary" onclick="showCalibration('${device.id}')" title="${t('device.button.calibrate')}">
                     📐
                 </button>
-                <button class="btn btn-icon btn-secondary" onclick="showPixelPreview('${device.id}')" title="${t('preview.button')}">
-                    👁️
-                </button>
+                ${device.url ? `
+                <a class="btn btn-icon btn-secondary" href="${device.url}" target="_blank" rel="noopener" title="${t('device.button.webui')}">
+                    🌐
+                </a>
+                ` : ''}
             </div>
         </div>
     `;

server/src/wled_controller/static/index.html

@@ -56,6 +56,14 @@
 
         <footer class="app-footer">
             <div class="footer-content">
+                <p class="footer-tip">
+                    <strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
+                    <a href="https://kno.wled.ge/" target="_blank" rel="noopener" data-i18n="devices.wled_link">official WLED app</a>
+                    <span data-i18n="devices.wled_note_or">or the built-in</span>
+                    <a href="#" class="wled-webui-link" data-i18n="devices.wled_webui_link">WLED Web UI</a>
+                    <span data-i18n="devices.wled_note_webui">(open your device's IP in a browser).</span>
+                    <span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
+                </p>
                 <p>
                     Created by <strong>Alexei Dolgolyov</strong>
                     • <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
@@ -148,6 +156,7 @@
                 <div id="calibration-error" class="error-message" style="display: none;"></div>
             </div>
             <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="showPixelPreview(document.getElementById('calibration-device-id').value)" data-i18n="preview.button" style="margin-right: auto;">Preview</button>
                 <button class="btn btn-secondary" onclick="closeCalibrationModal()" data-i18n="calibration.button.cancel">Cancel</button>
                 <button class="btn btn-primary" onclick="saveCalibration()" data-i18n="calibration.button.save">Save</button>
             </div>
@@ -257,11 +266,6 @@
                 <h2 data-i18n="devices.add">Add New Device</h2>
             </div>
             <div class="modal-body">
-                <div class="info-banner" style="margin-bottom: 16px; padding: 12px; background: rgba(33, 150, 243, 0.1); border-left: 4px solid #2196F3; border-radius: 4px;">
-                    <strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
-                    <a href="https://kno.wled.ge/" target="_blank" rel="noopener" style="color: #2196F3; text-decoration: underline;" data-i18n="devices.wled_link">official WLED app</a>.
-                    <span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
-                </div>
                 <form id="add-device-form">
                     <div class="form-group">
                         <label for="device-name" data-i18n="device.name">Device Name:</label>

server/src/wled_controller/static/locales/en.json

@@ -40,6 +40,9 @@
   "devices.wled_config": "WLED Configuration:",
   "devices.wled_note": "Configure your WLED device (effects, segments, color order, power limits, etc.) using the",
   "devices.wled_link": "official WLED app",
+  "devices.wled_note_or": "or the built-in",
+  "devices.wled_webui_link": "WLED Web UI",
+  "devices.wled_note_webui": "(open your device's IP in a browser).",
   "devices.wled_note2": "This controller sends pixel color data and controls brightness per device.",
   "device.name": "Device Name:",
   "device.name.placeholder": "Living Room TV",
@@ -54,6 +57,7 @@
   "device.button.settings": "Settings",
   "device.button.calibrate": "Calibrate",
   "device.button.remove": "Remove",
+  "device.button.webui": "Open WLED Web UI",
   "device.status.connected": "Connected",
   "device.status.disconnected": "Disconnected",
   "device.status.error": "Error",

server/src/wled_controller/static/locales/ru.json

@@ -40,6 +40,9 @@
   "devices.wled_config": "Конфигурация WLED:",
   "devices.wled_note": "Настройте ваше WLED устройство (эффекты, сегменты, порядок цветов, ограничения питания и т.д.) используя",
   "devices.wled_link": "официальное приложение WLED",
+  "devices.wled_note_or": "или встроенный",
+  "devices.wled_webui_link": "веб-интерфейс WLED",
+  "devices.wled_note_webui": "(откройте IP устройства в браузере).",
   "devices.wled_note2": "Этот контроллер отправляет данные о цвете пикселей и управляет яркостью для каждого устройства.",
   "device.name": "Имя Устройства:",
   "device.name.placeholder": "ТВ в Гостиной",
@@ -54,6 +57,7 @@
   "device.button.settings": "Настройки",
   "device.button.calibrate": "Калибровка",
   "device.button.remove": "Удалить",
+  "device.button.webui": "Открыть веб-интерфейс WLED",
   "device.status.connected": "Подключено",
   "device.status.disconnected": "Отключено",
   "device.status.error": "Ошибка",

server/src/wled_controller/static/style.css

@@ -794,6 +794,20 @@ input:-webkit-autofill:focus {
     margin: 0;
 }
 
+.footer-tip {
+    margin-bottom: 12px !important;
+    padding: 10px 16px;
+    background: rgba(33, 150, 243, 0.08);
+    border-radius: 6px;
+    font-size: 0.85rem;
+    display: inline-block;
+}
+
+.footer-tip a {
+    color: var(--info-color) !important;
+    text-decoration: underline;
+}
+
 .footer-content strong {
     color: var(--text-color);
 }