Add language and theme preferences

2026-06-07 17:54:20 +09:00
parent 4a02f7f354
commit 7af96612ab
5 changed files with 434 additions and 112 deletions
@@ -30,6 +30,8 @@
        pushDeviceList: $('#pushDeviceList'),
        pushHealthcheckBtn: $('#pushHealthcheckBtn'),
        rebootBtn: $('#rebootBtn'),
+        translateBtn: $('#translateBtn'),
+        themeBtn: $('#themeBtn'),
        customDialog: $('#customDialog'),
        customDialogTitle: $('#customDialogTitle'),
        customDialogMessage: $('#customDialogMessage'),
@@ -61,8 +63,287 @@
        wsReconnectTimer: null,
        wsReconnectDelay: 1000,
        pushDevicesLastRefresh: 0,
+        lang: 'en',
+        theme: 'dark',
    };

+    const storageKeys = {
+        lang: 'controlLang',
+        theme: 'controlTheme',
+    };
+
+    const messages = {
+        en: {
+            updated: 'Updated',
+            logout: 'Logout',
+            fanStatus: 'Fan Status',
+            cpuTemp: 'CPU Temp',
+            fanRpm: 'Fan RPM',
+            wifiStatus: 'WiFi Status',
+            clients24: '2.4G Clients',
+            clients5: '5G Clients',
+            systemStatus: 'System Status',
+            loadAvg: 'Load Avg',
+            activeUsers: 'Active Users',
+            sensorHistory: 'Sensor History',
+            temperature: 'Temperature',
+            rp1Temp: 'RP1 Temp',
+            fanEfficiency: 'Fan Efficiency',
+            cpuWatt: 'CPU Watt',
+            remaining: 'Remaining',
+            batteryVoltage: 'Battery Voltage',
+            wifiClients: 'WiFi Clients',
+            band: 'Band',
+            hostname: 'Hostname',
+            signal: 'Signal',
+            connected: 'Connected',
+            inactive: 'Inactive',
+            systemNotice: 'System Notice',
+            noticeHistory: 'Notice History',
+            noNoticeHistory: 'No system notice history.',
+            pushDevices: 'Push Devices',
+            healthCheck: 'Health Check',
+            pushStatusChecking: 'Push status checking...',
+            noPushDevices: 'No push devices.',
+            show: 'Show',
+            hide: 'Hide',
+            translateButton: 'Translate',
+            themeButton: 'Theme',
+            rebootButton: 'Reboot',
+            themeDark: 'Theme: Dark',
+            themeLight: 'Theme: Light',
+            langEn: 'Translate: EN',
+            langKo: 'Translate: KO',
+            dialogAlert: 'Alert',
+            dialogConfirm: 'Confirm',
+            dialogInput: 'Input',
+            dialogOk: 'OK',
+            dialogCancel: 'Cancel',
+            noWifiClients: 'No connected WiFi clients',
+            noProcessActivity: 'No process activity',
+            noCause: 'No candidate',
+            recordedReason: 'Recorded reason',
+            instantChange: 'instant change',
+            tempHigher: 'temperature above average',
+            tempLower: 'temperature below average',
+            rpmHigher: 'fan RPM above average',
+            rpmLower: 'fan RPM below average',
+            average: 'Average',
+            current: 'Current',
+            causeCandidate: 'Candidate',
+            pushSummary: ({ total, healthy, watch, stale, failed, pending }) => `Push devices: ${total} total / ${healthy} healthy / ${watch} watch / ${stale} stale / ${failed} failed / ${pending} pending`,
+            statusUnsupported: 'Push status: browser unsupported',
+            statusDenied: 'Push status: permission denied',
+            statusUngrant: 'Push status: permission not granted',
+            statusManualOff: 'Push status: manually disabled',
+            browserHas: 'browser registered',
+            browserMissing: 'browser missing',
+            serverHas: 'server registered',
+            serverMissing: 'server missing',
+            serverPending: 'server not checked',
+            pushStatus: 'Push status',
+            registeredRefresh: 'Registered refresh',
+            lastSendSuccess: 'Last send success',
+            lastReceived: 'Last received',
+            lastShown: 'Last shown',
+            lastClick: 'Last click',
+            failures: 'Failures',
+            unknownDevice: 'unknown device',
+            unnamed: 'Unnamed',
+            pendingReceive: 'Pending receive',
+            ago: 'ago',
+            healthSent: ({ sent, failed }) => `Health check sent ${sent} / failed ${failed}`,
+            healthFailed: 'Health check failed',
+            refreshFailed: 'refresh failed',
+            applyingFan: 'Applying fan policy...',
+            fanUpdated: 'Fan updated',
+            fanUpdateFailed: 'fan update failed',
+            dmesgUnavailable: 'dmesg log is not available yet.',
+            dmesgRefreshFailed: 'dmesg refresh failed',
+            rebootPrompt: 'Type reboot below to continue.',
+            rebootPhrase: 'reboot',
+            rebootTitle: 'System Reboot',
+            next: 'Next',
+            rebootCanceled: 'Reboot canceled',
+            rebootPhraseMismatch: 'Confirmation word does not match.',
+            adminConfirm: 'Admin Check',
+            passwordPrompt: 'Enter the administrator password again.',
+            rebootSending: 'Sending reboot command...',
+            rebootStarted: 'Reboot Started',
+            rebootStartedBody: 'Reboot command sent. The connection may drop shortly.',
+            rebootFailed: 'Reboot Failed',
+            pushDeviceNamePrompt: 'Enter a device name. Korean names require at least 2 Hangul characters.',
+            pushRegisterTitle: 'Push Register',
+            register: 'Register',
+            phone: 'Phone',
+            pushDeviceNameInvalid: 'Device name must contain at least 2 Hangul characters.',
+            autoRepair: 'Auto Repair',
+            pushDeletePrompt: 'Delete this browser Push subscription?',
+            pushDeleteTitle: 'Delete Push',
+            delete: 'Delete',
+            pushErrorTitle: 'Push Error',
+            wakeLockTitle: 'Prevent screen sleep',
+            wakeLockUnsupported: 'WakeLock is not supported by this browser.',
+            wakeLockErrorTitle: 'WakeLock Error',
+        },
+        ko: {
+            updated: '갱신',
+            logout: '로그아웃',
+            fanStatus: '팬 상태',
+            cpuTemp: 'CPU 온도',
+            fanRpm: '팬 RPM',
+            wifiStatus: 'WiFi 상태',
+            clients24: '2.4G 접속',
+            clients5: '5G 접속',
+            systemStatus: '시스템 상태',
+            loadAvg: '부하 평균',
+            activeUsers: '활성 사용자',
+            sensorHistory: '센서 이력',
+            temperature: '온도',
+            rp1Temp: 'RP1 온도',
+            fanEfficiency: '팬 효율',
+            cpuWatt: 'CPU 전력',
+            remaining: '잔여 시간',
+            batteryVoltage: '배터리 전압',
+            wifiClients: 'WiFi 클라이언트',
+            band: '대역',
+            hostname: '호스트명',
+            signal: '신호',
+            connected: '연결 시간',
+            inactive: '비활성',
+            systemNotice: '시스템 알림',
+            noticeHistory: '알림 이력',
+            noNoticeHistory: '시스템 알림 이력이 없습니다.',
+            pushDevices: 'Push 기기',
+            healthCheck: '상태 점검',
+            pushStatusChecking: 'Push 상태 확인 중...',
+            noPushDevices: 'Push 기기가 없습니다.',
+            show: '보기',
+            hide: '숨기기',
+            translateButton: '번역',
+            themeButton: '테마',
+            rebootButton: '재부팅',
+            themeDark: '테마: 다크',
+            themeLight: '테마: 라이트',
+            langEn: '번역: EN',
+            langKo: '번역: KO',
+            dialogAlert: '알림',
+            dialogConfirm: '확인',
+            dialogInput: '입력',
+            dialogOk: '확인',
+            dialogCancel: '취소',
+            noWifiClients: '연결된 WiFi 클라이언트 없음',
+            noProcessActivity: '프로세스 활동 없음',
+            noCause: '원인 후보 없음',
+            recordedReason: '기록된 이유',
+            instantChange: '순간 변화',
+            tempHigher: '온도 평균보다 상승',
+            tempLower: '온도 평균보다 하강',
+            rpmHigher: '팬RPM 평균보다 상승',
+            rpmLower: '팬RPM 평균보다 하강',
+            average: '평균',
+            current: '현재',
+            causeCandidate: '원인 후보',
+            pushSummary: ({ total, healthy, watch, stale, failed, pending }) => `Push devices: ${total} total / ${healthy} healthy / ${watch} watch / ${stale} stale / ${failed} failed / ${pending} pending`,
+            statusUnsupported: 'Push 상태: 브라우저 미지원',
+            statusDenied: 'Push 상태: 권한 꺼짐',
+            statusUngrant: 'Push 상태: 권한 미허용',
+            statusManualOff: 'Push 상태: 사용자가 직접 해제함',
+            browserHas: '브라우저에는 있음',
+            browserMissing: '브라우저에는 없음',
+            serverHas: '서버에는 있음',
+            serverMissing: '서버에는 없음',
+            serverPending: '서버 확인 전',
+            pushStatus: 'Push 상태',
+            registeredRefresh: '등록 갱신',
+            lastSendSuccess: '마지막 발송 성공',
+            lastReceived: '마지막 수신',
+            lastShown: '마지막 표시',
+            lastClick: '마지막 클릭',
+            failures: '실패',
+            unknownDevice: '알 수 없는 기기',
+            unnamed: '이름 없음',
+            pendingReceive: '수신 대기',
+            ago: '전',
+            healthSent: ({ sent, failed }) => `상태 점검 발송 ${sent} / 실패 ${failed}`,
+            healthFailed: '상태 점검 실패',
+            refreshFailed: '갱신 실패',
+            applyingFan: '팬 정책 적용 중...',
+            fanUpdated: '팬 갱신 완료',
+            fanUpdateFailed: '팬 갱신 실패',
+            dmesgUnavailable: 'dmesg 로그를 아직 사용할 수 없습니다.',
+            dmesgRefreshFailed: 'dmesg 갱신 실패',
+            rebootPrompt: '재부팅을 계속하려면 아래에 재부팅을 입력하세요.',
+            rebootPhrase: '재부팅',
+            rebootTitle: '시스템 재부팅',
+            next: '다음',
+            rebootCanceled: '재부팅 취소',
+            rebootPhraseMismatch: '확인 단어가 일치하지 않습니다.',
+            adminConfirm: '관리자 확인',
+            passwordPrompt: '관리자 암호를 다시 입력하세요.',
+            rebootSending: '재부팅 명령 전송 중...',
+            rebootStarted: '재부팅 시작',
+            rebootStartedBody: '재부팅 명령을 전송했습니다. 잠시 후 연결이 끊어질 수 있습니다.',
+            rebootFailed: '재부팅 실패',
+            pushDeviceNamePrompt: '등록할 기기 이름을 입력하세요. 한글 2글자 이상이어야 합니다.',
+            pushRegisterTitle: 'Push 등록',
+            register: '등록',
+            phone: '휴대폰',
+            pushDeviceNameInvalid: '기기 이름은 한글 2글자 이상이어야 합니다.',
+            autoRepair: '자동복구',
+            pushDeletePrompt: '현재 브라우저의 Push 구독을 삭제할까요?',
+            pushDeleteTitle: 'Push 삭제',
+            delete: '삭제',
+            pushErrorTitle: 'Push 오류',
+            wakeLockTitle: '화면 꺼짐 방지',
+            wakeLockUnsupported: '현재 브라우저에서 WakeLock을 지원하지 않습니다.',
+            wakeLockErrorTitle: 'WakeLock 오류',
+        },
+    };
+
+    function defaultLang() {
+        return String(navigator.language || '').toLowerCase().startsWith('ko') ? 'ko' : 'en';
+    }
+
+    function t(key, params = null) {
+        const value = messages[state.lang]?.[key] ?? messages.en[key] ?? key;
+        return typeof value === 'function' ? value(params || {}) : value;
+    }
+    window.controlT = t;
+
+    function applyTheme(theme) {
+        state.theme = theme === 'light' ? 'light' : 'dark';
+        localStorage.setItem(storageKeys.theme, state.theme);
+        document.documentElement.dataset.theme = state.theme;
+        const themeMeta = document.querySelector('meta[name="theme-color"]');
+        if (themeMeta) {
+            themeMeta.content = state.theme === 'light' ? '#f4f7fb' : '#0f1115';
+        }
+        els.themeBtn && (els.themeBtn.textContent = state.theme === 'dark' ? t('themeDark') : t('themeLight'));
+    }
+
+    function applyLang(lang) {
+        state.lang = lang === 'ko' ? 'ko' : 'en';
+        localStorage.setItem(storageKeys.lang, state.lang);
+        document.documentElement.lang = state.lang;
+        document.querySelectorAll('[data-i18n]').forEach(node => {
+            node.textContent = t(node.dataset.i18n);
+        });
+        els.translateBtn && (els.translateBtn.textContent = state.lang === 'ko' ? t('langKo') : t('langEn'));
+        els.themeBtn && (els.themeBtn.textContent = state.theme === 'dark' ? t('themeDark') : t('themeLight'));
+        els.rebootBtn && (els.rebootBtn.textContent = t('rebootButton'));
+        if (els.dmesgToggle) {
+            els.dmesgToggle.textContent = state.dmesgOpen ? t('hide') : t('show');
+        }
+    }
+
+    function initPreferences() {
+        state.lang = localStorage.getItem(storageKeys.lang) || defaultLang();
+        state.theme = localStorage.getItem(storageKeys.theme) || 'dark';
+        applyTheme(state.theme);
+        applyLang(state.lang);
+    }
+
    function markFanDirty() {
        state.fanDirty = true;
    }
@@ -170,10 +451,10 @@
                if (event.key === 'Enter' && (document.activeElement === input || !needsInput)) onOk();
            };

-            els.customDialogTitle.textContent = options.title || '확인';
+            els.customDialogTitle.textContent = options.title || t('dialogConfirm');
            els.customDialogMessage.textContent = options.message || '';
-            ok.textContent = options.okText || '확인';
-            cancel.textContent = options.cancelText || '취소';
+            ok.textContent = options.okText || t('dialogOk');
+            cancel.textContent = options.cancelText || t('dialogCancel');
            ok.classList.toggle('red', options.danger === true);
            cancel.hidden = mode === 'alert';
            input.hidden = !needsInput;
@@ -195,17 +476,17 @@

    window.customAlert = (message, options = {}) => customDialog(Object.assign({
        mode: 'alert',
-        title: '알림',
+        title: t('dialogAlert'),
        message,
    }, options));
    window.customConfirm = (message, options = {}) => customDialog(Object.assign({
        mode: 'confirm',
-        title: '확인',
+        title: t('dialogConfirm'),
        message,
    }, options));
    window.customPrompt = (message, options = {}) => customDialog(Object.assign({
        mode: 'prompt',
-        title: '입력',
+        title: t('dialogInput'),
        message,
    }, options));

@@ -425,7 +706,7 @@

    function timeAgo(seconds) {
        const formatted = formatDhms(seconds);
-        return formatted ? `${formatted} ago` : '-';
+        return formatted ? `${formatted} ${t('ago')}` : '-';
    }

    function renderWifi(data) {
@@ -445,7 +726,7 @@
                    ${td(row.inactive_time)}
                </tr>
            `).join('')
-            : '<tr><td colspan="9">연결된 WiFi 클라이언트 없음</td></tr>';
+            : `<tr><td colspan="9">${escapeHtml(t('noWifiClients'))}</td></tr>`;
    }

    function renderSystemStatus(data) {
@@ -491,7 +772,7 @@
                    </tr>
                `;
            }).join('')
-            : '<tr><td colspan="4">No process activity</td></tr>';
+            : `<tr><td colspan="4">${escapeHtml(t('noProcessActivity'))}</td></tr>`;
    }

    function shortProcessName(p) {
@@ -556,7 +837,7 @@
            parts.push(`RAM ${Number(mem.mem_percent || 0).toFixed(1)}% ${shortProcessName(mem)}`);
        }

-        return parts.length ? parts.join(' / ') : '원인 후보 없음';
+        return parts.length ? parts.join(' / ') : t('noCause');
    }

    function signedCompact(value, digits = 0, suffix = '') {
@@ -590,20 +871,20 @@
        const m = noticeMetrics(row);
        const reasons = [];

-        if (Math.abs(m.tempDelta) >= 3) reasons.push(`온도 평균보다 ${m.tempDelta >= 0 ? '상승' : '하강'}`);
-        if (Math.abs(m.rpmDelta) >= 1000) reasons.push(`팬RPM 평균보다 ${m.rpmDelta >= 0 ? '상승' : '하강'}`);
+        if (Math.abs(m.tempDelta) >= 3) reasons.push(t(m.tempDelta >= 0 ? 'tempHigher' : 'tempLower'));
+        if (Math.abs(m.rpmDelta) >= 1000) reasons.push(t(m.rpmDelta >= 0 ? 'rpmHigher' : 'rpmLower'));

-        return `기록된 이유: ${reasons.length ? reasons.join(', ') : '순간 변화'}`;
+        return `${t('recordedReason')}: ${reasons.length ? reasons.join(', ') : t('instantChange')}`;
    }

    function noticePreviousText(row) {
        const m = noticeMetrics(row);

-        return `평균: ${m.avgTemp.toFixed(1)}°C / ${Math.round(m.avgRpm).toLocaleString()} RPM / PWM ${Math.round(m.avgPwm)}`;
+        return `${t('average')}: ${m.avgTemp.toFixed(1)}°C / ${Math.round(m.avgRpm).toLocaleString()} RPM / PWM ${Math.round(m.avgPwm)}`;
    }

    function noticeCurrentText(row) {
-        return `현재: ${Number(row.current_temp || 0).toFixed(1)}°C / ${Number(row.current_rpm || 0).toLocaleString()} RPM / PWM ${Number(row.current_pwm || 0).toFixed(0)}`;
+        return `${t('current')}: ${Number(row.current_temp || 0).toFixed(1)}°C / ${Number(row.current_rpm || 0).toLocaleString()} RPM / PWM ${Number(row.current_pwm || 0).toFixed(0)}`;
    }

    function renderSpikeHistory(rows = []) {
@@ -619,11 +900,11 @@
                        <span>${escapeHtml(noticeChangeText(row))}</span>
                        <span>${escapeHtml(noticePreviousText(row))}</span>
                        <span>${escapeHtml(noticeCurrentText(row))}</span>
-                        ${processText === '원인 후보 없음' ? '' : `<span>원인 후보: ${escapeHtml(processText)}</span>`}
+                        ${processText === t('noCause') ? '' : `<span>${escapeHtml(t('causeCandidate'))}: ${escapeHtml(processText)}</span>`}
                    </div>
                `;
            }).join('')
-            : '<div class="spike-log-empty">No system notice history.</div>';
+            : `<div class="spike-log-empty">${escapeHtml(t('noNoticeHistory'))}</div>`;
    }

    function renderPushDevices(devices = [], summary = null) {
@@ -636,32 +917,32 @@
            const stale = Number(summary.stale || 0);
            const failed = Number(summary.failed || 0);
            const pending = Number(summary.pending || 0);
-            els.pushStatus.textContent = `Push devices: ${total} total / ${healthy} healthy / ${watch} watch / ${stale} stale / ${failed} failed / ${pending} pending`;
+            els.pushStatus.textContent = t('pushSummary', { total, healthy, watch, stale, failed, pending });
        }

        els.pushDeviceList.innerHTML = devices.length
            ? devices.map(device => `
                <div class="push-device-row ${escapeHtml(device.health_status || 'pending')}">
                    <div class="push-device-main">
-                        <strong>${escapeHtml(device.device_name || '이름 없음')}</strong>
-                        <span class="push-device-badge ${escapeHtml(device.health_status || 'pending')}">${escapeHtml(device.health_text || '수신 대기')}</span>
+                        <strong>${escapeHtml(device.device_name || t('unnamed'))}</strong>
+                        <span class="push-device-badge ${escapeHtml(device.health_status || 'pending')}">${escapeHtml(device.health_text || t('pendingReceive'))}</span>
                        <span>Host: ${escapeHtml(device.host || 'unknown')}</span>
                        <span>IP: ${escapeHtml(device.actor_ip || '-')}</span>
                        <span>Created: ${escapeHtml(device.created_at || '-')}</span>
-                        <span>Registered refresh: ${escapeHtml(device.last_seen_at || '-')} (${escapeHtml(timeAgo(device.last_seen_seconds))})</span>
-                        <span>Last send success: ${escapeHtml(device.last_send_success_at || '-')} (${escapeHtml(timeAgo(device.last_send_success_seconds))})</span>
-                        <span>Last received: ${escapeHtml(device.last_received_at || '-')} (${escapeHtml(timeAgo(device.last_received_seconds))})</span>
-                        <span>Last shown: ${escapeHtml(device.last_notification_at || '-')} (${escapeHtml(timeAgo(device.last_notification_seconds))})</span>
-                        <span>Last click: ${escapeHtml(device.last_click_at || '-')}</span>
-                        <span>Failures: ${Number(device.failure_count || 0).toLocaleString()}${device.last_failure_reason ? ` / ${escapeHtml(device.last_failure_reason)}` : ''}</span>
+                        <span>${escapeHtml(t('registeredRefresh'))}: ${escapeHtml(device.last_seen_at || '-')} (${escapeHtml(timeAgo(device.last_seen_seconds))})</span>
+                        <span>${escapeHtml(t('lastSendSuccess'))}: ${escapeHtml(device.last_send_success_at || '-')} (${escapeHtml(timeAgo(device.last_send_success_seconds))})</span>
+                        <span>${escapeHtml(t('lastReceived'))}: ${escapeHtml(device.last_received_at || '-')} (${escapeHtml(timeAgo(device.last_received_seconds))})</span>
+                        <span>${escapeHtml(t('lastShown'))}: ${escapeHtml(device.last_notification_at || '-')} (${escapeHtml(timeAgo(device.last_notification_seconds))})</span>
+                        <span>${escapeHtml(t('lastClick'))}: ${escapeHtml(device.last_click_at || '-')}</span>
+                        <span>${escapeHtml(t('failures'))}: ${Number(device.failure_count || 0).toLocaleString()}${device.last_failure_reason ? ` / ${escapeHtml(device.last_failure_reason)}` : ''}</span>
                        <span>Encoding: ${escapeHtml(device.content_encoding || '-')}</span>
                        <span>Hash: ${escapeHtml(device.hash || '-')}</span>
                        <span>Endpoint: ${escapeHtml(device.endpoint || '-')}</span>
-                        <span>UA: ${escapeHtml(device.user_agent || 'unknown device')}</span>
+                        <span>UA: ${escapeHtml(device.user_agent || t('unknownDevice'))}</span>
                    </div>
                </div>
            `).join('')
-            : '<div class="spike-log-empty">No push devices.</div>';
+            : `<div class="spike-log-empty">${escapeHtml(t('noPushDevices'))}</div>`;
    }

    function renderPushStatus(detail = {}) {
@@ -676,19 +957,19 @@

        let text = '';
        if (!supported) {
-            text = 'Push 상태: 브라우저 미지원';
+            text = t('statusUnsupported');
        } else if (permission === 'denied') {
-            text = 'Push 상태: 권한 꺼짐';
+            text = t('statusDenied');
        } else if (permission !== 'granted') {
-            text = 'Push 상태: 권한 미허용';
+            text = t('statusUngrant');
        } else if (manualDisabled) {
-            text = 'Push 상태: 사용자가 직접 해제함';
+            text = t('statusManualOff');
        } else {
-            const browserText = hasBrowserSubscription ? '브라우저에는 있음' : '브라우저에는 없음';
+            const browserText = hasBrowserSubscription ? t('browserHas') : t('browserMissing');
            const serverText = serverChecked
-                ? (hasServerSubscription ? '서버에는 있음' : '서버에는 없음')
-                : '서버 확인 전';
-            text = `Push 상태: ${browserText} / ${serverText}`;
+                ? (hasServerSubscription ? t('serverHas') : t('serverMissing'))
+                : t('serverPending');
+            text = `${t('pushStatus')}: ${browserText} / ${serverText}`;
        }

        els.pushStatus.textContent = text;
@@ -716,9 +997,9 @@
            const data = await api('send_push_healthcheck', {});
            renderPushDevices(data.devices || [], data.summary || null);
            const result = data.result || {};
-            notice(`Health check sent ${Number(result.sent || 0)} / failed ${Number(result.failed || 0)}`, result.failed ? 'error' : 'success');
+            notice(t('healthSent', { sent: Number(result.sent || 0), failed: Number(result.failed || 0) }), result.failed ? 'error' : 'success');
        } catch (e) {
-            notice(e.message || 'Health check failed', 'error');
+            notice(e.message || t('healthFailed'), 'error');
        } finally {
            els.pushHealthcheckBtn.disabled = false;
        }
@@ -1052,7 +1333,7 @@
        if (!els.dmesgOutput || !els.dmesgMeta) return;

        if (!data?.available) {
-            els.dmesgOutput.textContent = data?.message || 'dmesg log is not available yet.';
+            els.dmesgOutput.textContent = data?.message || t('dmesgUnavailable');
            els.dmesgMeta.textContent = '/tmp/dmesg.log unavailable';
            return;
        }
@@ -1078,7 +1359,7 @@
        } catch (e) {
            console.error(e);
            if (els.dmesgOutput) {
-                els.dmesgOutput.textContent = e.message || 'dmesg refresh failed';
+                els.dmesgOutput.textContent = e.message || t('dmesgRefreshFailed');
            }
        }
    }
@@ -1101,7 +1382,7 @@
            els.dmesgOutput.hidden = !open;
        }
        if (els.dmesgToggle) {
-            els.dmesgToggle.textContent = open ? 'Hide' : 'Show';
+            els.dmesgToggle.textContent = open ? t('hide') : t('show');
        }

        stopDmesgFallback();
@@ -1121,7 +1402,7 @@
            render(await api('status'));
        } catch (e) {
            console.error(e);
-            notice(e.message || 'refresh failed', 'error');
+            notice(e.message || t('refreshFailed'), 'error');
        } finally {
            state.loading = false;
        }
@@ -1159,7 +1440,7 @@

        try {
            state.fanApplying = true;
-            if (!quiet) notice('Applying fan policy...', 'info');
+            if (!quiet) notice(t('applyingFan'), 'info');
            const data = await api('fan', {
                mode,
                pwm,
@@ -1167,10 +1448,10 @@
            state.fanDirty = false;
            state.fanApplying = false;
            render(data);
-            if (!quiet) notice('Fan updated', 'success');
+            if (!quiet) notice(t('fanUpdated'), 'success');
        } catch (e) {
            console.error(e);
-            notice(e.message || 'fan update failed', 'error');
+            notice(e.message || t('fanUpdateFailed'), 'error');
        } finally {
            state.fanApplying = false;
            const pending = state.fanApplyPending;
@@ -1180,26 +1461,26 @@
    }

    async function requestReboot() {
-        const phrase = await window.customPrompt('재부팅을 계속하려면 아래에 재부팅을 입력하세요.', {
-            title: '시스템 재부팅',
-            okText: '다음',
+        const phrase = await window.customPrompt(t('rebootPrompt'), {
+            title: t('rebootTitle'),
+            okText: t('next'),
            danger: true,
-            placeholder: '재부팅',
+            placeholder: t('rebootPhrase'),
            autocomplete: 'off',
        });

        if (phrase === null) return;
-        if (String(phrase).trim() !== '재부팅') {
-            await window.customAlert('확인 단어가 일치하지 않습니다.', {
-                title: '재부팅 취소',
+        if (String(phrase).trim() !== t('rebootPhrase')) {
+            await window.customAlert(t('rebootPhraseMismatch'), {
+                title: t('rebootCanceled'),
                danger: true,
            });
            return;
        }

-        const password = await window.customPrompt('관리자 암호를 다시 입력하세요.', {
-            title: '관리자 확인',
-            okText: '재부팅',
+        const password = await window.customPrompt(t('passwordPrompt'), {
+            title: t('adminConfirm'),
+            okText: t('rebootButton'),
            danger: true,
            inputType: 'password',
            autocomplete: 'current-password',
@@ -1209,20 +1490,20 @@

        try {
            els.rebootBtn.disabled = true;
-            notice('Reboot command sending...', 'info');
+            notice(t('rebootSending'), 'info');
            await api('reboot', {
                phrase: '재부팅',
                password,
            });
-            await window.customAlert('재부팅 명령을 전송했습니다. 잠시 후 연결이 끊어질 수 있습니다.', {
-                title: '재부팅 시작',
-                okText: '확인',
+            await window.customAlert(t('rebootStartedBody'), {
+                title: t('rebootStarted'),
+                okText: t('dialogOk'),
            });
        } catch (e) {
            console.error(e);
            els.rebootBtn.disabled = false;
            await window.customAlert(e.message || 'reboot failed', {
-                title: '재부팅 실패',
+                title: t('rebootFailed'),
                danger: true,
            });
        }
@@ -1254,6 +1535,14 @@
    els.rebootBtn?.addEventListener('click', () => {
        requestReboot();
    });
+    els.translateBtn?.addEventListener('click', () => {
+        applyLang(state.lang === 'ko' ? 'en' : 'ko');
+        refreshPushDevices(true);
+    });
+    els.themeBtn?.addEventListener('click', () => {
+        applyTheme(state.theme === 'dark' ? 'light' : 'dark');
+        refreshStatus();
+    });
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            if (!sendWs({ type: 'status_refresh' })) {
@@ -1265,6 +1554,7 @@
        }
    });

+    initPreferences();
    connectControlSocket();
    startStatusFallback();
 })();
@@ -7,6 +7,10 @@
    let wakeLock = null;
    let wanted = false;

+    function tr(key, fallback) {
+        return typeof window.controlT === 'function' ? window.controlT(key) : fallback;
+    }
+
    function supported() {
        return 'wakeLock' in navigator;
    }
@@ -20,7 +24,7 @@
        button.disabled = !supported();
        button.classList.toggle('wake-active', isActive);
        button.textContent = 'WakeLock';
-        button.title = supported() ? '화면 꺼짐 방지' : '현재 브라우저에서 WakeLock을 지원하지 않습니다.';
+        button.title = supported() ? tr('wakeLockTitle', 'Prevent screen sleep') : tr('wakeLockUnsupported', 'WakeLock is not supported by this browser.');
    }

    async function requestWakeLock() {
@@ -57,7 +61,7 @@
            wakeLock = null;
            const alertFn = window.customAlert || (() => Promise.resolve());
            alertFn(error.message || 'WakeLock failed', {
-                title: 'WakeLock 오류',
+                title: tr('wakeLockErrorTitle', 'WakeLock Error'),
                danger: true,
            });
            render();