Page Title: "OpenLang FAQ"

Screen width limited to 1024 px. Left and right gutters equal width.
Reduce the header width to 1024 px.
Reduce the SLOGAN to 1 rem.

Use FAQ format for this page. Display the Questions and hide the Answers until a user clicks on the question.
Interpret the text inside curly braces ({}) as a command for you to generate content in that location.
Replace "->" with " U+2192 " (Right Arrow)

-- Section Header: "Getting Started"

Q: How do I play the games?
A: Drag the cards from the left column and drop on the right column. Double tap to get a hint. Tap the question mark at the top of the screen for details about scoring.
See the <a href="/video">Video Guide.

Q: Where can I get more information or suggest improvements?
A: Check out the community forum at <a href=https://forum.openlang.ai>forum.openlang.ai</a>.

Q: How can I see a list of all the cards along with the answers?
A: Take a look at the page source code. On desktop, press Control-U in any game and scroll down a page or two. On mobile, add "view-source:" in front of the URL. 

-- Section Header: "Vibe Coding"

Q: What is "vibe coding"?
A: {what is vibe coding, when did it start}

Q: How do I use this site as a starting point for vibe coding?
A: -- Find a game that matches the language and game format that interests you. 
   -- Click the SOURCE button to download the build-instructions for that game. 
   -- Edit the "Content Generation" section of the build-instructions and save the file. 
   -- Go to the Google AI Studio in your browser (https://aistudio.google.com).
   -- Upload the edited build-instructions and Run.
   -- After about three minutes the index.html file will be ready. Just open it in a browser.
The entire process takes less than five minutes, most of which is spent waiting for the AI to produce the game. You can see the process for building a custom game in the <a href="/video">Video Guide</a>.

Q: How much would that cost me?
A: { Explain free level on AI Studio. Explain that adding an API key allows full access to all models }
Using an API key and the most advanced model, the cost per game would about 0.40 USD.
With a flash model, the cost would be an order of magnitude lower (but with higher likelihood of bugs/hallucinations). 

Q: Why do you build the games with Google AI models instead of Anthropic or OpenAI?
A: The frontier models from any of those companies are capable of producing the games for common languages like French. But Google has more training data for under-resourced languages like Pashto and Navajo. 
Google also offers models that are substantially cheaper than its competitors.

-- Section Header: "Foreign Language Voices"
Q: How does the speech synthesis work? 
{Explain the Web Speech API, browser support and which languages it supports}

Q: The speech synthesis sounds robotic or with a completely wrong accent.
A: That problem can often be solved by adding language support on your device (see below). If that does not work, then you can use the MUTE button.

Q: How do I install a foreign language voice on Android?
A: {Describe the process for Android 14-16, and separately for Android 10-13}
See the <a href="/video#Language">Video Guide.

Q: How do I install a foreign language voice on iOS?
A: {Describe the process for iOS 26. Settings -> Accessibility -> Read and Speak -> Voices -> Select Language -> Voice -> Tap Cloud Icon } 
See the <a href="/video#Language">Video Guide.

Q: How do I install a foreign language voice on MS Windows?
A: {Describe the process } 

Q: How do I install a foreign language voice on MacOS?
A: {Describe the process } 

Q: How do I install a foreign language voice on Linux?
A: {Describe the process } 

Q: The language I want to learn is not supported on my Android device.
A: {Describe the RHVoice app for Android, mentioning support for Belarusian and Tatar languages.}
See the <a href="/video#Threatened-Languages">Video Guide.

Q: The language I want to learn is not supported on Windows.
A: {Describe how to install espeak-ng-sapi on Windows for Firefox.  Note the languages that it supports but native Windows lacks.}

Q: How can I turn off audio speech synthesis entirely?
A: Use the MUTE button at the top of the game.


-- Section Header: "App Installation on Mobile"
Q: What are the advantages of installing the app on mobile?
A: {advantages of installing PWA}

Q: How do I install tha app on an iPhone?
A:  To install the app on an iPhone running iOS 26, open a langauge page (for example <a href="/French" style="color: blue;>French</a>) in Safari. Tap the three dots menu at the bottom of the screen, and 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. Then you should open that app when you are still online, at that point the games are actually downloaded. 
See the <a href="/video#Install">Video Guide.

Q: How do I install tha app on Android?
A: On a language page (for example (for example <a href="/French" style="color: blue;>French</a>) ) tap "Install" and then confirm installation.
See the <a href="/video#Install">Video Guide.

Q: Why is the app install process so convoluted on iOS?
A: {Explain why Apple makes it difficult to install PWA Apps}

-- Section Header: "About the Project"

Q: What are some advantages of learning a second language?
{Elaborate in detail on these bullet points (omit the "A:"): 
o Cognitive benefits with regard to dementia. 
o Tourism is more fulfilling when you speak the local language. 
o Business deals are easier when you speak your partner's language. 
o Many schools and universities require foreign language study.
}

Q: What AI models were used to produce this site?
A: The drag-and-drop games were produced by Gemini 3.1 Pro Preview. It provided the best language coverage, especially for endangered languages like Navajo. 
<p>
The top-level language pages like <a href="/French">French</a> were produced by Cluade Opus. 
<p>
The home page, FAQ, and "Video Guides" pages were made with Gemini. 

Q: What is the monetiziation model for the site?
A: Minimally intrusive targeted ads (not on the games themselves). The site also serves as a portfolio asset and proof of concept.


--------------------
GLOBAL CONFIGURATION
--------------------
- SOURCE: Right-justified button with the text "SOURCE" (1rem). Link <a href="/FAQ/build-instructions.txt" download>. 
-------------
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 <script> tags, would the page still work as a readable document?" The answer must be yes.


--------------------
GLOBAL CONFIGURATION
--------------------
- BRANDING: SVG logo of "文" (2.5em, deep red) followed by "OpenLang.ai" in large bold text. Link both to "/".
- GA_MEASUREMENT_ID: "G-WFWF326Q9H"
- SLOGAN: "Open-source language-learning" 
- META DESCRIPTION: "Hundreds of free and open-source games with human-like speech for many languages."
- MENU: 
Menu Item|Link
Video Guides|/video
Community|https://forum.openlang.ai
FAQ|/FAQ

SOCIAL PREVIEW META TAGS (add to HTML <head>, in the initial server response):
<meta property="og:title" content="OpenLang.ai — Open-source language learning">
<meta property="og:description" content="Hundreds of free and open-source games with human-like speech for many languages. From Arabic to Yiddish. No registration, no ads, MIT licensed.">
<meta property="og:image" content="https://openlang.ai/og-image.png">
<meta property="og:url" content="https://openlang.ai">
<meta property="og:type" content="website">
<meta property="og:site_name" content="OpenLang.ai">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OpenLang.ai — Open-source language learning">
<meta name="twitter:description" content="Hundreds of free and open-source games with human-like speech for many languages. From Arabic to Yiddish. No registration, no ads, MIT licensed.">
<meta name="twitter:image" content="https://openlang.ai/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="OpenLang.ai — Learn languages from Arabic to Yiddish. Free, open source, MIT licensed, built with frontier AI.">
<link rel="canonical" href="https://openlang.ai/">


-----------------
Header Components
-----------------
Title: "OpenLang.ai".
Favicon: A data URI containing the character "文" (deep red on white).

Top Bar
Smartphone:
BRANDING and SOURCE + Hamburger Menu (on a single line)
SLOGAN (centered. Use the arbitrary Tailwind class 'text-[3.8vw]' to force the text to scale exactly to the screen width on a single line).

CRITICAL: The hamburger menu MUST be fully functional. Include the necessary JavaScript (or React state) with an onClick event listener to toggle the visibility of the mobile MENU links. The mobile menu should be hidden by default and expand to show the links when the hamburger icon is clicked.


Desktop (strictly in this order): 
BRANDING, SLOGAN (left justified in container, serif italic deep red, bold 1.5rem), MENU, SOURCE 


Footer
------
Left: Title "About the Site Logo". Text: "The Chinese wén character (文) signifies literature, culture, or writing. It is part of the name of the Chinese language itself (中文).".

Center:
Feedback:(1.5rem)
Text: (compressed vertical spacing)
Found a bug? Have a suggestion for a new language or feature?
Post here: <a href="forum.openlang.ai">forum.openlang.ai</a>
Or drop us an email: feedback@openlang.ai


Right:
1. Mailing List 
---------------
Text: "Mailing List Signup"
Collect just an email address and submit it to Listmonk via the public subscription API.
Button text: "Add"
In small print directly below the email entry box (minimal vertical gap): "Low volume, easy to unsubscribe."

Technical details:
Listmonk URL: https://mail.openlang.ai
API endpoint: POST https://mail.openlang.ai/api/public/subscription
The request body should be JSON with this structure:
json{
  "email": "user@example.com",
  "name": "",
  "list_uuids": ["bad9f1f0-5ea5-4ec8-8f93-7c880aad2e80"]
}

Show a success message after submission ("Thanks for signing up!")
Show an error message if submission fails, include all known details about the error.

Add bot protection to the mailing list signup form, Honeypot Field:
Add a hidden text input field named "company".
Hide it with CSS (position: absolute; left: -9999px — don't use display: none because some smarter bots detect that)
Add a tabindex="-1" and autocomplete="off" so real users don't accidentally fill it via keyboard navigation or autofill
Before submitting to the Listmonk API, check if the honeypot field has a value — if it does, silently fake a success message ("Thanks! Check your email to confirm.") without actually submitting. Don't show an error because that tells the bot it was caught.

Rate limiting:
After a submission, disable the submit button.


2. Copyright text in small print
--------------------------------
Link for “Functional AI Inc”: https://functional.by
Link for “MIT License”: https://opensource.org/licenses/MIT
The text should appear exactly as below, with the above href link markup added as underlined link.
------
Copyright (C) 2026 by Functional AI Inc.  Licensed under the MIT License.