signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix i18n for form placeholders and make snowflake emoji clickable

Browse source 
- 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>
This commit is contained in:
Claude Code 2025-07-07 19:10:02 -04:00
parent c4244aa307
commit aea0426529
8 changed files with 40 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -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

2
public/admin.html
View file

@ -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>

7
public/i18n.js
View file

@ -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');

51
public/index.html
View file

@ -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>

2
public/privacy.html
View file

@ -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">

4
src/i18n/locales/en.json
View file

@ -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": {

4
src/i18n/locales/es-MX.json
View file

@ -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": {

2
src/server.ts
View file

@ -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;">