Screen width limited to 1366 pixels. Left and right gutters equal width. ------------ Main Content (Two Column Layout) ------------ Column 1: Language Grid: Display reduced height buttons as cards (same color) in a 4-column grid (3 column on mobile and tablet). Font size minimum: 12rem. Format: -------------------------- Native Name (12em, arial, bold, deep red) English Name (9.5em, arial, black) ------------------------- Each card links to /LANGUAGE. Style cards like buttons. For any Native Name longer than 12 characters, reduce the font size to 8.5em to ensure it fits inside the button without overflowing. Do not scale up Native Name. Reduce padding above and below text. "Language Chooser" (Do not display heading): Chinese, Spanish, French, German, Ukrainian, Portuguese, Korean, Vietnamese, Hindi, Persian, Arabic, Swahili. "More Languages" (Collapsible, Default Hidden): Azerbaijani, Basque, Belarusian, Bengali, Bulgarian, Burmese, Catalan, Czech, Danish, Dutch, Esperanto, Estonian, Finnish, Georgian, Greek, Hausa, Hawaiian, Hebrew, Hungarian, Irish, Italian, Japanese, Lao, Latin, Latvian, Lithuanian, Madurese, Malay, Maori, Navajo, Norwegian, Occitan, Pashto, Polish, Punjabi, Romanian, Russian, Serbo-Croatian, Sindhi, Slovak, Somali, Swedish, Tagalog, Tamil, Tatar, Telugu, Thai, Turkish, Urdu, Welsh, Yiddish Technology Stack: Create a table with three columns. Product (10.5rem) |How It's Used (9.5rem) |Owner (11 rem) Products (use exact names as written): Gemini,Claude,JavaScript,React,Tailwind,PWA,Web Speech Populate the second and third columns yourself. For "Owner", use the company or organization that controls the actual product, not the trademark. Link the Technology field to its homepage or to a site that describes the technology, with navy blue text. For "DeepMind", use this text for the "How It's Used" field: "Design and code generation for games". For "Sonnet", use this text: "Design and packaging of installable apps". For "Web Speech", use this text: "Browser-based Speech Synthesis". Block: Threatened Languages Create a table of threatened languages with two columns: Language (23%, .88rem) |Status and Community (77% .96rem) Belarusian Irish Navajo Welsh Yiddish Hawaiian The Language column has a button with the same format as the buttons above. Populate the right column yourself at .8rem. For the language field, use the same buttons as above. For the second field, compose a short description of the community and politics around the language, where and how the language speakers are organized. For Belarusian: "While Russian dominates everyday use, Belarusian is compulsory for all schoolchildren and serves as the resistance language of exiled democratic forces." Others (bottom row of the table with buttons only): Basque,Catalan,Occitan,Tatar Eliminate excess vertical space in the table. Block: Loanwords Subheading: English expressions borrowed directly from other languages Language chooser block like those above. The buttons should link to /LANGUAGE/Loanwords Include these languages: Latin,French,Russian,Yiddish,Spanish,German,Italian,Arabic -------- Column 2: -------- Features Block: Create a bullet list, using tight vertical spacing. Header: "Features" Bullet points: o Thousands of free and open-source games. o Learn English and 60+ other languages. o Easy install on mobile for offline use. o Apps with no ads or in-app purchases. o Human-like speech for many languages. o Customizable app generation — instructions provided. "Open Source for Everyone" block with a light background (bg-white) and border. Include the following text and Use Cases: The Open Source movement was a revolution for programmers, allowing them to freely reuse existing tools and systems. With the advent of mass-market AI, anyone can build with Open Source. Every page on this site has a "Source" button in the top corner. You can download the source prompt for any game, change it for your needs, and produce a fully functional customized game. Create Use_Cases table with three columns: Use Case (25%)|Content (.88rem)|Game Link Venture Capitalist in Ukraine|Terms related to investment and startup culture in Ukraine.|/Ukrainian/VC-Invest/ German Fun Words|Interesting German compound words that don't have a direct translation in English.|/German/Compound Navajo Culture|Navajo words that have no direct translation into English.|/Navajo/Navajo-Culture Belarusian Politics|Slogans, with explanation who uses it and in what context.|/Belarusian/Political-Slogans/ Irish Pupil|Irish Gaelic words that a 3rd class student would be expected to know.|/Irish/Pupil The "Game Link" field should have a button that says "Play" linked to the URL in the field. Do not display the URL link text itself. Block: Lifelike Speech in Most Languages OpenLang.ai provides both visual and auditory feedback to optimize the learning experience. Just a few years ago computer speech was robotic and annoying. Now even budget smartphones can produce human-like voices in dozens of languages. Check out the video guide to configure text-to-speech on your device. The language spoken by the app depends on which language the user is learning. If the primary browser language is English, then the app assumes that the user is learning the second language and uses that voice. Otherwise, the voice is English. Block: Community Title: "Community Forum" "Suggest improvements, report bugs, and share games you've built: forum.openlang.ai" Include an image on the right side: "Create a simple SVG clip-art graphic representing a group discussion. The image should show three overlapping speech bubbles in the center, each containing horizontal lines suggesting text. Below the speech bubbles, place three simple small abstract human figures made of two stacked circles (a smaller head circle on top of a larger body circle). Each person and their corresponding speech bubble should be a different color: deep red, teal green, and warm brown. The speech bubbles should have rounded corners and small triangular tails pointing down toward the figures. The white text lines inside the bubbles should be semi-transparent. The overall style should be flat, minimal, and icon-like with no outlines or borders." Link this entire block to https://forum.openlang.ai In small print directly under the block: "Powered by Discourse, the leading open-source community platform." Block "Reserved for Future Ad" 32px height -------------------- GLOBAL CONFIGURATION -------------------- - SOURCE: Right-justified button with the text "SOURCE" (1rem). Link . ------------- Theme & Style ------------- Use the Tailwind 'Stone' palette. Headings should be deep red and serif; body text sans-serif. Do not display any comments. Links: Bold font, dark blue color. Links must open in the current window. ARCHITECTURE (critical) Produce a single static index.html file containing all content inline. Do NOT use React, Vue, Svelte, Next.js, or any client-side rendering framework. The full page content — language grid, features, technology stack, threatened languages, use cases — must be present as HTML in the initial server response, before any JavaScript executes. Use Tailwind via the CDN script tag for styling. Use plain vanilla JavaScript (no frameworks) only for the small interactive pieces: the hamburger menu toggle, the "More Languages" collapse/expand, and the mailing list form submission. All other content is static HTML. The goal: a user or crawler that fetches this page with JavaScript disabled must still see the full content. Test by conceptually asking: "if I removed all the