@autocode-cli/autocode 0.8.37 → 0.22.0

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

@@ -1,910 +0,0 @@
-/**
- * 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