Multilingual Enhancement for ROS Cycle: New Language Support

[alwin-m]

Multilingual Enhancement for ROS Cycle: New Language Support and Animation

Pull Request Overview
This pull request brings multilingual support to the ROS Cycle application. Users can now choose from English, Japanese (日本語), and German (Deutsch). Additionally, there is an animated placeholder for the name input. These updates improve accessibility and user engagement, while also keeping the app's focus on privacy and being friendly for students. The changes are in a new branch, feature/multilingual-support, allowing for testing by language experts before merging into the main branch.

Why a New Branch?
We are creating a new branch, feature/multilingual-support, to ensure stability and quality. The reasons include:

Language Validation: The translations for Japanese and German need review by native speakers or language experts to ensure they are culturally appropriate and accurate.
Experimental Feature: Adding multilingual support is a major enhancement. Testing in a separate branch allows us to gather feedback without risking the main branch's stability.
Community Input: By hosting this feature in a branch, we invite contributions from the open-source community, particularly for refining translations or adding more languages, matching the project's collaborative spirit.
No Extensive Research: The translations have been carefully crafted, but we have not conducted thorough linguistic or cultural research. Merging into the main branch will happen only after professional validation.

Purpose of the Multilingual Enhancement
Adding Japanese and German alongside English aims to:

Broaden Accessibility: Make ROS Cycle available to users worldwide, especially students in Japan and Germany.
Enhance User Experience: Introduce an animated placeholder (“How should I call you?”) that fades out after 3 seconds, creating a friendly and engaging interface.
Maintain Cultural Sensitivity: Ensure all translations are respectful and free from negative or inappropriate terms, fitting the app’s gentle and inclusive tone.
Support Open-Source Growth: Encourage contributions for more languages or improvements via the GitHub repository (ROS Cycle Project).

Changes Introduced
This update modifies the existing index.html file to include:

Language Selector:
A dropdown in the header lets users switch between English, Japanese, and German.
Language preferences are stored in localStorage for persistence across sessions.
All UI elements (text, placeholders, modals, buttons) update dynamically to the selected language.

Animated Name Placeholder:
The name input field shows “How should I call you?” (or its equivalent in Japanese/German) for 3 seconds before fading out and resetting, improving the user experience with an animation.
This is controlled via CSS (opacity transition) and JavaScript (animateNamePlaceholder function).

Translation System:
A translations object in JavaScript includes key-value pairs for English, Japanese, and German, covering all UI text, modals, and placeholders.
Translations are sensitive to cultural nuances, avoiding negative or inappropriate terms (for instance, replacing “high risk” with “higher chance”).
Dynamic updates ensure the calendar, PCOD checker, and error messages reflect the chosen language without breaking functionality.

Responsive Design:
The language selector and UI elements adjust smoothly to mobile, tablet, and desktop devices using updated CSS media queries.
Tooltips and dropdowns modify positioning on smaller screens to avoid overflow.

Accessibility:
aria-label attributes and meta descriptions update dynamically to support screen readers in all languages.
Keyboard navigation (like using the Escape key to close modals/dropdowns) remains functional in all languages.

Code Changes (Diff)
Below is a summarized diff highlighting the key changes to index.html. For brevity, only the most significant additions and modifications are shown. The complete updated code is available in the branch.
--- a/index.html
+++ b/index.html
@@ -75,6 +75,34 @@
color: var(--text);
font-size: 16px;
-webkit-appearance: none;

• transition: border-color 0.3s, box-shadow 0.3s;
  }
  input:focus {
  box-shadow: 0 6px 20px rgba(255,107,157,0.12);
  border-color: var(--pink);
  }
  input::placeholder {
  color: var(--muted);
  opacity: 1;
  transition: opacity 0.5s ease;
  }
  input.placeholder-animating::placeholder {
  opacity: 0;
  }
  .lang-selector {
  position: relative;
  }
  .lang-btn {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s;
  }
  .lang-btn:hover {
  background: #f8f8f8;
  @@ -97,6 +125,17 @@
  .lang-option:hover {
  background: #f8f8f8;
  }
• @media (max-width: 768px) {
• header {
• flex-direction: column;
• padding: 12px 20px;
• gap: 10px;
• }
• .lang-selector {
• align-self: flex-end;
• }
• .tooltip {
• bottom: auto;
• top: 100%;
• transform: translateX(-50%);
• white-space: normal;
• max-width: 90vw;
• }
• }

</style> @@ -107,6 +146,16 @@

Gentle, private & student-friendly

No data stored. Local only for this demo.

+

+ + EN ▼ + +

+

English

+

日本語

+

Deutsch

+

+

@@ -120,7 +169,7 @@

Hello — let's make this simple ✨

We will ask just a few friendly questions. You can go back anytime.

Name - +

@@ -279,6 +328,188 @@

• <script>
• // Translation Dictionary
• const translations = {
• en: {
• "meta-description": "Gentle period companion for tracking your cycle",
• lead: "Gentle, private & student-friendly",
• // ... (full English translations)
• },
• ja: {
• "meta-description": "あなたのサイクルを優しく追跡する生理トラッカー",
• lead: "優しく、プライベート