diff --git a/style.css b/style.css index d362c7d..7b42be6 100644 --- a/style.css +++ b/style.css @@ -1616,12 +1616,6 @@ a:hover { } /* === Calculator Layout === */ -.calculator-layout { - display: grid; - grid-template-columns: 1fr 360px; - gap: 40px; - align-items: start; -} .calculator-form { min-width: 0; @@ -1661,10 +1655,6 @@ a:hover { margin-bottom: 16px; } -.calculator-sidebar { - position: sticky; - top: 100px; -} .price-calculator { background: var(--color-dark); @@ -1787,14 +1777,89 @@ a:hover { border-top: 1px solid var(--color-border); } +/* Expand form button */ +.btn-expand-form { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 14px 20px; + margin: 8px 0 24px; + background: var(--color-bg-alt); + border: 1px dashed var(--color-border); + border-radius: var(--radius); + color: var(--color-text-heading); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + font-family: inherit; +} +.btn-expand-form:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: rgba(240, 112, 96, 0.04); +} +.btn-expand-form .btn-expand-icon { + display: flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border-radius: 50%; + background: var(--color-primary); + color: var(--color-white); + font-size: 1.1rem; + font-weight: 700; + flex-shrink: 0; + transition: transform 0.3s ease; +} +.btn-expand-form.expanded .btn-expand-icon { + transform: rotate(180deg); +} + +/* Form details (expandable) */ +.form-details { + animation: slideDown 0.3s ease; +} +@keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Calculator sidebar: hidden by default, shown when expanded */ +.calculator-sidebar { + display: none; +} +.calculator-sidebar.visible { + display: block; + position: sticky; + top: 100px; +} + +/* When sidebar not visible, form takes full width */ +.calculator-layout { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + align-items: start; +} +.calculator-layout:has(.calculator-sidebar.visible) { + grid-template-columns: 1fr 360px; +} + @media (max-width: 900px) { - .calculator-layout { + .calculator-layout, + .calculator-layout:has(.calculator-sidebar.visible) { grid-template-columns: 1fr; } .calculator-sidebar { position: static; order: -1; } + .calculator-sidebar.visible { + display: block; + } } /* === Animations === */ diff --git a/tarjouspyynto.html b/tarjouspyynto.html index bc80eb0..58ea82e 100644 --- a/tarjouspyynto.html +++ b/tarjouspyynto.html @@ -62,133 +62,140 @@
- +
Yhteystiedot
-
- - -
-
- - -
- - -
Laitepaikat
-
- - -
-
- - -
-
- - -
-
- - -
- - -
Yhteysnopeus
-
- - -
-
- -
-
- - -
- - -
Site-to-Site VPN
-
- - -
- - -
Lisäpalvelut
-
- - - - -
- - -
Lisätiedot
- + +
+ + + + + + @@ -303,6 +310,26 @@ window._refreshCaptcha = generateCaptcha; })(); + // Expand form toggle + (function() { + var btn = document.getElementById('btn-expand-form'); + var details = document.getElementById('form-details'); + var sidebar = document.querySelector('.calculator-sidebar'); + var expanded = false; + + btn.addEventListener('click', function() { + expanded = !expanded; + details.style.display = expanded ? '' : 'none'; + sidebar.classList.toggle('visible', expanded); + btn.classList.toggle('expanded', expanded); + btn.querySelector('.btn-expand-icon').textContent = expanded ? '−' : '+'; + btn.childNodes[btn.childNodes.length - 1].textContent = expanded ? ' Piilota tarkemmat tiedot' : ' Tarkemmat tiedot & hintalaskuri'; + if (expanded) { + details.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + } + }); + })(); + // Price Calculator (function() { const form = document.getElementById('quote-form'); @@ -315,13 +342,14 @@ let lines = []; let hasCustom = false; - // Laitepaikat + // Laitepaikat (voi olla piilossa) const units = [ { el: document.getElementById('units-1u'), name: '1U laitepaikka', price: 49 }, { el: document.getElementById('units-2u'), name: '2U laitepaikka', price: 79 }, { el: document.getElementById('units-4u'), name: '4U laitepaikka', price: 139 }, ]; units.forEach(u => { + if (!u.el) return; const qty = parseInt(u.el.value) || 0; if (qty > 0) { const subtotal = qty * u.price; @@ -331,7 +359,8 @@ }); // Kokokaappi - const rackQty = parseInt(document.getElementById('units-rack').value) || 0; + const rackEl = document.getElementById('units-rack'); + const rackQty = rackEl ? (parseInt(rackEl.value) || 0) : 0; if (rackQty > 0) { hasCustom = true; lines.push({ label: 'Kokokaappi x' + rackQty, amount: null }); @@ -339,7 +368,7 @@ // Yhteysnopeus const connEl = document.getElementById('connection'); - const connVal = connEl.value; + const connVal = connEl ? connEl.value : '0'; let connPrice = 0; if (connVal === 'custom') { hasCustom = true; @@ -354,28 +383,28 @@ // Varmennettu portti const redundant = form.querySelector('[name="redundant_port"]'); - if (redundant.checked) { + if (redundant && redundant.checked) { total += 10; lines.push({ label: 'Varmennettu portti', amount: 10 }); } // BGP const bgpEl = document.getElementById('bgp'); - const bgpPrice = parseInt(bgpEl.value) || 0; - if (bgpPrice > 0) { + const bgpPrice = bgpEl ? (parseInt(bgpEl.value) || 0) : 0; + if (bgpEl && bgpPrice > 0) { total += bgpPrice; lines.push({ label: bgpEl.options[bgpEl.selectedIndex].text.split('(')[0].trim(), amount: bgpPrice }); } // VPN const vpnEl = document.getElementById('vpn'); - const vpnVal = vpnEl.value; + const vpnVal = vpnEl ? vpnEl.value : '0'; if (vpnVal === 'custom') { hasCustom = true; lines.push({ label: 'Dedicated L2/MPLS', amount: null }); } else { const vpnPrice = parseInt(vpnVal) || 0; - if (vpnPrice > 0) { + if (vpnEl && vpnPrice > 0) { total += vpnPrice; lines.push({ label: vpnEl.options[vpnEl.selectedIndex].text.split('(')[0].trim(), amount: vpnPrice }); }