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). Format: -------------------------- Native Name (12em, arial, bold, deep red) English Name (9.5em, arial, black) ------------------------- Each card links to /LANGUAGE. 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, Bulgarian, Burmese, Catalan, Czech, Danish, Dutch, Esperanto, Estonian, Finnish, Georgian, Greek, Hawaiian, Hebrew, Hungarian, Irish, Italian, Japanese, Lao, Latin, Latvian, Lithuanian, Navajo, Norwegian, Occitan, Pashto, Polish, Punjabi, Romanian, Russian, Serbo-Croatian, Sindhi, Slovak, Swedish, Tamil, Tatar, Telugu, Thai, Turkish, Urdu, Welsh, Yiddish Technology Stack: Create a table with three columns. Middle column: make it wider, with text at 9.5rem Product|How It's Used|Owner 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". Threatened Langages Block 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 -------- 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%)|Prompt (.94rem)|Game Link Venture Capitalist in Ukraine|Find 40 phrases and terms related to investment and startup culture in Ukraine.|/Ukrainian/VC-Invest/ German Fun Words|Generate a list of 20 interesting German compound words that don't have a direct translation in English. Example: Schadenfreude.|/German/Compound Studying Navajo Culture |Create a dataset of the 10 most common Navajo words that have no direct translation into English.|/Navajo/Navajo-Culture Irish Grammar School Pupil|Generate a list of 50 Irish Gaelic words that a 3rd class student in an Irish primary school 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