426 lines
22 KiB
HTML
426 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jätä tarjouspyyntö | Konesali Turku</title>
|
|
<meta name="description" content="Pyydä tarjous konesalipalveluista. Automaattinen hintalaskuri auttaa arvioimaan kuukausikustannukset.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header" id="header">
|
|
<div class="container header-inner">
|
|
<a href="/" class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
|
|
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
|
|
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
|
|
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
|
|
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
|
|
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
|
|
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
</svg>
|
|
<span>Konesali<strong>Turku</strong></span>
|
|
</a>
|
|
<nav class="nav" id="nav">
|
|
<a href="index.html#palvelut">Palvelut</a>
|
|
<a href="index.html#hinnat">Hinnat</a>
|
|
<a href="konesali.html">Konesali</a>
|
|
<a href="yhteydet.html">Yhteydet</a>
|
|
<a href="tarjouspyynto.html" class="nav-cta active">Jätä tarjouspyyntö</a>
|
|
</nav>
|
|
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Hero -->
|
|
<section class="page-hero">
|
|
<div class="container">
|
|
<h1>Jätä tarjouspyyntö</h1>
|
|
<p>Valitse tarvitsemasi palvelut ja näet arviohinnan heti. Lähetä tarjouspyyntö niin otamme yhteyttä vuorokauden sisällä.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Calculator + Form -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="calculator-layout">
|
|
<!-- Form side -->
|
|
<div class="calculator-form">
|
|
<form id="quote-form">
|
|
<!-- Yhteystiedot -->
|
|
<div class="form-section-title">Yhteystiedot</div>
|
|
<div class="form-group">
|
|
<label for="name">Nimi *</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="company">Yritys</label>
|
|
<input type="text" id="company" name="company">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Sähköposti *</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Puhelinnumero</label>
|
|
<input type="tel" id="phone" name="phone">
|
|
</div>
|
|
|
|
<!-- Laitepaikat -->
|
|
<div class="form-section-title">Laitepaikat</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="units-1u">1U laitepaikka — €49/kk</label>
|
|
<select id="units-1u" name="units_1u" data-price="49">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="1">1 kpl</option>
|
|
<option value="2">2 kpl</option>
|
|
<option value="3">3 kpl</option>
|
|
<option value="4">4 kpl</option>
|
|
<option value="5">5+ kpl</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="units-2u">2U laitepaikka — €79/kk</label>
|
|
<select id="units-2u" name="units_2u" data-price="79">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="1">1 kpl</option>
|
|
<option value="2">2 kpl</option>
|
|
<option value="3">3 kpl</option>
|
|
<option value="4">4 kpl</option>
|
|
<option value="5">5+ kpl</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="units-4u">4U laitepaikka — €139/kk</label>
|
|
<select id="units-4u" name="units_4u" data-price="139">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="1">1 kpl</option>
|
|
<option value="2">2 kpl</option>
|
|
<option value="3">3 kpl</option>
|
|
<option value="5">5+ kpl</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="units-rack">Kokokaappi (42U)</label>
|
|
<select id="units-rack" name="units_rack" data-price="0">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="1" data-custom>1 kpl (pyydä tarjous)</option>
|
|
<option value="2" data-custom>2 kpl (pyydä tarjous)</option>
|
|
<option value="3" data-custom>3+ kpl (pyydä tarjous)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Yhteysnopeus -->
|
|
<div class="form-section-title">Yhteysnopeus</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="connection">Haluttu yhteysnopeus</label>
|
|
<select id="connection" name="connection" data-type="connection">
|
|
<option value="0">1 Gbit/s jaettu (sis. hintaan)</option>
|
|
<option value="99">1 Gbit/s dedicated (€99/kk)</option>
|
|
<option value="299">10 Gbit/s dedicated (€299/kk)</option>
|
|
<option value="custom">100 Gbit/s (räätälöity)</option>
|
|
</select>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="redundant_port" value="1" data-price="10">
|
|
<span>Varmennettu portti (€10/kk)</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="bgp">BGP-reititys</label>
|
|
<select id="bgp" name="bgp">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="20">Default-route (€20/kk)</option>
|
|
<option value="50">Koko internet (€50/kk)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- VPN -->
|
|
<div class="form-section-title">Site-to-Site VPN</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="vpn">VPN toimitilan ja konesalin väliin</label>
|
|
<select id="vpn" name="vpn">
|
|
<option value="0">Ei tarvetta</option>
|
|
<option value="95">1G Site-to-Site (alk. €95/kk)</option>
|
|
<option value="129">10G Site-to-Site (alk. €129/kk)</option>
|
|
<option value="custom">Dedicated L2/MPLS (räätälöity)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Lisäpalvelut -->
|
|
<div class="form-section-title">Lisäpalvelut</div>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="anycast_dns" value="1" data-price="19">
|
|
<span>Anycast DNS (€19/kk)</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="block_storage" value="1" data-price="29">
|
|
<span>Blokkitason storage (alk. €29/kk)</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="s3_storage" value="1" data-price="19">
|
|
<span>S3-levypinta (alk. €19/kk)</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="remote_hands" value="1" data-price="0">
|
|
<span>Remote Hands (tuntiveloitus)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Lisätiedot -->
|
|
<div class="form-section-title">Lisätiedot</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="message">Viesti</label>
|
|
<textarea id="message" name="message" rows="4" placeholder="Kerro lisää tarpeistasi: tehovaatimukset, aikataulu, erityistoiveet..."></textarea>
|
|
</div>
|
|
|
|
<!-- Honeypot -->
|
|
<div style="display:none" aria-hidden="true">
|
|
<input type="text" name="website" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-submit">Lähetä tarjouspyyntö</button>
|
|
<div class="form-status" id="form-status"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Price calculator side (sticky) -->
|
|
<div class="calculator-sidebar">
|
|
<div class="price-calculator" id="price-calculator">
|
|
<h3>Arvioitu kuukausihinta</h3>
|
|
<div class="calculator-total">
|
|
<span class="calculator-amount" id="calc-total">€0</span>
|
|
<span class="calculator-period">/kk</span>
|
|
</div>
|
|
<p class="calculator-vat">Hinnat alv 0%</p>
|
|
<div class="calculator-breakdown" id="calc-breakdown">
|
|
<p class="calculator-empty">Valitse palvelut vasemmalta niin näet arviohinnan täällä.</p>
|
|
</div>
|
|
<div class="calculator-note" id="calc-note" style="display:none;">
|
|
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
|
|
<span>Osa valituista palveluista on räätälöitäviä — lopullinen hinta tarjouksessa.</span>
|
|
</div>
|
|
</div>
|
|
<div class="calculator-contact">
|
|
<h4>Tarvitsetko apua?</h4>
|
|
<p>Soita tai lähetä sähköpostia, autamme mielellämme.</p>
|
|
<a href="mailto:support@konesaliturku.fi" class="calculator-email">support@konesaliturku.fi</a>
|
|
<div class="calculator-address">
|
|
<strong>Web1 Oy</strong><br>
|
|
Latokarinkatu 3<br>
|
|
20200 Turku
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container footer-inner">
|
|
<div class="footer-brand">
|
|
<a href="/" class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
|
|
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
|
|
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
|
|
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
|
|
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
|
|
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
|
|
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
|
|
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
|
</svg>
|
|
<span>Konesali<strong>Turku</strong></span>
|
|
</a>
|
|
<p>Luotettavat konesalipalvelut Turussa.</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<h4>Sivusto</h4>
|
|
<a href="index.html#palvelut">Palvelut</a>
|
|
<a href="konesali.html">Konesali</a>
|
|
<a href="yhteydet.html">Yhteydet</a>
|
|
<a href="index.html#hinnat">Hinnat</a>
|
|
<a href="tarjouspyynto.html">Tarjouspyyntö</a>
|
|
</div>
|
|
<div class="footer-links">
|
|
<h4>Yhteystiedot</h4>
|
|
<a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
|
|
<span>Web1 Oy</span>
|
|
<span>Latokarinkatu 3</span>
|
|
<span>20200 Turku</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p>© 2026 Konesali Turku. Kaikki oikeudet pidätetään.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
<script>
|
|
// Price Calculator
|
|
(function() {
|
|
const form = document.getElementById('quote-form');
|
|
const totalEl = document.getElementById('calc-total');
|
|
const breakdownEl = document.getElementById('calc-breakdown');
|
|
const noteEl = document.getElementById('calc-note');
|
|
|
|
function calculate() {
|
|
let total = 0;
|
|
let lines = [];
|
|
let hasCustom = false;
|
|
|
|
// Laitepaikat
|
|
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 => {
|
|
const qty = parseInt(u.el.value) || 0;
|
|
if (qty > 0) {
|
|
const subtotal = qty * u.price;
|
|
total += subtotal;
|
|
lines.push({ label: u.name + ' x' + qty, amount: subtotal });
|
|
}
|
|
});
|
|
|
|
// Kokokaappi
|
|
const rackQty = parseInt(document.getElementById('units-rack').value) || 0;
|
|
if (rackQty > 0) {
|
|
hasCustom = true;
|
|
lines.push({ label: 'Kokokaappi x' + rackQty, amount: null });
|
|
}
|
|
|
|
// Yhteysnopeus
|
|
const connEl = document.getElementById('connection');
|
|
const connVal = connEl.value;
|
|
let connPrice = 0;
|
|
if (connVal === 'custom') {
|
|
hasCustom = true;
|
|
lines.push({ label: '100 Gbit/s yhteys', amount: null });
|
|
} else {
|
|
connPrice = parseInt(connVal) || 0;
|
|
if (connPrice > 0) {
|
|
total += connPrice;
|
|
lines.push({ label: connEl.options[connEl.selectedIndex].text.split('(')[0].trim(), amount: connPrice });
|
|
}
|
|
}
|
|
|
|
// Varmennettu portti
|
|
const redundant = form.querySelector('[name="redundant_port"]');
|
|
if (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) {
|
|
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;
|
|
if (vpnVal === 'custom') {
|
|
hasCustom = true;
|
|
lines.push({ label: 'Dedicated L2/MPLS', amount: null });
|
|
} else {
|
|
const vpnPrice = parseInt(vpnVal) || 0;
|
|
if (vpnPrice > 0) {
|
|
total += vpnPrice;
|
|
lines.push({ label: vpnEl.options[vpnEl.selectedIndex].text.split('(')[0].trim(), amount: vpnPrice });
|
|
}
|
|
}
|
|
|
|
// Lisäpalvelut
|
|
const extras = [
|
|
{ name: 'anycast_dns', label: 'Anycast DNS', price: 19 },
|
|
{ name: 'block_storage', label: 'Blokkitason storage', price: 29 },
|
|
{ name: 's3_storage', label: 'S3-levypinta', price: 19 },
|
|
{ name: 'remote_hands', label: 'Remote Hands', price: 0, custom: true },
|
|
];
|
|
extras.forEach(e => {
|
|
const cb = form.querySelector('[name="' + e.name + '"]');
|
|
if (cb && cb.checked) {
|
|
if (e.custom || e.price === 0) {
|
|
hasCustom = true;
|
|
lines.push({ label: e.label, amount: null });
|
|
} else {
|
|
total += e.price;
|
|
lines.push({ label: e.label, amount: e.price });
|
|
}
|
|
}
|
|
});
|
|
|
|
// Render
|
|
totalEl.textContent = '€' + total;
|
|
|
|
if (lines.length === 0) {
|
|
breakdownEl.innerHTML = '<p class="calculator-empty">Valitse palvelut vasemmalta niin näet arviohinnan täällä.</p>';
|
|
} else {
|
|
let html = '';
|
|
lines.forEach(l => {
|
|
html += '<div class="calc-line">';
|
|
html += '<span>' + l.label + '</span>';
|
|
html += '<span>' + (l.amount !== null ? '€' + l.amount : 'Tarjouksessa') + '</span>';
|
|
html += '</div>';
|
|
});
|
|
breakdownEl.innerHTML = html;
|
|
}
|
|
|
|
noteEl.style.display = hasCustom ? 'flex' : 'none';
|
|
}
|
|
|
|
// Listen to all form changes
|
|
form.addEventListener('change', calculate);
|
|
form.addEventListener('input', calculate);
|
|
|
|
// Form submit
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const status = document.getElementById('form-status');
|
|
const honeypot = form.querySelector('[name="website"]');
|
|
if (honeypot && honeypot.value) return;
|
|
|
|
status.textContent = 'Lähetetään...';
|
|
status.className = 'form-status';
|
|
|
|
// Simulate send
|
|
setTimeout(function() {
|
|
status.textContent = 'Kiitos! Tarjouspyyntösi on vastaanotettu. Otamme yhteyttä vuorokauden sisällä.';
|
|
status.className = 'form-status form-status-success';
|
|
form.reset();
|
|
calculate();
|
|
}, 1000);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|