@autocode-cli/autocode 0.1.4 → 0.1.6

package/dist/server/dashboard/pages/water-quality-form.js

@@ -0,0 +1,910 @@
+/**
+ * Water Quality Form Page
+ *
+ * Form for recording seawater quality measurements.
+ */
+import { getVariables } from '../styles/variables.js';
+import { getBaseStyles } from '../styles/base.js';
+import { getComponentStyles } from '../styles/components.js';
+/**
+ * Get water quality form specific styles
+ * These extend the base styles with form-specific styling
+ */
+function getWaterQualityFormStyles() {
+    return `
+    main {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .form-container {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      padding: 32px;
+      border: 1px solid var(--border);
+    }
+
+    .section {
+      margin-bottom: 32px;
+    }
+
+    .section-title {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--accent);
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .section-title::before {
+      content: '';
+      width: 4px;
+      height: 20px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+    }
+
+    .form-group.full-width {
+      grid-column: 1 / -1;
+    }
+
+    label .required {
+      color: var(--red);
+      margin-left: 4px;
+    }
+
+    label .unit {
+      color: var(--text-secondary);
+      font-weight: normal;
+      margin-left: 4px;
+    }
+
+    input[type="number"] {
+      -moz-appearance: textfield;
+    }
+
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    .input-with-unit {
+      position: relative;
+    }
+
+    .input-with-unit input {
+      width: 100%;
+      padding-right: 60px;
+    }
+
+    .input-with-unit .unit-label {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--muted);
+      font-size: 13px;
+      pointer-events: none;
+    }
+
+    .gps-inputs {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 16px;
+      justify-content: flex-end;
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid var(--border);
+    }
+
+    .btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    .notification {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 16px 24px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      z-index: 1000;
+      animation: slideIn 0.3s ease;
+      display: none;
+    }
+
+    .notification.success {
+      background: var(--green);
+      color: #fff;
+    }
+
+    .notification.error {
+      background: var(--red);
+      color: #fff;
+    }
+
+    .notification.show {
+      display: block;
+    }
+
+    @keyframes slideIn {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    .quality-indicator {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      margin-top: 20px;
+    }
+
+    .quality-badge {
+      padding: 6px 16px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .quality-good { background: var(--green); color: #fff; }
+    .quality-moderate { background: var(--yellow); color: #000; }
+    .quality-poor { background: #f97316; color: #fff; }
+    .quality-critical { background: var(--red); color: #fff; }
+
+    footer {
+      text-align: center;
+      padding: 20px;
+      color: var(--muted);
+      font-size: 12px;
+      border-top: 1px solid var(--border);
+      margin-top: 40px;
+    }
+  `;
+}
+/**
+ * Generate the water quality form page
+ */
+export function generateWaterQualityFormPage(lang = 'fr') {
+    const translations = {
+        en: {
+            title: 'Seawater Quality Form',
+            subtitle: 'Record water quality measurements',
+            sampleInfo: 'Sample Information',
+            sampleId: 'Sample ID',
+            sampleIdPlaceholder: 'e.g., SW-2025-001',
+            sampleDate: 'Sampling Date',
+            sampleTime: 'Sampling Time',
+            location: 'Sampling Location',
+            locationPlaceholder: 'e.g., Port of Marseille - Dock 3',
+            gpsCoordinates: 'GPS Coordinates',
+            latitude: 'Latitude',
+            longitude: 'Longitude',
+            depth: 'Sampling Depth (m)',
+            physicalParams: 'Physical Parameters',
+            temperature: 'Temperature',
+            temperatureUnit: 'Celsius',
+            salinity: 'Salinity',
+            salinityUnit: 'PSU',
+            turbidity: 'Turbidity',
+            turbidityUnit: 'NTU',
+            dissolvedOxygen: 'Dissolved Oxygen',
+            dissolvedOxygenUnit: 'mg/L',
+            ph: 'pH',
+            conductivity: 'Conductivity',
+            conductivityUnit: 'mS/cm',
+            chemicalParams: 'Chemical Parameters',
+            nitrates: 'Nitrates (NO3)',
+            nitratesUnit: 'mg/L',
+            nitrites: 'Nitrites (NO2)',
+            nitritesUnit: 'mg/L',
+            phosphates: 'Phosphates (PO4)',
+            phosphatesUnit: 'mg/L',
+            ammonia: 'Ammonia (NH3)',
+            ammoniaUnit: 'mg/L',
+            chlorophyll: 'Chlorophyll-a',
+            chlorophyllUnit: 'µg/L',
+            biologicalParams: 'Biological Parameters',
+            coliformBacteria: 'Coliform Bacteria',
+            coliformUnit: 'CFU/100mL',
+            enterococci: 'Enterococci',
+            enterococciUnit: 'CFU/100mL',
+            phytoplankton: 'Phytoplankton Density',
+            phytoplanktonUnit: 'cells/mL',
+            visualObservations: 'Visual Observations',
+            waterColor: 'Water Color',
+            colorOptions: {
+                clear: 'Clear',
+                greenish: 'Greenish',
+                brownish: 'Brownish',
+                milky: 'Milky',
+                other: 'Other'
+            },
+            odor: 'Odor',
+            odorOptions: {
+                none: 'None',
+                marine: 'Normal Marine',
+                sulfurous: 'Sulfurous',
+                chemical: 'Chemical',
+                other: 'Other'
+            },
+            floatingDebris: 'Floating Debris',
+            debrisOptions: {
+                none: 'None',
+                minimal: 'Minimal',
+                moderate: 'Moderate',
+                significant: 'Significant'
+            },
+            oilPresence: 'Oil/Hydrocarbon Presence',
+            oilOptions: {
+                none: 'None',
+                sheen: 'Light Sheen',
+                slick: 'Oil Slick',
+                heavy: 'Heavy Contamination'
+            },
+            weather: 'Weather Conditions',
+            weatherConditions: 'Current Weather',
+            weatherOptions: {
+                sunny: 'Sunny',
+                cloudy: 'Cloudy',
+                rainy: 'Rainy',
+                stormy: 'Stormy'
+            },
+            windSpeed: 'Wind Speed',
+            windSpeedUnit: 'km/h',
+            waveHeight: 'Wave Height',
+            waveHeightUnit: 'meters',
+            airTemperature: 'Air Temperature',
+            notes: 'Additional Notes',
+            notesPlaceholder: 'Any additional observations or comments...',
+            sampledBy: 'Sampled By',
+            sampledByPlaceholder: 'Technician name',
+            submit: 'Submit',
+            reset: 'Reset Form',
+            saving: 'Saving...',
+            success: 'Data saved successfully!',
+            error: 'Error saving data',
+            required: 'Required',
+            backToDashboard: 'Back to Dashboard',
+            qualityIndex: 'Water Quality Index',
+            qualityGood: 'Good',
+            qualityModerate: 'Moderate',
+            qualityPoor: 'Poor',
+            qualityCritical: 'Critical'
+        },
+        fr: {
+            title: 'Formulaire Qualité Eau de Mer',
+            subtitle: 'Enregistrement des mesures de qualité de l\'eau',
+            sampleInfo: 'Informations de l\'Échantillon',
+            sampleId: 'ID Échantillon',
+            sampleIdPlaceholder: 'ex: EM-2025-001',
+            sampleDate: 'Date de Prélèvement',
+            sampleTime: 'Heure de Prélèvement',
+            location: 'Lieu de Prélèvement',
+            locationPlaceholder: 'ex: Port de Marseille - Quai 3',
+            gpsCoordinates: 'Coordonnées GPS',
+            latitude: 'Latitude',
+            longitude: 'Longitude',
+            depth: 'Profondeur de Prélèvement (m)',
+            physicalParams: 'Paramètres Physiques',
+            temperature: 'Température',
+            temperatureUnit: 'Celsius',
+            salinity: 'Salinité',
+            salinityUnit: 'PSU',
+            turbidity: 'Turbidité',
+            turbidityUnit: 'NTU',
+            dissolvedOxygen: 'Oxygène Dissous',
+            dissolvedOxygenUnit: 'mg/L',
+            ph: 'pH',
+            conductivity: 'Conductivité',
+            conductivityUnit: 'mS/cm',
+            chemicalParams: 'Paramètres Chimiques',
+            nitrates: 'Nitrates (NO3)',
+            nitratesUnit: 'mg/L',
+            nitrites: 'Nitrites (NO2)',
+            nitritesUnit: 'mg/L',
+            phosphates: 'Phosphates (PO4)',
+            phosphatesUnit: 'mg/L',
+            ammonia: 'Ammoniac (NH3)',
+            ammoniaUnit: 'mg/L',
+            chlorophyll: 'Chlorophylle-a',
+            chlorophyllUnit: 'µg/L',
+            biologicalParams: 'Paramètres Biologiques',
+            coliformBacteria: 'Bactéries Coliformes',
+            coliformUnit: 'UFC/100mL',
+            enterococci: 'Entérocoques',
+            enterococciUnit: 'UFC/100mL',
+            phytoplankton: 'Densité Phytoplancton',
+            phytoplanktonUnit: 'cellules/mL',
+            visualObservations: 'Observations Visuelles',
+            waterColor: 'Couleur de l\'Eau',
+            colorOptions: {
+                clear: 'Claire',
+                greenish: 'Verdâtre',
+                brownish: 'Brunâtre',
+                milky: 'Laiteuse',
+                other: 'Autre'
+            },
+            odor: 'Odeur',
+            odorOptions: {
+                none: 'Aucune',
+                marine: 'Marine Normale',
+                sulfurous: 'Soufrée',
+                chemical: 'Chimique',
+                other: 'Autre'
+            },
+            floatingDebris: 'Débris Flottants',
+            debrisOptions: {
+                none: 'Aucun',
+                minimal: 'Minimal',
+                moderate: 'Modéré',
+                significant: 'Important'
+            },
+            oilPresence: 'Présence Huile/Hydrocarbures',
+            oilOptions: {
+                none: 'Aucune',
+                sheen: 'Irisation Légère',
+                slick: 'Nappe d\'Huile',
+                heavy: 'Contamination Importante'
+            },
+            weather: 'Conditions Météorologiques',
+            weatherConditions: 'Météo Actuelle',
+            weatherOptions: {
+                sunny: 'Ensoleillé',
+                cloudy: 'Nuageux',
+                rainy: 'Pluvieux',
+                stormy: 'Orageux'
+            },
+            windSpeed: 'Vitesse du Vent',
+            windSpeedUnit: 'km/h',
+            waveHeight: 'Hauteur des Vagues',
+            waveHeightUnit: 'mètres',
+            airTemperature: 'Température de l\'Air',
+            notes: 'Notes Supplémentaires',
+            notesPlaceholder: 'Observations ou commentaires additionnels...',
+            sampledBy: 'Prélevé par',
+            sampledByPlaceholder: 'Nom du technicien',
+            submit: 'Soumettre',
+            reset: 'Réinitialiser',
+            saving: 'Enregistrement...',
+            success: 'Données enregistrées avec succès!',
+            error: 'Erreur lors de l\'enregistrement',
+            required: 'Requis',
+            backToDashboard: 'Retour au Dashboard',
+            qualityIndex: 'Indice de Qualité',
+            qualityGood: 'Bonne',
+            qualityModerate: 'Modérée',
+            qualityPoor: 'Mauvaise',
+            qualityCritical: 'Critique'
+        }
+    };
+    const t = translations[lang] || translations.fr;
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${t.title} - AutoCode</title>
+  <style>
+    ${getVariables()}
+    ${getBaseStyles()}
+    ${getComponentStyles()}
+    ${getWaterQualityFormStyles()}
+
+    /* Page-specific header overrides */
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .header-left a {
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 14px;
+    }
+
+    .header-left a:hover {
+      text-decoration: underline;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      background: var(--gradient-1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .subtitle {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    /* Form input enhancements */
+    input, select, textarea {
+      padding: 12px 14px;
+      font-size: 14px;
+      background: var(--bg-tertiary);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    input:focus, select:focus, textarea:focus {
+      box-shadow: 0 0 0 3px var(--accent-glow);
+    }
+
+    input::placeholder, textarea::placeholder {
+      color: var(--muted);
+    }
+
+    select {
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="notification" id="notification"></div>
+
+  <header>
+    <div class="header-left">
+      <a href="/">&larr; ${t.backToDashboard}</a>
+      <div>
+        <h1>${t.title}</h1>
+        <div class="subtitle">${t.subtitle}</div>
+      </div>
+    </div>
+    <div class="lang-switcher">
+      <button class="lang-btn ${lang === 'en' ? 'active' : ''}" onclick="switchLang('en')">EN</button>
+      <button class="lang-btn ${lang === 'fr' ? 'active' : ''}" onclick="switchLang('fr')">FR</button>
+    </div>
+  </header>
+
+  <main>
+    <form class="form-container" id="water-quality-form">
+      <!-- Sample Information -->
+      <div class="section">
+        <h2 class="section-title">${t.sampleInfo}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="sample-id">${t.sampleId}<span class="required">*</span></label>
+            <input type="text" id="sample-id" name="sampleId" required placeholder="${t.sampleIdPlaceholder}">
+          </div>
+          <div class="form-group">
+            <label for="sample-date">${t.sampleDate}<span class="required">*</span></label>
+            <input type="date" id="sample-date" name="sampleDate" required>
+          </div>
+          <div class="form-group">
+            <label for="sample-time">${t.sampleTime}<span class="required">*</span></label>
+            <input type="time" id="sample-time" name="sampleTime" required>
+          </div>
+          <div class="form-group">
+            <label for="sampled-by">${t.sampledBy}<span class="required">*</span></label>
+            <input type="text" id="sampled-by" name="sampledBy" required placeholder="${t.sampledByPlaceholder}">
+          </div>
+          <div class="form-group full-width">
+            <label for="location">${t.location}<span class="required">*</span></label>
+            <input type="text" id="location" name="location" required placeholder="${t.locationPlaceholder}">
+          </div>
+          <div class="form-group">
+            <label>${t.gpsCoordinates}</label>
+            <div class="gps-inputs">
+              <input type="number" step="0.000001" name="latitude" placeholder="${t.latitude}">
+              <input type="number" step="0.000001" name="longitude" placeholder="${t.longitude}">
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="depth">${t.depth}</label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="depth" name="depth" min="0">
+              <span class="unit-label">m</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Physical Parameters -->
+      <div class="section">
+        <h2 class="section-title">${t.physicalParams}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="temperature">${t.temperature}<span class="unit">(${t.temperatureUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="temperature" name="temperature">
+              <span class="unit-label">°C</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="salinity">${t.salinity}<span class="unit">(${t.salinityUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="salinity" name="salinity">
+              <span class="unit-label">PSU</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="ph">${t.ph}</label>
+            <input type="number" step="0.01" id="ph" name="ph" min="0" max="14">
+          </div>
+          <div class="form-group">
+            <label for="dissolved-oxygen">${t.dissolvedOxygen}<span class="unit">(${t.dissolvedOxygenUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="dissolved-oxygen" name="dissolvedOxygen">
+              <span class="unit-label">mg/L</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="turbidity">${t.turbidity}<span class="unit">(${t.turbidityUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="turbidity" name="turbidity">
+              <span class="unit-label">NTU</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="conductivity">${t.conductivity}<span class="unit">(${t.conductivityUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.01" id="conductivity" name="conductivity">
+              <span class="unit-label">mS/cm</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chemical Parameters -->
+      <div class="section">
+        <h2 class="section-title">${t.chemicalParams}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="nitrates">${t.nitrates}<span class="unit">(${t.nitratesUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.01" id="nitrates" name="nitrates">
+              <span class="unit-label">mg/L</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="nitrites">${t.nitrites}<span class="unit">(${t.nitritesUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.001" id="nitrites" name="nitrites">
+              <span class="unit-label">mg/L</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="phosphates">${t.phosphates}<span class="unit">(${t.phosphatesUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.01" id="phosphates" name="phosphates">
+              <span class="unit-label">mg/L</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="ammonia">${t.ammonia}<span class="unit">(${t.ammoniaUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.01" id="ammonia" name="ammonia">
+              <span class="unit-label">mg/L</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="chlorophyll">${t.chlorophyll}<span class="unit">(${t.chlorophyllUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="chlorophyll" name="chlorophyll">
+              <span class="unit-label">µg/L</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Biological Parameters -->
+      <div class="section">
+        <h2 class="section-title">${t.biologicalParams}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="coliform">${t.coliformBacteria}<span class="unit">(${t.coliformUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" id="coliform" name="coliformBacteria">
+              <span class="unit-label">CFU</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="enterococci">${t.enterococci}<span class="unit">(${t.enterococciUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" id="enterococci" name="enterococci">
+              <span class="unit-label">CFU</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="phytoplankton">${t.phytoplankton}<span class="unit">(${t.phytoplanktonUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" id="phytoplankton" name="phytoplankton">
+              <span class="unit-label">cells/mL</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Visual Observations -->
+      <div class="section">
+        <h2 class="section-title">${t.visualObservations}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="water-color">${t.waterColor}</label>
+            <select id="water-color" name="waterColor">
+              <option value="clear">${t.colorOptions.clear}</option>
+              <option value="greenish">${t.colorOptions.greenish}</option>
+              <option value="brownish">${t.colorOptions.brownish}</option>
+              <option value="milky">${t.colorOptions.milky}</option>
+              <option value="other">${t.colorOptions.other}</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="odor">${t.odor}</label>
+            <select id="odor" name="odor">
+              <option value="none">${t.odorOptions.none}</option>
+              <option value="marine">${t.odorOptions.marine}</option>
+              <option value="sulfurous">${t.odorOptions.sulfurous}</option>
+              <option value="chemical">${t.odorOptions.chemical}</option>
+              <option value="other">${t.odorOptions.other}</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="floating-debris">${t.floatingDebris}</label>
+            <select id="floating-debris" name="floatingDebris">
+              <option value="none">${t.debrisOptions.none}</option>
+              <option value="minimal">${t.debrisOptions.minimal}</option>
+              <option value="moderate">${t.debrisOptions.moderate}</option>
+              <option value="significant">${t.debrisOptions.significant}</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="oil-presence">${t.oilPresence}</label>
+            <select id="oil-presence" name="oilPresence">
+              <option value="none">${t.oilOptions.none}</option>
+              <option value="sheen">${t.oilOptions.sheen}</option>
+              <option value="slick">${t.oilOptions.slick}</option>
+              <option value="heavy">${t.oilOptions.heavy}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Weather Conditions -->
+      <div class="section">
+        <h2 class="section-title">${t.weather}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label for="weather-conditions">${t.weatherConditions}</label>
+            <select id="weather-conditions" name="weatherConditions">
+              <option value="sunny">${t.weatherOptions.sunny}</option>
+              <option value="cloudy">${t.weatherOptions.cloudy}</option>
+              <option value="rainy">${t.weatherOptions.rainy}</option>
+              <option value="stormy">${t.weatherOptions.stormy}</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="air-temperature">${t.airTemperature}<span class="unit">(${t.temperatureUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="air-temperature" name="airTemperature">
+              <span class="unit-label">°C</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="wind-speed">${t.windSpeed}<span class="unit">(${t.windSpeedUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="1" id="wind-speed" name="windSpeed">
+              <span class="unit-label">km/h</span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="wave-height">${t.waveHeight}<span class="unit">(${t.waveHeightUnit})</span></label>
+            <div class="input-with-unit">
+              <input type="number" step="0.1" id="wave-height" name="waveHeight">
+              <span class="unit-label">m</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="section">
+        <h2 class="section-title">${t.notes}</h2>
+        <div class="form-group full-width">
+          <textarea id="notes" name="notes" placeholder="${t.notesPlaceholder}"></textarea>
+        </div>
+      </div>
+
+      <!-- Quality Indicator -->
+      <div class="quality-indicator" id="quality-indicator" style="display:none">
+        <span>${t.qualityIndex}:</span>
+        <span class="quality-badge" id="quality-badge"></span>
+      </div>
+
+      <!-- Form Actions -->
+      <div class="form-actions">
+        <button type="button" class="btn btn-secondary" onclick="resetForm()">${t.reset}</button>
+        <button type="submit" class="btn btn-primary" id="submit-btn">${t.submit}</button>
+      </div>
+    </form>
+  </main>
+
+  <footer>
+    AutoCode - Water Quality Management
+  </footer>
+
+  <script>
+    const lang = '${lang}';
+    const translations = {
+      saving: '${t.saving}',
+      success: '${t.success}',
+      error: '${t.error}',
+      submit: '${t.submit}',
+      qualityGood: '${t.qualityGood}',
+      qualityModerate: '${t.qualityModerate}',
+      qualityPoor: '${t.qualityPoor}',
+      qualityCritical: '${t.qualityCritical}'
+    };
+
+    // Set default date and time
+    document.getElementById('sample-date').valueAsDate = new Date();
+    document.getElementById('sample-time').value = new Date().toTimeString().slice(0, 5);
+
+    // Switch language
+    function switchLang(newLang) {
+      window.location.href = '/water-quality?lang=' + newLang;
+    }
+
+    // Show notification
+    function showNotification(type, message) {
+      const notification = document.getElementById('notification');
+      notification.textContent = message;
+      notification.className = 'notification ' + type + ' show';
+      setTimeout(() => {
+        notification.classList.remove('show');
+      }, 3000);
+    }
+
+    // Reset form
+    function resetForm() {
+      document.getElementById('water-quality-form').reset();
+      document.getElementById('sample-date').valueAsDate = new Date();
+      document.getElementById('sample-time').value = new Date().toTimeString().slice(0, 5);
+      document.getElementById('quality-indicator').style.display = 'none';
+    }
+
+    // Calculate water quality index based on parameters
+    function calculateQualityIndex() {
+      const ph = parseFloat(document.getElementById('ph').value);
+      const dissolvedOxygen = parseFloat(document.getElementById('dissolved-oxygen').value);
+      const turbidity = parseFloat(document.getElementById('turbidity').value);
+      const coliform = parseFloat(document.getElementById('coliform').value);
+
+      let score = 100;
+
+      // pH scoring (optimal: 7.5-8.5 for seawater)
+      if (!isNaN(ph)) {
+        if (ph < 7.0 || ph > 9.0) score -= 30;
+        else if (ph < 7.5 || ph > 8.5) score -= 10;
+      }
+
+      // Dissolved oxygen scoring (optimal: > 6 mg/L)
+      if (!isNaN(dissolvedOxygen)) {
+        if (dissolvedOxygen < 2) score -= 40;
+        else if (dissolvedOxygen < 4) score -= 20;
+        else if (dissolvedOxygen < 6) score -= 10;
+      }
+
+      // Turbidity scoring (optimal: < 5 NTU)
+      if (!isNaN(turbidity)) {
+        if (turbidity > 50) score -= 30;
+        else if (turbidity > 20) score -= 20;
+        else if (turbidity > 5) score -= 10;
+      }
+
+      // Coliform scoring (optimal: < 100 CFU/100mL)
+      if (!isNaN(coliform)) {
+        if (coliform > 1000) score -= 40;
+        else if (coliform > 500) score -= 25;
+        else if (coliform > 100) score -= 10;
+      }
+
+      return Math.max(0, score);
+    }
+
+    // Update quality indicator
+    function updateQualityIndicator() {
+      const score = calculateQualityIndex();
+      const indicator = document.getElementById('quality-indicator');
+      const badge = document.getElementById('quality-badge');
+
+      if (score >= 80) {
+        badge.textContent = translations.qualityGood + ' (' + score + ')';
+        badge.className = 'quality-badge quality-good';
+      } else if (score >= 60) {
+        badge.textContent = translations.qualityModerate + ' (' + score + ')';
+        badge.className = 'quality-badge quality-moderate';
+      } else if (score >= 40) {
+        badge.textContent = translations.qualityPoor + ' (' + score + ')';
+        badge.className = 'quality-badge quality-poor';
+      } else {
+        badge.textContent = translations.qualityCritical + ' (' + score + ')';
+        badge.className = 'quality-badge quality-critical';
+      }
+
+      indicator.style.display = 'flex';
+    }
+
+    // Add event listeners for quality calculation
+    ['ph', 'dissolved-oxygen', 'turbidity', 'coliform'].forEach(id => {
+      document.getElementById(id).addEventListener('input', updateQualityIndicator);
+    });
+
+    // Handle form submission
+    document.getElementById('water-quality-form').addEventListener('submit', async function(e) {
+      e.preventDefault();
+
+      const submitBtn = document.getElementById('submit-btn');
+      submitBtn.disabled = true;
+      submitBtn.textContent = translations.saving;
+
+      const formData = new FormData(this);
+      const data = {};
+      formData.forEach((value, key) => {
+        if (value !== '') {
+          data[key] = value;
+        }
+      });
+
+      // Add timestamp and quality score
+      data.submittedAt = new Date().toISOString();
+      data.qualityScore = calculateQualityIndex();
+
+      try {
+        const response = await fetch('/api/water-quality', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          showNotification('success', translations.success);
+          resetForm();
+        } else {
+          throw new Error('Failed to save');
+        }
+      } catch (error) {
+        showNotification('error', translations.error);
+      } finally {
+        submitBtn.disabled = false;
+        submitBtn.textContent = translations.submit;
+      }
+    });
+  </script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=water-quality-form.js.map