Improve Web UI with footer, icon buttons, and better modals

- Add footer with author info (name, email, git repository link)
- Replace device action buttons with icons to save space:
  - Start/Stop: ▶️/⏹️, Settings: ⚙️, Calibrate: 📐, Remove: 🗑️
  - Added hover tooltips with translated text
  - Added btn-icon CSS class for compact styling
- Replace native browser confirm() with custom modal dialog:
  - Matches app theme and supports translations
  - Used for logout and device removal confirmations
  - Added confirm.title, confirm.yes, confirm.no translations
- Disable background scrolling when modals are open:
  - Added modal-open class to body when any modal opens
  - Prevents page scroll behind modals for better UX
  - Applied to all modals: login, settings, calibration, confirmation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

server/src/wled_controller/static/app.js

@@ -464,22 +464,22 @@ function createDeviceCard(device) {
             </div>
             <div class="card-actions">
                 ${isProcessing ? `
-                    <button class="btn btn-danger" onclick="stopProcessing('${device.id}')">
+                    <button class="btn btn-icon btn-danger" onclick="stopProcessing('${device.id}')" title="${t('device.button.stop')}">
-                        ${t('device.button.stop')}
+                        ⏹️
                     </button>
                 ` : `
-                    <button class="btn btn-primary" onclick="startProcessing('${device.id}')">
+                    <button class="btn btn-icon btn-primary" onclick="startProcessing('${device.id}')" title="${t('device.button.start')}">
-                        ${t('device.button.start')}
+                        ▶️
                     </button>
                 `}
-                <button class="btn btn-secondary" onclick="showSettings('${device.id}')">
+                <button class="btn btn-icon btn-secondary" onclick="showSettings('${device.id}')" title="${t('device.button.settings')}">
-                    ${t('device.button.settings')}
+                    ⚙️
                 </button>
-                <button class="btn btn-secondary" onclick="showCalibration('${device.id}')">
+                <button class="btn btn-icon btn-secondary" onclick="showCalibration('${device.id}')" title="${t('device.button.calibrate')}">
-                    ${t('device.button.calibrate')}
+                    📐
                 </button>
-                <button class="btn btn-danger" onclick="removeDevice('${device.id}')">
+                <button class="btn btn-icon btn-danger" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">
-                    ${t('device.button.remove')}
+                    🗑️
                 </button>
             </div>
         </div>
@@ -542,7 +542,8 @@ async function stopProcessing(deviceId) {
 }
 
 async function removeDevice(deviceId) {
-    if (!confirm('Are you sure you want to remove this device?')) {
+    const confirmed = await showConfirm(t('device.remove.confirm'));
+    if (!confirmed) {
         return;
     }
 
@@ -603,6 +604,7 @@ async function showSettings(deviceId) {
         // Show modal
         const modal = document.getElementById('device-settings-modal');
         modal.style.display = 'flex';
+        document.body.classList.add('modal-open');
 
         // Focus first input
         setTimeout(() => {
@@ -620,6 +622,7 @@ function closeDeviceSettingsModal() {
     const error = document.getElementById('settings-error');
     modal.style.display = 'none';
     error.style.display = 'none';
+    document.body.classList.remove('modal-open');
 }
 
 async function saveDeviceSettings() {
@@ -742,6 +745,40 @@ function showToast(message, type = 'info') {
     }, 3000);
 }
 
+// Confirmation modal
+let confirmResolve = null;
+
+function showConfirm(message, title = null) {
+    return new Promise((resolve) => {
+        confirmResolve = resolve;
+
+        const modal = document.getElementById('confirm-modal');
+        const titleEl = document.getElementById('confirm-title');
+        const messageEl = document.getElementById('confirm-message');
+        const yesBtn = document.getElementById('confirm-yes-btn');
+        const noBtn = document.getElementById('confirm-no-btn');
+
+        titleEl.textContent = title || t('confirm.title');
+        messageEl.textContent = message;
+        yesBtn.textContent = t('confirm.yes');
+        noBtn.textContent = t('confirm.no');
+
+        modal.style.display = 'flex';
+        document.body.classList.add('modal-open');
+    });
+}
+
+function closeConfirmModal(result) {
+    const modal = document.getElementById('confirm-modal');
+    modal.style.display = 'none';
+    document.body.classList.remove('modal-open');
+
+    if (confirmResolve) {
+        confirmResolve(result);
+        confirmResolve = null;
+    }
+}
+
 // Calibration functions
 async function showCalibration(deviceId) {
     try {
@@ -788,6 +825,7 @@ async function showCalibration(deviceId) {
         // Show modal
         const modal = document.getElementById('calibration-modal');
         modal.style.display = 'flex';
+        document.body.classList.add('modal-open');
 
     } catch (error) {
         console.error('Failed to load calibration:', error);
@@ -800,6 +838,7 @@ function closeCalibrationModal() {
     const error = document.getElementById('calibration-error');
     modal.style.display = 'none';
     error.style.display = 'none';
+    document.body.classList.remove('modal-open');
 }
 
 function updateCalibrationPreview() {

server/src/wled_controller/static/index.html

@@ -86,6 +86,16 @@
                 <button type="submit" class="btn btn-primary" data-i18n="device.button.add">Add Device</button>
             </form>
         </section>
+
+        <footer class="app-footer">
+            <div class="footer-content">
+                <p>
+                    Created by <strong>Alexei Dolgolyov</strong>
+                    • <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
+                    • <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/wled-screen-controller-mixed" target="_blank" rel="noopener">Source Code</a>
+                </p>
+            </div>
+        </footer>
     </div>
 
     <div id="toast" class="toast"></div>
@@ -285,6 +295,22 @@
         </div>
     </div>
 
+    <!-- Confirmation Modal -->
+    <div id="confirm-modal" class="modal">
+        <div class="modal-content" style="max-width: 450px;">
+            <div class="modal-header">
+                <h2 id="confirm-title">Confirm Action</h2>
+            </div>
+            <div class="modal-body">
+                <p id="confirm-message" class="modal-description"></p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="confirm-no-btn" onclick="closeConfirmModal(false)">No</button>
+                <button class="btn btn-danger" id="confirm-yes-btn" onclick="closeConfirmModal(true)">Yes</button>
+            </div>
+        </div>
+    </div>
+
     <script src="/static/app.js"></script>
     <script>
         // Initialize theme
@@ -338,17 +364,20 @@
             document.getElementById('modal-cancel-btn').style.display = 'inline-block';
         }
 
-        function logout() {
+        async function logout() {
-            if (confirm(t('auth.logout.confirm'))) {
+            const confirmed = await showConfirm(t('auth.logout.confirm'));
-                localStorage.removeItem('wled_api_key');
+            if (!confirmed) {
-                apiKey = null;
+                return;
-                updateAuthUI();
-                showToast(t('auth.logout.success'), 'info');
-
-                // Clear the UI
-                document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
-                document.getElementById('displays-list').innerHTML = `<div class="loading">${t('auth.please_login')} displays</div>`;
             }
+
+            localStorage.removeItem('wled_api_key');
+            apiKey = null;
+            updateAuthUI();
+            showToast(t('auth.logout.success'), 'info');
+
+            // Clear the UI
+            document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
+            document.getElementById('displays-list').innerHTML = `<div class="loading">${t('auth.please_login')} displays</div>`;
         }
 
         // Initialize on load
@@ -382,6 +411,7 @@
             input.placeholder = 'Enter your API key...';
             error.style.display = 'none';
             modal.style.display = 'flex';
+            document.body.classList.add('modal-open');
 
             // Hide cancel button if this is required login (no existing session)
             cancelBtn.style.display = hideCancel ? 'none' : 'inline-block';
@@ -392,6 +422,7 @@
         function closeApiKeyModal() {
             const modal = document.getElementById('api-key-modal');
             modal.style.display = 'none';
+            document.body.classList.remove('modal-open');
         }
 
         function submitApiKey() {

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

@@ -112,5 +112,8 @@
   "server.offline": "Server offline",
   "error.unauthorized": "Unauthorized - please login",
   "error.network": "Network error",
-  "error.unknown": "An error occurred"
+  "error.unknown": "An error occurred",
+  "confirm.title": "Confirm Action",
+  "confirm.yes": "Yes",
+  "confirm.no": "No"
 }

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

@@ -112,5 +112,8 @@
   "server.offline": "Сервер офлайн",
   "error.unauthorized": "Не авторизован - пожалуйста, войдите",
   "error.network": "Сетевая ошибка",
-  "error.unknown": "Произошла ошибка"
+  "error.unknown": "Произошла ошибка",
+  "confirm.title": "Подтверждение Действия",
+  "confirm.yes": "Да",
+  "confirm.no": "Нет"
 }

server/src/wled_controller/static/style.css

@@ -44,6 +44,10 @@ body {
     line-height: 1.6;
 }
 
+body.modal-open {
+    overflow: hidden;
+}
+
 .container {
     max-width: 1200px;
     margin: 0 auto;
@@ -218,6 +222,18 @@ section {
     color: var(--text-color);
 }
 
+.btn-icon {
+    min-width: auto;
+    padding: 8px 12px;
+    font-size: 1.2rem;
+    flex: 0 0 auto;
+}
+
+.btn-icon:hover {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
 .display-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
@@ -620,6 +636,38 @@ input:-webkit-autofill:focus {
     transform: scale(1.1);
 }
 
+/* Footer */
+.app-footer {
+    margin-top: 60px;
+    padding: 30px 0;
+    border-top: 1px solid var(--border-color);
+    text-align: center;
+}
+
+.footer-content {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.footer-content p {
+    margin: 0;
+}
+
+.footer-content strong {
+    color: var(--text-color);
+}
+
+.footer-content a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: opacity 0.2s;
+}
+
+.footer-content a:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
 @media (max-width: 768px) {
     .displays-grid,
     .devices-grid {