@@ -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);