jukka/konesaliturku.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update nav CTA, VPN pricing, form layout, and power connectors

Browse Source 
- Header nav: 'Yhteystiedot' → 'Jätä tarjouspyyntö' with primary color and bold
- VPN: Replace 100M/1G tiers with 1G (alk. €95/kk) and 10G (alk. €129/kk)
- Quote form: Stack unit selects vertically instead of side-by-side
- Replace C19 power connector references with C13 throughout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 19:21:14 +02:00
parent 3f117f764f
commit 03ab669538
4 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -41,7 +41,7 @@
<a href="#hinnat">Hinnat</a> <a href="#hinnat">Hinnat</a>
<a href="konesali.html">Konesali</a> <a href="konesali.html">Konesali</a>
<a href="yhteydet.html">Yhteydet</a> <a href="yhteydet.html">Yhteydet</a>
<a href="#yhteystiedot">Yhteystiedot</a> <a href="#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
</nav> </nav>
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko"> <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
<span></span> <span></span>
@@ -292,7 +292,7 @@
<ul class="service-features"> <ul class="service-features">
<li>4 rack unitia (177,80 mm)</li> <li>4 rack unitia (177,80 mm)</li>
<li>Oma 1 Gbit/s yhteys</li> <li>Oma 1 Gbit/s yhteys</li>
<li>2x C19 sähkösyöttö (230V)</li> <li>2x C13 sähkösyöttö (230V)</li>
<li>Rajoittamaton liikenne</li> <li>Rajoittamaton liikenne</li>
<li>Max 1000W tehonkulutus</li> <li>Max 1000W tehonkulutus</li>
</ul> </ul>
@@ -410,7 +410,7 @@
</li> </li>
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
2x C19 sähkösyöttö 2x C13 sähkösyöttö
</li> </li>
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
@@ -889,8 +889,7 @@
<!-- Laitepaikat --> <!-- Laitepaikat -->
<div class="form-section-title">Laitepaikat</div> <div class="form-section-title">Laitepaikat</div>
<div class="unit-row"> <div class="form-group form-group-full">
<div class="form-group">
<label for="units-1u">1U laitepaikka</label> <label for="units-1u">1U laitepaikka</label>
<select id="units-1u" name="units_1u"> <select id="units-1u" name="units_1u">
<option value="">Ei tarvetta</option> <option value="">Ei tarvetta</option>
@@ -901,7 +900,7 @@
<option value="5+">5+ kpl</option> <option value="5+">5+ kpl</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group form-group-full">
<label for="units-2u">2U laitepaikka</label> <label for="units-2u">2U laitepaikka</label>
<select id="units-2u" name="units_2u"> <select id="units-2u" name="units_2u">
<option value="">Ei tarvetta</option> <option value="">Ei tarvetta</option>
@@ -912,9 +911,7 @@
<option value="5+">5+ kpl</option> <option value="5+">5+ kpl</option>
</select> </select>
</div> </div>
</div> <div class="form-group form-group-full">
<div class="unit-row">
<div class="form-group">
<label for="units-4u">4U laitepaikka</label> <label for="units-4u">4U laitepaikka</label>
<select id="units-4u" name="units_4u"> <select id="units-4u" name="units_4u">
<option value="">Ei tarvetta</option> <option value="">Ei tarvetta</option>
@@ -924,7 +921,7 @@
<option value="5+">5+ kpl</option> <option value="5+">5+ kpl</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group form-group-full">
<label for="units-rack">Kokokaappi (42U)</label> <label for="units-rack">Kokokaappi (42U)</label>
<select id="units-rack" name="units_rack"> <select id="units-rack" name="units_rack">
<option value="">Ei tarvetta</option> <option value="">Ei tarvetta</option>
@@ -933,7 +930,6 @@
<option value="3+">3+ kpl</option> <option value="3+">3+ kpl</option>
</select> </select>
</div> </div>
</div>
<!-- Yhteysnopeus --> <!-- Yhteysnopeus -->
<div class="form-section-title">Yhteysnopeus</div> <div class="form-section-title">Yhteysnopeus</div>
@@ -964,8 +960,8 @@
<label for="vpn">VPN toimitilan ja konesalin väliin</label> <label for="vpn">VPN toimitilan ja konesalin väliin</label>
<select id="vpn" name="vpn"> <select id="vpn" name="vpn">
<option value="">Ei tarvetta</option> <option value="">Ei tarvetta</option>
<option value="ipsec">IPsec VPN (max 100 Mbit/s, €49/kk)</option> <option value="1g-s2s">1G Site-to-Site (alk. €95/kk)</option>
<option value="ipsec-pro">IPsec VPN Pro (max 1 Gbit/s, €99/kk)</option> <option value="10g-s2s">10G Site-to-Site (alk. €129/kk)</option>
<option value="l2-mpls">Dedicated L2/MPLS (räätälöity)</option> <option value="l2-mpls">Dedicated L2/MPLS (räätälöity)</option>
</select> </select>
</div> </div>

4
konesali.html
View File

@@ -36,7 +36,7 @@
<a href="index.html#hinnat">Hinnat</a> <a href="index.html#hinnat">Hinnat</a>
<a href="konesali.html" class="active">Konesali</a> <a href="konesali.html" class="active">Konesali</a>
<a href="yhteydet.html">Yhteydet</a> <a href="yhteydet.html">Yhteydet</a>
<a href="index.html#yhteystiedot">Yhteystiedot</a> <a href="index.html#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
</nav> </nav>
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko"> <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
<span></span> <span></span>
@@ -118,7 +118,7 @@
</tr> </tr>
<tr> <tr>
<td class="spec-label">Liitännät</td> <td class="spec-label">Liitännät</td>
<td>230V / 16A tai 32A, C13/C19 -pistokkeet</td> <td>230V / 16A, C13 -pistokkeet</td>
</tr> </tr>
<tr> <tr>
<td class="spec-label">PDU</td> <td class="spec-label">PDU</td>

15
style.css
View File

@@ -166,6 +166,21 @@ a:hover {
width: 100%; width: 100%;
} }
.nav-cta {
color: var(--color-primary) !important;
font-weight: 700 !important;
}
.nav-cta::after {
background: var(--color-primary);
width: 100% !important;
opacity: 0.4;
}
.header.scrolled .nav-cta {
color: var(--color-primary) !important;
}
.nav-toggle { .nav-toggle {
display: none; display: none;
flex-direction: column; flex-direction: column;

14
yhteydet.html
View File

@@ -36,7 +36,7 @@
<a href="index.html#hinnat">Hinnat</a> <a href="index.html#hinnat">Hinnat</a>
<a href="konesali.html">Konesali</a> <a href="konesali.html">Konesali</a>
<a href="yhteydet.html" class="active">Yhteydet</a> <a href="yhteydet.html" class="active">Yhteydet</a>
<a href="index.html#yhteystiedot">Yhteystiedot</a> <a href="index.html#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
</nav> </nav>
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko"> <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
<span></span> <span></span>
@@ -266,16 +266,16 @@
<div class="pricing-grid" style="margin-top: 40px;"> <div class="pricing-grid" style="margin-top: 40px;">
<div class="pricing-card fade-in"> <div class="pricing-card fade-in">
<div class="pricing-header"> <div class="pricing-header">
<h3>IPsec VPN</h3> <h3>1G Site-to-Site</h3>
<div class="price"> <div class="price">
<span class="price-amount">&euro;49</span> <span class="price-amount">alk. &euro;95</span>
<span class="price-period">/kk</span> <span class="price-period">/kk</span>
</div> </div>
</div> </div>
<ul class="pricing-features"> <ul class="pricing-features">
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Max 100 Mbit/s Max 1 Gbit/s
</li> </li>
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
@@ -299,16 +299,16 @@
<div class="pricing-card pricing-featured fade-in"> <div class="pricing-card pricing-featured fade-in">
<div class="pricing-badge">Suosituin</div> <div class="pricing-badge">Suosituin</div>
<div class="pricing-header"> <div class="pricing-header">
<h3>IPsec VPN Pro</h3> <h3>10G Site-to-Site</h3>
<div class="price"> <div class="price">
<span class="price-amount">&euro;99</span> <span class="price-amount">alk. &euro;129</span>
<span class="price-period">/kk</span> <span class="price-period">/kk</span>
</div> </div>
</div> </div>
<ul class="pricing-features"> <ul class="pricing-features">
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Max 1 Gbit/s Max 10 Gbit/s
</li> </li>
<li> <li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>