Update/reuse donate page

.github/copilot-instructions.md

@@ -55,6 +55,15 @@ Zola distinguishes resource types:
 
 Access with `get_page(path="donate/index.md")` or `get_section(path="news/_index.md")`.
 
+### Donation Checkout
+
+The main donation page and focused `/donate/subscribe/` landing page include
+`templates/_donate_form.html`. Both take localized labels from the subscribe
+page's `extra.form`. The main page's Markdown contains `<!-- donation-impact -->`
+and `<!-- donation-methods -->` exactly once, in that order; its template rejects
+missing, duplicate or reordered markers. JavaScript enables currency selection
+and scales presets together; without it, the form submits EUR consistently.
+
 ### Translation Function
 
 Use `{{ trans(key='faq-menu-title', lang=lang) }}` to get localized strings from `config.toml` `[translations]` sections.
@@ -67,6 +76,7 @@ Use `{{ trans(key='faq-menu-title', lang=lang) }}` to get localized strings from
 zola serve           # Live preview at http://127.0.0.1:1111
 zola build           # Generate static site in public/
 npm test             # Offline translation, hook and Telegram regressions
+npm run test:browser # Donation checkout regressions against public/ (build first)
 npm run format       # Format MD + SCSS (stylelint + prettier + js-beautify)
 npm run upgrade      # Update npm dependencies
 ```
@@ -75,6 +85,12 @@ Install Python dependencies from `tools/requirements-check.txt` for translation
 checks, or `tools/requirements-telegram.txt` (which includes the check dependencies)
 for Telegram publishing and the complete test suite.
 
+For the browser tests, install Node dependencies with `npm ci`, then install
+Chromium once with `npx playwright install chromium`. Run `zola build` before
+`npm run test:browser`. The suite reads the rendered site and declared security
+headers, mocks payment requests, and uses Zola to check invalid layout markers.
+Set `ZOLA_BIN` when the Zola executable is not on `PATH`.
+
 ### Where the tooling lives
 
 Every helper script is in `tools/`, and they are **run from the repository
@@ -138,7 +154,7 @@ hook, the test suite — adds `tools/` to `sys.path` explicitly.
 3. Add to RTL list in `base.html` if right-to-left language
 4. If `content/donate/subscribe/index.XX.md` is one of them, two things do **not**
    follow automatically:
-   - `translate_md.py` does not touch `extra:`, so all ~21 `extra.form.*` labels
+   - `translate_md.py` does not touch `extra:`, so all `extra.form.*` labels
      must be translated by hand — `{amount}`, `{min}` and `{max}` are placeholders
      the JS substitutes and must survive verbatim. `translate_check.py` warns on
      any that are still English.
@@ -160,7 +176,7 @@ hook, the test suite — adds `tools/` to `sys.path` explicitly.
 - Modular imports: `sass/_language_selector.scss`, `sass/_top_menu.scss`
 - Dark mode: `@media (prefers-color-scheme: dark)` blocks
 - RTL support: `dir="rtl"` on `<html>` for RTL languages
-- Responsive design: Mobile-first, uses flexbox for layout
+- Responsive design: Flexbox and grid layouts with narrow-screen overrides
 
 ### Static Assets
 
@@ -224,7 +240,13 @@ python3 tools/translate_md.py content/news/2026-08-04/630/index.md --all
 python3 tools/translate_md.py post.md --langs ru --dry-run         # cost, no API call
 ```
 
-It translates `title:` and `description:` **and nothing else in the frontmatter** — `extra:` is copied verbatim, so a page that keeps user-visible text there (`extra.menu_title`, the donation form's twenty-odd `extra.form.*` labels) needs those translated by hand. `translate_check.py` warns when one is still identical to English. It leaves `date:`/`slug:`/`taxonomies:` verbatim, rewrites `@/…/index.md` links to the translated page when that page exists, applies the glossary below, and runs the tidy-up passes (native quotes, brand unquoting, ellipsis, link-label hygiene, register where DeepL supports it). **Output is a draft**: wording and the expected target-language register still need the proofreading pass.
+It translates `title:` and `description:` **and nothing else in the frontmatter** — `extra:` is copied verbatim, so a page that keeps user-visible text there (`extra.menu_title`, the donation form's `extra.form.*` labels) needs those translated by hand. `translate_check.py` warns when one is still identical to English. It leaves `date:`/`slug:`/`taxonomies:` verbatim, rewrites `@/…/index.md` links to the translated page when that page exists, applies the glossary below, and runs the tidy-up passes (native quotes, brand unquoting, ellipsis, link-label hygiene, register where DeepL supports it). **Output is a draft**: wording and the expected target-language register still need the proofreading pass.
+
+Complete code blocks, comments and Tera expressions are protected before
+segmentation, and formatting that crosses a soft line break stays in one valid
+XML payload. Cleanup repairs prose and link labels while code, URLs, anchors
+and component arguments remain protected. Link localization applies only to
+Markdown link targets so examples inside code retain their literal contents.
 
 Two behaviours worth knowing, both established by measurement:
 
@@ -285,16 +307,11 @@ python3 tools/translate_check.py content/news/2026-08-04/630/   # whole folder
 python3 tools/translate_check.py index.md index.ar.md ar        # one file
 ```
 
-ERROR blocks publication — structural mismatch against the source (lines, bullets, headings, links, attributions, Tera expressions/components), leftover `<x>`/`<a0>` tags, a link that lost its opening `[`, an attribution moved out of its bullet, a lost brand, or a word spliced from two alphabets. Warnings cover polish: register, straight quotes, `...`, quoted brands, and suffixes stranded outside a link.
-
-The Ukrainian donation page intentionally omits the RUB payment reference. It
-declares that exact omission with `extra.translation_omits_refs`; the checker
-rejects that field for every other language, reference, or page, and rejects it
-once the reference is no longer missing.
+ERROR blocks publication — structural mismatch against the source (lines, bullets, headings, links, attributions, Tera expressions/components), leftover `<x>`/`<a0>` tags, a link that lost its opening `[`, an attribution moved out of its bullet, a lost brand, or a word spliced from two alphabets. Warnings cover polish: register in the body and reader-visible frontmatter, straight quotes, `...`, quoted brands, and suffixes stranded outside a link.
 
 A frontmatter string that is genuinely the same word in both languages —
-Dutch and Italian "Privacy", German "Name (optional)" — declares itself the
-same way, with `extra.translation_keeps_source: ["extra.menu_title"]`, pasting
+Dutch and Italian "Privacy", German "Name (optional)" — declares it explicitly
+with `extra.translation_keeps_source: ["extra.menu_title"]`, pasting
 the path out of the warning. It is verified rather than obeyed: naming a field
 the English source lacks, or one that is no longer identical, is an ERROR, so
 the declaration cannot outlive the situation it describes. Reach for it only

.github/workflows/check.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   check:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     environment: production
     name: Check Zola build
     steps:
@@ -21,6 +22,21 @@ jobs:
           tar -zxvf zola.tar.gz
           ./zola build
 
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: npm
+
+      - name: Install browser test dependencies
+        run: |
+          npm ci
+          npx playwright install --with-deps chromium
+
+      - name: Donation checkout browser regressions
+        env:
+          ZOLA_BIN: ./zola
+        run: npm run test:browser
+
   markdown:
     runs-on: ubuntu-latest
     name: Check markdown and translations

content/donate/index.af.md

@@ -1,72 +1,41 @@
 ---
-title: Skenk om die ontwikkeling van Organic Maps te ondersteun
-description: Jou geld betaal vir alle projekverwante uitgawes en motiveer ons om Organic Maps te verbeter.
+template: donate.html
+title: "Hou Organic Maps gratis vir almal"
+description: "Jou donasie betaal vir kaartopdaterings, regstellings en onafhanklike ontwikkeling. Ondersteun Organic Maps met 'n maandelikse, jaarlikse of eenmalige donasie."
 weight: 10
 extra:
   menu_title: Skenk
   preview_image: donate/donate.png
+  bank_transfer_title: "Bankoorplasing"
+  crypto_title: "Kripto"
 ---
 
-Organic Maps is _gratis vir almal_ danksy jou **[skenkings][stripe]** in **[EUR][stripe_eur]**, **[USD][stripe_usd]**, **[GBP][stripe_GBP]**, **[CHF][stripe_chf]**, **[PLN][stripe_pln]**, **[RUB][stripe_rub]**:
+Jou donasie betaal vir kaartopdaterings, regstellings en ontwikkeling. Help om Organic Maps vir almal gratis te hou.
 
-- Geen advertensies
-- Geen opspoorders
-- Geen registrasie
-- Geen stootkennisgewings
-- Oopbron
+**Geen advertensies. Geen opsporing. Oopbron.**
 
-Klik op jou voorkeur betaalmetode-ikoon hieronder:
+<!-- donation-impact -->
 
-{{ <donate_buttons lang /> }}
+## Wat jou skenking ondersteun
 
-## Hoekom skenk aan Organic Maps?
+- **Vars vanlynkaarte.** Help om gereelde kaartopdaterings wêreldwyd te lewer.
+- **’n Beter app.** Ondersteun foutregstellings, navigasieverbeterings en nuwe funksies.
+- **Onafhanklike ontwikkeling.** Hou Organic Maps gratis en oop vir almal.
 
-1. Ons doel is om 'n privaatheid-gefokusde, vinnige en maklike alternatief vir Google Maps en Apple Maps te bied.
-2. Om openbare kaartdata vir die talle webwerwe, apps en platforms wat OpenStreetMap gebruik te verbeter, en meer mense te betrek om kaartinligting by te dra, is ons ander doel.
-3. Ons is afhanklik van jou skenkings om Organic Maps oop en gratis vir almal te hou.
-   En vry van advertensies.
-4. Ons is lief vir wat ons doen, en ons is lief vir ons gebruikers ❤️.
+Regelmatige skenkings help ons om langtermynverbeterings te beplan. Eenmalige skenkings word ook waardeer.
 
-## Hoekom het 'n gratis projek geld nodig?
+<!-- donation-methods -->
 
-1. In 2023 het Organic Maps sy eerste miljoen gebruikers gekry.
-   Ons bedieners verskaf gratis, vinnige en gereelde kaartopdaterings wêreldwyd.
-2. Gebruikerondersteuning, foutoplossing en die publisering van kwaliteit app-opdaterings is ons hoogste prioriteite.
-   Daar is [~2000 foutverslae en kenmerkversoeke op GitHub][github issues], en hierdie getal groei daagliks.
-   AppStore, Google Play, en ondersteunings-e-posse is oorstroom met kommentaar en foute. Ons wil 'n hoë kwaliteit produk lewer.
-3. Met genoeg geld kan nuwe kenmerke ontwikkel word. 'n Paar voorbeelde:
-   - Rugsteun en sinkroniseer boekmerke en roetes
-   - GPS-roete-opnemer met GPX-uitvoer
-   - Satellietbeelde
-   - Openbare vervoer
-   - Verkeers- en ongelukverslaggewing
-   - Foto's en resensies
-   - Kaartstyle vir verskillende aktiwiteite
-   - Heuwelskadu en 3D-terrein
-   - Meer gevorderde OpenStreetMap-redigeerder
-   - Beter vanlyn adressoektog, roetering en navigasie
-   - … en [baie ander][github issues] kenmerke wat jy wil hê en van hou
+## Ander maniere om te skenk {#other-ways}
 
-## Hoe om te skenk?
+Kies 'n betaalroete wat vir jou werk.
 
-Klik op jou voorkeur betaalmetode-ikoon hieronder:
+{{ <donate_methods lang bank_title={page.extra.bank_transfer_title} crypto_title={page.extra.crypto_title} /> }}
 
-{{ <donate_buttons lang /> }}
+{{ <bank_transfer title={page.extra.bank_transfer_title} /> }}
 
-Herhalende skenkings is die beste manier om 'n relatief stabiele inkomste vir die projek te verseker en ons te motiveer vir langtermyn take en doelwitte. Eenmalige skenkings word ook waardeer.
+{{ <crypto_table lang config title={page.extra.crypto_title} /> }}
 
-### Bankoorplasing
+## Kan jy ons op enige ander manier help?
 
-{{ <bank_transfer /> }}
-
-### Kripto
-
-Oorweeg asseblief om jaarliks te skenk om totale fooie te verminder.
-
-{{ <crypto_table lang config /> }}
-
-## Kan jy op enige ander manier help?
-
-Ja! Daar is baie maniere om Organic Maps te ondersteun. Sien asseblief die [Dra by](@/contribute/index.af.md) bladsy vir meer besonderhede.
-
-{{ <references lang /> }}
+Ja! Daar is baie maniere om Organic Maps te ondersteun. Sien die [Bydraepagina](@/contribute/index.af.md) vir meer besonderhede.

content/donate/index.ar.md

@@ -1,72 +1,41 @@
 ---
-title: تبرع لدعم تطوير Organic Maps
-description: تساهم أموالك في تغطية جميع نفقات المشروع وتحفزنا على تحسين Organic Maps.
+template: donate.html
+title: "حافظوا على مجانية Organic Maps للجميع"
+description: "تُخصص تبرعاتكم لتمويل تحديثات الخرائط وإصلاحاتها وأعمال التطوير المستقلة. ادعموا Organic Maps بتبرع شهري أو سنوي أو لمرة واحدة."
 weight: 10
 extra:
   menu_title: تبرع
   preview_image: donate/donate.png
+  bank_transfer_title: "التحويل البنكي"
+  crypto_title: "العملات الرقمية"
 ---
 
-تطبيق Organic Maps _مجاني للجميع_ بفضل **[تبرعاتكم][stripe]** بعملات **[اليورو][stripe_eur]، [الدولار][stripe_usd]، [الجنيه الإسترليني][stripe_GBP]، [الفرنك السويسري][stripe_chf]، [الزلوتي البولندي][stripe_pln]، [الروبل الروسي][stripe_rub]**:
+تُستخدم تبرعاتكم في تمويل تحديثات الخرائط وإصلاحها وتطويرها. ساعدوا في الحفاظ على Organic Maps مجانيًا للجميع.
 
-- بدون إعلانات
-- بدون متعقبات
-- بدون تسجيل
-- بدون إشعارات دفع
-- مفتوح المصدر
+**بدون إعلانات. بدون أدوات تتبع. مفتوح المصدر.**
 
-اضغط على أيقونة طريقة الدفع المفضلة أدناه:
+<!-- donation-impact -->
 
-{{ <donate_buttons lang /> }}
+## ما الذي يدعمه تبرعك؟
 
-## لماذا تتبرع لـ Organic Maps؟
+- **خرائط حديثة دون اتصال.** ساعد في توفير تحديثات متكررة للخرائط حول العالم.
+- **تطبيق أفضل.** ادعم إصلاح الأخطاء وتحسين الملاحة وإضافة ميزات جديدة.
+- **تطوير مستقل.** ساعد في إبقاء Organic Maps مجانيًا ومفتوحًا للجميع.
 
-1. هدفنا هو توفير بديل يركز على الخصوصية وسريع وسهل الاستخدام لـ Google Maps وApple Maps.
-2. تحسين بيانات الخرائط العامة للعديد من المواقع والتطبيقات والمنصات التي تستخدم OpenStreetMap، وجذب المزيد من الأشخاص للمساهمة في معلومات الخرائط هو هدف آخر لنا.
-3. نعتمد على تبرعاتكم للحفاظ على Organic Maps مفتوحًا ومجانيًا للجميع.
-   وخاليًا من الإعلانات.
-4. نحن نحب ما نقوم به ونحب مستخدمينا ❤️.
+تساعدنا التبرعات المنتظمة على التخطيط للتحسينات على المدى الطويل. ونحن نقدر أيضًا التبرعات لمرة واحدة.
 
-## لماذا يحتاج المشروع المجاني إلى المال؟
+<!-- donation-methods -->
 
-1. في عام 2023، وصل Organic Maps إلى أول مليون مستخدم.
-   توفر خوادمنا تحديثات خرائط مجانية وسريعة ومتكررة حول العالم.
-2. دعم المستخدمين، إصلاح الأخطاء ونشر تحديثات تطبيق عالية الجودة هي أولوياتنا القصوى.
-   هناك [~2000 تقرير أخطاء وطلبات ميزات على GitHub][github issues]، وهذا العدد يزداد يوميًا.
-   متجر التطبيقات، Google Play، ورسائل الدعم مليئة بالتعليقات والأخطاء. نريد تقديم منتج عالي الجودة.
-3. مع توفر المال الكافي، يمكن تطوير ميزات جديدة. منها على سبيل المثال:
-   - نسخ احتياطي ومزامنة العلامات والمسارات
-   - مسجل مسارات GPS مع تصدير GPX
-   - صور الأقمار الصناعية
-   - النقل العام
-   - الإبلاغ عن الحوادث وحركة المرور
-   - الصور والمراجعات
-   - أنماط خرائط للأنشطة المختلفة
-   - تظليل التضاريس وثلاثي الأبعاد
-   - محرر OpenStreetMap أكثر تقدمًا
-   - بحث عناوين غير متصل وتحسين التوجيه والملاحة
-   - … و[العديد من الميزات الأخرى][github issues] التي تريدونها وتحبونها
+## طرق أخرى للتبرع {#other-ways}
 
-## كيف تتبرع؟
+اختر طريقة الدفع التي تناسبك.
 
-اضغط على أيقونة طريقة الدفع المفضلة أدناه:
+{{ <donate_methods lang bank_title={page.extra.bank_transfer_title} crypto_title={page.extra.crypto_title} /> }}
 
-{{ <donate_buttons lang /> }}
+{{ <bank_transfer title={page.extra.bank_transfer_title} /> }}
 
-التبرعات المتكررة هي أفضل طريقة لضمان دخل مستقر نسبيًا للمشروع وتحفيزنا على المهام والأهداف طويلة الأمد. التبرعات لمرة واحدة أيضًا محل تقدير كبير.
+{{ <crypto_table lang config title={page.extra.crypto_title} /> }}
 
-### التحويل البنكي
+## هل يمكنك مساعدتنا بأي طريقة أخرى؟
 
-{{ <bank_transfer /> }}
-
-### العملات الرقمية
-
-يرجى التفكير في التبرع سنويًا لتقليل إجمالي الرسوم.
-
-{{ <crypto_table lang config /> }}
-
-## هل يمكنك المساعدة بطرق أخرى؟
-
-نعم! هناك العديد من الطرق لدعم Organic Maps. يرجى زيارة صفحة [المساهمة](@/contribute/index.ar.md) لمزيد من التفاصيل.
-
-{{ <references lang /> }}
+نعم! هناك طرق عديدة لدعم Organic Maps. راجع صفحة [المساهمة](@/contribute/index.ar.md) لمزيد من التفاصيل.