Claude Sonnet 4.6
=============
BUILD OVERVIEW
=============
This file describes how to build a SINGLE installable PWA for the
OpenLang Estonian language-learning hub. The app is installed once from
its landing page and, when installed, caches every game from every
category for offline use.
Deliverables: four files, all at /Estonian/:
/Estonian/index.html — the landing page AND the PWA shell
/Estonian/sw.js — service worker
/Estonian/manifest.json — web app manifest
/Estonian/icon.svg — home-screen icon
The landing page serves two roles at once. In a browser, it is a
normal page that lets the user click any game to play it online. On
first visit, it also offers a single prominent "Install" button that
installs the whole hub as a PWA. Once installed, the PWA's home-screen
icon launches the same /Estonian/index.html, which detects standalone
mode and rewrites game links to point to the cached offline builds.
The page is organized into one collapsible block per CATEGORY
(Vocabulary, Phrases, ACA, Sign Language, etc.). Categories are
defined at the bottom of this file under "CATEGORY DEFINITIONS". The
service worker caches the union of all category URL lists as a single
bundle — there is no per-category install.
-------------
Theme & Style
-------------
Use the Tailwind 'Stone' palette. Headings should be deep red and
serif; body text sans-serif. Do not display any comments or notes.
Links: Bold font, navy blue color. Links open in the current window.
Screen width limited to 1024 pixels.
Do not include any comments or notes in the index.html file.
--------
Branding
--------
- BRANDING: SVG logo of "文" (2.5em, deep red) followed by "OpenLang.ai"
in large bold text. Links to "/".
- LANG HEADER TEXT: "Estonian" (static label, shown in the
top bar to the right of BRANDING).
- Page : "OpenLang.ai Estonian" (for SEO only).
- Favicon: A data URI containing the character "文" (deep red on
white).
- SOURCE: Right-justified button with the text "SOURCE" that downloads
the build-instructions.txt file.
--------
Top Bar
--------
The desktop top bar contains an Install button slot to the LEFT of
SOURCE; mobile and tablet do NOT have this slot (they use the
prominent body-level Install button described in INSTALL BUTTON
below).
Smartphone:
BRANDING, LANG, SOURCE on a single line.
Tablet:
BRANDING, LANG (1.3rem), SOURCE.
Desktop (strictly in this order):
BRANDING, LANG (2.0rem), INSTALL-DESKTOP, SOURCE.
INSTALL-DESKTOP is the #install-btn-desktop button. It is hidden by
default (display:none) and shown by JS only when the install
conditions are met (Android beforeinstallprompt fired, or iOS in
Safari) AND the viewport is desktop-sized. When hidden it takes no
space — use display:none, not visibility:hidden.
------------------
Instruction Block
------------------
A short paragraph below the top bar, above the Install button:
"Browse the categories below to play games in your browser, or
install the whole page as an app for offline use.
At the top are everyday phrases and amusing quotes, followed by the
complete 3,000 word
<a href="https://www.oxfordlearnersdictionaries.com/external/pdf/wordlists/oxford-3000-5000/American_Oxford_3000.pdf">
Oxford vocabulary list</a>, grouped by learning level."
=================
PWA & OFFLINE
=================
- SELF-CONTAINED REQUIREMENT:
- index.html must have zero external dependencies (no CDN scripts
no external fonts). All CSS and JS must be inline. Use system
font stacks: Georgia/'Times New Roman' for serif headings
'Helvetica Neue'/Arial for body text.
- sw.js contains only plain JavaScript — no HTML, no module
imports.
- EXCEPTION: the Media.net ad loader script (see AD SLOT section)
is allowed.
- WHY REAL FILES FOR MANIFEST AND ICON:
Chrome 93+ requires the manifest to be served from the same origin
as the page with Content-Type: application/manifest+json. A data:
URI manifest silently fails the installability check
beforeinstallprompt never fires, and the browser falls back to
"Create shortcut" instead of a proper PWA install. Icon src values
must also be fetchable URLs — data: URI icons fail the same check.
- DO NOT ATTEMPT SINGLE-FILE WORKAROUNDS:
All single-file approaches have been tried and fail. Do not
attempt to reintroduce any of the following:
1. Self-registration via query string (index.html?sw):
Nginx resolves Content-Type from the file extension via its
types{} map before any if{} block is evaluated. .html is
already mapped to text/html, so default_type inside an if{}
is never reached. There is no Nginx directive that can
conditionally override a known extension's Content-Type based
on a query string without restructuring the location blocks
in ways that break normal HTML serving. This approach is a
dead end.
2. Blob URL (URL.createObjectURL):
A Blob SW's script URL is blob:https://origin/<uuid>. The SW
spec derives the maximum allowed scope from the script path
which for a Blob is /<uuid>/. Registering with scope /Estonian/
fails with a DOMException. Requires a Service-Worker-Allowed
response header to fix — same server-side problem, more
complex.
3. data: URI as SW script URL:
Browsers block SW registration from data: URIs; the origin is
opaque and registration throws immediately.
Since all assets are on the same HTTPS domain, sw.js is served
with the correct application/javascript MIME type automatically
by virtue of its .js extension. No server configuration is needed.
- MANIFEST (manifest.json — static file, not generated at runtime):
- "name": "OpenLang Estonian"
- "short_name": "OpenLang Estonian"
- "description": brief description of the hub
- "display": "standalone"
- "background_color": "#fafaf9"
- "theme_color": "#991b1b"
- "start_url": "/Estonian/index.html" (absolute, hardcoded). Do not
use window.location.pathname.
- "icons": Two entries, both pointing to "icon.svg" (relative
path). Sizes "192x192" with "purpose": "any maskable", and
"512x512".
- ICON (icon.svg — static file):
- A plain SVG: white/stone-50 background, the "文" character
centred in deep red (#991b1b), Georgia serif font.
- Designed to work at both 192x192 and 512x512.
- index.html MANIFEST LINK:
Static <link> tag in <head> — no JavaScript needed:
<link rel="manifest" href="manifest.json">
- SERVICE WORKER (sw.js):
- Plain top-level JS. No IIFE, no typeof-window guard, no HTML.
- All strings must use only straight ASCII apostrophes and quotes.
- PAGE_URL: Derived at the top of sw.js by replacing the sw.js
filename with index.html:
var PAGE_URL = self.location.href.replace(/sw\.js.*$/, 'index.html');
Resolves to the exact absolute URL used as the cache key for
the landing page shell. Do not use self.registration.scope.
- CACHE_NAME: 'openlang-hebrew-v1'. Increment the version suffix
whenever sw.js or the URL list changes — incrementing is what
triggers the old cache deletion in the activate handler.
- TWO URL ARRAYS — phase 1 (shell) and phase 2 (games):
Derive manifest and icon absolute URLs the same way as PAGE_URL:
var BASE = self.location.href.replace(/sw\.js.*$/, '');
var SHELL_URLS = [ PAGE_URL, BASE + 'manifest.json', BASE + 'icon.svg' ];
var GAME_URLS = [ <UNION of all game URLs across all
categories, each transformed to use
index-offline.html instead of
index.html — the SW caches the offline
builds> ];
Order: the GAME_URLS array should list every category's games
in the order the categories appear in CATEGORY DEFINITIONS.
Within a category, preserve the order of the URL rows.
- broadcast helper (module-level):
function broadcast(msg) {
self.clients.matchAll({includeUncontrolled:true, type:'window'})
.then(function(clients) {
clients.forEach(function(c) { c.postMessage(msg); });
});
}
- precacheOne(cache, url): fetches and stores one URL, ignoring
errors. Wraps the fetch in a 15-second timeout using
Promise.race() so a hung request never blocks the download
chain:
function precacheOne(cache, url) {
var timeout = new Promise(function(resolve) {
setTimeout(resolve, 15000);
});
return Promise.race([fetch(url), timeout])
.then(function(response) {
if (response && response.ok) {
return cache.put(url, response);
}
})
.catch(function() {});
}
- INSTALL — cache shell only:
- Open CACHE_NAME, run precacheOne for each SHELL_URLS entry.
- No progress broadcast during install — the shell is small
and fast; no overlay is shown at this stage.
- After Promise.all, call skipWaiting().
- ACTIVATE:
- Delete every cache whose name !== CACHE_NAME.
- Call self.clients.claim().
- MESSAGE HANDLER — listen for {type:'CACHE_GAMES'} from the page:
When the SW receives this message, cache all GAME_URLS
sequentially (one at a time) with progress broadcasting.
Sequential fetching prevents timeouts and SW termination on
low-powered devices:
var done = 0;
caches.open(CACHE_NAME).then(function(cache) {
return GAME_URLS.reduce(function(chain, url) {
return chain.then(function() {
return precacheOne(cache, url).then(function() {
done++;
broadcast({type:'PRECACHE_PROGRESS'
done:done, total:GAME_URLS.length});
});
});
}, Promise.resolve());
}).then(function() {
broadcast({type:'PRECACHE_DONE', total:GAME_URLS.length});
});
Wrap the handler in event.waitUntil() so the SW stays alive
for the duration of the downloads.
- FETCH HANDLER — three-path strategy:
1. Non-GET requests: pass straight to fetch(event.request);
no caching.
2. Cross-origin requests: pass straight to fetch(event.request);
no caching. Never store opaque responses.
3. Same-origin GET requests: cache-first.
url = event.request.url (use this string as the cache key)
cache.match(url)
hit -> return cached response
miss -> fetch from network
ok: cache.put(url, response.clone())
return response
failed: return cache.match(PAGE_URL)
hit -> return shell (offline fallback)
miss -> return new Response('Offline'
{status: 503})
=====================
LANDING PAGE HTML/JS
=====================
- JAVASCRIPT STRUCTURE (in index.html) — TWO separate script blocks:
BLOCK A: A <script> tag placed in <head>, before </head>.
Registers the beforeinstallprompt listener as early as possible
so it cannot be missed. Chrome fires this event during page load
often before <body> script tags execute. Storing it on window
makes it accessible to Block B.
IMPORTANT: Do NOT call the prompt here — the DOM may not be
ready. Only capture and store the event, then enable any install
buttons that already exist.
There are TWO install button slots in the HTML
(#install-btn-mobile and #install-btn-desktop); CSS media queries
decide which one is visible at any given viewport. The JS treats
them as a set: enable both, listen for clicks on both, and let
CSS hide whichever isn't appropriate.
var deferredPrompt = null;
function forEachInstallBtn(fn) {
var ids = ['install-btn-mobile', 'install-btn-desktop'];
for (var i = 0; i < ids.length; i++) {
var btn = document.getElementById(ids[i]);
if (btn) fn(btn);
}
}
function enableInstallButtons() {
forEachInstallBtn(function(btn) {
btn.disabled = false;
btn.style.display = 'inline-flex';
});
}
function hideInstallButtons() {
forEachInstallBtn(function(btn) {
btn.style.display = 'none';
});
}
window.addEventListener('beforeinstallprompt', function(e) {
e.preventDefault();
deferredPrompt = e;
/* Enable any install buttons that already exist in the DOM */
enableInstallButtons();
});
BLOCK B: A <script> tag at the end of <body>, after all HTML
elements. Contains all remaining logic in this exact order:
STEP 1 — WIRE UP ANDROID INSTALL BUTTONS:
By the time Block B runs, beforeinstallprompt may have
already fired and stored the event in deferredPrompt. If so
enable the install buttons. The beforeinstallprompt listener
in Block A handles the case where the event fires later.
/* Enable install buttons if prompt already captured */
if (deferredPrompt) {
enableInstallButtons();
}
/* Wire the same click handler to both buttons. CSS ensures
only one is actually visible to the user at a time. */
forEachInstallBtn(function(btn) {
btn.addEventListener('click', function() {
if (!deferredPrompt) return;
var p = deferredPrompt;
deferredPrompt = null;
p.prompt();
p.userChoice.then(function(choice) {
if (choice.outcome === 'accepted') {
hideInstallButtons();
startGameDownload();
}
});
});
});
STEP 2 — DETECT iOS:
/* isIOS: navigator.standalone is defined only on iOS WebKit.
It is never present on Android. */
var isIOS = (typeof navigator.standalone !== 'undefined');
STEP 3 — DEFINE startGameDownload() helper:
GAME_TOTAL is the total number of game URLs across all
categories, emitted as a literal number by the build.
function startGameDownload() {
var overlay = document.getElementById('dl-overlay');
overlay.classList.add('active');
document.getElementById('dl-bar-fill').style.width = '0%';
document.getElementById('dl-sub').textContent = '0 of ' + GAME_TOTAL + ' files';
navigator.serviceWorker.ready.then(function(reg) {
reg.active.postMessage({type: 'CACHE_GAMES'});
});
}
STEP 4 — LISTEN FOR SW MESSAGES (progress + done):
navigator.serviceWorker.addEventListener('message', function(e) {
if (e.data.type === 'PRECACHE_PROGRESS') {
var pct = Math.round(e.data.done / e.data.total * 100);
document.getElementById('dl-bar-fill').style.width = pct + '%';
document.getElementById('dl-sub').textContent =
e.data.done + ' of ' + e.data.total + ' files';
}
if (e.data.type === 'PRECACHE_DONE') {
document.getElementById('dl-bar-fill').style.width = '100%';
document.getElementById('dl-sub').textContent =
e.data.total + ' of ' + e.data.total + ' files';
setTimeout(function() {
document.getElementById('dl-overlay').classList.remove('active');
localStorage.setItem('games-cached', '1');
}, 600);
}
});
STEP 5 — REGISTER SERVICE WORKER:
if ('serviceWorker' in navigator) {
var swURL = window.location.pathname.replace(/[^/]+$/, '') + 'sw.js';
navigator.serviceWorker.register(swURL, {scope: './'}).catch(function(){});
}
STEP 6 — IOS STANDALONE LAUNCH (first launch from home screen icon):
If running as installed PWA on iOS and games not yet cached
start download immediately:
if (isIOS
&& navigator.standalone === true
&& !localStorage.getItem('games-cached')) {
startGameDownload();
}
STEP 7 — IOS INSTALL BUTTONS (shown in Safari, not standalone):
On iOS, repurpose the install buttons: instead of calling
deferredPrompt.prompt() (which doesn't exist on iOS), open a
modal popup with Add-to-Home-Screen instructions for iOS 26.
Show the buttons when:
- isIOS is true
- navigator.standalone is false (user is in Safari, not
the installed app)
Both buttons get the iOS treatment; CSS still hides whichever
one isn't appropriate for the current viewport.
if (isIOS && navigator.standalone !== true) {
forEachInstallBtn(function(btn) {
btn.disabled = false;
btn.style.display = 'inline-flex';
/* Replace the click handler set in STEP 1 with the iOS
modal opener. Using cloneNode is the simplest way to
drop any previously attached listeners. The clone keeps
the same id, so subsequent forEachInstallBtn calls
still find it. */
var clone = btn.cloneNode(true);
btn.parentNode.replaceChild(clone, btn);
clone.addEventListener('click', function() {
document.getElementById('ios-modal').classList.add('visible');
});
});
}
document.getElementById('ios-modal-close')
.addEventListener('click', function() {
document.getElementById('ios-modal').classList.remove('visible');
});
/* Also close modal if user taps the backdrop */
document.getElementById('ios-modal')
.addEventListener('click', function(e) {
if (e.target === this) {
this.classList.remove('visible');
}
});
STEP 8 — STANDALONE LINK REWRITING:
The URL list uses index.html so browser users get the normal
online page. When the page is running as an installed PWA
(standalone mode), rewrite all game card links to point to
index-offline.html instead, so the service worker serves the
cached offline build. Also hide the install button in
standalone mode — there is nothing left to install.
var isStandalone = window.matchMedia('(display-mode: standalone)').matches
|| (navigator.standalone === true);
if (isStandalone) {
document.querySelectorAll('.game-card').forEach(function(a) {
a.href = a.href.replace(/\/index\.html$/, '/index-offline.html');
});
hideInstallButtons();
}
STEP 9 — SCROLL OPENED CATEGORY BLOCKS INTO VIEW:
When a user taps a collapsed category block near the bottom
of the viewport, the native <details> element expands below
the fold and the user sees no visible change. Attach a
'toggle' listener to every .cat-block that, when the block
transitions to open, scrolls it into view so its summary and
at least the start of its body are visible.
Use scrollIntoView with block:'start' so the summary lines up
near the top of the viewport. Guard with a check on
details.open so the handler only fires on open, not on close.
Use smooth scrolling where supported.
document.querySelectorAll('.cat-block').forEach(function(d) {
d.addEventListener('toggle', function() {
if (!d.open) return;
/* Defer to next frame so the layout reflects the newly
expanded body before we measure scroll position. */
requestAnimationFrame(function() {
d.scrollIntoView({behavior: 'smooth', block: 'start'});
});
});
});
Note: scrollIntoView with block:'start' aligns the top of the
element with the top of the scroll container. If the page has
a fixed top bar, the summary may slide behind it. If that
becomes a problem, switch to block:'nearest' (scrolls the
minimum amount to bring the element fully into view) or add
a scroll-margin-top rule to .cat-block equal to the top bar's
height.
- INSTALL BUTTON (in index.html):
Two install button slots exist in the HTML; CSS shows ONE of them
based on viewport width:
#install-btn-mobile — prominent primary-styled button shown
on mobile and tablet, placed below the
instruction block and above the first
category block.
#install-btn-desktop — secondary-styled button shown on
desktop only, placed in the top bar
between LANG and SOURCE.
Both buttons trigger the same install flow. On Android they fire
the native install prompt. On iOS they open the modal with
Add-to-Home-Screen instructions.
DESKTOP DETECTION: A viewport is considered "desktop" when
window.matchMedia('(min-width: 1024px) and (pointer: fine)')
matches. This requires both a wide viewport and a precise pointer
which excludes phones in landscape and most tablets. The same
media query is used in CSS to flip which button is visible, and
in JS to decide which button to activate.
HTML — desktop button (place inside the top bar, between LANG and
SOURCE):
<button id="install-btn-desktop" class="install-btn install-btn-secondary"
style="display:none" disabled>
<span class="install-btn-icon">⬇</span>
<span class="install-btn-text">Install</span>
</button>
HTML — mobile/tablet button (place below the instruction block
above the first category block):
<div id="install-bar">
<button id="install-btn-mobile" class="install-btn install-btn-primary"
style="display:none" disabled>
<span class="install-btn-icon">⬇</span>
<span class="install-btn-text">Install for offline use</span>
</button>
</div>
Both buttons are hidden by default (display:none, disabled). They
are enabled and shown by JS when:
- beforeinstallprompt has fired (Android), OR
- isIOS is true and the app is not already in standalone mode.
AND the matching media query is satisfied (mobile/tablet button
only shows when desktop media query is FALSE; desktop button only
shows when it's TRUE).
If the install conditions are not met (e.g. desktop Chrome with
no install prompt, or the app is already installed), neither
button is shown.
CSS:
/* Shared button base */
.install-btn: border:none, cursor:pointer, display:inline-flex
align-items:center, gap:0.5rem, font-family: 'Helvetica Neue'
Arial, sans-serif. On disabled: opacity:0.5, cursor:default.
.install-btn-icon: font-size:1.1rem, line-height:1.
/* Mobile/tablet primary styling — large, deep-red filled */
#install-bar: display:flex, justify-content:center
margin: 0.75rem 0 1rem 0.
.install-btn-primary: background:#991b1b, color:#fff
padding:0.7rem 1.4rem, border-radius:8px, font-weight:700
font-size:1rem, box-shadow: 0 1px 3px rgba(0,0,0,0.12).
On hover: filter:brightness(1.08).
/* Desktop secondary styling — smaller, outlined, less weight */
.install-btn-secondary: background:transparent, color:#991b1b
border:1.5px solid #991b1b, padding:0.35rem 0.85rem
border-radius:6px, font-weight:600, font-size:0.85rem.
On hover: background:#991b1b, color:#fff.
/* Visibility flip — desktop button only on desktop, mobile
button only NOT on desktop. JS still controls display
between 'none' and 'inline-flex' based on install
conditions; these media-query rules add an extra gate so
that even if JS shows a button, the wrong one can't appear
on the wrong viewport. */
@media (max-width: 1023px), (pointer: coarse) {
#install-btn-desktop { display: none !important; }
}
@media (min-width: 1024px) and (pointer: fine) {
#install-bar { display: none !important; }
}
- DOWNLOAD PROGRESS OVERLAY (in index.html):
The overlay is shown in the foreground immediately after the
user accepts the Android install prompt or on the first launch
from the home screen on iOS. It blocks the categories until all
games from every category are cached. It is never shown to users
who browse without installing.
HTML (place inside <body>, before the category blocks):
<div id="dl-overlay">
<div id="dl-title">Downloading games for offline use...</div>
<div id="dl-bar-wrap"><div id="dl-bar-fill"></div></div>
<div id="dl-sub">0 of GAME_TOTAL files</div>
</div>
CSS:
#dl-overlay: display:none, position:fixed, inset:0, high
z-index, near-opaque stone-50 background, flex column
centred.
#dl-overlay.active: display:flex.
#dl-bar-wrap: width:min(380px,80vw), height:10px, stone-200
background, border-radius:9999px, overflow:hidden.
#dl-bar-fill: height:100%, initial width:0%, red background
border-radius:9999px, transition: width 0.35s ease.
- IOS INSTALL MODAL (in index.html):
Place the modal at the end of <body>, before closing </body>
tag. The install button in its iOS mode (see STEP 7) opens this
modal instead of firing a native prompt.
Modal HTML:
<div id="ios-modal">
<div id="ios-modal-box">
<div id="ios-modal-title">Install OpenLang</div>
<div id="ios-install-msg">To install the app on an iPhone
running iOS 26, open this page in Safari. Tap the
three dots menu at the bottom of the screen, then
Share. Scroll down the share menu and tap “Add
to Home Screen”. Finally, confirm the app’s
name and tap “Add” in the top right corner.
</div>
<button id="ios-modal-close">Close</button>
</div>
</div>
CSS:
#ios-modal: display:none, position:fixed, inset:0
z-index:2000, background:rgba(0,0,0,0.55)
align-items:center, justify-content:center.
#ios-modal.visible: display:flex.
#ios-modal-box: background:#fff, border-radius:12px
padding:1.5rem, max-width:320px, width:90%, display:flex
flex-direction:column, gap:1rem, text-align:center.
#ios-modal-title: font-family:Georgia serif
font-size:1.1rem, font-weight:700, color:#991b1b.
#ios-install-msg: font-size:0.95rem, color:stone-700
line-height:1.5.
#ios-modal-close: background:stone-200, border:none
padding:0.4rem 1rem, border-radius:6px, cursor:pointer
font-size:0.9rem, font-weight:600, align-self:center.
---------------
Category Icons
---------------
Each category has an "Icon:" metadata field in its CATEGORY
DEFINITIONS block whose value is one of the icon names listed below.
The page must render that icon as an inline SVG inside the
collapsible block's <summary>, to the LEFT of the title.
Each icon is a small square clip-art-style SVG, 44x44 pixels, drawn
in a TWO-TONE style:
- A circular stone-300 (#d6d3d1) filled background.
- The figure drawn on top of the background in deep red
(#991b1b), as filled shapes and/or thick strokes (stroke
width 2.5-3 px). No outlines around the background circle.
No gradients. No additional colors.
- The figure should fill roughly the central 70% of the
background circle, leaving a small visible margin of stone
on all sides.
- viewBox "0 0 44 44", width and height attributes 44.
- Use stroke-linecap="round" and stroke-linejoin="round" on
any stroked paths so the figures look soft, not jagged.
Icon definitions (draw each icon to match the description):
Icon name: Phrases
Description: A speech bubble (rounded rectangle with a small
tail pointing down-left) containing three short horizontal
lines stacked vertically, suggesting lines of text. Represents
spoken or written phrases.
Icon name: Vocabulary
Description: a speech bubble with a single line inside it.
Icon name: aac
Description: A 2x2 grid of four small rounded squares, evenly
spaced, suggesting an AAC (Augmentative and Alternative
Communication) symbol board where users tap pictograms to
communicate. Each cell is filled deep red; the gaps between
cells show the stone background through.
Adding more categories later: when a new category is added with an
Icon: name that doesn't appear in the list above, add a new
"Icon name:" definition to this section before adding the category.
If a category has no Icon: field, omit the icon element entirely for
that block (no placeholder, no empty space).
-----------------
Category Blocks
-----------------
- One collapsible block per category in CATEGORY DEFINITIONS, in the
same order they appear at the bottom of this file.
- Use the native <details> / <summary> elements — no JavaScript
needed for the collapse/expand behaviour.
- ALL blocks are collapsed by default. Do NOT add the `open`
attribute to any <details> element.
Block structure (per category):
<details class="cat-block">
<summary class="cat-summary">
<div class="cat-summary-header">
<span class="cat-icon">
<!-- Inline SVG for the icon named in this category's
"Icon:" metadata field, drawn per the Category
Icons section above. Omit this <span> entirely if
the category has no Icon: field. -->
</span>
<span class="cat-title">CATEGORY_NAME</span>
<span class="cat-count">N games</span>
</div>
<dl class="cat-meta">
<!-- one <dt>/<dd> pair per metadata field in this
category's CATEGORY DEFINITIONS block, in the order
they appear. Skip this entire <dl> if the category
has no metadata. -->
<dt>LABEL</dt>
<dd>VALUE</dd>
...
</dl>
</summary>
<div class="cat-body">
<div class="game-grid">
<!-- one card per URL in that category's URL List -->
<a class="game-card" href="<URL>">
<div class="game-icon">ICON_TEXT</div>
<div class="game-name">NAME</div>
</a>
...
</div>
</div>
</details>
Notes:
- CATEGORY_NAME is the "Category:" value from the definitions block.
- N in "N games" is the count of URL rows in that category's URL
list.
- The <dl class="cat-meta"> contains one <dt>/<dd> pair per metadata
field in the category's CATEGORY DEFINITIONS block. A metadata
field is any line between "Category:" and "Here is the URL List:"
that matches the pattern "Label: value" (colon-separated). The
label goes in <dt>, the value goes in <dd>. Emit fields in the
order they appear in the definitions. If a category has no
metadata fields, omit the entire <dl class="cat-meta"> element
(do not emit an empty <dl>).
- EXCEPTION: the "Icon:" field is structural (it selects a category
icon from the Category Icons section) and must NOT appear in the
rendered <dl>. Skip it when emitting metadata. If Icon: is the
only metadata field on a category, that category has no rendered
metadata and the <dl> must be omitted entirely.
- Metadata values may contain inline HTML (for example <strong>
<em>, <br>, <code>, <a>). Pass these through to the rendered
output verbatim — do NOT escape the angle brackets. Do NOT add
any HTML that wasn't in the source value.
- There is NO per-category install button. Installation is a single
hub-level action performed from the install button at the top of
the page (see INSTALL BUTTON section above).
--------------
Game Grid
--------------
Inside each category block's <div class="cat-body">:
- 4 columns on mobile, 4 on tablet, 4 on desktop.
- Each card: 60x60px rounded-xl deep-red icon square containing the
Icon Text in white, with the game Name below the icon.
- Hover: subtle scale-105 and shadow enhancement.
- Links open in the current window.
- Links must use absolute URLs as provided in the URL list;
standalone link rewriting (STEP 8) swaps index.html for
index-offline.html at runtime when the app is launched from the
home screen.
----------------------
Category Block Styling
----------------------
.cat-block: stone-50 background, 1px stone-200 border
border-radius 8px, margin-bottom 0.75rem, overflow hidden.
.cat-summary: cursor pointer, padding 0.9rem 1.1rem, display flex
flex-direction column, gap 0.5rem. (Native <summary> elements have
a default marker that interacts awkwardly with flex column layout —
set list-style: none on the summary and use
::-webkit-details-marker { display: none } to hide it, then draw a
disclosure triangle manually in the header row using a ::before
pseudo-element on .cat-summary-header, or leave the native marker
and accept its position.)
.cat-summary-header: display flex, align-items center
justify-content space-between, gap 0.75rem, font-family Georgia
serif, font-size 1.15rem, font-weight 700, color #991b1b.
.cat-icon: flex 0 0 auto, width 44px, height 44px, display
inline-flex, align-items center, justify-content center. The inner
<svg> should fill this box (width:100%, height:100%).
.cat-title: flex-grow 1.
.cat-count: font-family sans-serif, font-size 0.8rem, font-weight
400, color stone-500, text-transform uppercase, letter-spacing
0.06em.
.cat-meta: margin 0, padding 0, display grid
grid-template-columns max-content 1fr, column-gap 0.75rem
row-gap 0.25rem, font-family sans-serif, font-size 0.85rem
line-height 1.4, color stone-700.
.cat-meta dt: margin 0, font-weight 600, color stone-500
text-transform uppercase, letter-spacing 0.04em
font-size 0.72rem, align-self center.
.cat-meta dd: margin 0, color stone-700.
.cat-meta dd strong: font-weight 700, color stone-900.
.cat-meta dd em: font-style italic.
.cat-meta dd a: color #1e3a8a, font-weight 600, text-decoration none.
.cat-body: padding 1rem 1.1rem 1.1rem 1.1rem
border-top 1px solid stone-200.
--------
Ad Slot
--------
Include ONE ad slot on the page, placed at the bottom.
The slot spans the full content width (max 1024px).
The slot contains a Media.net ad unit. Use a placeholder publisher
ID of "123456789" — this will be replaced with the real ID at
launch. Media.net requires two script tags: one global loader in
<head> and one per-slot inline script in the ad div.
In <head> (alongside other meta tags):
<script src="//contextual.media.net/dmedianet.js?cid=123456789"
async></script>
HTML for the ad slot:
<div class="ad-slot">
<div class="ad-label">Reserved for future ads</div>
<div id="media-net-ad">
<script>
window._mNHandle = window._mNHandle || {};
window._mNHandle.queue = window._mNHandle.queue || [];
window._mNHandle.queue.push(function() {
window._mNDetails.loadTag("123456789", "320x50", "media-net-ad");
});
</script>
</div>
</div>
CSS for the ad slot:
.ad-slot: width: 100%, display: flex, flex-direction: column
align-items: center, justify-content: center, gap: 0.25rem
background: stone-100, border: 1px dashed stone-300
border-radius: 8px, padding: 0.4rem 0, margin: 0.25rem 0.
.ad-label: font-size: 0.65rem, color: stone-400
font-family: sans-serif, letter-spacing: 0.08em
text-transform: uppercase, pointer-events: none.
#media-net-ad: min-height: 50px, width: 320px, max-width: 100%.
===============================================================================
CATEGORY DEFINITIONS
===============================================================================
Each category block starts with a "Category:" line and ends at the
next "Category:" line or at end-of-file. Between the Category line
and the "Here is the URL List:" line, any number of optional metadata
fields may appear, each on its own line in the form:
The "Icon:" field is a special structural field that selects a
category icon from the Category Icons section above; it is NOT
rendered in the metadata list.
Category: Phrases
Icon: Phrases
<strong>Idiomatic phrases, neologisms, and quotations (A2-C2)</strong>
Phrases of varying length, plus modern coinages and political/religious quotations
Here is the URL List, along with the Name and Icon Text:
URL,Name,Icon Text
https://openlang.ai/Estonian/Idiomatic-Phrases/index.html,Idiomatic Phrases,P1
https://openlang.ai/Estonian/Short-Phrases/index.html,Short Phrases,P2
https://openlang.ai/Estonian/Longer-Phrases/index.html,Longer Phrases,P3
https://openlang.ai/Estonian/Longest-Phrases/index.html,Longest Phrases,P4
https://openlang.ai/Estonian/Neologisms/index.html,Neologisms,N1
https://openlang.ai/Estonian/Leftist/index.html,Leftist Quotes,Q1
https://openlang.ai/Estonian/Capitalist/index.html,Capitalist Quotes,Q2
https://openlang.ai/Estonian/Religious/index.html,Religious Quotes,Q4
Basic personal info, simple phrases, and everyday expressions.
Icon: vocabulary
Here is the URL List, along with the Name and Icon Text:
URL,Name,Icon Text
https://openlang.ai/Estonian/Beginner-1/index.html,A1,[A-B]
https://openlang.ai/Estonian/Beginner-2/index.html,A1,[B-E]
https://openlang.ai/Estonian/Beginner-3/index.html,A1,[E-G]
https://openlang.ai/Estonian/Beginner-4/index.html,A1,[G-M]
https://openlang.ai/Estonian/Beginner-5/index.html,A1,[M-P]
https://openlang.ai/Estonian/Beginner-6/index.html,A1,[P-S]
https://openlang.ai/Estonian/Beginner-7/index.html,A1,[S-T]
https://openlang.ai/Estonian/Beginner-8/index.html,A1,[T-Y]
---------------------------
Direct exchange of information, routine tasks, and basic description of your background.
Icon: vocabulary
Here is the URL List, along with the Name and Icon Text:
URL,Name,Icon Text
https://openlang.ai/Estonian/Elementary-1/index.html,A2,[A-B]
https://openlang.ai/Estonian/Elementary-2/index.html,A2,[B-D]
https://openlang.ai/Estonian/Elementary-3/index.html,A2,[D-F]
https://openlang.ai/Estonian/Elementary-4/index.html,A2,[F-L]
https://openlang.ai/Estonian/Elementary-5/index.html,A2,[L-P]
https://openlang.ai/Estonian/Elementary-6/index.html,A2,[P-R]
https://openlang.ai/Estonian/Elementary-7/index.html,A2,[R-S]
https://openlang.ai/Estonian/Elementary-8/index.html,A2,[S-Z]
---------------------------
Handling travel situations, understanding main points on familiar topics, and producing simple connected text.
Icon: vocabulary
Here is the URL List, along with the Name and Icon Text:
URL,Name,Icon Text
https://openlang.ai/Estonian/Intermediate-1/index.html,B1,[A-C]
https://openlang.ai/Estonian/Intermediate-2/index.html,B1,[C-D]
https://openlang.ai/Estonian/Intermediate-3/index.html,B1,[D-F]
https://openlang.ai/Estonian/Intermediate-4/index.html,B1,[F-L]
https://openlang.ai/Estonian/Intermediate-5/index.html,B1,[L-P]
https://openlang.ai/Estonian/Intermediate-6/index.html,B1,[P-R]
https://openlang.ai/Estonian/Intermediate-7/index.html,B1,[R-S]
https://openlang.ai/Estonian/Intermediate-8/index.html,B1,[S-Y]
---------------------------
Understanding complex ideas, spontaneous interaction with native speakers, and producing clear, detailed text on varied subjects.
Icon: vocabulary
Here is the URL List, along with the Name and Icon Text:
URL,Name,Icon Text
https://openlang.ai/Estonian/Upper-Intermediate-1/index.html,B2,[A-C]
https://openlang.ai/Estonian/Upper-Intermediate-2/index.html,B2,[C-D]
https://openlang.ai/Estonian/Upper-Intermediate-3/index.html,B2,[D-F]
https://openlang.ai/Estonian/Upper-Intermediate-4/index.html,B2,[F-I]
https://openlang.ai/Estonian/Upper-Intermediate-5/index.html,B2,[J-O]
https://openlang.ai/Estonian/Upper-Intermediate-6/index.html,B2,[O-R]
https://openlang.ai/Estonian/Upper-Intermediate-7/index.html,B2,[R-S]
https://openlang.ai/Estonian/Upper-Intermediate-8/index.html,B2,[S-Z]
---------------------------