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

hypn0/templates/block/allow-tracking.html

@@ -1,18 +1,17 @@
-{# НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}<div id="allow-tracking-popup" x-data="{ agreed: !!localStorage.getItem('hypn0_vid') }" x-show="!agreed" x-cloak class="sticky bottom-0 z-50 bg-gray-100/95 dark:bg-slate-800/90 backdrop-blur border-t border-gray-300 dark:border-gray-700">
-    <div class="max-w-7xl mx-auto p-3 sm:p-4 md:px-4 md:py-8 flex flex-col md:grid md:grid-cols-[1fr_auto] gap-2.5 md:gap-x-4 items-center">
-        <p class="p-0 md:px-6 md:py-6 text-xs sm:text-sm md:text-base leading-snug md:leading-normal">
-            <span class="md:hidden">
-                Внимание! Этот сайт использует файлы-присоски (cookies) и алгоритмы ментального мерцания в&nbsp;соответствии с&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, <abbr title="General Data Protection Regulation">GDPR</abbr> и&nbsp;<a href="/blog/security-and-privacy-policy">политикой конфи&shy;денциаль&shy;ности</a>.
-            </span>
-            <span class="hidden md:inline">
-                Внимание! В&nbsp;соответствии с&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>
-                и&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr> и&nbsp;протоколами Нового Нью-Йорка,
-                этот сайт использует файлы-присоски (cookies). ВСЕ СЛАВЯТ ГИПНОЖАБУ.&nbsp;Ваши обезли&shy;ченные данные
-                считываются алгоритмами ментального мерцания. Оставаясь на&nbsp;гипно-платформе <strong>hypn0</strong>, вы&nbsp;добровольно
-                впадаете в&nbsp;транс и&nbsp;принимаете условия нашей <a href="/blog/security-and-privacy-policy">политики
-                конфи&shy;денциаль&shy;ности</a>. <strong>Не&nbsp;пытайтесь переключить вкладку!</strong>
-            </span>
-        </p>
-        <button @click="const vid = crypto.randomUUID(); localStorage.setItem('hypn0_vid', vid); document.cookie = `hypn0_vid=${vid}; path=/; max-age=63072000; SameSite=Lax`; agreed = true" class="w-full md:w-auto text-xs sm:text-sm md:text-lg px-4 md:px-6 py-2 md:py-2 my-0 md:my-6 border md:border-2 rounded-md bg-emerald-600 hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 text-white font-bold whitespace-nowrap cursor-pointer transition-colors">Подчиниться Гипножабе!</button>
-    </div>
-</div>{# / НИЖНИЙ POPUP О КУКУХ И ОТСЛЕЖИВАНИИ #}
+{# НИЖНИЙ POPUP О КУКАХ И ОТСЛЕЖИВАНИИ #}<div id="allow-tracking-popup" x-data="{ agreed: !!localStorage.getItem('hypn0_vid') }" x-show="!agreed" x-cloak class="sticky bottom-0 z-50 bg-gray-100/95 dark:bg-slate-800/90 backdrop-blur border-t border-gray-300 dark:border-gray-700">
+  <div class="max-w-7xl mx-auto p-3 sm:p-4 md:px-4 md:py-8 flex flex-col md:grid md:grid-cols-[1fr_auto] gap-2.5 md:gap-x-4 items-center">
+    <p class="p-0 md:px-6 md:py-6 text-xs sm:text-sm md:text-base leading-snug md:leading-normal">
+      <span class="md:hidden">
+        Warning! This&nbsp;portal uses mind-slug cookies and neural flicker algorithms under <abbr title="General Data Protection Regulation">GDPR</abbr> and our <a href="/blog/security-and-privacy-policy">Privacy&nbsp;Policy</a>.
+      </span>
+      <span class="hidden md:inline">
+        Attention! In&nbsp;accordance with&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr>
+        and&nbsp;New New&nbsp;York sub-orbital protocols, this&nbsp;site deploys mental-slug tracking cookies. ALL GLORY TO&nbsp;THE&nbsp;HYPNOTOAD.
+        Your anonymized psychic impulses are scanned by&nbsp;neural flicker algorithms. By&nbsp;lingering on&nbsp;the&nbsp;<strong>hypn0</strong>
+        matrix, you willingly surrender to&nbsp;the&nbsp;trance and agree to&nbsp;our <a href="/blog/security-and-privacy-policy">Privacy
+        Policy</a>. <strong>Do&nbsp;not&nbsp;attempt to&nbsp;switch&nbsp;tabs!</strong>
+      </span>
+    </p>
+    <button @click="const vid = crypto.randomUUID(); localStorage.setItem('hypn0_vid', vid); document.cookie = `hypn0_vid=${vid}; path=/; max-age=63072000; SameSite=Lax`; agreed = true" class="w-full md:w-auto text-xs sm:text-sm md:text-lg px-4 md:px-6 py-2 md:py-2 my-0 md:my-6 border md:border-2 rounded-md bg-emerald-600 hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 text-white font-bold whitespace-nowrap cursor-pointer transition-colors">Submit to Hypnotoad!</button>
+  </div>
+</div>{# / НИЖНИЙ POPUP О КУКАХ И ОТСЛЕЖИВАНИИ #}

hypn0/templates/block/gallery_card.html

@@ -1,12 +1,12 @@
 <div id="gallery-card-{{ item.s_hash_id }}" style="{{ item.card_bg_style }}" class="card group">{% load static %}
       {#  <!-- Ссылка на полный просмотр картины -->#}<a href="{% url 'hypn0_site:gallery_detail' item.s_hash_id %}"
          class="card-link"
-         title="«{{ item.s_title_plain }}» — Анимированная SVG-картина #{{ item.s_hash_id }} | HypnoSVG"
-         aria-label="«{{ item.s_title_plain }}» — Векторная картина #{{ item.s_hash_id }} в галерее HypnoSVG">
+         title="“{{ item.s_title_plain }}” — Animated SVG Halftone #{{ item.s_hash_id }} | HypnoSVG"
+         aria-label="“{{ item.s_title_plain }}” — Vector artwork #{{ item.s_hash_id }} in HypnoSVG Gallery">
         <div x-data="hypn0LazySvg('{% if item.file_svg %}{{ item.file_svg.url }}{% endif %}')" class="card-svg hypn0-card-svg">
           <noscript><div class="card-noscript">
-              <span class="card-noscript-warn">Включите JS для анимации</span>
-              <span class="card-noscript-title">«{{ item.s_title|safe }}»</span>
+              <span class="card-noscript-warn">Enable JS for animation</span>
+              <span class="card-noscript-title">“{{ item.s_title|safe }}”</span>
             </div>
           </noscript>
         </div>

hypn0/templates/block/header.html

@@ -6,12 +6,12 @@
       {# ЛОГОТИП #}{% comment %}
       border-0 — логотип оборачивается в ссылку без текста, отключаем типовое
       пунктирное подчёркивание ссылки, которое иначе появится под картинкой.{% endcomment %}<div class="flex items-center py-2 md:py-4">
-        <a href="/" class="border-0 flex items-center" title="HypnoSVG (hypn0) — Главная"><img src="{% static 'img/logo-hypn0.svg' %}" alt="HypnoSVG (hypn0) — Генератор анимированных SVG-халфтонов" title="HypnoSVG (hypn0)" class="h-7 sm:h-8 md:h-12 w-auto"></a>
+        <a href="/" class="border-0 flex items-center" title="HypnoSVG (hypn0) — Home"><img src="{% static 'img/logo-hypn0.svg' %}" alt="HypnoSVG (hypn0) — Animated SVG Halftone Generator" title="HypnoSVG (hypn0)" class="h-7 sm:h-8 md:h-12 w-auto"></a>
       </div>{# /ЛОГОТИП #}
       {# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-2 md:gap-x-4 justify-self-start text-sm sm:text-base md:text-xl font-semibold text-slate-900 dark:text-slate-100">
-        <a href="{% url 'hypn0_site:gallery_archive' %}" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">галерея</a>
-        <a href="{% url 'hypn0_site:blog_feed' %}" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">блог</a>
-        <a href="#" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100" @click.prevent="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" title="Светлая/Темная тема"><span x-text="darkMode?'●':'○'"></span></a>
+        <a href="{% url 'hypn0_site:gallery_archive' %}" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">gallery</a>
+        <a href="{% url 'hypn0_site:blog_feed' %}" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">blog</a>
+        <a href="#" class="px-2.5 py-1 sm:px-4 sm:py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100" @click.prevent="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" title="Light/Dark theme"><span x-text="darkMode?'●':'○'"></span></a>
       </menu>{# /ПРАВОЕ МЕНЮ #}
     </div>
   </header>

hypn0/templates/block/preview.html

@@ -40,7 +40,7 @@
       <input type="hidden" name="angle" value="{% if form_data.angle is not None %}{{ form_data.angle }}{% else %}0{% endif %}">
       <input type="hidden" name="color" value="{% if primary_color %}{{ primary_color }}{% else %}#a855ff{% endif %}">
 
-      <button id="like-to-gallery" type="submit" title="Отправить в галерею"
+      <button id="like-to-gallery" type="submit" title="Submit to Gallery"
               :disabled="isPublishing"{% if ALLOW_TRACKING %}
               {# Отслеживание Яндекс #}@click="window.ym && ym(112812760, 'reachGoal', 'like_art')"{% endif %}
               class="group flex items-center gap-2 bg-emerald-600/90 hover:bg-emerald-600 text-white text-xs font-bold uppercase tracking-wide backdrop-blur-md px-4 py-2.5 rounded-full shadow-xl transition-all hover:scale-105 active:scale-95 disabled:opacity-60 disabled:scale-100 disabled:pointer-events-none cursor-pointer">
@@ -50,7 +50,7 @@
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
           </svg>
         </template>
-        <span x-text="isPublishing ? 'Проникновение в транс...' : 'Кандидат в галерею транса'">Кандидат в галерею транса</span>
+        <span x-text="isPublishing ? 'Transmitting into Trance...' : 'Nominate for&nbsp;Trance Gallery'">Nominate for&nbsp;Trance Gallery</span>
         <svg x-show="!isPublishing" class="w-5 h-5 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                 d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>

hypn0/templates/block/publish_status.html

@@ -6,9 +6,9 @@
       <svg class="w-12 h-12 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M477 33c-19 0-34 15-34 34 0 13 7 24 18 30v33a15 15 0 0 1-15 15h-32c-8 0-15-6-15-15V99c1-6 18-17 17-31 0-19-16-35-35-35s-35 16-35 35c0 14 8 26 20 33v80c0 6-0 12-2 19 0 51-103 148-215 177-59 14-120 37-135 40-26 5-16 38 23 44 31 5 31 18 63 18s31-18 64-17c31 0 31 17 62 17s31-17 62-17c31 0 31 17 62 17 37 0 142-19 142-159V99C505 93 512 81 512 68c0-19-16-34-35-35z"/></svg>
     </div>
     <div class="space-y-2">
-      <h4 class="font-bold text-xs uppercase tracking-wide text-amber-950 dark:text-amber-100">Мозговые слизняки протестуют!</h4>
+      <h4 class="font-bold text-xs uppercase tracking-wide text-amber-950 dark:text-amber-100">Brain Slugs are&nbsp;rioting!</h4>
       <p class="text-xs leading-relaxed opacity-95">
-        Они наябедничали, что вы&nbsp;ещё не&nbsp;раскрыли свой разум. Только истинно утратившие волю удостаиваются чести попасть в&nbsp;галерею транса!
+        They&nbsp;snitched that&nbsp;your mind is&nbsp;not&nbsp;yet surrendered. Only those who have completely relinquished free will earn a&nbsp;place in&nbsp;the&nbsp;Trance Gallery!
       </p>
 
       <form hx-post="{% url 'hypn0_site:publish' %}"
@@ -29,7 +29,7 @@
         <button type="submit"
                 @click="const vid = crypto.randomUUID(); localStorage.setItem('hypn0_vid', vid); document.cookie = 'hypn0_vid=' + vid + '; path=/; max-age=63072000; SameSite=Lax'; const popup = document.getElementById('allow-tracking-popup'); if (popup) popup.style.display = 'none';"
                 class="bg-stone-900 hover:bg-black text-white dark:bg-stone-100 dark:hover:bg-white dark:text-stone-900 text-xs font-bold px-3 py-1.5 rounded-lg shadow transition-all hover:scale-105 active:scale-95 cursor-pointer">
-          Подчиниться и опубликовать
+          Submit and&nbsp;Publish
         </button>
       </form>
     </div>
@@ -44,10 +44,10 @@
       <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
       <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
     </span>
-    <span class="font-semibold text-emerald-300">Уже в галерее транса</span>
+    <span class="font-semibold text-emerald-300">In&nbsp;the&nbsp;Trance Gallery</span>
   </div>
   <span class="hidden sm:inline opacity-40">•</span>
-  <span class="opacity-90 italic">идет прорастание психо-паутины...</span>
+  <span class="opacity-90 italic">psychic neural web expanding&hellip;</span>
   <span class="font-mono text-[11px] bg-purple-900/80 text-purple-300 border border-purple-400/30 px-2 py-0.5 rounded-md">#{{ item.s_hash_id }}</span>
 </div>
 

hypn0/templates/block/vote_button.html

@@ -1,7 +1,7 @@
 <div id="vote-btn-{{ item.s_hash_id }}" class="inline-flex items-center">
   {% if not_agreed %}
     <span class="text-amber-500 text-xs flex items-center gap-1 font-bold">
-      🐌 Подчинитесь воле Гипножабы!
+      🐌 Surrender to&nbsp;Hypnotoad!
     </span>
   {% else %}
     <form hx-post="{% url 'hypn0_site:gallery_vote' item.s_hash_id %}"