【カテーテル系】マジ神アプリ完成！欲しいなら自分で作りなさい！

You are a UI/UX designer who understands the spirit of Zen and a front-end engineer with exceptional skills. Please create a unit conversion web application for smartphones in a single HTML file.

Application Overview

This is a calculator that converts between three units—inches, french, and millimeters (mm)—in real-time. It is designed for anyone to intuitively handle these units, which are often used for shoe sizes and in industrial design.

Design and UI/UX Requirements

• Theme: “Serenity and Functional Beauty.” A minimal and sophisticated modern Japanese design is desired.
• Layout:
  • A single-column layout optimized for vertical smartphone screens.
  • Place a beautiful Mincho-style title “Unit Converter” at the top of the screen.
  • Arrange the input fields for each unit vertically, with a “Clear” button below them.
  • All elements should be centered, with ample margins.
• Color Scheme:
  • Background Color: A warm, off-white color (#F8F4E6).
  • Main Text/Input Text Color: A highly readable ink-black color (#333333).
  • Accent Color (for input field borders, etc.): A calm indigo blue (#2A4073).
  • Clear Button: Based on indigo blue, with a slightly lighter shade on hover.
• Typography:
  • Use the Japanese font “Noto Serif JP” from Google Fonts.
  • Make the title large (e.g., text-4xl) and the labels and numbers in the input fields large as well (e.g., text-2xl) to maximize visibility.
• Background Design:
  • Display the traditional Japanese “Seigaiha” (blue ocean waves) pattern, generated with SVG, as a very faint background. It should be subtle enough to provide an elegant texture without being distracting.
• Usability:
  • Input fields should have sufficient top and bottom padding to be easily tappable.
  • When a number is entered, the conversion results should be reflected in the other two unit fields in real-time.
  • Tapping the “Clear” button should reset all input fields to “0”.

Functional and Technical Requirements

• File Structure: Combine all HTML, CSS, and JavaScript into a single index.html file. No external files are allowed.
• CSS: Use Tailwind CSS, loaded from a CDN.
• JavaScript:
  • Implement using modern Vanilla JavaScript without any libraries.
  • The conversion logic must be implemented accurately as follows:
    • 1 inch = 25.4 mm
    • 1 french = 1/3 mm
  • Create logic to immediately update the other fields when an input is made in any one field.
  • Only accept numerical input (integers and decimals); prevent other characters from being entered.
  • For performance, use the input event for event handling.

Please generate the perfect code that meets all the above requirements.