{"id":25668,"date":"2025-08-01T19:56:27","date_gmt":"2025-08-01T19:56:27","guid":{"rendered":"https:\/\/kinesiocenter.com\/kopio\/?p=25668"},"modified":"2025-08-01T19:56:29","modified_gmt":"2025-08-01T19:56:29","slug":"25668","status":"publish","type":"post","link":"https:\/\/kinesiocenter.com\/kopio\/25668\/","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"fi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Kipukartta &#8211; Terveyskulma<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Montserrat', sans-serif;\n            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);\n            min-height: 100vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 20px;\n        }\n        \n        .container {\n            max-width: 1200px;\n            width: 100%;\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n            overflow: hidden;\n        }\n        \n        header {\n            background: linear-gradient(90deg, #0056A3 0%, #0077b6 100%);\n            color: white;\n            padding: 30px 40px;\n            text-align: center;\n        }\n        \n        h1 {\n            font-weight: 700;\n            font-size: 2.5rem;\n            margin-bottom: 10px;\n            letter-spacing: -0.5px;\n        }\n        \n        .subtitle {\n            font-weight: 500;\n            font-size: 1.2rem;\n            opacity: 0.9;\n            max-width: 700px;\n            margin: 0 auto;\n        }\n        \n        .content {\n            display: flex;\n            padding: 0;\n        }\n        \n        .map-container {\n            flex: 1;\n            padding: 40px;\n            background: #f8fafc;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        \n        .info-panel {\n            flex: 0 0 400px;\n            background: white;\n            padding: 40px;\n            border-left: 1px solid #e2e8f0;\n        }\n        \n        .info-panel h2 {\n            color: #0056A3;\n            margin-bottom: 30px;\n            font-size: 1.8rem;\n            position: relative;\n        }\n        \n        .info-panel h2:after {\n            content: '';\n            position: absolute;\n            bottom: -10px;\n            left: 0;\n            width: 60px;\n            height: 4px;\n            background: #FF6B35;\n            border-radius: 2px;\n        }\n        \n        .instructions {\n            background: #f1f8ff;\n            padding: 20px;\n            border-radius: 12px;\n            margin-bottom: 30px;\n            border-left: 4px solid #0056A3;\n        }\n        \n        .instructions p {\n            font-size: 1rem;\n            color: #334155;\n            line-height: 1.6;\n        }\n        \n        .service-info {\n            background: white;\n            padding: 25px;\n            border-radius: 15px;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n            border-top: 4px solid #FF6B35;\n            margin-bottom: 25px;\n            opacity: 0;\n            transform: translateY(20px);\n            transition: all 0.4s ease-out;\n        }\n        \n        .service-info.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        .service-info h3 {\n            color: #0f172a;\n            font-size: 1.3rem;\n            margin-bottom: 15px;\n            display: flex;\n            align-items: center;\n        }\n        \n        .service-info h3 .icon {\n            margin-right: 10px;\n            width: 30px;\n            height: 30px;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            background: #e6f7ff;\n            border-radius: 8px;\n        }\n        \n        .service-info p {\n            color: #475569;\n            line-height: 1.7;\n            margin-bottom: 15px;\n        }\n        \n        .service-info .service-details {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 15px;\n            padding-top: 15px;\n            border-top: 1px dashed #cbd5e1;\n        }\n        \n        .price {\n            font-weight: 700;\n            color: #0056A3;\n            font-size: 1.2rem;\n        }\n        \n        .btn {\n            display: inline-block;\n            background: #FF6B35;\n            color: white;\n            font-weight: 600;\n            padding: 10px 20px;\n            border-radius: 8px;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            border: none;\n            cursor: pointer;\n            font-size: 0.9rem;\n        }\n        \n        .btn:hover {\n            background: #e55a2b;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 6px -1px rgba(255, 107, 53, 0.3);\n        }\n        \n        .body-map {\n            max-width: 100%;\n            height: auto;\n        }\n        \n        .body-area {\n            transition: all 0.3s ease;\n            cursor: pointer;\n        }\n        \n        .body-area:hover {\n            opacity: 0.8;\n        }\n        \n        .body-area.active {\n            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n        }\n        \n        @media (max-width: 900px) {\n            .content {\n                flex-direction: column;\n            }\n            \n            .info-panel {\n                flex: 1;\n                width: 100%;\n            }\n            \n            header {\n                padding: 20px;\n            }\n            \n            h1 {\n                font-size: 2rem;\n            }\n        }\n        \n        .footer {\n            background: #0f172a;\n            color: white;\n            padding: 25px 40px;\n            text-align: center;\n            font-size: 0.9rem;\n        }\n        \n        .footer a {\n            color: #FF6B35;\n            text-decoration: none;\n        }\n        \n        .footer a:hover {\n            text-decoration: underline;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <h1>Kipukartta<\/h1>\n            <p class=\"subtitle\">Valitse kipe\u00e4 kehonosa alla olevasta kartasta, niin n\u00e4yt\u00e4mme sinulle parhaat hoitomenetelm\u00e4mme<\/p>\n        <\/header>\n        \n        <div class=\"content\">\n            <div class=\"map-container\">\n                <svg class=\"body-map\" viewBox=\"0 0 400 700\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <!-- P\u00e4\u00e4 -->\n                    <path id=\"head\" class=\"body-area\" d=\"M200,50 Q230,80 200,100 Q170,80 200,50\" fill=\"#8ECAE6\" data-service=\"balance\" data-title=\"P\u00e4\u00e4n alueen kivut\" \/>\n                    \n                    <!-- Kaula -->\n                    <path id=\"neck\" class=\"body-area\" d=\"M200,100 L180,130 L220,130 Z\" fill=\"#219EBC\" data-service=\"physiotherapy\" data-title=\"Niskan jume\" \/>\n                    \n                    <!-- Selk\u00e4 -->\n                    <path id=\"back\" class=\"body-area\" d=\"M180,130 L160,200 L160,400 L240,400 L240,200 L220,130 Z\" fill=\"#023047\" data-service=\"physiotherapy\" data-title=\"Selk\u00e4kipu\" \/>\n                    \n                    <!-- K\u00e4det -->\n                    <path id=\"arms\" class=\"body-area\" d=\"M160,200 L120,220 L100,300 L140,320 L160,250 L180,220 Z M240,200 L280,220 L300,300 L260,320 L240,250 L220,220 Z\" fill=\"#FFB703\" data-service=\"massage\" data-title=\"K\u00e4sien ja olkap\u00e4iden kivut\" \/>\n                    \n                    <!-- Jalat -->\n                    <path id=\"legs\" class=\"body-area\" d=\"M160,400 L150,550 L170,650 L190,650 L180,550 L190,400 Z M240,400 L250,550 L230,650 L210,650 L220,550 L210,400 Z\" fill=\"#FB8500\" data-service=\"foot-care\" data-title=\"Jalkakivut\" \/>\n                    \n                    <!-- Yleiset ohjeet -->\n                    <text x=\"200\" y=\"680\" text-anchor=\"middle\" font-family=\"Montserrat\" font-size=\"14\" fill=\"#334155\">Klikkaa kipe\u00e4\u00e4 kehonosaa<\/text>\n                <\/svg>\n            <\/div>\n            \n            <div class=\"info-panel\">\n                <h2>Palveluesittely<\/h2>\n                \n                <div class=\"instructions\">\n                    <p>Valitse kipe\u00e4 kehonosa vasemmalta kuvasta. T\u00e4ss\u00e4 n\u00e4et tarkemmat tiedot palveluistamme ja suosittelemme sinulle sopivimman hoidon.<\/p>\n                <\/div>\n                \n                <div id=\"service-info-container\">\n                    <!-- Palvelutiedot tulevat t\u00e4h\u00e4n dynaamisesti -->\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"footer\">\n            <p>\u00a9 2024 Terveyskulma &#8211; Kinesiocenterin terveyspalvelut | <a href=\"tel:+358107548430\">010 754 8430<\/a> | <a href=\"mailto:asiakaspalvelu@kinesiocenter.com\">asiakaspalvelu@kinesiocenter.com<\/a><\/p>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Palvelutiedot\n        const services = {\n            'balance': {\n                title: 'Balance Method Akupunktio',\n                description: 'Tehokas kivunlievitysmenetelm\u00e4, jossa neulontapisteet valitaan kehon vastakkaisilta vy\u00f6hykkeilt\u00e4. Erityisen tehokas p\u00e4\u00e4ns\u00e4rkyyn, migreeniin ja niskajumeihin.',\n                price: '75\u20ac \/ 30 min',\n                icon: '\ud83e\udde0',\n                benefits: [\n                    'Nopea vaikutus (usein samana p\u00e4iv\u00e4n\u00e4)',\n                    'Ei l\u00e4\u00e4kityst\u00e4 tai leikkausta',\n                    'Sopii my\u00f6s pitk\u00e4aikaiseen kipuun',\n                    'Kehon energiatasapainon palautus'\n                ]\n            },\n            'physiotherapy': {\n                title: 'Fysioterapia & Faskiak\u00e4sittely',\n                description: 'Ammattitaitoinen fysioterapia selk\u00e4- ja niskakipuihin. K\u00e4yt\u00e4mme modernia faskiak\u00e4sittelytekniikkaa, joka keskittyy kudosten v\u00e4listen sidekalvojen rentouttamiseen.',\n                price: '85\u20ac \/ 45 min',\n                icon: '\ud83e\uddb4',\n                benefits: [\n                    'Tehokas jumeiden ja kireyden purkuun',\n                    'Liikkuvuuden ja notkeuden parantaminen',\n                    'R\u00e4\u00e4t\u00e4l\u00f6ity hoitosuunnittelu',\n                    'Vammojen ehk\u00e4isy ja palautumisen tehostaminen'\n                ]\n            },\n            'massage': {\n                title: 'Urheiluhieronta & Jalkahoito',\n                description: 'Syv\u00e4kudoshieronta, joka keskittyy j\u00e4nteisiin ja lihasten tasapainottamiseen. Jalkahoidossa huolehdimme jalkapohjista, kynsist\u00e4 ja verenkiertoa parantavista hoidoista.',\n                price: '65\u20ac \/ 45 min',\n                icon: '\ud83d\udc86\u200d\u2642\ufe0f',\n                benefits: [\n                    'Lihasten rentoutus ja j\u00e4nnityksen purku',\n                    'Verenkiertoa parantava vaikutus',\n                    'Jalkakivun lievitys ja ennaltaehk\u00e4isy',\n                    'Kokonaisvaltainen rentoutus ja hyvinvointi'\n                ]\n            },\n            'foot-care': {\n                title: 'Jalkahoito & Tukipohjalliset',\n                description: 'Ammattitaitoinen jalkahoito kivun lievitykseen ja ennaltaehk\u00e4isyyn. Tarjoamme my\u00f6s Sidas Medical -r\u00e4\u00e4t\u00e4l\u00f6idyt tukipohjalliset, jotka valmistetaan tarkan 3D-askeleanalyysin perusteella.',\n                price: '90\u20ac \/ hoito',\n                icon: '\ud83e\uddb6',\n                benefits: [\n                    'R\u00e4\u00e4t\u00e4l\u00f6idyt tukipohjalliset juuri sinulle',\n                    'Jalka- ja polvikipujen v\u00e4hent\u00e4minen',\n                    'Asentovirheiden korjaus',\n                    'Pitk\u00e4aikainen kivun lievitys'\n                ]\n            }\n        };\n\n        \/\/ Valitse kaikki kehonosat\n        const bodyAreas = document.querySelectorAll('.body-area');\n        const serviceContainer = document.getElementById('service-info-container');\n        \n        \/\/ Alustetaan palveluesittely\n        function initServiceInfo() {\n            serviceContainer.innerHTML = '';\n            \n            \/\/ Lis\u00e4t\u00e4\u00e4n kaikki palvelut\n            for (const serviceKey in services) {\n                if (services.hasOwnProperty(serviceKey)) {\n                    const service = services[serviceKey];\n                    const serviceElement = document.createElement('div');\n                    serviceElement.className = 'service-info';\n                    serviceElement.innerHTML = `\n                        <h3><span class=\"icon\">${service.icon}<\/span> ${service.title}<\/h3>\n                        <p>${service.description}<\/p>\n                        <ul>\n                            ${service.benefits.map(benefit => `<li>${benefit}<\/li>`).join('')}\n                        <\/ul>\n                        <div class=\"service-details\">\n                            <span class=\"price\">${service.price}<\/span>\n                            <button class=\"btn\">Varaa aika<\/button>\n                        <\/div>\n                    `;\n                    serviceContainer.appendChild(serviceElement);\n                    \n                    \/\/ N\u00e4yt\u00e4 kaikki palvelut aluksi\n                    setTimeout(() => {\n                        serviceElement.classList.add('visible');\n                    }, 100);\n                }\n            }\n        }\n        \n        \/\/ Alustetaan kartta\n        function initBodyMap() {\n            bodyAreas.forEach(area => {\n                area.addEventListener('click', function() {\n                    \/\/ Poista aktiivinen luokka kaikilta\n                    bodyAreas.forEach(a => a.classList.remove('active'));\n                    \n                    \/\/ Lis\u00e4\u00e4 aktiivinen luokka valitulle alueelle\n                    this.classList.add('active');\n                    \n                    \/\/ Hae palvelutiedot\n                    const serviceId = this.getAttribute('data-service');\n                    const serviceTitle = this.getAttribute('data-title');\n                    const service = services[serviceId];\n                    \n                    \/\/ P\u00e4ivit\u00e4 palveluesittely\n                    serviceContainer.innerHTML = `\n                        <div class=\"service-info visible\">\n                            <h3><span class=\"icon\">${service.icon}<\/span> ${service.title} - ${serviceTitle}<\/h3>\n                            <p>${service.description}<\/p>\n                            <ul>\n                                ${service.benefits.map(benefit => `<li>${benefit}<\/li>`).join('')}\n                            <\/ul>\n                            <div class=\"service-details\">\n                                <span class=\"price\">${service.price}<\/span>\n                                <button class=\"btn\">Varaa aika<\/button>\n                            <\/div>\n                        <\/div>\n                    `;\n                    \n                    \/\/ Lis\u00e4\u00e4 tapahtumank\u00e4sittelij\u00e4 nappulalle\n                    serviceContainer.querySelector('.btn').addEventListener('click', function() {\n                        alert(`Ajanvaraus palveluun: ${service.title}`);\n                    });\n                });\n            });\n        }\n        \n        \/\/ Alustetaan sivu\n        document.addEventListener('DOMContentLoaded', function() {\n            initServiceInfo();\n            initBodyMap();\n            \n            \/\/ Lis\u00e4\u00e4 tapahtumank\u00e4sittelij\u00e4t ajanvarausnappuloille\n            document.querySelectorAll('.btn').forEach(button => {\n                button.addEventListener('click', function() {\n                    const serviceTitle = this.closest('.service-info').querySelector('h3').textContent;\n                    alert(`Ajanvaraus palveluun: ${serviceTitle}`);\n                });\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kipukartta &#8211; Terveyskulma Kipukartta Valitse kipe\u00e4 kehonosa alla olevasta kartasta, niin n\u00e4yt\u00e4mme sinulle parhaat hoitomenetelm\u00e4mme Klikkaa kipe\u00e4\u00e4 kehonosaa Palveluesittely Valitse kipe\u00e4 kehonosa vasemmalta kuvasta. T\u00e4ss\u00e4 n\u00e4et tarkemmat tiedot palveluistamme ja suosittelemme sinulle sopivimman hoidon. \u00a9 2024 Terveyskulma &#8211; Kinesiocenterin terveyspalvelut | 010 754 8430 | asiakaspalvelu@kinesiocenter.com<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25668","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/posts\/25668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/comments?post=25668"}],"version-history":[{"count":1,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/posts\/25668\/revisions"}],"predecessor-version":[{"id":25669,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/posts\/25668\/revisions\/25669"}],"wp:attachment":[{"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/media?parent=25668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/categories?post=25668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinesiocenter.com\/kopio\/wp-json\/wp\/v2\/tags?post=25668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}