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

Expand konesali page content and add illustrations across all pages

Browse Source 
- Konesali: add descriptive paragraphs to all 6 sections (sähkö, jäähdytys,
  tietoliikenne, turvallisuus, tilat, ympäristö) with detailed explanations
- Konesali: add decorative SVG illustrations to all sections
- Yhteydet: add illustrations to yhteyspaketit and operaattorit sections
- Index: add illustrations to hinnat and miksi sections
- CSS: add .spec-intro style for descriptive text blocks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 19:42:21 +02:00
parent 6671d66ec7
commit cb02d521e5
4 changed files with 180 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
konesali.html
View File

@@ -50,7 +50,7 @@
<section class="page-hero">
<div class="container">
<h1>Konesalin tekniset tiedot</h1>
<p>Ammattimaisesti suunniteltu ja ylläpidetty laitetila Turussa</p>
<p>Ammattitason laitetila Turussa &mdash; suunniteltu jatkuvaan, katkeamattomaan toimintaan. Redundantit järjestelmät, tehokas jäähdytys ja monikerroksiset turvallisuusratkaisut varmistavat, että laitteesi toimivat luotettavasti ympäri vuorokauden.</p>
</div>
</section>
@@ -79,7 +79,17 @@
</section>
<!-- Sähkö -->
<section class="section section-dark" id="sahko">
<section class="section section-dark section-with-illustration" id="sahko">
<!-- Lightning bolt / power illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<path d="M120 40L60 200h50L80 360l100-200h-60l40-120z" stroke="rgba(240,112,96,0.08)" stroke-width="1.5" fill="rgba(240,112,96,0.03)"/>
<path d="M100 80L55 220h40L70 340l80-160h-50l30-100z" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="none"/>
<circle cx="90" cy="120" r="3" fill="rgba(240,112,96,0.12)"/>
<circle cx="110" cy="200" r="2" fill="rgba(240,112,96,0.10)"/>
<circle cx="80" cy="280" r="4" fill="rgba(240,112,96,0.08)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -93,6 +103,7 @@
<p>Kahdennettu sähkönsyöttö varmistaa katkeamattoman toiminnan</p>
</div>
</div>
<p class="spec-intro">Konesalimme sähköinfra on rakennettu täysin kahdennetulla A/B-syötöllä kahdelta erilliseltä muuntajalta. Sähkökatkon sattuessa online double-conversion UPS-järjestelmä pitää laitteet käynnissä välittömästi, ja dieselgeneraattori käynnistyy automaattisesti sekuntien sisällä. Jokaisen kaapin tehonkulutusta seurataan reaaliajassa monitoroiduilla PDU-yksiköillä, ja asiakkaat voivat seurata omaa kulutustaan hallintapaneelista.</p>
<div class="spec-table">
<table>
<tbody>
@@ -132,7 +143,29 @@
</section>
<!-- Jäähdytys -->
<section class="section" id="jaahdytys">
<section class="section section-with-illustration" id="jaahdytys">
<!-- Snowflake / cooling illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<g stroke="rgba(100,160,220,0.10)" stroke-width="1">
<line x1="100" y1="60" x2="100" y2="340"/>
<line x1="40" y1="130" x2="160" y2="270"/>
<line x1="40" y1="270" x2="160" y2="130"/>
<line x1="100" y1="60" x2="85" y2="80"/>
<line x1="100" y1="60" x2="115" y2="80"/>
<line x1="100" y1="340" x2="85" y2="320"/>
<line x1="100" y1="340" x2="115" y2="320"/>
<line x1="40" y1="130" x2="60" y2="125"/>
<line x1="40" y1="130" x2="50" y2="145"/>
<line x1="160" y1="270" x2="140" y2="275"/>
<line x1="160" y1="270" x2="150" y2="255"/>
</g>
<circle cx="100" cy="200" r="20" stroke="rgba(100,160,220,0.12)" stroke-width="1" fill="rgba(100,160,220,0.03)"/>
<circle cx="60" cy="100" r="6" fill="rgba(100,160,220,0.06)"/>
<circle cx="140" cy="300" r="8" fill="rgba(100,160,220,0.06)"/>
<circle cx="50" cy="240" r="4" fill="rgba(100,160,220,0.08)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -146,6 +179,7 @@
<p>Tehokas ja energiaoptimoitu jäähdytysjärjestelmä</p>
</div>
</div>
<p class="spec-intro">Konesali käyttää Cold Aisle Containment -rakennetta, jossa kylmä ilma ohjataan suljetun käytävän kautta suoraan laitteiden etuosaan. Tämä estää kylmän ja lämpimän ilman sekoittumisen ja parantaa jäähdytyksen tehokkuutta merkittävästi. Suomen viileä ilmasto on merkittävä etu &mdash; suurimman osan vuodesta voimme hyödyntää ulkoilmaa jäähdytykseen (free cooling), mikä vähentää energiankulutusta ja laskee asiakkaidemme hiilijalanjälkeä.</p>
<div class="spec-table">
<table>
<tbody>
@@ -181,7 +215,22 @@
</section>
<!-- Tietoliikenne -->
<section class="section section-dark" id="tietoliikenne">
<section class="section section-dark section-with-illustration" id="tietoliikenne">
<!-- Network nodes illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<circle cx="80" cy="120" r="10" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="140" cy="180" r="8" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="60" cy="250" r="12" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="130" cy="310" r="7" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="100" cy="80" r="5" stroke="rgba(240,112,96,0.08)" stroke-width="1" fill="none"/>
<line x1="80" y1="120" x2="140" y2="180" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="140" y1="180" x2="60" y2="250" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="60" y1="250" x2="130" y2="310" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="80" y1="120" x2="60" y2="250" stroke="rgba(240,112,96,0.06)" stroke-width="1" stroke-dasharray="4 4"/>
<line x1="140" y1="180" x2="130" y2="310" stroke="rgba(240,112,96,0.06)" stroke-width="1" stroke-dasharray="4 4"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -195,6 +244,7 @@
<p>Moniliittymäinen verkko usealta operaattorilta</p>
</div>
</div>
<p class="spec-intro">Konesalimme on carrier-neutral &mdash; et ole sidottu yhteen operaattoriin. Tarjoamme yhteydet useilta eri operaattoreilta, ja voit valita tai kilpailuttaa parhaan vaihtoehdon tarpeisiisi. Oletusnopeus on 1 Gbit/s, mutta yhteys on päivitettävissä aina 100 Gbit/s asti. BGP-reititys ja oma AS-numero mahdollistavat monimutkaisten verkkoympäristöjen rakentamisen. Cross-connect-yhteyksillä voit yhdistää laitteesi suoraan muihin operaattoreihin tai asiakkaisiin samassa tilassa.</p>
<div class="spec-table">
<table>
<tbody>
@@ -238,7 +288,18 @@
</section>
<!-- Turvallisuus -->
<section class="section" id="turvallisuus">
<section class="section section-with-illustration" id="turvallisuus">
<!-- Shield / lock illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<path d="M100 80L50 110v60c0 55 20 100 50 120 30-20 50-65 50-120v-60L100 80z" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<path d="M100 120L70 138v35c0 32 12 58 30 70 18-12 30-38 30-70v-35L100 120z" stroke="rgba(240,112,96,0.07)" stroke-width="1" fill="none"/>
<path d="M88 185l8 8 20-20" stroke="rgba(240,112,96,0.12)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="60" cy="280" r="12" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="none"/>
<rect x="54" y="274" width="12" height="10" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<path d="M57 274v-4a3 3 0 016 0v4" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -252,6 +313,7 @@
<p>Monikerroksiset turvallisuusjärjestelmät suojaavat laitteita</p>
</div>
</div>
<p class="spec-intro">Laitteesi ovat turvassa usean kerroksen suojauksen takana. Konesaliin pääsy edellyttää sähköistä kulunvalvontaa avainkortilla ja henkilökohtaisella PIN-koodilla. Jokainen käynti kirjataan ja aikaleimataan. Kameravalvonta kattaa kaikki sisä- ja ulkotilat ympäri vuorokauden. Palontorjunnassa käytämme automaattista palonilmaisinjärjestelmää yhdistettynä inerttikaasu-sammutusjärjestelmään, joka sammuttaa tulipalon vahingoittamatta elektroniikkaa. Kaapit ovat aina lukittuja ja asiakaskohtaisilla avaimilla varustettuja.</p>
<div class="spec-table">
<table>
<tbody>
@@ -287,7 +349,23 @@
</section>
<!-- Tilat -->
<section class="section section-dark" id="tilat">
<section class="section section-dark section-with-illustration" id="tilat">
<!-- Server cabinet illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<rect x="55" y="80" width="90" height="240" rx="4" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="95" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="120" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="145" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="170" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="195" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.06)" stroke-width="0.8" fill="none"/>
<rect x="65" y="220" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.06)" stroke-width="0.8" fill="none"/>
<circle cx="72" cy="104" r="2" fill="rgba(240,112,96,0.15)"/>
<circle cx="72" cy="129" r="2" fill="rgba(240,112,96,0.15)"/>
<circle cx="72" cy="154" r="2" fill="rgba(240,112,96,0.12)"/>
<circle cx="72" cy="179" r="2" fill="rgba(240,112,96,0.10)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -301,6 +379,7 @@
<p>Ammattitason laitetila suunniteltu vaativaan käyttöön</p>
</div>
</div>
<p class="spec-intro">Konesalitilat on suunniteltu vaativaan palvelinympäristöön. Käytössä ovat standardikokoiset 42U-kaapit (600mm x 1000mm), jotka sopivat käytännössä kaikille palvelimille ja verkkolaitteille. Korotettu lattia mahdollistaa siistin kaapeloinnin ja tehokkaan ilmavirtauksen. Hot Aisle / Cold Aisle -erottelu varmistaa, ettei lämmin poistoilma sekoitu kylmään tuloilmaan. Asiakkailla on 24/7 pääsy omille laitteilleen etukäteisilmoituksella &mdash; tarvittaessa Remote Hands -palvelumme hoitaa fyysisen työn puolestasi.</p>
<div class="spec-table">
<table>
<tbody>
@@ -336,7 +415,26 @@
</section>
<!-- Ympäristö -->
<section class="section section-green" id="ymparisto">
<section class="section section-green section-with-illustration" id="ymparisto">
<!-- Sun / leaf illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<circle cx="110" cy="130" r="30" stroke="rgba(76,175,80,0.12)" stroke-width="1.5" fill="rgba(76,175,80,0.03)"/>
<g stroke="rgba(76,175,80,0.10)" stroke-width="1" stroke-linecap="round">
<line x1="110" y1="85" x2="110" y2="70"/>
<line x1="110" y1="175" x2="110" y2="190"/>
<line x1="65" y1="130" x2="50" y2="130"/>
<line x1="155" y1="130" x2="170" y2="130"/>
<line x1="78" y1="98" x2="68" y2="88"/>
<line x1="142" y1="162" x2="152" y2="172"/>
<line x1="78" y1="162" x2="68" y2="172"/>
<line x1="142" y1="98" x2="152" y2="88"/>
</g>
<path d="M80 260c0-30 25-50 50-40 5-20 30-25 40-10 15 0 25 12 20 25" stroke="rgba(76,175,80,0.10)" stroke-width="1" fill="none"/>
<path d="M100 300l-15-30c10-5 25-3 30 8 8-8 22-5 25 6" stroke="rgba(76,175,80,0.08)" stroke-width="1" fill="rgba(76,175,80,0.03)"/>
<line x1="100" y1="270" x2="100" y2="340" stroke="rgba(76,175,80,0.08)" stroke-width="1"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -347,9 +445,10 @@
</div>
<div>
<h2>Ympäristö ja kestävyys</h2>
<p>100% uusiutuvaa energiaa — tuuli- ja aurinkovoima</p>
<p>100% uusiutuvaa energiaa &mdash; tuuli- ja aurinkovoima</p>
</div>
</div>
<p class="spec-intro">Vastuullisuus on meille tärkeää. Konesalimme käyttää 100-prosenttisesti uusiutuvilla energialähteillä tuotettua sähköä, joka on varmennettu alkuperätakuilla. Suomen viileä ilmasto on luonnollinen etu &mdash; free cooling mahdollistaa ulkoilmajäähdytyksen suurimman osan vuodesta, mikä laskee energiankulutusta merkittävästi. Konesalin tuottama hukkalämpö ei mene hukkaan, vaan se ohjataan lähialueen kaukolämpöverkkoon. PUE-tavoitteemme on alle 1,3, kun toimialan keskiarvo on 1,5&ndash;1,7.</p>
<div class="spec-table">
<table>
<tbody>