diff --git a/index.html b/index.html index 698efde..c783656 100644 --- a/index.html +++ b/index.html @@ -227,7 +227,16 @@
Saatavuuskysely & yhteydenotto

Ota yhteyttä tai tarkista saatavuus

-

Kerro osoitteesi niin selvitämme valokuidun saatavuuden, tai kysy mitä tahansa palveluistamme. Vastaamme 1–2 arkipäivässä. Yhteydenotto ei velvoita mihinkään.

+

Tarkista heti onko kuituliittymä saatavilla osoitteessasi, tai täytä lomake niin otamme yhteyttä 1–2 arkipäivässä.

+ +
+

Pikasaatavuustarkistus

+
+ + +
+ +
@@ -300,6 +309,61 @@ document.querySelector('.nav-toggle')?.addEventListener('click', function() { document.querySelector('.nav')?.classList.toggle('open'); }); +// Pikasaatavuustarkistus +(function() { + const API_URL = 'https://intra.cuitunet.fi/api.php'; + const API_KEY = '3de64ed2a3ece1c0f497345e41e8e76d'; + const checkInput = document.getElementById('check-address'); + const checkBtn = document.getElementById('check-btn'); + const checkResult = document.getElementById('check-result'); + + async function checkAvailability() { + const q = checkInput.value.trim(); + if (!q) return; + + checkResult.className = 'check-result loading'; + checkResult.style.display = 'block'; + checkResult.innerHTML = '

Tarkistetaan saatavuutta...

'; + + try { + const isZip = /^\d{5}$/.test(q); + const param = isZip ? 'postinumero=' + encodeURIComponent(q) : 'osoite=' + encodeURIComponent(q); + const res = await fetch(API_URL + '?action=saatavuus&key=' + encodeURIComponent(API_KEY) + '&' + param); + const data = await res.json(); + + if (data.error) { + checkResult.className = 'check-result nok'; + checkResult.innerHTML = '

Virhe

' + data.error + '

'; + return; + } + + if (data.saatavilla) { + let html = '

Kuituliittymä on saatavilla!

'; + html += '

Löysimme ' + data.maara + ' kohde' + (data.maara > 1 ? 'tta' : 'n') + ':

'; + data.kohteet.forEach(function(k) { + html += '
'; + html += '' + k.osoite + ''; + if (k.postinumero) html += ', ' + k.postinumero; + if (k.kaupunki) html += ' ' + k.kaupunki; + if (k.nopeus) html += ' — ' + k.nopeus; + html += '
'; + }); + checkResult.className = 'check-result ok'; + checkResult.innerHTML = html; + } else { + checkResult.className = 'check-result nok'; + checkResult.innerHTML = '

Ei saatavuutta vielä

Kuituliittymää ei löytynyt osoitteellasi, mutta verkkomme laajenee jatkuvasti. Täytä lomake niin kerromme kun kuitu tulee saataville!

'; + } + } catch (e) { + checkResult.className = 'check-result nok'; + checkResult.innerHTML = '

Yhteysvirhe

Tarkistusta ei voitu suorittaa. Yritä hetken kuluttua uudelleen.

'; + } + } + + checkBtn?.addEventListener('click', checkAvailability); + checkInput?.addEventListener('keydown', function(e) { if (e.key === 'Enter') checkAvailability(); }); +})(); + // Saatavuuskysely-lomake document.getElementById('availability-form')?.addEventListener('submit', async function(e) { e.preventDefault(); diff --git a/style.css b/style.css index b538880..e1b7ba3 100644 --- a/style.css +++ b/style.css @@ -556,6 +556,82 @@ img { box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1); } +/* ---- Availability Check ---- */ +.availability-check { + margin-top: 32px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 24px; +} + +.availability-check h3 { + font-size: 1rem; + font-weight: 600; + color: var(--dark); + margin-bottom: 12px; +} + +.availability-check-form { + display: flex; + gap: 8px; +} + +.availability-check-form input { + flex: 1; + padding: 11px 14px; + border: 1.5px solid var(--border); + border-radius: 8px; + font-size: 0.95rem; + font-family: inherit; + transition: border-color 0.2s, box-shadow 0.2s; +} + +.availability-check-form input:focus { + outline: none; + border-color: var(--orange); + box-shadow: 0 0 0 3px rgba(232, 137, 29, 0.1); +} + +.check-result { + margin-top: 12px; + padding: 14px 16px; + border-radius: 8px; + font-size: 0.9rem; + line-height: 1.5; +} + +.check-result.ok { + background: #ecfdf5; + border: 1px solid #a7f3d0; + color: #065f46; +} + +.check-result.nok { + background: #fef2f2; + border: 1px solid #fecaca; + color: #991b1b; +} + +.check-result.loading { + background: var(--bg-alt); + border: 1px solid var(--border); + color: var(--text-light); +} + +.check-result h4 { + font-size: 0.95rem; + margin-bottom: 4px; +} + +.check-result-address { + background: rgba(255,255,255,0.6); + padding: 6px 10px; + border-radius: 6px; + margin-top: 6px; + font-size: 0.85rem; +} + /* ---- Footer ---- */ .footer { background: var(--dark-soft);