Create a single HTML file called index.html with the following specs.
STRICT: Do not add any notes at the top of the index.html file.
-------------
Theme & Style
-------------
Use the Tailwind 'Stone' palette. Headings should be deep red and serif; body text sans-serif. Do not display any comments. Links must open in the current window.
Screen width limited to 1366 pixels.
-----------------
Header Components
-----------------
Title: "Openlang.ai".
Favicon: A data URI containing the character "文" (serif, deep red on white).
Top Bar (single line)
Left: An SVG logo of "文" (28pt serif) followed by "openlang.ai" in bold text. Link both of those elements to "/".
Center: "Spanish" at 12pt.
Right: A "SOURCE" button that downloads the file "/Spanish/build-instructions.txt".
------------
Main Content
------------
Create a dataset of Categories: "Quote Match","Word Match","Phrase Match"
Add an SVG clip art graphic field to the dataset, based on these hints:
Quote: Large centered double quote, ASCII character (U+0022)
Word: "ABC" in a box.
Phrase: Speach bubble with three lines inside.
Create a dataset of Games with a field NAME.
Populate the NAME field with these games: ,Idiomatic Phrases,Longer Phrases,Longest Phrases,Short Phrases,Beginner,Beginner-2,Beginner-3,Capitalist,Leftist,Neologisms,Philosophy,Religious.
Create three blocks, one for each category.
Each block contains a header on a single line, with SVG Graphic and Category name.
Under the header, display a grid of Game buttons that contain NAME. Link each button to this URL: “/Spanish/NAME”. The grid should use at least 2 columns on mobile devices.
The Game Buttons are distributed in the categories in this way:
Word Match: Beginner,Beginner-2,Beginner-3, Neologisms
Phrase Match: Idiomatic Phrases,Short Phrases,Longer Phrases,Longest Phrases
Quote Match: Capitalist,Leftist,Philosophy,Religious
------
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 (中文).".
Right:
Copyright text as footer on a single line 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.
Copyright: Add the copyright text in the Footer section defined above.
It should be in small print on a single line.
It must be inside the main mobile view container so it is visible on desktop and
mobile, but outside the scrollable game area.
URL for “Functional AI Inc”: https://functional.by
URL for “MIT License”: https://opensource.org/licenses/MIT
The copyright text should appear exactly as below, with the above
two URL's added as href.
Copyright (c) 2026 by Functional AI Inc. Licensed under the MIT License.