Update availability check: require full address, show only yes/no

Three fields (address, zip, city) instead of one. API now returns
only true/false, no addresses or speeds exposed publicly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.html

@@ -231,9 +231,13 @@
 
                 <div class="availability-check">
                     <h3>Pikasaatavuustarkistus</h3>
-                    <div class="availability-check-form">
+                    <div class="availability-check-fields">
-                        <input type="text" id="check-address" placeholder="Osoite tai postinumero">
+                        <input type="text" id="check-address" placeholder="Osoite (esim. Kauppakatu 5)">
-                        <button type="button" class="btn btn-sm" id="check-btn">Tarkista</button>
+                        <div class="availability-check-row">
+                            <input type="text" id="check-zip" placeholder="Postinumero" maxlength="5">
+                            <input type="text" id="check-city" placeholder="Kaupunki">
+                        </div>
+                        <button type="button" class="btn btn-sm btn-full" id="check-btn">Tarkista saatavuus</button>
                     </div>
                     <div id="check-result" class="check-result" style="display:none;"></div>
                 </div>
@@ -313,22 +317,30 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() {
 (function() {
     const API_URL = 'https://intra.cuitunet.fi/api.php';
     const API_KEY = '560160bf6558260e1734e6ad5933cabe';
-    const checkInput = document.getElementById('check-address');
+    const checkAddress = document.getElementById('check-address');
+    const checkZip = document.getElementById('check-zip');
+    const checkCity = document.getElementById('check-city');
     const checkBtn = document.getElementById('check-btn');
     const checkResult = document.getElementById('check-result');
 
     async function checkAvailability() {
-        const q = checkInput.value.trim();
+        const osoite = checkAddress.value.trim();
-        if (!q) return;
+        const postinumero = checkZip.value.trim();
+        const kaupunki = checkCity.value.trim();
+        if (!osoite || !postinumero || !kaupunki) {
+            checkResult.className = 'check-result nok';
+            checkResult.style.display = 'block';
+            checkResult.innerHTML = '<p>Täytä kaikki kentät: osoite, postinumero ja kaupunki.</p>';
+            return;
+        }
 
         checkResult.className = 'check-result loading';
         checkResult.style.display = 'block';
         checkResult.innerHTML = '<p>Tarkistetaan saatavuutta...</p>';
 
         try {
-            const isZip = /^\d{5}$/.test(q);
+            const params = 'osoite=' + encodeURIComponent(osoite) + '&postinumero=' + encodeURIComponent(postinumero) + '&kaupunki=' + encodeURIComponent(kaupunki);
-            const param = isZip ? 'postinumero=' + encodeURIComponent(q) : 'osoite=' + encodeURIComponent(q);
+            const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + params);
-            const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + param);
             const data = await res.json();
 
             if (data.error) {
@@ -338,18 +350,8 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() {
             }
 
             if (data.saatavilla) {
-                let html = '<h4>Kuituliittymä on saatavilla!</h4>';
-                html += '<p>Löysimme ' + data.maara + ' kohde' + (data.maara > 1 ? 'tta' : 'n') + ':</p>';
-                data.kohteet.forEach(function(k) {
-                    html += '<div class="check-result-address">';
-                    html += '<strong>' + k.osoite + '</strong>';
-                    if (k.postinumero) html += ', ' + k.postinumero;
-                    if (k.kaupunki) html += ' ' + k.kaupunki;
-                    if (k.nopeus) html += ' — ' + k.nopeus;
-                    html += '</div>';
-                });
                 checkResult.className = 'check-result ok';
-                checkResult.innerHTML = html;
+                checkResult.innerHTML = '<h4>Kuituliittymä on saatavilla osoitteessasi!</h4><p>Täytä vieressä oleva lomake niin otamme yhteyttä ja kerromme lisää.</p>';
             } else {
                 checkResult.className = 'check-result nok';
                 checkResult.innerHTML = '<h4>Ei saatavuutta vielä</h4><p>Kuituliittymää ei löytynyt osoitteellasi, mutta verkkomme laajenee jatkuvasti. Täytä lomake niin kerromme kun kuitu tulee saataville!</p>';
@@ -361,7 +363,9 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() {
     }
 
     checkBtn?.addEventListener('click', checkAvailability);
-    checkInput?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); });
+    [checkAddress, checkZip, checkCity].forEach(function(el) {
+        el?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); });
+    });
 })();
 
 // Saatavuuskysely-lomake

style.css

@@ -572,13 +572,19 @@ img {
     margin-bottom: 12px;
 }
 
-.availability-check-form {
+.availability-check-fields {
     display: flex;
+    flex-direction: column;
     gap: 8px;
 }
 
-.availability-check-form input {
+.availability-check-row {
-    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.availability-check-fields input {
     padding: 11px 14px;
     border: 1.5px solid var(--border);
     border-radius: 8px;
@@ -587,7 +593,7 @@ img {
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.availability-check-form input:focus {
+.availability-check-fields input:focus {
     outline: none;
     border-color: var(--orange);
     box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1);