diff --git a/TankAlarm-112025-Server-BluesOpta/data/client_console.html b/TankAlarm-112025-Server-BluesOpta/data/client_console.html
index 83c0de2..4058548 100644
--- a/TankAlarm-112025-Server-BluesOpta/data/client_console.html
+++ b/TankAlarm-112025-Server-BluesOpta/data/client_console.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Client Console</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12);--console-bg:#1e1e1e;--console-text:#d4d4d4}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18);--console-bg:#000000;--console-text:#cccccc}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:1200px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow);margin-bottom:24px}.console-output{background:var(--console-bg);color:var(--console-text);font-family:'Consolas','Monaco',monospace;padding:16px;height:400px;overflow-y:auto;border-radius:4px;margin-bottom:16px;font-size:0.9rem}.console-input-area{display:flex;gap:12px}.console-input{flex:1;padding:10px;font-family:'Consolas','Monaco',monospace;border:1px solid var(--input-border);background:var(--bg);color:var(--text)}button{border:none;padding:10px 16px;font-size:0.95rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);transition:transform 0.15s ease}button:hover{transform:translateY(-1px)}.log-entry{margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:2px}.log-time{color:#569cd6;margin-right:8px}.log-info{color:#4ec9b0}.log-warn{color:#ce9178}.log-err{color:#f44747}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Client Console</h1><p> Direct communication interface for remote client diagnostics and command execution. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill" href="/client-console">Client Console</a><a class="pill secondary" href="/config-generator">Config Generator</a><a class="pill secondary" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><div style="margin-bottom:16px;display:flex;gap:12px;align-items:center"><label>Target Client: <select id="clientSelect" style="padding:8px"><option value="all">Broadcast (All Clients)</option><option value="client1">Client-01</option><option value="client2">Client-02</option></select></label><button class="secondary" onclick="clearConsole()">Clear Output</button></div><div class="console-output" id="consoleOutput"><div class="log-entry"><span class="log-time">[10:00:01]</span> <span class="log-info">System initialized. Ready for commands.</span></div></div><div class="console-input-area"><input type="text" class="console-input" id="cmdInput" placeholder="Enter command (e.g. /status, /reset, /config)..."><button onclick="sendCommand()">Send</button></div></div></main><script>const output = document.getElementById('consoleOutput');const input = document.getElementById('cmdInput');function log(msg,type='info'){const time = new Date().toLocaleTimeString();const div = document.createElement('div');div.className = 'log-entry';div.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-${type}">${msg}</span>`;output.appendChild(div);output.scrollTop = output.scrollHeight;}function sendCommand(){const cmd = input.value.trim();if(!cmd)return;log(`> ${cmd}`,'info');// Mock response simulationsetTimeout(()=>{if(cmd === '/status'){log('Client-01: Online, Battery 12.4V, Signal -65dBm','info');}else if(cmd === '/reset'){log('Client-01: Reset command received. Rebooting...','warn');}else{log(`Unknown command: ${cmd}`,'err');}},500);input.value = '';}function clearConsole(){output.innerHTML = '';}input.addEventListener('keypress',(e)=>{if(e.key === 'Enter')sendCommand();});</script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Client Console</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12);--console-bg:#1e1e1e;--console-text:#d4d4d4}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18);--console-bg:#000000;--console-text:#cccccc}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:1200px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow);margin-bottom:24px}h2{margin-top:0;font-size:1.3rem}h3{margin:20px 0 10px;font-size:1.1rem;border-bottom:1px solid var(--card-border);padding-bottom:6px;color:var(--text)}.field{display:flex;flex-direction:column;margin-bottom:12px}.field span{font-size:0.9rem;color:var(--muted);margin-bottom:4px}.field input,.field select{padding:10px 12px;border:1px solid var(--input-border);font-size:0.95rem;background:var(--bg);color:var(--text)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.config-card{background:var(--chip);border:1px solid var(--card-border);padding:16px;margin-bottom:16px;position:relative}.remove-btn{color:var(--danger);cursor:pointer;font-size:0.9rem;border:none;background:none;padding:0;font-weight:600}.remove-btn:hover{opacity:0.8}.actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}.console-output{background:var(--console-bg);color:var(--console-text);font-family:'Consolas','Monaco',monospace;padding:16px;height:400px;overflow-y:auto;border-radius:4px;margin-bottom:16px;font-size:0.9rem}.console-input-area{display:flex;gap:12px}.console-input{flex:1;padding:10px;font-family:'Consolas','Monaco',monospace;border:1px solid var(--input-border);background:var(--bg);color:var(--text)}button{border:none;padding:10px 16px;font-size:0.95rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);transition:transform 0.15s ease}button.secondary{background:transparent;border:1px solid var(--card-border);color:var(--text)}button:hover{transform:translateY(-1px)}.log-entry{margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:2px}.log-time{color:#569cd6;margin-right:8px}.log-info{color:#4ec9b0}.log-warn{color:#ce9178}.log-err{color:#f44747}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--muted);color:var(--surface);font-size:0.7rem;font-weight:700;cursor:help;margin-left:4px;position:relative}.tooltip-icon:hover::after,.tooltip-icon:focus::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:6px 10px;font-size:0.75rem;font-weight:400;max-width:280px;white-space:normal;z-index:100;margin-bottom:4px;box-shadow:0 4px 12px var(--card-shadow)}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Client Console</h1><p> Direct communication interface for remote client diagnostics and command execution. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill" href="/client-console">Client Console</a><a class="pill secondary" href="/config-generator">Config Generator</a><a class="pill secondary" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><div style="margin-bottom:16px;display:flex;gap:12px;align-items:center"><label>Target Client: <select id="clientSelect" style="padding:8px" onchange="loadClientConfig()"><option value="">Select Client...</option><option value="client1">Client-01</option><option value="client2">Client-02</option></select></label><button class="secondary" onclick="clearConsole()">Clear Output</button></div><div class="console-output" id="consoleOutput"><div class="log-entry"><span class="log-time">[10:00:01]</span> <span class="log-info">System initialized. Ready for commands.</span></div></div><div class="console-input-area"><input type="text" class="console-input" id="cmdInput" placeholder="Enter command (e.g. /status, /reset, /config)..."><button onclick="sendCommand()">Send</button></div></div><div class="card" id="configEditor" style="display:none;"><h2>Edit Client Configuration</h2><form id="editorForm"><div class="form-grid"><label class="field"><span>Site Name</span><input id="editSiteName" type="text" placeholder="Site Name" required></label><label class="field"><span>Device Label</span><input id="editDeviceLabel" type="text" placeholder="Device Label" required></label><label class="field"><span>Sample Minutes</span><input id="editSampleMinutes" type="number" value="30" min="1" max="1440"></label><label class="field"><span>Level Change Threshold (in)<span class="tooltip-icon" tabindex="0" data-tooltip="Minimum level change in inches required before sending telemetry. Set to 0 to send all readings.">?</span></span><input id="editLevelChangeThreshold" type="number" step="0.1" value="0" placeholder="0 = disabled"></label></div><h3>Power Configuration</h3><div class="form-grid"><label class="field"><span>Power Type<span class="tooltip-icon" tabindex="0" data-tooltip="Select the power configuration for this client installation.">?</span></span><select id="editPowerConfig" onchange="updateEditPowerConfigInfo()"><option value="grid">Grid Powered</option><option value="grid_battery">Grid Powered with 12V Battery Backup</option><option value="solar_pwm">Solar Powered with Basic PWM Charger</option><option value="solar_mppt">Solar Powered with Basic MPPT</option><option value="solar_modbus_mppt">Solar Powered with Modbus MPPT</option></select></label></div><div id="editPowerConfigInfo" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-bottom:16px;font-size:0.9rem;color:var(--muted);"><strong>Hardware Requirement:</strong> Modbus MPPT requires the Arduino Opta with RS485 expansion module for communication with the MPPT charge controller.</div><h3>Site-Specific Daily Email Recipients</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">These email recipients will receive daily reports only for this specific site. This is separate from the unified server-wide daily email list in Server Settings.</p><div id="editDailyEmailContactsContainer" style="margin-bottom:16px;"></div><div class="actions" style="margin-bottom:24px;margin-top:0;"><button type="button" id="editAddDailyEmailBtn" class="secondary">+ Add Email Recipient</button></div><h3>Site-Specific SMS Alarm Contacts</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">These contacts will receive SMS alerts only for alarms from this specific site's sensors.</p><div id="editSmsContactsContainer" style="margin-bottom:16px;"></div><div class="actions" style="margin-bottom:24px;margin-top:0;"><button type="button" id="editAddSmsContactBtn" class="secondary">+ Add SMS Contact</button></div><div class="actions"><button type="button" id="saveConfigBtn">Save Configuration</button><button type="button" class="secondary" onclick="cancelEdit()">Cancel</button></div></form></div></main><script>const output = document.getElementById('consoleOutput');const input = document.getElementById('cmdInput');let editDailyEmailIdCounter = 0;let editSmsContactIdCounter = 0;function log(msg,type='info'){const time = new Date().toLocaleTimeString();const div = document.createElement('div');div.className = 'log-entry';div.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-${type}">${msg}</span>`;output.appendChild(div);output.scrollTop = output.scrollHeight;}function sendCommand(){const cmd = input.value.trim();if(!cmd)return;log(`> ${cmd}`,'info');setTimeout(()=>{if(cmd === '/status'){log('Client-01: Online, Battery 12.4V, Signal -65dBm','info');}else if(cmd === '/reset'){log('Client-01: Reset command received. Rebooting...','warn');}else{log(`Unknown command: ${cmd}`,'err');}},500);input.value = '';}function clearConsole(){output.innerHTML = '';}function loadClientConfig(){const clientId = document.getElementById('clientSelect').value;if(!clientId){document.getElementById('configEditor').style.display = 'none';return;}document.getElementById('configEditor').style.display = 'block';log(`Loading configuration for ${clientId}...`,'info');setTimeout(()=>{document.getElementById('editSiteName').value = 'Example Site';document.getElementById('editDeviceLabel').value = clientId;document.getElementById('editSampleMinutes').value = '30';document.getElementById('editLevelChangeThreshold').value = '0';document.getElementById('editPowerConfig').value = 'grid';updateEditPowerConfigInfo();log(`Configuration loaded for ${clientId}`,'info');},300);}function updateEditPowerConfigInfo(){const powerConfig = document.getElementById('editPowerConfig').value;const infoBox = document.getElementById('editPowerConfigInfo');if(powerConfig === 'solar_modbus_mppt'){infoBox.style.display = 'block';}else{infoBox.style.display = 'none';}}function addEditDailyEmailContact(){const id = editDailyEmailIdCounter++;const container = document.getElementById('editDailyEmailContactsContainer');const card = document.createElement('div');card.className = 'config-card';card.id = `edit-daily-email-${id}`;card.style.padding = '12px';card.style.marginBottom = '8px';card.innerHTML = `<div style="display:flex;gap:8px;align-items:center;"><input type="email" class="edit-daily-email-input" placeholder="user@example.com" style="flex:1;padding:8px 10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);font-size:0.9rem;"><button type="button" class="remove-btn" onclick="removeEditDailyEmail(${id})" style="padding:6px 10px;font-size:0.85rem;">Remove</button></div>`;container.appendChild(card);}window.removeEditDailyEmail = function(id){const card = document.getElementById(`edit-daily-email-${id}`);if(card){card.remove();}};function addEditSmsContact(){const id = editSmsContactIdCounter++;const container = document.getElementById('editSmsContactsContainer');const card = document.createElement('div');card.className = 'config-card';card.id = `edit-sms-contact-${id}`;card.style.padding = '12px';card.style.marginBottom = '8px';card.innerHTML = `<div style="display:flex;gap:8px;align-items:center;"><input type="text" class="edit-sms-contact-input" placeholder="+15551234567" style="flex:1;padding:8px 10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);font-size:0.9rem;"><button type="button" class="remove-btn" onclick="removeEditSmsContact(${id})" style="padding:6px 10px;font-size:0.85rem;">Remove</button></div>`;container.appendChild(card);}window.removeEditSmsContact = function(id){const card = document.getElementById(`edit-sms-contact-${id}`);if(card){card.remove();}};function cancelEdit(){document.getElementById('configEditor').style.display = 'none';document.getElementById('clientSelect').value = '';}function saveConfig(){const clientId = document.getElementById('clientSelect').value;if(!clientId){alert('Please select a client');return;}const powerConfigValue = document.getElementById('editPowerConfig').value;const dailyEmailInputs = document.querySelectorAll('.edit-daily-email-input');const dailyEmails = Array.from(dailyEmailInputs).map(input => input.value.trim()).filter(email => email.length > 0);const smsContactInputs = document.querySelectorAll('.edit-sms-contact-input');const smsContacts = Array.from(smsContactInputs).map(input => input.value.trim()).filter(phone => phone.length > 0);const requiresRS485 = powerConfigValue === 'solar_modbus_mppt';const hasBattery = powerConfigValue === 'grid_battery' || powerConfigValue.startsWith('solar');const batteryType = powerConfigValue === 'grid_battery' ? '12v_backup' : (powerConfigValue.startsWith('solar') ? 'solar' : 'none');const config = {site: document.getElementById('editSiteName').value.trim(),deviceLabel: document.getElementById('editDeviceLabel').value.trim(),sampleMinutes: parseInt(document.getElementById('editSampleMinutes').value)||30,levelChangeThreshold: parseFloat(document.getElementById('editLevelChangeThreshold').value)||0,solarPowered: powerConfigValue.startsWith('solar'),powerConfig: powerConfigValue,requiresRS485: requiresRS485,hasBattery: hasBattery,batteryType: batteryType,dailyEmails: dailyEmails,smsContacts: smsContacts};log(`Saving configuration for ${clientId}...`,'info');log(`Config: ${JSON.stringify(config,null,2)}`,'info');setTimeout(()=>{log(`Configuration saved successfully for ${clientId}`,'info');},500);}input.addEventListener('keypress',(e)=>{if(e.key === 'Enter')sendCommand();});document.getElementById('editAddDailyEmailBtn').addEventListener('click',addEditDailyEmailContact);document.getElementById('editAddSmsContactBtn').addEventListener('click',addEditSmsContact);document.getElementById('saveConfigBtn').addEventListener('click',saveConfig);</script></body></html>
\ No newline at end of file
diff --git a/TankAlarm-112025-Server-BluesOpta/data/config_generator.html b/TankAlarm-112025-Server-BluesOpta/data/config_generator.html
index 11a1ea7..c13a816 100644
--- a/TankAlarm-112025-Server-BluesOpta/data/config_generator.html
+++ b/TankAlarm-112025-Server-BluesOpta/data/config_generator.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Config Generator</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12)}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18)}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:1000px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow)}h2{margin-top:0;font-size:1.3rem}h3{margin:20px 0 10px;font-size:1.1rem;border-bottom:1px solid var(--card-border);padding-bottom:6px;color:var(--text)}.field{display:flex;flex-direction:column;margin-bottom:12px}.field span{font-size:0.9rem;color:var(--muted);margin-bottom:4px}.field input,.field select{padding:10px 12px;border:1px solid var(--input-border);font-size:0.95rem;background:var(--bg);color:var(--text)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.sensor-card{background:var(--chip);border:1px solid var(--card-border);padding:16px;margin-bottom:16px;position:relative}.sensor-header{display:flex;justify-content:space-between;margin-bottom:12px}.sensor-title{font-weight:600;color:var(--text)}.remove-btn{color:var(--danger);cursor:pointer;font-size:0.9rem;border:none;background:none;padding:0;font-weight:600}.remove-btn:hover{opacity:0.8}.actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}.collapsible-section{display:none}.collapsible-section.visible{display:block}.add-section-btn{background:transparent;border:1px dashed var(--input-border);color:var(--accent);padding:8px 14px;font-size:0.85rem;cursor:pointer;margin-top:8px}.add-section-btn:hover{background:var(--pill-bg)}.add-section-btn.hidden{display:none}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--muted);color:var(--surface);font-size:0.7rem;font-weight:700;cursor:help;margin-left:4px;position:relative}.tooltip-icon:hover::after,.tooltip-icon:focus::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:6px 10px;font-size:0.75rem;font-weight:400;max-width:280px;white-space:normal;z-index:100;margin-bottom:4px;box-shadow:0 4px 12px var(--card-shadow)}button{border:none;padding:10px 16px;font-size:0.95rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);transition:transform 0.15s ease}button.secondary{background:transparent;border:1px solid var(--card-border);color:var(--text)}button:hover{transform:translateY(-1px)}button:disabled{opacity:0.5;cursor:not-allowed;transform:none}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Config Generator</h1><p> Create new client configurations with sensor definitions and upload settings for Tank Alarm field units. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill secondary" href="/client-console">Client Console</a><a class="pill" href="/config-generator">Config Generator</a><a class="pill secondary" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><h2>New Client Configuration</h2><form id="generatorForm"><div class="form-grid"><label class="field"><span>Product UID <span class="tooltip-icon" tabindex="0" data-tooltip="Blues Notehub Product UID. Must match the server's Product UID for client-server communication. Auto-filled from server settings.">?</span></span><input id="productUid" type="text" placeholder="com.company.product:project" readonly style="background:var(--chip);"></label><label class="field"><span>Site Name</span><input id="siteName" type="text" placeholder="Site Name" required></label><label class="field"><span>Device Label</span><input id="deviceLabel" type="text" placeholder="Device Label" required></label><label class="field"><span>Server Fleet</span><input id="serverFleet" type="text" value="tankalarm-server"></label><label class="field"><span>Sample Minutes</span><input id="sampleMinutes" type="number" value="30" min="1" max="1440"></label><label class="field"><span>Level Change Threshold (in)<span class="tooltip-icon" tabindex="0" data-tooltip="Minimum level change in inches required before sending telemetry. Set to 0 to send all readings. Useful to reduce data usage by only reporting significant changes.">?</span></span><input id="levelChangeThreshold" type="number" step="0.1" value="0" placeholder="0 = disabled"></label><label class="field"><span>Report Time</span><input id="reportTime" type="time" value="05:00"></label><label class="field"><span>Daily Report Email Recipient</span><input id="dailyEmail" type="email"></label></div><h3>Power Configuration</h3><div class="form-grid"><label class="field" style="display: flex; align-items: center; gap: 8px; grid-column: 1 / -1;"><input type="checkbox" id="solarPowered" style="width: auto;"><span>Solar Powered<span class="tooltip-icon" tabindex="0" data-tooltip="Enable power saving features for solar-powered installations. Uses periodic mode with 60-minute inbound check intervals and deep sleep routines. When disabled (grid-tied), uses continuous mode for faster response times.">?</span></span></label></div><h3>Sensors</h3><div id="sensorsContainer"></div><div class="actions" style="margin-bottom: 24px;"><button type="button" id="addSensorBtn" class="secondary">+ Add Sensor</button></div><h3>Inputs (Buttons &amp; Switches)</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">Configure physical inputs for actions like clearing relay alarms. More input actions will be available in future updates.</p><div id="inputsContainer"></div><div class="actions" style="margin-bottom: 24px;"><button type="button" id="addInputBtn" class="secondary">+ Add Input</button></div><div class="actions"><button type="button" id="downloadBtn">Download Config</button></div></form></div></main><script>const sensorTypes = [{value:0,label:'Digital Input(Float Switch)'},{value:1,label:'Analog Input(0-10V)'},{value:2,label:'Current Loop(4-20mA)'},{value:3,label:'Hall Effect RPM'}];const currentLoopTypes = [{value:'pressure',label:'Pressure Sensor(Bottom-Mounted)',tooltip:'Pressure sensor mounted near tank bottom(e.g.,Dwyer 626-06-CB-P1-E5-S1). 4mA = empty,20mA = full.'},{value:'ultrasonic',label:'Ultrasonic Sensor(Top-Mounted)',tooltip:'Ultrasonic level sensor mounted on tank top(e.g.,Siemens Sitrans LU240). 4mA = full,20mA = empty.'}];const monitorTypes = [{value:'tank',label:'Tank Level'},{value:'gas',label:'Gas Pressure'},{value:'rpm',label:'RPM Sensor'}];const optaPins = [{value:0,label:'Opta I1'},{value:1,label:'Opta I2'},{value:2,label:'Opta I3'},{value:3,label:'Opta I4'},{value:4,label:'Opta I5'},{value:5,label:'Opta I6'},{value:6,label:'Opta I7'},{value:7,label:'Opta I8'}];const expansionChannels = [{value:0,label:'A0602 Ch1'},{value:1,label:'A0602 Ch2'},{value:2,label:'A0602 Ch3'},{value:3,label:'A0602 Ch4'},{value:4,label:'A0602 Ch5'},{value:5,label:'A0602 Ch6'}];let sensorCount = 0;function createSensorHtml(id){return ` <div class="sensor-card" id="sensor-${id}"><div class="sensor-header"><span class="sensor-title">Sensor #${id + 1}</span><button type="button" class="remove-btn" onclick="removeSensor(${id})">Remove</button></div><div class="form-grid"><label class="field"><span>Monitor Type</span><select class="monitor-type" onchange="updateMonitorFields(${id})"> ${monitorTypes.map(t => `<option value="${t.value}">${t.label}</option>`).join('')}</select></label><label class="field tank-num-field"><span>Tank Number</span><input type="number" class="tank-num" value="${id + 1}"></label><label class="field"><span><span class="name-label">Name</span></span><input type="text" class="tank-name" placeholder="Name"></label><label class="field contents-field"><span>Contents</span><input type="text" class="tank-contents" placeholder="e.g. Diesel, Water"></label><label class="field"><span>Sensor Type</span><select class="sensor-type" onchange="updatePinOptions(${id})"> ${sensorTypes.map(t => `<option value="${t.value}">${t.label}</option>`).join('')}</select></label><label class="field"><span>Pin / Channel</span><select class="sensor-pin"> ${optaPins.map(p => `<option value="${p.value}">${p.label}</option>`).join('')}</select></label><label class="field switch-mode-field" style="display:none;"><span>Switch Mode<span class="tooltip-icon" tabindex="0" data-tooltip="NO(Normally-Open):Switch is open by default,closes when fluid is present. NC(Normally-Closed):Switch is closed by default,opens when fluid is present. The wiring is the same - only the software interpretation changes.">?</span></span><select class="switch-mode"><option value="NO">Normally-Open(NO)</option><option value="NC">Normally-Closed(NC)</option></select></label><label class="field pulses-per-rev-field" style="display:none;"><span>Pulses/Rev</span><input type="number" class="pulses-per-rev" value="1" min="1" max="255"></label><label class="field current-loop-type-field" style="display:none;"><span>4-20mA Sensor Type<span class="tooltip-icon" tabindex="0" data-tooltip="Select the type of 4-20mA sensor:Pressure sensors are mounted near the tank bottom and measure liquid pressure. Ultrasonic sensors are mounted on top of the tank and measure distance to the liquid surface.">?</span></span><select class="current-loop-type" onchange="updateCurrentLoopFields(${id})"><option value="pressure">Pressure Sensor(Bottom-Mounted)</option><option value="ultrasonic">Ultrasonic Sensor(Top-Mounted)</option></select></label><label class="field sensor-range-field" style="display:none;"><span><span class="sensor-range-label">Sensor Range</span><span class="tooltip-icon sensor-range-tooltip" tabindex="0" data-tooltip="Native measurement range of the sensor(e.g.,0-5 PSI for pressure,0-10m for ultrasonic). This is the range that corresponds to 4-20mA output.">?</span></span><div style="display:flex;gap:8px;align-items:center;"><input type="number" class="sensor-range-min" value="0" step="0.1" style="width:70px;" placeholder="Min"><span>to</span><input type="number" class="sensor-range-max" value="5" step="0.1" style="width:70px;" placeholder="Max"><select class="sensor-range-unit" style="width:70px;"><option value="PSI">PSI</option><option value="bar">bar</option><option value="m">m</option><option value="ft">ft</option><option value="in">in</option><option value="cm">cm</option></select></div></label><label class="field sensor-mount-height-field" style="display:none;"><span><span class="mount-height-label">Sensor Mount Height(in)</span><span class="tooltip-icon mount-height-tooltip" tabindex="0" data-tooltip="For pressure sensors:height of sensor above tank bottom(usually 0-2 inches). For ultrasonic sensors:distance from sensor to tank bottom when empty.">?</span></span><input type="number" class="sensor-mount-height" value="0" step="0.1" min="0"></label><label class="field height-field"><span><span class="height-label">Height(in)</span><span class="tooltip-icon height-tooltip" tabindex="0" data-tooltip="Maximum height or capacity of the tank in inches. Used to set alarm thresholds relative to tank size.">?</span></span><input type="number" class="tank-height" value="120"></label></div><div class="digital-sensor-info" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-top:8px;font-size:0.9rem;color:var(--muted);"><strong>Float Switch Mode:</strong> This sensor only detects whether fluid has reached the switch position. It does not measure actual fluid level. The alarm will trigger when the switch is activated(fluid present)or not activated(fluid absent).<br><br><strong>Wiring Note:</strong> For both NO and NC switches,connect the switch between the input pin and GND. The software uses an internal pull-up resistor and interprets the signal based on your selected switch mode. </div><div class="current-loop-sensor-info" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-top:8px;font-size:0.9rem;color:var(--muted);"><div class="pressure-sensor-info"><strong>Pressure Sensor(Bottom-Mounted):</strong> Installed near the bottom of the tank,this sensor measures the pressure of the liquid column above it. Examples:Dwyer 626-06-CB-P1-E5-S1(0-5 PSI).<br> • 4mA = Empty tank(0 pressure)<br> • 20mA = Full tank(max pressure)<br> • Sensor Range:The native pressure range(e.g.,0-5 PSI,0-2 bar)<br> • Mount Height:Distance from sensor to tank bottom(usually 0-2 inches)</div><div class="ultrasonic-sensor-info" style="display:none;"><strong>Ultrasonic Sensor(Top-Mounted):</strong> Mounted on top of the tank,this sensor measures the distance from the sensor to the liquid surface. Examples:Siemens Sitrans LU240.<br> • 4mA = Full tank(liquid close to sensor)<br> • 20mA = Empty tank(liquid far from sensor)<br> • Sensor Range:The native distance range(e.g.,0-10m,0-30ft)<br> • Sensor Mount Height:Distance from sensor to tank bottom when empty </div></div><button type="button" class="add-section-btn add-alarm-btn" onclick="toggleAlarmSection(${id})">+ Add Alarm</button><div class="collapsible-section alarm-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;"><span class="alarm-section-title">Alarm Thresholds</span><button type="button" class="remove-btn" onclick="removeAlarmSection(${id})" style="float:right;">Remove Alarm</button></h4><div class="form-grid alarm-thresholds-grid"><div class="field"><span><label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" class="high-alarm-enabled" checked> High Alarm </label></span><input type="number" class="high-alarm" value="100"></div><div class="field"><span><label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" class="low-alarm-enabled" checked> Low Alarm </label></span><input type="number" class="low-alarm" value="20"></div></div><div class="form-grid digital-alarm-grid" style="display:none;"><div class="field" style="grid-column:1 / -1;"><span>Trigger Condition<span class="tooltip-icon" tabindex="0" data-tooltip="Select when the alarm should trigger based on the float switch state.">?</span></span><select class="digital-trigger-state"><option value="activated">When Switch is Activated(fluid detected)</option><option value="not_activated">When Switch is NOT Activated(no fluid)</option></select></div></div></div><button type="button" class="add-section-btn add-relay-btn hidden" onclick="toggleRelaySection(${id})">+ Add Relay Control</button><div class="collapsible-section relay-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;">Relay Switch Control(Triggered by This Sensor's Alarm)<button type="button" class="remove-btn" onclick="removeRelaySection(${id})" style="float:right;">Remove Relay</button></h4><div class="form-grid"><label class="field"><span>Target Client UID</span><input type="text" class="relay-target" placeholder="dev:IMEI(optional)"></label><label class="field"><span>Trigger On</span><select class="relay-trigger"><option value="any">Any Alarm(High or Low)</option><option value="high">High Alarm Only</option><option value="low">Low Alarm Only</option></select></label><label class="field"><span>Relay Mode</span><select class="relay-mode" onchange="toggleRelayDurations(${id})"><option value="momentary">Momentary(configurable duration)</option><option value="until_clear">Stay On Until Alarm Clears</option><option value="manual_reset">Stay On Until Manual Server Reset</option></select></label><div class="field"><span>Relay Outputs</span><div style="display:flex;gap:12px;padding:8px 0;"><label style="display:flex;align-items:center;gap:4px;"><input type="checkbox" class="relay-1" value="1"> R1</label><label style="display:flex;align-items:center;gap:4px;"><input type="checkbox" class="relay-2" value="2"> R2</label><label style="display:flex;align-items:center;gap:4px;"><input type="checkbox" class="relay-3" value="4"> R3</label><label style="display:flex;align-items:center;gap:4px;"><input type="checkbox" class="relay-4" value="8"> R4</label></div></div><div class="relay-durations-section" style="grid-column:1 / -1;display:block;"><span style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:8px;display:block;">Momentary Duration per Relay(seconds,0 = default 30 min):</span><div style="display:flex;gap:12px;flex-wrap:wrap;"><label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;">R1:<input type="number" class="relay-duration-1" value="0" min="0" max="86400" style="width:70px;"></label><label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;">R2:<input type="number" class="relay-duration-2" value="0" min="0" max="86400" style="width:70px;"></label><label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;">R3:<input type="number" class="relay-duration-3" value="0" min="0" max="86400" style="width:70px;"></label><label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;">R4:<input type="number" class="relay-duration-4" value="0" min="0" max="86400" style="width:70px;"></label></div></div></div></div><button type="button" class="add-section-btn add-sms-btn hidden" onclick="toggleSmsSection(${id})">+ Add SMS Alert</button><div class="collapsible-section sms-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;">SMS Alert Notifications <button type="button" class="remove-btn" onclick="removeSmsSection(${id})" style="float:right;">Remove SMS Alert</button></h4><div class="form-grid"><label class="field" style="grid-column:1 / -1;"><span>Phone Numbers<span class="tooltip-icon" tabindex="0" data-tooltip="Enter phone numbers with country code(e.g.,+15551234567). Separate multiple numbers with commas.">?</span></span><input type="text" class="sms-phones" placeholder="+15551234567,+15559876543"></label><label class="field"><span>Trigger On</span><select class="sms-trigger"><option value="any">Any Alarm(High or Low)</option><option value="high">High Alarm Only</option><option value="low">Low Alarm Only</option></select></label><label class="field" style="grid-column:span 2;"><span>Custom Message(optional)</span><input type="text" class="sms-message" placeholder="Tank alarm triggered"></label></div></div></div> `;}function addSensor(){const container = document.getElementById('sensorsContainer');const div = document.createElement('div');div.innerHTML = createSensorHtml(sensorCount);container.appendChild(div.firstElementChild);updateSensorTypeFields(sensorCount);sensorCount++;}window.removeSensor = function(id){const el = document.getElementById(`sensor-${id}`);if(el)el.remove();};window.toggleAlarmSection = function(id){const card = document.getElementById(`sensor-${id}`);const alarmSection = card.querySelector('.alarm-section');const addAlarmBtn = card.querySelector('.add-alarm-btn');const addRelayBtn = card.querySelector('.add-relay-btn');const addSmsBtn = card.querySelector('.add-sms-btn');alarmSection.classList.add('visible');addAlarmBtn.classList.add('hidden');addRelayBtn.classList.remove('hidden');addSmsBtn.classList.remove('hidden');};window.removeAlarmSection = function(id){const card = document.getElementById(`sensor-${id}`);const alarmSection = card.querySelector('.alarm-section');const addAlarmBtn = card.querySelector('.add-alarm-btn');const addRelayBtn = card.querySelector('.add-relay-btn');const addSmsBtn = card.querySelector('.add-sms-btn');const relaySection = card.querySelector('.relay-section');const smsSection = card.querySelector('.sms-section');alarmSection.classList.remove('visible');addAlarmBtn.classList.remove('hidden');addRelayBtn.classList.add('hidden');addSmsBtn.classList.add('hidden');relaySection.classList.remove('visible');smsSection.classList.remove('visible');card.querySelector('.high-alarm').value = '100';card.querySelector('.low-alarm').value = '20';card.querySelector('.high-alarm-enabled').checked = true;card.querySelector('.low-alarm-enabled').checked = true;card.querySelector('.relay-target').value = '';card.querySelector('.relay-trigger').value = 'any';card.querySelector('.relay-mode').value = 'momentary';['relay-1','relay-2','relay-3','relay-4'].forEach(cls =>{card.querySelector('.' + cls).checked = false;});card.querySelector('.sms-phones').value = '';card.querySelector('.sms-trigger').value = 'any';card.querySelector('.sms-message').value = '';};window.toggleRelaySection = function(id){const card = document.getElementById(`sensor-${id}`);const relaySection = card.querySelector('.relay-section');const addBtn = card.querySelector('.add-relay-btn');relaySection.classList.add('visible');addBtn.classList.add('hidden');};window.removeRelaySection = function(id){const card = document.getElementById(`sensor-${id}`);const relaySection = card.querySelector('.relay-section');const addBtn = card.querySelector('.add-relay-btn');relaySection.classList.remove('visible');addBtn.classList.remove('hidden');card.querySelector('.relay-target').value = '';card.querySelector('.relay-trigger').value = 'any';card.querySelector('.relay-mode').value = 'momentary';['relay-1','relay-2','relay-3','relay-4'].forEach(cls =>{card.querySelector('.' + cls).checked = false;});['relay-duration-1','relay-duration-2','relay-duration-3','relay-duration-4'].forEach(cls =>{card.querySelector('.' + cls).value = '0';});card.querySelector('.relay-durations-section').style.display = 'block';};window.toggleSmsSection = function(id){const card = document.getElementById(`sensor-${id}`);const smsSection = card.querySelector('.sms-section');const addBtn = card.querySelector('.add-sms-btn');smsSection.classList.add('visible');addBtn.classList.add('hidden');};window.removeSmsSection = function(id){const card = document.getElementById(`sensor-${id}`);const smsSection = card.querySelector('.sms-section');const addBtn = card.querySelector('.add-sms-btn');smsSection.classList.remove('visible');addBtn.classList.remove('hidden');card.querySelector('.sms-phones').value = '';card.querySelector('.sms-trigger').value = 'any';card.querySelector('.sms-message').value = '';};window.toggleRelayDurations = function(id){const card = document.getElementById(`sensor-${id}`);const relayMode = card.querySelector('.relay-mode').value;const durationsSection = card.querySelector('.relay-durations-section');if(relayMode === 'momentary'){durationsSection.style.display = 'block';}else{durationsSection.style.display = 'none';}};window.updateMonitorFields = function(id){const card = document.getElementById(`sensor-${id}`);const type = card.querySelector('.monitor-type').value;const numField = card.querySelector('.tank-num-field');const numFieldLabel = numField.querySelector('span');const nameLabel = card.querySelector('.name-label');const heightLabel = card.querySelector('.height-label');const sensorTypeSelect = card.querySelector('.sensor-type');const pulsesPerRevField = card.querySelector('.pulses-per-rev-field');const contentsField = card.querySelector('.contents-field');if(type === 'gas'){numField.style.display = 'none';nameLabel.textContent = 'System Name';heightLabel.textContent = 'Max Pressure';pulsesPerRevField.style.display = 'none';contentsField.style.display = 'flex';}else if(type === 'rpm'){numField.style.display = 'flex';numFieldLabel.textContent = 'Engine Number';nameLabel.textContent = 'Engine Name';heightLabel.textContent = 'Max RPM';pulsesPerRevField.style.display = 'flex';contentsField.style.display = 'none';sensorTypeSelect.value = '3';updatePinOptions(id);}else{numField.style.display = 'flex';numFieldLabel.textContent = 'Tank Number';nameLabel.textContent = 'Name';heightLabel.textContent = 'Height(in)';pulsesPerRevField.style.display = 'none';contentsField.style.display = 'flex';}};window.updatePinOptions = function(id){const card = document.getElementById(`sensor-${id}`);const typeSelect = card.querySelector('.sensor-type');const pinSelect = card.querySelector('.sensor-pin');const type = parseInt(typeSelect.value);pinSelect.innerHTML = '';let options = [];if(type === 2){options = expansionChannels;}else{options = optaPins;}options.forEach(opt =>{const option = document.createElement('option');option.value = opt.value;option.textContent = opt.label;pinSelect.appendChild(option);});updateSensorTypeFields(id);};window.updateSensorTypeFields = function(id){const card = document.getElementById(`sensor-${id}`);const type = parseInt(card.querySelector('.sensor-type').value);const heightField = card.querySelector('.height-field');const heightLabel = card.querySelector('.height-label');const heightTooltip = card.querySelector('.height-tooltip');const digitalInfoBox = card.querySelector('.digital-sensor-info');const currentLoopInfoBox = card.querySelector('.current-loop-sensor-info');const alarmThresholdsGrid = card.querySelector('.alarm-thresholds-grid');const digitalAlarmGrid = card.querySelector('.digital-alarm-grid');const alarmSectionTitle = card.querySelector('.alarm-section-title');const pulsesPerRevField = card.querySelector('.pulses-per-rev-field');const switchModeField = card.querySelector('.switch-mode-field');const currentLoopTypeField = card.querySelector('.current-loop-type-field');const sensorMountHeightField = card.querySelector('.sensor-mount-height-field');const sensorRangeField = card.querySelector('.sensor-range-field');if(type === 0){heightField.style.display = 'none';digitalInfoBox.style.display = 'block';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'flex';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'none';digitalAlarmGrid.style.display = 'grid';alarmSectionTitle.textContent = 'Float Switch Alarm';pulsesPerRevField.style.display = 'none';}else if(type === 2){heightField.style.display = 'flex';heightLabel.textContent = 'Tank Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum height of liquid in the tank in inches. Meaning varies based on sensor subtype.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'block';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'flex';sensorRangeField.style.display = 'flex';sensorMountHeightField.style.display = 'flex';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'none';updateCurrentLoopFields(id);}else if(type === 3){heightField.style.display = 'flex';heightLabel.textContent = 'Max RPM';heightTooltip.setAttribute('data-tooltip','Maximum expected RPM value. Used for alarm threshold reference.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'flex';}else{heightField.style.display = 'flex';heightLabel.textContent = 'Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum height or capacity of the tank in inches. Used to set alarm thresholds relative to tank size.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'none';}};window.updateCurrentLoopFields = function(id){const card = document.getElementById(`sensor-${id}`);const currentLoopType = card.querySelector('.current-loop-type').value;const currentLoopInfoBox = card.querySelector('.current-loop-sensor-info');const pressureInfo = currentLoopInfoBox.querySelector('.pressure-sensor-info');const ultrasonicInfo = currentLoopInfoBox.querySelector('.ultrasonic-sensor-info');const mountHeightLabel = card.querySelector('.mount-height-label');const mountHeightTooltip = card.querySelector('.mount-height-tooltip');const heightLabel = card.querySelector('.height-label');const heightTooltip = card.querySelector('.height-tooltip');const sensorRangeLabel = card.querySelector('.sensor-range-label');const sensorRangeTooltip = card.querySelector('.sensor-range-tooltip');const sensorRangeUnit = card.querySelector('.sensor-range-unit');const sensorRangeMax = card.querySelector('.sensor-range-max');if(currentLoopType === 'ultrasonic'){pressureInfo.style.display = 'none';ultrasonicInfo.style.display = 'block';mountHeightLabel.textContent = 'Sensor Mount Height(in)';mountHeightTooltip.setAttribute('data-tooltip','Distance from the ultrasonic sensor to the tank bottom when empty. This is used to calculate the actual liquid level.');heightLabel.textContent = 'Tank Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum liquid height in the tank. When the tank is full,the liquid level equals this value.');sensorRangeLabel.textContent = 'Sensor Range';sensorRangeTooltip.setAttribute('data-tooltip','Native distance range of the ultrasonic sensor(e.g.,0-10m). This is the measurement range that corresponds to the 4-20mA output.');sensorRangeUnit.value = 'm';sensorRangeMax.value = '10';}else{pressureInfo.style.display = 'block';ultrasonicInfo.style.display = 'none';mountHeightLabel.textContent = 'Sensor Mount Height(in)';mountHeightTooltip.setAttribute('data-tooltip','Height of the pressure sensor above the tank bottom(usually 0-2 inches). This offset is added to the measured level.');heightLabel.textContent = 'Max Measured Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum liquid height the sensor can measure(corresponds to 20mA / full sensor scale). Does not include the sensor mount height offset.');sensorRangeLabel.textContent = 'Sensor Range';sensorRangeTooltip.setAttribute('data-tooltip','Native pressure range of the sensor(e.g.,0-5 PSI,0-2 bar). This is the measurement range that corresponds to the 4-20mA output.');sensorRangeUnit.value = 'PSI';sensorRangeMax.value = '5';}};document.getElementById('addSensorBtn').addEventListener('click',addSensor);const inputActions = [{value:'clear_relays',label:'Clear All Relay Alarms',tooltip:'When pressed,turns off all active relay outputs and resets alarm states.'},{value:'none',label:'Disabled(No Action)',tooltip:'Input is configured but does not trigger any action.'}];const inputModes = [{value:'active_low',label:'Active LOW(Button to GND,internal pullup)'},{value:'active_high',label:'Active HIGH(Button to VCC,external pull-down)'}];let inputIdCounter = 0;function addInput(){const id = inputIdCounter++;const container = document.getElementById('inputsContainer');const card = document.createElement('div');card.className = 'sensor-card';card.id = `input-${id}`;card.innerHTML = ` <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><h4 style="margin:0;font-size:1rem;">Input ${id + 1}</h4><button type="button" class="remove-btn" onclick="removeInput(${id})">Remove</button></div><div class="form-grid"><label class="field"><span>Input Name</span><input type="text" class="input-name" placeholder="Clear Button" value="Clear Button"></label><label class="field"><span>Pin Number<span class="tooltip-icon" tabindex="0" data-tooltip="Arduino Opta pin number for the input. A0=0,A1=1,etc. Use a digital-capable pin.">?</span></span><input type="number" class="input-pin" value="0" min="0" max="99"></label><label class="field"><span>Input Mode<span class="tooltip-icon" tabindex="0" data-tooltip="Active LOW:Button connects pin to GND,uses internal pull-up resistor. Active HIGH:Button connects pin to VCC,requires external pull-down resistor.">?</span></span><select class="input-mode"> ${inputModes.map(m => `<option value="${m.value}">${m.label}</option>`).join('')}</select></label><label class="field"><span>Action<span class="tooltip-icon" tabindex="0" data-tooltip="What happens when this input is activated(button pressed for 500ms).">?</span></span><select class="input-action"> ${inputActions.map(a => `<option value="${a.value}">${a.label}</option>`).join('')}</select></label></div> `;container.appendChild(card);}window.removeInput = function(id){const card = document.getElementById(`input-${id}`);if(card){card.remove();}};document.getElementById('addInputBtn').addEventListener('click',addInput);async function loadServerSettings(){try{const res=await fetch('/api/clients');if(!res.ok)throw new Error('Failed to fetch server data');const data=await res.json();if(data&&data.srv&&data.srv.pu){document.getElementById('productUid').value=data.srv.pu;}}catch(err){console.error('Failed to load server settings:',err);}}loadServerSettings();function sensorKeyFromValue(value){switch(value){case 0:return 'digital';case 2:return 'current';case 3:return 'rpm';default:return 'analog';}}document.getElementById('downloadBtn').addEventListener('click',()=>{const levelChange = parseFloat(document.getElementById('levelChangeThreshold').value);const sampleMinutes = Math.max(1,Math.min(1440,parseInt(document.getElementById('sampleMinutes').value,10)|| 30));const reportTimeValue = document.getElementById('reportTime').value || '05:00';const timeParts = reportTimeValue.split(':');const reportHour = timeParts.length === 2 ?(isNaN(parseInt(timeParts[0],10))? 5:parseInt(timeParts[0],10)):5;const reportMinute = timeParts.length === 2 ?(isNaN(parseInt(timeParts[1],10))? 0:parseInt(timeParts[1],10)):0;const config ={productUid:document.getElementById('productUid').value.trim(),site:document.getElementById('siteName').value.trim(),deviceLabel:document.getElementById('deviceLabel').value.trim()|| 'Client-112025',serverFleet:document.getElementById('serverFleet').value.trim()|| 'tankalarm-server',sampleSeconds:sampleMinutes * 60,levelChangeThreshold:Math.max(0,isNaN(levelChange)? 0:levelChange),reportHour:reportHour,reportMinute:reportMinute,dailyEmail:document.getElementById('dailyEmail').value.trim(),solarPowered:document.getElementById('solarPowered').checked,tanks:[]};const sensorCards = document.querySelectorAll('.sensor-card');if(!sensorCards.length){alert('Add at least one sensor before downloading a configuration.');return;}sensorCards.forEach((card,index)=>{const monitorType = card.querySelector('.monitor-type').value;const type = parseInt(card.querySelector('.sensor-type').value);const pin = parseInt(card.querySelector('.sensor-pin').value);let tankNum = parseInt(card.querySelector('.tank-num').value)||(index + 1);let name = card.querySelector('.tank-name').value;const contents = card.querySelector('.tank-contents')?.value || '';if(monitorType === 'gas'){if(!name)name = `Gas System ${index + 1}`;}else if(monitorType === 'rpm'){if(!name)name = `Engine ${tankNum}`;}else{if(!name)name = `Tank ${index + 1}`;}const sensor = sensorKeyFromValue(type);const pulsesPerRev = Math.max(1,Math.min(255,parseInt(card.querySelector('.pulses-per-rev').value)|| 1));const switchMode = card.querySelector('.switch-mode').value;const alarmSectionVisible = card.querySelector('.alarm-section').classList.contains('visible');const highAlarmEnabled = card.querySelector('.high-alarm-enabled').checked;const lowAlarmEnabled = card.querySelector('.low-alarm-enabled').checked;const highAlarmValue = card.querySelector('.high-alarm').value;const lowAlarmValue = card.querySelector('.low-alarm').value;const tank ={id:String.fromCharCode(65 + index),name:name,contents:contents,number:tankNum,sensor:sensor,primaryPin:sensor === 'current' ? 0:pin,secondaryPin:-1,loopChannel:sensor === 'current' ? pin:-1,rpmPin:sensor === 'rpm' ? pin:-1,maxValue:sensor === 'digital' ? 1:(parseFloat(card.querySelector('.tank-height').value)|| 120),hysteresis:sensor === 'digital' ? 0:2.0,daily:true,upload:true};if(sensor === 'digital'){tank.digitalSwitchMode = switchMode;}if(sensor === 'current'){const currentLoopType = card.querySelector('.current-loop-type').value;const sensorMountHeight = parseFloat(card.querySelector('.sensor-mount-height').value)|| 0;const sensorRangeMin = parseFloat(card.querySelector('.sensor-range-min').value)|| 0;const sensorRangeMax = parseFloat(card.querySelector('.sensor-range-max').value)|| 5;const sensorRangeUnit = card.querySelector('.sensor-range-unit').value || 'PSI';tank.currentLoopType = currentLoopType;tank.sensorMountHeight = sensorMountHeight;tank.sensorRangeMin = sensorRangeMin;tank.sensorRangeMax = sensorRangeMax;tank.sensorRangeUnit = sensorRangeUnit;}if(alarmSectionVisible){if(sensor === 'digital'){const digitalTriggerState = card.querySelector('.digital-trigger-state').value;tank.digitalTrigger = digitalTriggerState;if(digitalTriggerState === 'activated'){tank.highAlarm = 1;}else{tank.lowAlarm = 0;}tank.alarmSms = true;}else if(highAlarmEnabled || lowAlarmEnabled){if(highAlarmEnabled && highAlarmValue !== ''){const highAlarmFloat = parseFloat(highAlarmValue);if(!isNaN(highAlarmFloat)){tank.highAlarm = highAlarmFloat;}}if(lowAlarmEnabled && lowAlarmValue !== ''){const lowAlarmFloat = parseFloat(lowAlarmValue);if(!isNaN(lowAlarmFloat)){tank.lowAlarm = lowAlarmFloat;}}tank.alarmSms = true;}else{tank.alarmSms = false;}}else{tank.alarmSms = false;}if(sensor === 'rpm'){tank.pulsesPerRev = pulsesPerRev;}const relaySectionVisible = card.querySelector('.relay-section').classList.contains('visible');if(relaySectionVisible){let relayMask = 0;['relay-1','relay-2','relay-3','relay-4'].forEach(cls =>{const checkbox = card.querySelector('.' + cls);if(checkbox.checked)relayMask |= parseInt(checkbox.value);});const relayTarget = card.querySelector('.relay-target').value.trim();const relayTrigger = card.querySelector('.relay-trigger').value;const relayMode = card.querySelector('.relay-mode').value;if(relayTarget){tank.relayTargetClient = relayTarget;tank.relayMask = relayMask;tank.relayTrigger = relayTrigger;tank.relayMode = relayMode;if(relayMode === 'momentary'){const durations = [ parseInt(card.querySelector('.relay-duration-1').value)|| 0,parseInt(card.querySelector('.relay-duration-2').value)|| 0,parseInt(card.querySelector('.relay-duration-3').value)|| 0,parseInt(card.querySelector('.relay-duration-4').value)|| 0 ];tank.relayMomentaryDurations = durations;}if(relayMask === 0){alert("You have set a relay target but have not selected any relay outputs for " + name + ". The configuration will be incomplete.");}if((relayTrigger === 'high' &&(!highAlarmEnabled || highAlarmValue === ''))||(relayTrigger === 'low' &&(!lowAlarmEnabled || lowAlarmValue === ''))){alert(`Warning:Relay for ${name}is set to trigger on "${relayTrigger}" alarm,but that alarm type is not fully configured(either not enabled or value is missing).`);}}}const smsSectionVisible = card.querySelector('.sms-section').classList.contains('visible');if(smsSectionVisible){const smsPhones = card.querySelector('.sms-phones').value.trim();const smsTrigger = card.querySelector('.sms-trigger').value;const smsMessage = card.querySelector('.sms-message').value.trim();if(smsPhones){const phoneArray = smsPhones.split(',').map(p => p.trim()).filter(p => p.length > 0);if(phoneArray.length > 0){tank.smsAlert ={phones:phoneArray,trigger:smsTrigger,message:smsMessage || 'Tank alarm triggered'};if((smsTrigger === 'high' &&(!highAlarmEnabled || highAlarmValue === ''))||(smsTrigger === 'low' &&(!lowAlarmEnabled || lowAlarmValue === ''))){alert(`Warning:SMS Alert for ${name}is set to trigger on "${smsTrigger}" alarm,but that alarm type is not fully configured(either not enabled or value is missing).`);}}}}config.tanks.push(tank);});const inputCards = document.querySelectorAll('#inputsContainer .sensor-card');let clearButtonConfigured = false;inputCards.forEach((card)=>{const inputName = card.querySelector('.input-name').value.trim()|| 'Input';const inputPin = parseInt(card.querySelector('.input-pin').value,10);const inputMode = card.querySelector('.input-mode').value;const inputAction = card.querySelector('.input-action').value;if(inputAction === 'clear_relays' && !clearButtonConfigured){config.clearButtonPin = isNaN(inputPin)? -1:inputPin;config.clearButtonActiveHigh =(inputMode === 'active_high');clearButtonConfigured = true;}});if(!clearButtonConfigured){config.clearButtonPin = -1;config.clearButtonActiveHigh = false;}const blob = new Blob([JSON.stringify(config,null,2)],{type:'application/json'});const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'client_config.json';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);});addSensor();</script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Config Generator</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12)}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18)}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:1000px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow)}h2{margin-top:0;font-size:1.3rem}h3{margin:20px 0 10px;font-size:1.1rem;border-bottom:1px solid var(--card-border);padding-bottom:6px;color:var(--text)}.field{display:flex;flex-direction:column;margin-bottom:12px}.field span{font-size:0.9rem;color:var(--muted);margin-bottom:4px}.field input,.field select{padding:10px 12px;border:1px solid var(--input-border);font-size:0.95rem;background:var(--bg);color:var(--text)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.sensor-card{background:var(--chip);border:1px solid var(--card-border);padding:16px;margin-bottom:16px;position:relative}.sensor-header{display:flex;justify-content:space-between;margin-bottom:12px}.sensor-title{font-weight:600;color:var(--text)}.remove-btn{color:var(--danger);cursor:pointer;font-size:0.9rem;border:none;background:none;padding:0;font-weight:600}.remove-btn:hover{opacity:0.8}.actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}.collapsible-section{display:none}.collapsible-section.visible{display:block}.add-section-btn{background:transparent;border:1px dashed var(--input-border);color:var(--accent);padding:8px 14px;font-size:0.85rem;cursor:pointer;margin-top:8px}.add-section-btn:hover{background:var(--pill-bg)}.add-section-btn.hidden{display:none}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--muted);color:var(--surface);font-size:0.7rem;font-weight:700;cursor:help;margin-left:4px;position:relative}.tooltip-icon:hover::after,.tooltip-icon:focus::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:6px 10px;font-size:0.75rem;font-weight:400;max-width:280px;white-space:normal;z-index:100;margin-bottom:4px;box-shadow:0 4px 12px var(--card-shadow)}button{border:none;padding:10px 16px;font-size:0.95rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);transition:transform 0.15s ease}button.secondary{background:transparent;border:1px solid var(--card-border);color:var(--text)}button:hover{transform:translateY(-1px)}button:disabled{opacity:0.5;cursor:not-allowed;transform:none}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Config Generator</h1><p> Create new client configurations with sensor definitions and upload settings for Tank Alarm field units. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill secondary" href="/client-console">Client Console</a><a class="pill" href="/config-generator">Config Generator</a><a class="pill secondary" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><h2>New Client Configuration</h2><form id="generatorForm"><div class="form-grid"><label class="field"><span>Product UID <span class="tooltip-icon" tabindex="0" data-tooltip="Blues Notehub Product UID. Must match the server's Product UID for client-server communication. Auto-filled from server settings.">?</span></span><input id="productUid" type="text" placeholder="com.company.product:project" readonly style="background:var(--chip);"></label><label class="field"><span>Site Name</span><input id="siteName" type="text" placeholder="Site Name" required></label><label class="field"><span>Device Label</span><input id="deviceLabel" type="text" placeholder="Device Label" required></label><label class="field"><span>Server Fleet</span><input id="serverFleet" type="text" value="tankalarm-server"></label><label class="field"><span>Sample Minutes</span><input id="sampleMinutes" type="number" value="30" min="1" max="1440"></label><label class="field"><span>Level Change Threshold (in)<span class="tooltip-icon" tabindex="0" data-tooltip="Minimum level change in inches required before sending telemetry. Set to 0 to send all readings. Useful to reduce data usage by only reporting significant changes.">?</span></span><input id="levelChangeThreshold" type="number" step="0.1" value="0" placeholder="0 = disabled"></label><label class="field"><span>Report Time</span><input id="reportTime" type="time" value="05:00"></label></div><h3>Power Configuration</h3><div class="form-grid"><label class="field"><span>Power Type<span class="tooltip-icon" tabindex="0" data-tooltip="Select the power configuration for this client installation. Solar-powered options enable power-saving features with periodic mode and deep sleep routines.">?</span></span><select id="powerConfig" onchange="updatePowerConfigInfo()"><option value="grid">Grid Powered</option><option value="grid_battery">Grid Powered with 12V Battery Backup</option><option value="solar_pwm">Solar Powered with Basic PWM Charger</option><option value="solar_mppt">Solar Powered with Basic MPPT</option><option value="solar_modbus_mppt">Solar Powered with Modbus MPPT</option></select></label></div><div id="powerConfigInfo" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-bottom:16px;font-size:0.9rem;color:var(--muted);"><strong>Hardware Requirement:</strong> Modbus MPPT requires the Arduino Opta with RS485 expansion module for communication with the MPPT charge controller.</div><h3>Site-Specific Daily Email Recipients</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">These email recipients will receive daily reports only for this specific site. This is separate from the unified server-wide daily email list in Server Settings.</p><div id="dailyEmailContactsContainer" style="margin-bottom:16px;"></div><div class="actions" style="margin-bottom:24px;margin-top:0;"><button type="button" id="addDailyEmailBtn" class="secondary">+ Add Email Recipient</button></div><h3>Site-Specific SMS Alarm Contacts</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">These contacts will receive SMS alerts only for alarms from this specific site's sensors.</p><div id="smsContactsContainer" style="margin-bottom:16px;"></div><div class="actions" style="margin-bottom:24px;margin-top:0;"><button type="button" id="addSmsContactBtn" class="secondary">+ Add SMS Contact</button></div><h3>Sensors</h3><div id="sensorsContainer"></div><div class="actions" style="margin-bottom: 24px;"><button type="button" id="addSensorBtn" class="secondary">+ Add Sensor</button></div><h3>Inputs (Buttons &amp; Switches)</h3><p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 12px;">Configure physical inputs for actions like clearing relay alarms. More input actions will be available in future updates.</p><div id="inputsContainer"></div><div class="actions" style="margin-bottom: 24px;"><button type="button" id="addInputBtn" class="secondary">+ Add Input</button></div><div class="actions"><button type="button" id="downloadBtn">Download Config</button></div></form></div></main><script>const sensorTypes = [{value:0,label:'Digital Input(Float Switch)'},{value:1,label:'Analog Input(0-10V)'},{value:2,label:'Current Loop(4-20mA)'},{value:3,label:'Hall Effect RPM'}];const currentLoopTypes = [{value:'pressure',label:'Pressure Sensor(Bottom-Mounted)',tooltip:'Pressure sensor mounted near tank bottom(e.g.,Dwyer 626-06-CB-P1-E5-S1). 4mA = empty,20mA = full.'},{value:'ultrasonic',label:'Ultrasonic Sensor(Top-Mounted)',tooltip:'Ultrasonic level sensor mounted on tank top(e.g.,Siemens Sitrans LU240). 4mA = full,20mA = empty.'}];const monitorTypes = [{value:'tank',label:'Tank Level'},{value:'gas',label:'Gas Pressure'},{value:'rpm',label:'RPM Sensor'}];const optaPins = [{value:0,label:'Opta I1'},{value:1,label:'Opta I2'},{value:2,label:'Opta I3'},{value:3,label:'Opta I4'},{value:4,label:'Opta I5'},{value:5,label:'Opta I6'},{value:6,label:'Opta I7'},{value:7,label:'Opta I8'}];const expansionChannels = [{value:0,label:'A0602 Ch1'},{value:1,label:'A0602 Ch2'},{value:2,label:'A0602 Ch3'},{value:3,label:'A0602 Ch4'},{value:4,label:'A0602 Ch5'},{value:5,label:'A0602 Ch6'}];let sensorCount = 0;let dailyEmailIdCounter = 0;let smsContactIdCounter = 0;function createSensorHtml(id){return ` <div class="sensor-card" id="sensor-${id}"><div class="sensor-header"><span class="sensor-title">Sensor #${id + 1}</span><button type="button" class="remove-btn" onclick="removeSensor(${id})">Remove</button></div><div class="form-grid"><label class="field"><span>Monitor Type</span><select class="monitor-type" onchange="updateMonitorFields(${id})"> ${monitorTypes.map(t => `<option value="${t.value}">${t.label}</option>`).join('')}</select></label><label class="field tank-num-field"><span>Tank Number</span><input type="number" class="tank-num" value="${id + 1}"></label><label class="field"><span><span class="name-label">Name</span></span><input type="text" class="tank-name" placeholder="Name"></label><label class="field contents-field"><span>Contents</span><input type="text" class="tank-contents" placeholder="e.g. Diesel, Water"></label><label class="field"><span>Sensor Type</span><select class="sensor-type" onchange="updatePinOptions(${id})"> ${sensorTypes.map(t => `<option value="${t.value}">${t.label}</option>`).join('')}</select></label><label class="field"><span>Pin / Channel</span><select class="sensor-pin"> ${optaPins.map(p => `<option value="${p.value}">${p.label}</option>`).join('')}</select></label><label class="field switch-mode-field" style="display:none;"><span>Switch Mode<span class="tooltip-icon" tabindex="0" data-tooltip="NO(Normally-Open):Switch is open by default,closes when fluid is present. NC(Normally-Closed):Switch is closed by default,opens when fluid is present. The wiring is the same - only the software interpretation changes.">?</span></span><select class="switch-mode"><option value="NO">Normally-Open(NO)</option><option value="NC">Normally-Closed(NC)</option></select></label><label class="field pulses-per-rev-field" style="display:none;"><span>Pulses/Rev</span><input type="number" class="pulses-per-rev" value="1" min="1" max="255"></label><label class="field current-loop-type-field" style="display:none;"><span>4-20mA Sensor Type<span class="tooltip-icon" tabindex="0" data-tooltip="Select the type of 4-20mA sensor:Pressure sensors are mounted near the tank bottom and measure liquid pressure. Ultrasonic sensors are mounted on top of the tank and measure distance to the liquid surface.">?</span></span><select class="current-loop-type" onchange="updateCurrentLoopFields(${id})"><option value="pressure">Pressure Sensor(Bottom-Mounted)</option><option value="ultrasonic">Ultrasonic Sensor(Top-Mounted)</option></select></label><label class="field sensor-range-field" style="display:none;"><span><span class="sensor-range-label">Sensor Range</span><span class="tooltip-icon sensor-range-tooltip" tabindex="0" data-tooltip="Native measurement range of the sensor(e.g.,0-5 PSI for pressure,0-10m for ultrasonic). This is the range that corresponds to 4-20mA output.">?</span></span><div style="display:flex;gap:8px;align-items:center;"><input type="number" class="sensor-range-min" value="0" step="0.1" style="width:70px;" placeholder="Min"><span>to</span><input type="number" class="sensor-range-max" value="5" step="0.1" style="width:70px;" placeholder="Max"><select class="sensor-range-unit" style="width:70px;"><option value="PSI">PSI</option><option value="bar">bar</option><option value="m">m</option><option value="ft">ft</option><option value="in">in</option><option value="cm">cm</option></select></div></label><label class="field sensor-mount-height-field" style="display:none;"><span><span class="mount-height-label">Sensor Mount Height(in)</span><span class="tooltip-icon mount-height-tooltip" tabindex="0" data-tooltip="For pressure sensors:height of sensor above tank bottom(usually 0-2 inches). For ultrasonic sensors:distance from sensor to tank bottom when empty.">?</span></span><input type="number" class="sensor-mount-height" value="0" step="0.1" min="0"></label><label class="field height-field"><span><span class="height-label">Height(in)</span><span class="tooltip-icon height-tooltip" tabindex="0" data-tooltip="Maximum height or capacity of the tank in inches. Used to set alarm thresholds relative to tank size.">?</span></span><input type="number" class="tank-height" value="120"></label></div><div class="digital-sensor-info" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-top:8px;font-size:0.9rem;color:var(--muted);"><strong>Float Switch Mode:</strong> This sensor only detects whether fluid has reached the switch position. It does not measure actual fluid level. The alarm will trigger when the switch is activated(fluid present)or not activated(fluid absent).<br><br><strong>Wiring Note:</strong> For both NO and NC switches,connect the switch between the input pin and GND. The software uses an internal pull-up resistor and interprets the signal based on your selected switch mode. </div><div class="current-loop-sensor-info" style="display:none;background:var(--chip);border:1px solid var(--card-border);padding:12px;margin-top:8px;font-size:0.9rem;color:var(--muted);"><div class="pressure-sensor-info"><strong>Pressure Sensor(Bottom-Mounted):</strong> Installed near the bottom of the tank,this sensor measures the pressure of the liquid column above it. Examples:Dwyer 626-06-CB-P1-E5-S1(0-5 PSI).<br> • 4mA = Empty tank(0 pressure)<br> • 20mA = Full tank(max pressure)<br> • Sensor Range:The native pressure range(e.g.,0-5 PSI,0-2 bar)<br> • Mount Height:Distance from sensor to tank bottom(usually 0-2 inches)</div><div class="ultrasonic-sensor-info" style="display:none;"><strong>Ultrasonic Sensor(Top-Mounted):</strong> Mounted on top of the tank,this sensor measures the distance from the sensor to the liquid surface. Examples:Siemens Sitrans LU240.<br> • 4mA = Full tank(liquid close to sensor)<br> • 20mA = Empty tank(liquid far from sensor)<br> • Sensor Range:The native distance range(e.g.,0-10m,0-30ft)<br> • Sensor Mount Height:Distance from sensor to tank bottom when empty </div></div><button type="button" class="add-section-btn add-alarm-btn" onclick="toggleAlarmSection(${id})">+ Add Alarm</button><div class="collapsible-section alarm-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;"><span class="alarm-section-title">Alarm Thresholds</span><button type="button" class="remove-btn" onclick="removeAlarmSection(${id})" style="float:right;">Remove Alarm</button></h4><div class="form-grid alarm-thresholds-grid"><div class="field"><span><label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" class="high-alarm-enabled" checked> High Alarm </label></span><input type="number" class="high-alarm" value="100"></div><div class="field"><span><label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" class="low-alarm-enabled" checked> Low Alarm </label></span><input type="number" class="low-alarm" value="20"></div></div><div class="form-grid digital-alarm-grid" style="display:none;"><div class="field" style="grid-column:1 / -1;"><span>Trigger Condition<span class="tooltip-icon" tabindex="0" data-tooltip="Select when the alarm should trigger based on the float switch state.">?</span></span><select class="digital-trigger-state"><option value="activated">When Switch is Activated(fluid detected)</option><option value="not_activated">When Switch is NOT Activated(no fluid)</option></select></div></div></div><button type="button" class="add-section-btn add-relay-btn hidden" onclick="toggleRelaySection(${id})">+ Add Relay Control</button><div class="collapsible-section relay-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;">Relay Switch Control(Triggered by This Sensor's Alarm)<button type="button" class="remove-btn" onclick="removeRelaySection(${id})" style="float:right;">Remove Relay</button></h4><div class="form-grid"><label class="field"><span>Target Client UID</span><input type="text" class="relay-target" placeholder="dev:IMEI(optional)"></label><label class="field"><span>Trigger On</span><select class="relay-trigger"><option value="any">Any Alarm(High or Low)</option><option value="high">High Alarm Only</option><option value="low">Low Alarm Only</option></select></label><label class="field"><span>Relay Mode</span><select class="relay-mode"><option value="momentary">Momentary(configurable duration)</option><option value="until_clear">Stay On Until Alarm Clears</option><option value="manual_reset">Stay On Until Manual Server Reset</option></select></label><div class="field" style="grid-column:1 / -1;"><span>Relay Outputs</span><div class="relay-outputs-container" style="display:flex;flex-direction:column;gap:8px;margin-bottom:8px;"></div><button type="button" class="secondary" onclick="addRelayOutput(${id})" style="padding:6px 12px;font-size:0.85rem;">+ Add Relay</button></div></div></div><button type="button" class="add-section-btn add-sms-btn hidden" onclick="toggleSmsSection(${id})">+ Add SMS Alert</button><div class="collapsible-section sms-section"><h4 style="margin:16px 0 8px;font-size:0.95rem;border-top:1px solid var(--card-border);padding-top:12px;">SMS Alert Notifications <button type="button" class="remove-btn" onclick="removeSmsSection(${id})" style="float:right;">Remove SMS Alert</button></h4><div class="form-grid"><label class="field" style="grid-column:1 / -1;"><span>Phone Numbers<span class="tooltip-icon" tabindex="0" data-tooltip="Enter phone numbers with country code(e.g.,+15551234567). Separate multiple numbers with commas.">?</span></span><input type="text" class="sms-phones" placeholder="+15551234567,+15559876543"></label><label class="field"><span>Trigger On</span><select class="sms-trigger"><option value="any">Any Alarm(High or Low)</option><option value="high">High Alarm Only</option><option value="low">Low Alarm Only</option></select></label><label class="field" style="grid-column:span 2;"><span>Custom Message(optional)</span><input type="text" class="sms-message" placeholder="Tank alarm triggered"></label></div></div></div> `;}function addSensor(){const container = document.getElementById('sensorsContainer');const div = document.createElement('div');div.innerHTML = createSensorHtml(sensorCount);container.appendChild(div.firstElementChild);updateSensorTypeFields(sensorCount);sensorCount++;}window.removeSensor = function(id){const el = document.getElementById(`sensor-${id}`);if(el)el.remove();};window.toggleAlarmSection = function(id){const card = document.getElementById(`sensor-${id}`);const alarmSection = card.querySelector('.alarm-section');const addAlarmBtn = card.querySelector('.add-alarm-btn');const addRelayBtn = card.querySelector('.add-relay-btn');const addSmsBtn = card.querySelector('.add-sms-btn');alarmSection.classList.add('visible');addAlarmBtn.classList.add('hidden');addRelayBtn.classList.remove('hidden');addSmsBtn.classList.remove('hidden');};window.removeAlarmSection = function(id){const card = document.getElementById(`sensor-${id}`);const alarmSection = card.querySelector('.alarm-section');const addAlarmBtn = card.querySelector('.add-alarm-btn');const addRelayBtn = card.querySelector('.add-relay-btn');const addSmsBtn = card.querySelector('.add-sms-btn');const relaySection = card.querySelector('.relay-section');const smsSection = card.querySelector('.sms-section');alarmSection.classList.remove('visible');addAlarmBtn.classList.remove('hidden');addRelayBtn.classList.add('hidden');addSmsBtn.classList.add('hidden');relaySection.classList.remove('visible');smsSection.classList.remove('visible');card.querySelector('.high-alarm').value = '100';card.querySelector('.low-alarm').value = '20';card.querySelector('.high-alarm-enabled').checked = true;card.querySelector('.low-alarm-enabled').checked = true;card.querySelector('.relay-target').value = '';card.querySelector('.relay-trigger').value = 'any';card.querySelector('.relay-mode').value = 'momentary';card.querySelector('.sms-phones').value = '';card.querySelector('.sms-trigger').value = 'any';card.querySelector('.sms-message').value = '';};window.toggleRelaySection = function(id){const card = document.getElementById(`sensor-${id}`);const relaySection = card.querySelector('.relay-section');const addBtn = card.querySelector('.add-relay-btn');if(!relayCounters[id]){relayCounters[id] = 0;}relaySection.classList.add('visible');addBtn.classList.add('hidden');};window.removeRelaySection = function(id){const card = document.getElementById(`sensor-${id}`);const relaySection = card.querySelector('.relay-section');const addBtn = card.querySelector('.add-relay-btn');relaySection.classList.remove('visible');addBtn.classList.remove('hidden');card.querySelector('.relay-target').value = '';card.querySelector('.relay-trigger').value = 'any';card.querySelector('.relay-mode').value = 'momentary';const relayOutputsContainer = card.querySelector('.relay-outputs-container');relayOutputsContainer.innerHTML = '';delete relayCounters[id];};window.toggleSmsSection = function(id){const card = document.getElementById(`sensor-${id}`);const smsSection = card.querySelector('.sms-section');const addBtn = card.querySelector('.add-sms-btn');smsSection.classList.add('visible');addBtn.classList.add('hidden');};window.removeSmsSection = function(id){const card = document.getElementById(`sensor-${id}`);const smsSection = card.querySelector('.sms-section');const addBtn = card.querySelector('.add-sms-btn');smsSection.classList.remove('visible');addBtn.classList.remove('hidden');card.querySelector('.sms-phones').value = '';card.querySelector('.sms-trigger').value = 'any';card.querySelector('.sms-message').value = '';};window.updateMonitorFields = function(id){const card = document.getElementById(`sensor-${id}`);const type = card.querySelector('.monitor-type').value;const numField = card.querySelector('.tank-num-field');const numFieldLabel = numField.querySelector('span');const nameLabel = card.querySelector('.name-label');const heightLabel = card.querySelector('.height-label');const sensorTypeSelect = card.querySelector('.sensor-type');const pulsesPerRevField = card.querySelector('.pulses-per-rev-field');const contentsField = card.querySelector('.contents-field');if(type === 'gas'){numField.style.display = 'none';nameLabel.textContent = 'System Name';heightLabel.textContent = 'Max Pressure';pulsesPerRevField.style.display = 'none';contentsField.style.display = 'flex';}else if(type === 'rpm'){numField.style.display = 'flex';numFieldLabel.textContent = 'Engine Number';nameLabel.textContent = 'Engine Name';heightLabel.textContent = 'Max RPM';pulsesPerRevField.style.display = 'flex';contentsField.style.display = 'none';sensorTypeSelect.value = '3';updatePinOptions(id);}else{numField.style.display = 'flex';numFieldLabel.textContent = 'Tank Number';nameLabel.textContent = 'Name';heightLabel.textContent = 'Height(in)';pulsesPerRevField.style.display = 'none';contentsField.style.display = 'flex';}};window.updatePinOptions = function(id){const card = document.getElementById(`sensor-${id}`);const typeSelect = card.querySelector('.sensor-type');const pinSelect = card.querySelector('.sensor-pin');const type = parseInt(typeSelect.value);pinSelect.innerHTML = '';let options = [];if(type === 2){options = expansionChannels;}else{options = optaPins;}options.forEach(opt =>{const option = document.createElement('option');option.value = opt.value;option.textContent = opt.label;pinSelect.appendChild(option);});updateSensorTypeFields(id);};window.updateSensorTypeFields = function(id){const card = document.getElementById(`sensor-${id}`);const type = parseInt(card.querySelector('.sensor-type').value);const heightField = card.querySelector('.height-field');const heightLabel = card.querySelector('.height-label');const heightTooltip = card.querySelector('.height-tooltip');const digitalInfoBox = card.querySelector('.digital-sensor-info');const currentLoopInfoBox = card.querySelector('.current-loop-sensor-info');const alarmThresholdsGrid = card.querySelector('.alarm-thresholds-grid');const digitalAlarmGrid = card.querySelector('.digital-alarm-grid');const alarmSectionTitle = card.querySelector('.alarm-section-title');const pulsesPerRevField = card.querySelector('.pulses-per-rev-field');const switchModeField = card.querySelector('.switch-mode-field');const currentLoopTypeField = card.querySelector('.current-loop-type-field');const sensorMountHeightField = card.querySelector('.sensor-mount-height-field');const sensorRangeField = card.querySelector('.sensor-range-field');if(type === 0){heightField.style.display = 'none';digitalInfoBox.style.display = 'block';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'flex';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'none';digitalAlarmGrid.style.display = 'grid';alarmSectionTitle.textContent = 'Float Switch Alarm';pulsesPerRevField.style.display = 'none';}else if(type === 2){heightField.style.display = 'flex';heightLabel.textContent = 'Tank Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum height of liquid in the tank in inches. Meaning varies based on sensor subtype.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'block';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'flex';sensorRangeField.style.display = 'flex';sensorMountHeightField.style.display = 'flex';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'none';updateCurrentLoopFields(id);}else if(type === 3){heightField.style.display = 'flex';heightLabel.textContent = 'Max RPM';heightTooltip.setAttribute('data-tooltip','Maximum expected RPM value. Used for alarm threshold reference.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'flex';}else{heightField.style.display = 'flex';heightLabel.textContent = 'Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum height or capacity of the tank in inches. Used to set alarm thresholds relative to tank size.');digitalInfoBox.style.display = 'none';currentLoopInfoBox.style.display = 'none';switchModeField.style.display = 'none';currentLoopTypeField.style.display = 'none';sensorMountHeightField.style.display = 'none';sensorRangeField.style.display = 'none';alarmThresholdsGrid.style.display = 'grid';digitalAlarmGrid.style.display = 'none';alarmSectionTitle.textContent = 'Alarm Thresholds';pulsesPerRevField.style.display = 'none';}};window.updateCurrentLoopFields = function(id){const card = document.getElementById(`sensor-${id}`);const currentLoopType = card.querySelector('.current-loop-type').value;const currentLoopInfoBox = card.querySelector('.current-loop-sensor-info');const pressureInfo = currentLoopInfoBox.querySelector('.pressure-sensor-info');const ultrasonicInfo = currentLoopInfoBox.querySelector('.ultrasonic-sensor-info');const mountHeightLabel = card.querySelector('.mount-height-label');const mountHeightTooltip = card.querySelector('.mount-height-tooltip');const heightLabel = card.querySelector('.height-label');const heightTooltip = card.querySelector('.height-tooltip');const sensorRangeLabel = card.querySelector('.sensor-range-label');const sensorRangeTooltip = card.querySelector('.sensor-range-tooltip');const sensorRangeUnit = card.querySelector('.sensor-range-unit');const sensorRangeMax = card.querySelector('.sensor-range-max');if(currentLoopType === 'ultrasonic'){pressureInfo.style.display = 'none';ultrasonicInfo.style.display = 'block';mountHeightLabel.textContent = 'Sensor Mount Height(in)';mountHeightTooltip.setAttribute('data-tooltip','Distance from the ultrasonic sensor to the tank bottom when empty. This is used to calculate the actual liquid level.');heightLabel.textContent = 'Tank Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum liquid height in the tank. When the tank is full,the liquid level equals this value.');sensorRangeLabel.textContent = 'Sensor Range';sensorRangeTooltip.setAttribute('data-tooltip','Native distance range of the ultrasonic sensor(e.g.,0-10m). This is the measurement range that corresponds to the 4-20mA output.');sensorRangeUnit.value = 'm';sensorRangeMax.value = '10';}else{pressureInfo.style.display = 'block';ultrasonicInfo.style.display = 'none';mountHeightLabel.textContent = 'Sensor Mount Height(in)';mountHeightTooltip.setAttribute('data-tooltip','Height of the pressure sensor above the tank bottom(usually 0-2 inches). This offset is added to the measured level.');heightLabel.textContent = 'Max Measured Height(in)';heightTooltip.setAttribute('data-tooltip','Maximum liquid height the sensor can measure(corresponds to 20mA / full sensor scale). Does not include the sensor mount height offset.');sensorRangeLabel.textContent = 'Sensor Range';sensorRangeTooltip.setAttribute('data-tooltip','Native pressure range of the sensor(e.g.,0-5 PSI,0-2 bar). This is the measurement range that corresponds to the 4-20mA output.');sensorRangeUnit.value = 'PSI';sensorRangeMax.value = '5';}};document.getElementById('addSensorBtn').addEventListener('click',addSensor);const inputActions = [{value:'clear_relays',label:'Clear All Relay Alarms',tooltip:'When pressed,turns off all active relay outputs and resets alarm states.'},{value:'none',label:'Disabled(No Action)',tooltip:'Input is configured but does not trigger any action.'}];const inputModes = [{value:'active_low',label:'Active LOW(Button to GND,internal pullup)'},{value:'active_high',label:'Active HIGH(Button to VCC,external pull-down)'}];let inputIdCounter = 0;function addInput(){const id = inputIdCounter++;const container = document.getElementById('inputsContainer');const card = document.createElement('div');card.className = 'sensor-card';card.id = `input-${id}`;card.innerHTML = ` <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><h4 style="margin:0;font-size:1rem;">Input ${id + 1}</h4><button type="button" class="remove-btn" onclick="removeInput(${id})">Remove</button></div><div class="form-grid"><label class="field"><span>Input Name</span><input type="text" class="input-name" placeholder="Clear Button" value="Clear Button"></label><label class="field"><span>Pin Number<span class="tooltip-icon" tabindex="0" data-tooltip="Arduino Opta pin number for the input. A0=0,A1=1,etc. Use a digital-capable pin.">?</span></span><input type="number" class="input-pin" value="0" min="0" max="99"></label><label class="field"><span>Input Mode<span class="tooltip-icon" tabindex="0" data-tooltip="Active LOW:Button connects pin to GND,uses internal pull-up resistor. Active HIGH:Button connects pin to VCC,requires external pull-down resistor.">?</span></span><select class="input-mode"> ${inputModes.map(m => `<option value="${m.value}">${m.label}</option>`).join('')}</select></label><label class="field"><span>Action<span class="tooltip-icon" tabindex="0" data-tooltip="What happens when this input is activated(button pressed for 500ms).">?</span></span><select class="input-action"> ${inputActions.map(a => `<option value="${a.value}">${a.label}</option>`).join('')}</select></label></div> `;container.appendChild(card);}window.removeInput = function(id){const card = document.getElementById(`input-${id}`);if(card){card.remove();}};document.getElementById('addInputBtn').addEventListener('click',addInput);function updatePowerConfigInfo(){const powerConfig = document.getElementById('powerConfig').value;const infoBox = document.getElementById('powerConfigInfo');if(powerConfig === 'solar_modbus_mppt'){infoBox.style.display = 'block';}else{infoBox.style.display = 'none';}}document.getElementById('powerConfig').addEventListener('change',updatePowerConfigInfo);function addDailyEmailContact(){const id = dailyEmailIdCounter++;const container = document.getElementById('dailyEmailContactsContainer');const card = document.createElement('div');card.className = 'sensor-card';card.id = `daily-email-${id}`;card.style.padding = '12px';card.style.marginBottom = '8px';card.innerHTML = ` <div style="display:flex;gap:8px;align-items:center;"><input type="email" class="daily-email-input" placeholder="user@example.com" style="flex:1;padding:8px 10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);font-size:0.9rem;"><button type="button" class="remove-btn" onclick="removeDailyEmail(${id})" style="padding:6px 10px;font-size:0.85rem;">Remove</button></div> `;container.appendChild(card);}window.removeDailyEmail = function(id){const card = document.getElementById(`daily-email-${id}`);if(card){card.remove();}};document.getElementById('addDailyEmailBtn').addEventListener('click',addDailyEmailContact);function addSmsContact(){const id = smsContactIdCounter++;const container = document.getElementById('smsContactsContainer');const card = document.createElement('div');card.className = 'sensor-card';card.id = `sms-contact-${id}`;card.style.padding = '12px';card.style.marginBottom = '8px';card.innerHTML = ` <div style="display:flex;gap:8px;align-items:center;"><input type="text" class="sms-contact-input" placeholder="+15551234567" style="flex:1;padding:8px 10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);font-size:0.9rem;"><button type="button" class="remove-btn" onclick="removeSmsContact(${id})" style="padding:6px 10px;font-size:0.85rem;">Remove</button></div> `;container.appendChild(card);}window.removeSmsContact = function(id){const card = document.getElementById(`sms-contact-${id}`);if(card){card.remove();}};document.getElementById('addSmsContactBtn').addEventListener('click',addSmsContact);let relayCounters = {};window.addRelayOutput = function(sensorId){if(!relayCounters[sensorId]){relayCounters[sensorId] = 0;}const relayId = relayCounters[sensorId]++;const card = document.getElementById(`sensor-${sensorId}`);const container = card.querySelector('.relay-outputs-container');const relayOptions = [{value:1,label:'R1'},{value:2,label:'R2'},{value:4,label:'R3'},{value:8,label:'R4'}];const usedValues = Array.from(container.querySelectorAll('.relay-output-select')).map(sel => parseInt(sel.value));const availableOptions = relayOptions.filter(opt =>!usedValues.includes(opt.value));if(availableOptions.length === 0){alert('All 4 relay outputs have been added.');return;}const item = document.createElement('div');item.className = 'relay-output-item';item.id = `relay-output-${sensorId}-${relayId}`;item.style.cssText = 'display:flex;gap:8px;align-items:center;padding:6px;background:var(--bg);border:1px solid var(--input-border);';item.innerHTML = ` <select class="relay-output-select" style="flex:0 0 auto;width:80px;padding:6px;background:var(--bg);color:var(--text);border:1px solid var(--input-border);font-size:0.85rem;"> ${availableOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}</select><label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;flex:1;"><span>Duration(sec,0=default 30min):</span><input type="number" class="relay-duration-input" value="0" min="0" max="86400" style="width:80px;padding:4px;background:var(--bg);color:var(--text);border:1px solid var(--input-border);font-size:0.85rem;"></label><button type="button" class="remove-btn" onclick="removeRelayOutput(${sensorId},${relayId})" style="padding:4px 8px;font-size:0.8rem;white-space:nowrap;">Remove</button> `;container.appendChild(item);};window.removeRelayOutput = function(sensorId,relayId){const item = document.getElementById(`relay-output-${sensorId}-${relayId}`);if(item){item.remove();}};async function loadServerSettings(){try{const res=await fetch('/api/clients');if(!res.ok)throw new Error('Failed to fetch server data');const data=await res.json();if(data&&data.srv&&data.srv.pu){document.getElementById('productUid').value=data.srv.pu;}}catch(err){console.error('Failed to load server settings:',err);}}loadServerSettings();function sensorKeyFromValue(value){switch(value){case 0:return 'digital';case 2:return 'current';case 3:return 'rpm';default:return 'analog';}}document.getElementById('downloadBtn').addEventListener('click',()=>{const levelChange = parseFloat(document.getElementById('levelChangeThreshold').value);const sampleMinutes = Math.max(1,Math.min(1440,parseInt(document.getElementById('sampleMinutes').value,10)|| 30));const reportTimeValue = document.getElementById('reportTime').value || '05:00';const timeParts = reportTimeValue.split(':');const reportHour = timeParts.length === 2 ?(isNaN(parseInt(timeParts[0],10))? 5:parseInt(timeParts[0],10)):5;const reportMinute = timeParts.length === 2 ?(isNaN(parseInt(timeParts[1],10))? 0:parseInt(timeParts[1],10)):0;const powerConfigValue = document.getElementById('powerConfig').value;const dailyEmailInputs = document.querySelectorAll('.daily-email-input');const dailyEmails = Array.from(dailyEmailInputs).map(input => input.value.trim()).filter(email => email.length > 0);const smsContactInputs = document.querySelectorAll('.sms-contact-input');const smsContacts = Array.from(smsContactInputs).map(input => input.value.trim()).filter(phone => phone.length > 0);const requiresRS485 = powerConfigValue === 'solar_modbus_mppt';const hasBattery = powerConfigValue === 'grid_battery' || powerConfigValue.startsWith('solar');const batteryType = powerConfigValue === 'grid_battery' ? '12v_backup' : (powerConfigValue.startsWith('solar') ? 'solar' : 'none');const config ={productUid:document.getElementById('productUid').value.trim(),site:document.getElementById('siteName').value.trim(),deviceLabel:document.getElementById('deviceLabel').value.trim()|| 'Client-112025',serverFleet:document.getElementById('serverFleet').value.trim()|| 'tankalarm-server',sampleSeconds:sampleMinutes * 60,levelChangeThreshold:Math.max(0,isNaN(levelChange)? 0:levelChange),reportHour:reportHour,reportMinute:reportMinute,solarPowered:powerConfigValue.startsWith('solar'),powerConfig:powerConfigValue,requiresRS485:requiresRS485,hasBattery:hasBattery,batteryType:batteryType,dailyEmails:dailyEmails,smsContacts:smsContacts,tanks:[]};const sensorCards = document.querySelectorAll('#sensorsContainer .sensor-card');if(!sensorCards.length){alert('Add at least one sensor before downloading a configuration.');return;}sensorCards.forEach((card,index)=>{const monitorType = card.querySelector('.monitor-type').value;const type = parseInt(card.querySelector('.sensor-type').value);const pin = parseInt(card.querySelector('.sensor-pin').value);let tankNum = parseInt(card.querySelector('.tank-num').value)||(index + 1);let name = card.querySelector('.tank-name').value;const contents = card.querySelector('.tank-contents')?.value || '';if(monitorType === 'gas'){if(!name)name = `Gas System ${index + 1}`;}else if(monitorType === 'rpm'){if(!name)name = `Engine ${tankNum}`;}else{if(!name)name = `Tank ${index + 1}`;}const sensor = sensorKeyFromValue(type);const pulsesPerRev = Math.max(1,Math.min(255,parseInt(card.querySelector('.pulses-per-rev').value)|| 1));const switchMode = card.querySelector('.switch-mode').value;const alarmSectionVisible = card.querySelector('.alarm-section').classList.contains('visible');const highAlarmEnabled = card.querySelector('.high-alarm-enabled').checked;const lowAlarmEnabled = card.querySelector('.low-alarm-enabled').checked;const highAlarmValue = card.querySelector('.high-alarm').value;const lowAlarmValue = card.querySelector('.low-alarm').value;const tank ={id:String.fromCharCode(65 + index),name:name,contents:contents,number:tankNum,sensor:sensor,primaryPin:sensor === 'current' ? 0:pin,secondaryPin:-1,loopChannel:sensor === 'current' ? pin:-1,rpmPin:sensor === 'rpm' ? pin:-1,maxValue:sensor === 'digital' ? 1:(parseFloat(card.querySelector('.tank-height').value)|| 120),hysteresis:sensor === 'digital' ? 0:2.0,daily:true,upload:true};if(sensor === 'digital'){tank.digitalSwitchMode = switchMode;}if(sensor === 'current'){const currentLoopType = card.querySelector('.current-loop-type').value;const sensorMountHeight = parseFloat(card.querySelector('.sensor-mount-height').value)|| 0;const sensorRangeMin = parseFloat(card.querySelector('.sensor-range-min').value)|| 0;const sensorRangeMax = parseFloat(card.querySelector('.sensor-range-max').value)|| 5;const sensorRangeUnit = card.querySelector('.sensor-range-unit').value || 'PSI';tank.currentLoopType = currentLoopType;tank.sensorMountHeight = sensorMountHeight;tank.sensorRangeMin = sensorRangeMin;tank.sensorRangeMax = sensorRangeMax;tank.sensorRangeUnit = sensorRangeUnit;}if(alarmSectionVisible){if(sensor === 'digital'){const digitalTriggerState = card.querySelector('.digital-trigger-state').value;tank.digitalTrigger = digitalTriggerState;if(digitalTriggerState === 'activated'){tank.highAlarm = 1;}else{tank.lowAlarm = 0;}tank.alarmSms = true;}else if(highAlarmEnabled || lowAlarmEnabled){if(highAlarmEnabled && highAlarmValue !== ''){const highAlarmFloat = parseFloat(highAlarmValue);if(!isNaN(highAlarmFloat)){tank.highAlarm = highAlarmFloat;}}if(lowAlarmEnabled && lowAlarmValue !== ''){const lowAlarmFloat = parseFloat(lowAlarmValue);if(!isNaN(lowAlarmFloat)){tank.lowAlarm = lowAlarmFloat;}}tank.alarmSms = true;}else{tank.alarmSms = false;}}else{tank.alarmSms = false;}if(sensor === 'rpm'){tank.pulsesPerRev = pulsesPerRev;}const relaySectionVisible = card.querySelector('.relay-section').classList.contains('visible');if(relaySectionVisible){const relayOutputItems = card.querySelectorAll('.relay-output-item');let relayMask = 0;const relayDurations = [0,0,0,0];relayOutputItems.forEach(item =>{const select = item.querySelector('.relay-output-select');const durationInput = item.querySelector('.relay-duration-input');const relayValue = parseInt(select.value);const duration = parseInt(durationInput.value)|| 0;relayMask |= relayValue;const relayIndex = {1:0,2:1,4:2,8:3}[relayValue];if(relayIndex !== undefined){relayDurations[relayIndex]= duration;}});const relayTarget = card.querySelector('.relay-target').value.trim();const relayTrigger = card.querySelector('.relay-trigger').value;const relayMode = card.querySelector('.relay-mode').value;if(relayTarget){tank.relayTargetClient = relayTarget;tank.relayMask = relayMask;tank.relayTrigger = relayTrigger;tank.relayMode = relayMode;if(relayMode === 'momentary'){tank.relayMomentaryDurations = relayDurations;}if(relayMask === 0){alert("You have set a relay target but have not added any relay outputs for " + name + ". The configuration will be incomplete.");}if((relayTrigger === 'high' &&(!highAlarmEnabled || highAlarmValue === ''))||(relayTrigger === 'low' &&(!lowAlarmEnabled || lowAlarmValue === ''))){alert(`Warning:Relay for ${name}is set to trigger on "${relayTrigger}" alarm,but that alarm type is not fully configured(either not enabled or value is missing).`);}}}const smsSectionVisible = card.querySelector('.sms-section').classList.contains('visible');if(smsSectionVisible){const smsPhones = card.querySelector('.sms-phones').value.trim();const smsTrigger = card.querySelector('.sms-trigger').value;const smsMessage = card.querySelector('.sms-message').value.trim();if(smsPhones){const phoneArray = smsPhones.split(',').map(p => p.trim()).filter(p => p.length > 0);if(phoneArray.length > 0){tank.smsAlert ={phones:phoneArray,trigger:smsTrigger,message:smsMessage || 'Tank alarm triggered'};if((smsTrigger === 'high' &&(!highAlarmEnabled || highAlarmValue === ''))||(smsTrigger === 'low' &&(!lowAlarmEnabled || lowAlarmValue === ''))){alert(`Warning:SMS Alert for ${name}is set to trigger on "${smsTrigger}" alarm,but that alarm type is not fully configured(either not enabled or value is missing).`);}}}}config.tanks.push(tank);});const inputCards = document.querySelectorAll('#inputsContainer .sensor-card');let clearButtonConfigured = false;inputCards.forEach((card)=>{const inputName = card.querySelector('.input-name').value.trim()|| 'Input';const inputPin = parseInt(card.querySelector('.input-pin').value,10);const inputMode = card.querySelector('.input-mode').value;const inputAction = card.querySelector('.input-action').value;if(inputAction === 'clear_relays' && !clearButtonConfigured){config.clearButtonPin = isNaN(inputPin)? -1:inputPin;config.clearButtonActiveHigh =(inputMode === 'active_high');clearButtonConfigured = true;}});if(!clearButtonConfigured){config.clearButtonPin = -1;config.clearButtonActiveHigh = false;}const blob = new Blob([JSON.stringify(config,null,2)],{type:'application/json'});const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'client_config.json';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);});addSensor();</script></body></html>
\ No newline at end of file
diff --git a/TankAlarm-112025-Server-BluesOpta/data/contacts.html b/TankAlarm-112025-Server-BluesOpta/data/contacts.html
index 5871d0a..8deeaa9 100644
--- a/TankAlarm-112025-Server-BluesOpta/data/contacts.html
+++ b/TankAlarm-112025-Server-BluesOpta/data/contacts.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Contacts Manager</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12)}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18)}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:800px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow);margin-bottom:24px}h2{margin-top:0;font-size:1.3rem}.contact-list{display:flex;flex-direction:column;gap:12px}.contact-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--chip);border:1px solid var(--card-border);border-radius:8px}.contact-info h3{margin:0 0 4px;font-size:1.1rem}.contact-info p{margin:0;color:var(--muted);font-size:0.9rem}.contact-actions{display:flex;gap:8px}button{border:none;padding:8px 14px;font-size:0.9rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);border-radius:4px}button.danger{background:var(--danger);color:white}button.secondary{background:transparent;border:1px solid var(--card-border);color:var(--text)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000}.modal.active{display:flex}.modal-content{background:var(--surface);padding:24px;border-radius:8px;width:100%;max-width:400px;box-shadow:0 25px 55px var(--card-shadow)}.field{display:flex;flex-direction:column;margin-bottom:16px}.field span{font-size:0.9rem;color:var(--muted);margin-bottom:4px}.field input{padding:10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);border-radius:4px}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Contacts Manager</h1><p> Manage SMS recipients and email contacts for alerts and reports. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill secondary" href="/client-console">Client Console</a><a class="pill secondary" href="/config-generator">Config Generator</a><a class="pill" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px"><h2>Saved Contacts</h2><button onclick="openModal()">+ Add Contact</button></div><div class="contact-list" id="contactList"><!-- Contacts will be loaded here --></div></div></main><div class="modal" id="contactModal"><div class="modal-content"><h2>Add Contact</h2><form id="contactForm"><label class="field"><span>Name</span><input type="text" id="contactName" required></label><label class="field"><span>Phone Number</span><input type="tel" id="contactPhone" placeholder="+15551234567"></label><label class="field"><span>Email Address</span><input type="email" id="contactEmail" placeholder="user@example.com"></label><div style="display:flex;justify-content:flex-end;gap:12px;margin-top:24px"><button type="button" class="secondary" onclick="closeModal()">Cancel</button><button type="submit">Save Contact</button></div></form></div></div><script>const contacts = [{id:1,name:'Admin',phone:'+15550001111',email:'admin@tankalarm.com'},{id:2,name:'Site Manager',phone:'+15552223333',email:'manager@site.com'}];function renderContacts(){const list = document.getElementById('contactList');list.innerHTML = contacts.map(c => `<div class="contact-item"><div class="contact-info"><h3>${c.name}</h3><p>${c.phone || ''} ${c.phone && c.email ? '•' : ''} ${c.email || ''}</p></div><div class="contact-actions"><button class="secondary" onclick="editContact(${c.id})">Edit</button><button class="danger" onclick="deleteContact(${c.id})">Delete</button></div></div>`).join('');}function openModal(){document.getElementById('contactModal').classList.add('active');}function closeModal(){document.getElementById('contactModal').classList.remove('active');document.getElementById('contactForm').reset();}document.getElementById('contactForm').addEventListener('submit',(e)=>{e.preventDefault();const name = document.getElementById('contactName').value;const phone = document.getElementById('contactPhone').value;const email = document.getElementById('contactEmail').value;contacts.push({id:Date.now(),name,phone,email});renderContacts();closeModal();});renderContacts();</script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Contacts Manager</title><style>:root{font-family:"Segoe UI",Arial,sans-serif;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);transition:background 0.2s ease,color 0.2s ease}body[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--text:#1f2933;--muted:#475569;--header-bg:#e2e8f0;--card-border:rgba(15,23,42,0.08);--card-shadow:rgba(15,23,42,0.08);--accent:#2563eb;--accent-strong:#1d4ed8;--accent-contrast:#f8fafc;--chip:#f8fafc;--input-border:#cbd5e1;--danger:#ef4444;--pill-bg:rgba(37,99,235,0.12)}body[data-theme="dark"]{--bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--header-bg:#16213d;--card-border:rgba(15,23,42,0.55);--card-shadow:rgba(0,0,0,0.55);--accent:#38bdf8;--accent-strong:#22d3ee;--accent-contrast:#0f172a;--chip:rgba(148,163,184,0.15);--input-border:rgba(148,163,184,0.4);--danger:#f87171;--pill-bg:rgba(56,189,248,0.18)}header{background:var(--header-bg);padding:28px 24px;box-shadow:0 20px 45px var(--card-shadow)}header .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}header h1{margin:0;font-size:1.9rem}header p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.4}.header-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{padding:10px 20px;text-decoration:none;font-weight:600;background:var(--pill-bg);color:var(--accent);border:1px solid transparent;transition:transform 0.15s ease}.pill:hover{transform:translateY(-1px)}.icon-button{width:42px;height:42px;border:1px solid var(--card-border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;transition:transform 0.15s ease}.icon-button:hover{transform:translateY(-1px)}main{padding:24px;max-width:800px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--card-border);padding:20px;box-shadow:0 25px 55px var(--card-shadow);margin-bottom:24px}h2{margin-top:0;font-size:1.3rem}.contact-list{display:flex;flex-direction:column;gap:12px}.contact-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--chip);border:1px solid var(--card-border);border-radius:8px}.contact-info h3{margin:0 0 4px;font-size:1.1rem}.contact-info p{margin:0;color:var(--muted);font-size:0.9rem}.contact-actions{display:flex;gap:8px}button{border:none;padding:8px 14px;font-size:0.9rem;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-contrast);border-radius:4px}button.danger{background:var(--danger);color:white}button.secondary{background:transparent;border:1px solid var(--card-border);color:var(--text)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000}.modal.active{display:flex}.modal-content{background:var(--surface);padding:24px;border-radius:8px;width:100%;max-width:400px;box-shadow:0 25px 55px var(--card-shadow)}.field{display:flex;flex-direction:column;margin-bottom:16px}.field span{font-size:0.9rem;color:var(--muted);margin-bottom:4px}.field input{padding:10px;border:1px solid var(--input-border);background:var(--bg);color:var(--text);border-radius:4px}</style></head><body data-theme="light"><header><div class="bar"><div><h1>Contacts Manager</h1><p> Manage SMS recipients and email contacts for alerts and reports. </p></div><div class="header-actions"><a class="pill secondary" href="/">Dashboard</a><a class="pill secondary" href="/client-console">Client Console</a><a class="pill secondary" href="/config-generator">Config Generator</a><a class="pill" href="/contacts">Contacts</a><a class="pill secondary" href="/serial-monitor">Serial Monitor</a><a class="pill secondary" href="/calibration">Calibration</a><a class="pill secondary" href="/historical">Historical Data</a><a class="pill secondary" href="/server-settings">Server Settings</a></div></div></header><main><div class="card"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px"><h2>Saved Contacts</h2><button onclick="openModal()">+ Add Contact</button></div><div class="contact-list" id="contactList"><!-- Contacts will be loaded here --></div></div></main><div class="modal" id="contactModal"><div class="modal-content"><h2>Add Contact</h2><form id="contactForm"><label class="field"><span>Name</span><input type="text" id="contactName" required></label><label class="field"><span>Phone Number</span><input type="tel" id="contactPhone" placeholder="+15551234567"></label><label class="field"><span>Email Address</span><input type="email" id="contactEmail" placeholder="user@example.com"></label><div style="display:flex;justify-content:flex-end;gap:12px;margin-top:24px"><button type="button" class="secondary" onclick="closeModal()">Cancel</button><button type="submit">Save Contact</button></div></form></div></div><script>const contacts = [{id:1,name:'Admin',phone:'+15550001111',email:'admin@tankalarm.com',subscriptions:['Server Daily Email']},{id:2,name:'Site Manager',phone:'+15552223333',email:'manager@site.com',subscriptions:['Site A Daily Email','Site A SMS Alerts']}];function renderContacts(){const list = document.getElementById('contactList');list.innerHTML = contacts.map(c => `<div class="contact-item"><div class="contact-info"><h3>${c.name}</h3><p>${c.phone || ''} ${c.phone && c.email ? '•' : ''} ${c.email || ''}</p>${c.subscriptions && c.subscriptions.length ? `<p style="margin-top:8px;"><strong>Subscribed to:</strong> ${c.subscriptions.join(', ')}</p>` : ''}</div><div class="contact-actions"><button class="secondary" onclick="editContact(${c.id})">Edit</button><button class="danger" onclick="deleteContact(${c.id})">Delete</button></div></div>`).join('');}function openModal(){document.getElementById('contactModal').classList.add('active');}function closeModal(){document.getElementById('contactModal').classList.remove('active');document.getElementById('contactForm').reset();}document.getElementById('contactForm').addEventListener('submit',(e)=>{e.preventDefault();const name = document.getElementById('contactName').value;const phone = document.getElementById('contactPhone').value;const email = document.getElementById('contactEmail').value;contacts.push({id:Date.now(),name,phone,email,subscriptions:[]});renderContacts();closeModal();});renderContacts();</script></body></html>
\ No newline at end of file
