------------- 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. -------------------- GLOBAL CONFIGURATION -------------------- - BRANDING: SVG logo of "文" (2.5em, deep red) followed by "OpenLang.ai" in large bold text. Link both to "/". - SOURCE: Right-justified button with the text "SOURCE" (1rem). Link . - 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 ----------------- 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 Create a Video Guide web page, with each video defined by three elements: 1. Title 2. Preview Image (scale to maximum width 450px, maximium height 450px) 3. Video file Superimpose a play button on the preview image to make it clear that it is playable. Clicking the image should start the video in a pop-up. If necessary, the video should be downscaled so that it fits both horizontally and vertially with the pop-up viewport. On mobile: The pop-up should take up the entire screen. There shold be an obvious way to exit the video. On desktop: The video pop-up should fit in the viewport, both vertically and horizontally. Clicking anywhere outside the video should exit the video. Escape key should end the video. Do not upscale Preview Images. Title: Game Play Video File: /video/game-play.mp4 Preview Image: /video/game-play.png Title: Create Your Own Custom Game Video Fie: /video/ukraine-vc.mp4 Preview Image: Create an SVG image 552x331 pixels with "AI" at 12em centered at 50% transparency and "Vibe Coding" at 2em in the foreground positioned close to the bottom of the image. Add a subtitle directly under the video image with the text: "Play the game we created in this video" at .9rem linked to the URL: "/Ukrainian/VC-Invest/index.html". CSS ID selector: "Language". Section Heading: Adding Language Packs to Your Device Title: Add a Language to Android Video File: /video/add-language-android.mp4 Preview Image: /video/add-language-android.png Title: Add a Language to iOS Video File: /video/add-language-ios.mp4 Preview Image: /video/add-language-ios.png CSS ID selector: "Threatened-Languages". Title: Add a Threatened Language to Android Video File: /video/add-rhvoice-android.mp4 Preview Image: /video/add-rhvoice-android.png CSS ID selector: "Install". Section Heading: Installing the App on Your Device Title: Install on Android Video File: /video/android-app-install.mp4 Preview Image: /video/android-app-install.png Title: Install on iOS Video File: /video/ios-app-install.mp4 Preview Image: /video/ios-app-install.png