Hybrid AutoPress website
The one-page site for Hybrid AutoPress, the app that
uploads many Markdown files to WordPress at once, for iPhone, iPad and Mac.
Live: https://hybrid-autopress.com/ (English), plus /de/, /fr/, /es/, /it/, /pt/, /nl/, /ja/ and /zh/, the nine languages of the app.
How it is built
Plain HTML, CSS and a little JavaScript: no framework, no dependencies, served by GitHub Pages
straight from main.
template.html the structure of the page, with {{placeholders}}
template-privacy.html the structure of the app's privacy policy
texts.py, lang/*.py the words of the page: English and German in texts.py, the rest one file per language
privacy.py, lang/*.py the words of the app's privacy policy (German is the binding version)
build.py writes index.html, <lang>/index.html, datenschutz-app/<lang>/index.html and sitemap.xml
assets/style.css design: navy #1A3A5E / #254E7A and amber #F59E0B from the app icon
assets/site.js reveal on scroll, the pinned walkthrough, the hero zoom
assets/badges/ Apple's “Download on the App Store” and “… Mac App Store” badges per language (Apple's artwork, unchanged)
assets/img/ app icon; assets/img/<lang>/ the screenshots (Mac, iPad, iPhone) in that language
impressum/ the legal notice (German law), a static page in the same design
datenschutz/ the privacy policy for the website, likewise static
tools/screenshots/ how the screenshots are made: sample content, WordPress mock, Mac and simulator scripts
serve.js tiny static server for a local preview: node serve.js
Change words in texts.py, privacy.py or lang/<code>.py, structure in the templates, then:
python3 build.py
Every index.html outside impressum/ and datenschutz/ is generated. Do not edit them by hand. A further
language is one more entry in LANGUAGES in build.py and one more file in lang/.
The scroll
Every section is a full-height panel and a resting point (scroll-snap, proximity). In
“How it works” the Mac window stays pinned while four steps scroll past and swap the screenshot.
On small screens and with “reduce motion” the page falls back to a plain, linear scroll.
Screenshots
Every language has its own set in assets/img/<lang>/: the app in that language, with the sample
content (“Coastline Journal”) translated too, and dates in that locale. English is en/.
Made with tools/screenshots/: setup.sh prepares a work folder with the sample content in all nine
languages and a WordPress mock with matching categories and tags; mac.sh <lang> drives a Debug build
on the Mac by UI scripting (only its own instance, found by PID); ios.sh <lang> <step> does the same in
the iPhone and iPad simulators, with two taps by hand. The content (“Coastline Journal”) is sample
content; its pictures are drawn by draw.swift.
© 2026 Pascal Hugo
