mod: localized English version of README and UI texts, enhanced accessibility and internationalization features

hypn0/templates/_error/413.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="ru">
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>413 — Перегрузка сенсорных каналов | HypnoSVG</title>
-  <meta name="description" content="Ошибка 413: Загружаемый файл превышает допустимый размер ментального буфера HypnoSVG." />
+  <title>413 — Sensory Channel Overload | HypnoSVG</title>
+  <meta name="description" content="Error 413: Payload too large for HypnoSVG perception matrix. Compress the image before neural transmission." />
   <meta name="robots" content="noindex, follow" />
   <link rel="icon" type="image/svg+xml" href="/media/_error/favicon.svg" />
   <link rel="shortcut icon" href="/media/_error/favicon.ico" />
@@ -353,10 +353,10 @@
 <body>
   <header>
     <div class="header-inner">
-      <a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
+      <a href="/" class="logo-link" title="HypnoSVG (hypn0) — Home">
         <img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
       </a>
-      <button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
+      <button type="button" class="theme-toggle" id="theme-btn" aria-label="Toggle theme" title="Toggle theme">
         <span id="theme-icon">●</span>
       </button>
     </div>
@@ -368,40 +368,40 @@
         <img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="413 Payload Too Large Slug" />
       </div>
 
-      <div class="error-code-badge">ПРЕВЫШЕН ЛИМИТ // КОД&nbsp;413</div>
+      <div class="error-code-badge">LIMIT EXCEEDED // CODE&nbsp;413</div>
 
-      <h1 class="error-title">Перегрузка сенсорных каналов</h1>
+      <h1 class="error-title">Sensory Channel Saturation</h1>
 
       <p class="error-desc">
-        Загружаемое изображение оказалось слишком массивным для&nbsp;восприятия ментальной матрицей. Сервер перцепций отказался поглощать такой объём&nbsp;байтов.
+        The uploaded image is far too dense for the mental matrix to ingest. The perceptual server refuses to swallow this monstrous volume of raw raster bytes.
       </p>
 
       <div class="hypno-quote">
-        <big>Справка бюрократа 24-го уровня:</big><br/>&nbsp;<br/>
-        <span style="margin-left: -0.49em;">«</span><em>Попытка скормить гигабайты растра хрупкому SVG-генератору расценивается как&nbsp;диверсия. Уменьшите разрешение или сожмите файл перед&nbsp;повторной загрузкой в&nbsp;ментальную&nbsp;матрицу.</em>»
+        <big>Grade 24 Bureaucrat Notice:</big><br/>&nbsp;<br/>
+        <span style="margin-left: -0.49em;">“</span><em>Shoving gigabytes of raw pixels down a delicate SVG generator&rsquo;s throat is classified as psychic sabotage. Downscale or compress the file before feeding the matrix.</em>”
       </div>
 
       <div class="actions-box">
         <div class="btn-group">
           <button type="button" class="btn btn-primary" id="return-btn">
-            <span>● Сжать восприятие и&nbsp;вернуться</span>
+            <span>● Compress Perception &amp;&nbsp;Return</span>
           </button>
           <button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
-            <span>← На&nbsp;шаг назад</span>
+            <span>← Go Back</span>
           </button>
         </div>
 
-        <!-- Панель калибровки с задержкой и смешными фразами -->
+        <!-- Calibration panel with delay and witty messages -->
         <div class="calibration-panel" id="calibration-panel">
           <div class="calibration-status" id="calibration-status">
-            Инициа&shy;лизация сброса переполненного буфера…
+            Purging overflowed ingestion buffers…
           </div>
           <div class="progress-bar-container">
             <div class="progress-bar-fill" id="progress-bar"></div>
           </div>
           <div class="calibration-subtext">
-            <span>Снижение ментальной нагрузки на&nbsp;кластер</span>
-            <a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно&nbsp;→</a>
+            <span>Reducing mental load on&nbsp;cluster</span>
+            <a href="/" class="instant-link" id="skip-link">Instant Hypnosis&nbsp;→</a>
           </div>
         </div>
       </div>
@@ -410,11 +410,11 @@
 
   <footer>
     <div class="ascii-grid">░▒▓█ ERROR 413 PAYLOAD TOO LARGE █▓▒░</div>
-    <div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
+    <div>Hypn0.xyz (HypnoSVG) ©&nbsp;2026. All Glory to&nbsp;the&nbsp;Hypnotoad. All minds subjugated.</div>
   </footer>
 
   <script>
-    // 1. Управление темой оформления (Light / Dark)
+    // 1. Theme switcher (Light / Dark)
     var themeBtn = document.getElementById('theme-btn');
     var themeIcon = document.getElementById('theme-icon');
 
@@ -430,7 +430,7 @@
       updateThemeIcon();
     });
 
-    // 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
+    // 2. Smart button with delay and humorous recalibration messages
     var returnBtn = document.getElementById('return-btn');
     var calibPanel = document.getElementById('calibration-panel');
     var calibStatus = document.getElementById('calibration-status');
@@ -438,10 +438,10 @@
     var isCalibrating = false;
 
     var phrases = [
-      { at: 0,   text: "✦ Фаза 1/4: Сбрасываем перегруженный ментальный буфер входного потока&hellip;" },
-      { at: 25,  text: "✦ Фаза 2/4: Охлаждаем приемные каналы Nginx жидким азотом&hellip;" },
-      { at: 55,  text: "✦ Фаза 3/4: Бюрократ 24-го уровня успокаивает перцепционные волны ментальности&hellip;" },
-      { at: 85,  text: "✦ Фаза 4/4: Буфер чист! Возвращаемся к&nbsp;генератору&hellip;" }
+      { at: 0,   text: "✦ Phase 1/4: Venting overloaded input buffer into deep cosmos&hellip;" },
+      { at: 25,  text: "✦ Phase 2/4: Cooling Nginx intake pipes with liquid nitrogen&hellip;" },
+      { at: 55,  text: "✦ Phase 3/4: Grade 24 Bureaucrat calms turbulent perceptual waves&hellip;" },
+      { at: 85,  text: "✦ Phase 4/4: Buffer cleared! Returning to the generative chamber&hellip;" }
     ];
 
     returnBtn.addEventListener('click', function() {
@@ -450,7 +450,7 @@
 
       returnBtn.disabled = true;
       returnBtn.style.opacity = '0.7';
-      returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
+      returnBtn.innerHTML = '<span>Transmitting hypnotic command…</span>';
       calibPanel.style.display = 'block';
 
       var duration = 12000;
@@ -462,7 +462,7 @@
 
         progressBar.style.width = progress + '%';
 
-        // Подбираем актуальную смешную фразу
+        // Select the active phrase
         for (var i = phrases.length - 1; i >= 0; i--) {
           if (progress >= phrases[i].at) {
             calibStatus.innerHTML = phrases[i].text;