From aea0426529c68e5484b5652739298bbb4746bacd Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Mon, 7 Jul 2025 19:10:02 -0400
Subject: [PATCH] Fix i18n for form placeholders and make snowflake emoji
 clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add data-i18n-placeholder support to i18n.js for dynamic placeholder translation
- Update form inputs with proper i18n attributes for placeholders and labels
- Make snowflake emoji (❄️) clickable on all pages to return to homepage
- Remove snowflake from translation strings since it's now a separate element
- Add i18n support to README features list

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 README.md                   |  1 +
 public/admin.html           |  2 +-
 public/i18n.js              |  7 +++++
 public/index.html           | 51 ++++++++++++++++++-------------------
 public/privacy.html         |  2 +-
 src/i18n/locales/en.json    |  4 +--
 src/i18n/locales/es-MX.json |  4 +--
 src/server.ts               |  2 +-
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 7959b3c..3c49d87 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ A community-driven web application for tracking winter road conditions and icy h
 - ♿ **Accessibility First** - Progressive enhancement with noscript fallbacks
 - 🔒 **Privacy-Focused** - No user tracking, community safety oriented
 - 🛡️ **Enhanced Security** - Coordinate validation, rate limiting, and content filtering
+- 🌐 **Internationalization** - Full i18n support with English and Spanish (Mexico) languages
 
 ## Quick Start
 
diff --git a/public/admin.html b/public/admin.html
index 55d2d6c..c4fe7ea 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -57,7 +57,7 @@
         <!-- Admin Section -->
         <div id="admin-section" class="admin-section">
             <div class="admin-header">
-                <h1>❄️ Great Lakes Ice Report Admin Panel</h1>
+                <h1><a href="/" style="text-decoration: none; color: inherit;">❄️</a> Great Lakes Ice Report Admin Panel</h1>
                 <div class="header-buttons">
                     <button id="theme-toggle" class="header-btn theme-toggle-admin" title="Toggle dark mode">
                         <span class="theme-icon">🌙</span>
diff --git a/public/i18n.js b/public/i18n.js
index 0d814b0..cb8f552 100644
--- a/public/i18n.js
+++ b/public/i18n.js
@@ -197,6 +197,13 @@ class I18nService {
       }
     });
 
+    // Update elements with data-i18n-placeholder attribute
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
+      const key = element.getAttribute('data-i18n-placeholder');
+      const translation = this.t(key);
+      element.placeholder = translation;
+    });
+
     // Update elements with data-i18n-html attribute (for HTML content)
     document.querySelectorAll('[data-i18n-html]').forEach(element => {
       const key = element.getAttribute('data-i18n-html');
diff --git a/public/index.html b/public/index.html
index 6cad6f7..a99e14f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -53,7 +53,7 @@
         <header>
             <div class="header-content">
                 <div class="header-text">
-                    <h1 data-i18n="common.appName">❄️ Great Lakes Ice Report</h1>
+                    <h1><a href="/" style="text-decoration: none; color: inherit;">❄️</a> <span data-i18n="common.appName">Great Lakes Ice Report</span></h1>
                     <p data-i18n="meta.subtitle">Community-reported ICEy road conditions and winter hazards (auto-expire after 48 hours)</p>
                 </div>
                 <div class="header-controls">
@@ -69,8 +69,8 @@
             <!-- Non-JavaScript fallback notice -->
             <noscript>
                 <div class="nojs-notice">
-                    <p><strong>JavaScript is disabled.</strong> For the best experience with interactive maps, please enable JavaScript.</p>
-                    <p><a href="/table" style="color: #007bff; text-decoration: underline;">Click here to view the table-only version →</a></p>
+                    <p data-i18n="nojs.notice"><strong>JavaScript is disabled.</strong> For the best experience with interactive maps, please enable JavaScript.</p>
+                    <p><a href="/table" style="color: #007bff; text-decoration: underline;" data-i18n="nojs.viewTable">Click here to view the table-only version →</a></p>
                 </div>
             </noscript>
 
@@ -81,23 +81,23 @@
                         <label for="address" data-i18n="form.addressLabel">Address or Location *</label>
                         <div class="autocomplete-container">
                             <input type="text" id="address" name="address" required 
-placeholder="Enter address, intersection (e.g., Main St & Second St, City), or landmark"
+placeholder="Enter address, intersection (e.g., Main St & Second St, City), or landmark" data-i18n-placeholder="form.addressPlaceholder"
                                    autocomplete="off">
                             <div id="autocomplete-list" class="autocomplete-list js-only"></div>
                         </div>
-                        <small class="input-help">Examples: "123 Main St, City" or "Main St & Oak Ave, City" or "CVS Pharmacy, City"</small>
+                        <small class="input-help" data-i18n="form.addressExamples">Examples: "123 Main St, City" or "Main St & Oak Ave, City" or "CVS Pharmacy, City"</small>
                     </div>
                     
                     <div class="form-group">
-                        <label for="description">Additional Details (Optional)</label>
+                        <label for="description" data-i18n="form.detailsLabel">Additional Details (Optional)</label>
                         <textarea id="description" name="description" rows="3" 
-                                placeholder="Number of vehicles, time observed, etc." aria-describedby="description-help"></textarea>
-                        <small id="description-help" class="input-help">Keep descriptions appropriate and relevant to road conditions. Submissions with inappropriate language will be rejected.</small>
+                                placeholder="Number of vehicles, time observed, etc." data-i18n-placeholder="form.detailsPlaceholder" aria-describedby="description-help"></textarea>
+                        <small id="description-help" class="input-help" data-i18n="form.detailsHelp">Keep descriptions appropriate and relevant to road conditions. Submissions with inappropriate language will be rejected.</small>
                     </div>
                     
                     <button type="submit" id="submit-btn">
-                        <span id="submit-text">Report Location</span>
-                        <span id="submit-loading" style="display: none;" class="js-only">Submitting...</span>
+                        <span id="submit-text" data-i18n="form.reportLocation">Report Location</span>
+                        <span id="submit-loading" style="display: none;" class="js-only" data-i18n="form.submitting">Submitting...</span>
                     </button>
                 </form>
                 
@@ -106,7 +106,7 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
 
             <div class="map-section">
                 <div class="reports-header">
-                    <h2>Current Reports</h2>
+                    <h2 data-i18n="map.currentReports">Current Reports</h2>
                     <div class="view-toggle js-only">
                         <button id="map-view-btn" class="toggle-btn active" data-i18n="navigation.mapView">📍 Map View</button>
                         <button id="table-view-btn" class="toggle-btn" data-i18n="navigation.tableView">📋 Table View</button>
@@ -115,15 +115,15 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
                     <noscript>
                         <div class="nojs-fallback" style="display: block;">
                             <div style="text-align: center; margin: 24px 0;">
-                                <h3>Static Map Overview</h3>
+                                <h3 data-i18n="map.staticMapOverview">Static Map Overview</h3>
                                 <img src="/map-image.png?width=600&height=400" 
                                      alt="Static map showing ice report locations" 
                                      style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-                                <p style="font-size: 14px; color: #666; margin-top: 8px;">
+                                <p style="font-size: 14px; color: #666; margin-top: 8px;" data-i18n="map.markerLegend">
                                     Red markers: Regular reports | Orange markers: Persistent reports
                                 </p>
                             </div>
-                            <p style="text-align: center;"><a href="/table" style="color: #007bff; text-decoration: underline;">📋 View Detailed Table Format →</a></p>
+                            <p style="text-align: center;"><a href="/table" style="color: #007bff; text-decoration: underline;" data-i18n="nojs.viewDetailed">📋 View Detailed Table Format →</a></p>
                         </div>
                     </noscript>
                 </div>
@@ -131,31 +131,31 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
                 <div id="map-view" class="view-container js-only">
                     <div id="map"></div>
                     <div class="map-info">
-                        <p><strong>🔴 Red markers:</strong> Icy conditions reported</p>
-                        <p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 48 hours</p>
-                        <p id="location-count">Loading locations...</p>
+                        <p data-i18n="map.redMarkers"><strong>🔴 Red markers:</strong> Icy conditions reported</p>
+                        <p data-i18n="map.autoCleanup"><strong>⏰ Auto-cleanup:</strong> Reports disappear after 48 hours</p>
+                        <p id="location-count" data-i18n="common.loading">Loading locations...</p>
                     </div>
                 </div>
                 
                 <div id="table-view" class="view-container js-only" style="display: none;">
                     <div class="table-controls">
                         <div class="table-info">
-                            <p id="table-location-count">Loading locations...</p>
+                            <p id="table-location-count" data-i18n="common.loading">Loading locations...</p>
                         </div>
                     </div>
                     <div class="table-container">
                         <table class="reports-table">
                             <thead>
                                 <tr>
-                                    <th>Location</th>
-                                    <th>Details</th>
-                                    <th>Reported</th>
-                                    <th>Time Remaining</th>
+                                    <th data-i18n="table.headers.location">Location</th>
+                                    <th data-i18n="table.headers.details">Details</th>
+                                    <th data-i18n="table.headers.reported">Reported</th>
+                                    <th data-i18n="table.headers.timeRemaining">Time Remaining</th>
                                 </tr>
                             </thead>
                             <tbody id="reports-tbody">
                                 <tr>
-                                    <td colspan="4" class="loading">Loading reports...</td>
+                                    <td colspan="4" class="loading" data-i18n="table.loading">Loading reports...</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -165,10 +165,9 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
         </div>
 
         <footer>
-            <p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer" style="color: #007bff; text-decoration: underline;">know your rights</a>.</p>
+            <p><strong data-i18n="footer.safetyNotice">Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer" style="color: #007bff; text-decoration: underline;" data-i18n="footer.knowRights">know your rights</a>.</p>
             <div class="disclaimer">
-                <small>This website is for informational purposes only. Verify information independently. 
-                Reports are automatically deleted after 48 hours. • <a href="/privacy" style="color: #007bff; text-decoration: underline;">Privacy Policy</a></small>
+                <small><span data-i18n="footer.disclaimer">This website is for informational purposes only. Verify information independently. Reports are automatically deleted after 48 hours. •</span> <a href="/privacy" style="color: #007bff; text-decoration: underline;" data-i18n="common.privacyPolicy">Privacy Policy</a></small>
             </div>
         </footer>
     </div>
diff --git a/public/privacy.html b/public/privacy.html
index 1c82a0b..39544c3 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -41,7 +41,7 @@
         <div class="privacy-header">
             <div class="privacy-header__title-wrapper">
                 <div class="privacy-header__title-content">
-                    <h1>❄️ Privacy Policy</h1>
+                    <h1><a href="/" style="text-decoration: none; color: inherit;">❄️</a> Privacy Policy</h1>
                     <p>Great Lakes Ice Report</p>
                 </div>
                 <button id="theme-toggle" class="privacy-header__theme-toggle" title="Toggle theme mode">
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index aba28fb..4d0bf0b 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1,6 +1,6 @@
 {
   "common": {
-    "appName": "❄️ Great Lakes Ice Report",
+    "appName": "Great Lakes Ice Report",
     "appNameShort": "Ice Report",
     "loading": "Loading...",
     "error": "Error",
@@ -90,7 +90,7 @@
   },
   "admin": {
     "title": "Great Lakes Ice Report Admin",
-    "adminPanel": "❄️ Great Lakes Ice Report Admin Panel",
+    "adminPanel": "Great Lakes Ice Report Admin Panel",
     "adminLogin": "🔐 Admin Login",
     "passwordLabel": "Admin Password:",
     "tabs": {
diff --git a/src/i18n/locales/es-MX.json b/src/i18n/locales/es-MX.json
index 1109494..72aaf35 100644
--- a/src/i18n/locales/es-MX.json
+++ b/src/i18n/locales/es-MX.json
@@ -1,6 +1,6 @@
 {
   "common": {
-    "appName": "❄️ Reporte de Hielo de los Grandes Lagos",
+    "appName": "Reporte de Hielo de los Grandes Lagos",
     "appNameShort": "Reporte de Hielo",
     "loading": "Cargando...",
     "error": "Error",
@@ -90,7 +90,7 @@
   },
   "admin": {
     "title": "Administrador de Reporte de Hielo de los Grandes Lagos",
-    "adminPanel": "❄️ Panel de administración de Reporte de Hielo de los Grandes Lagos",
+    "adminPanel": "Panel de administración de Reporte de Hielo de los Grandes Lagos",
     "adminLogin": "🔐 Inicio de sesión de administrador",
     "passwordLabel": "Contraseña de administrador:",
     "tabs": {
diff --git a/src/server.ts b/src/server.ts
index 620cc0b..bf7c4ad 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -291,7 +291,7 @@ function setupRoutes(): void {
             <header>
               <div class="header-content">
                 <div class="header-text">
-                  <h1>${t('common.appName')}</h1>
+                  <h1><a href="/" style="text-decoration: none; color: inherit;">❄️</a> ${t('common.appName')}</h1>
                   <p>${t('meta.subtitle')}</p>
                 </div>
                 <div style="display: flex; align-items: center; gap: 10px;">