{"id":336,"date":"2026-08-03T13:28:38","date_gmt":"2026-08-03T13:28:38","guid":{"rendered":"https:\/\/euromod.hu\/?page_id=336"},"modified":"2026-08-06T10:57:34","modified_gmt":"2026-08-06T10:57:34","slug":"virtualis-terem","status":"publish","type":"page","link":"https:\/\/euromod.hu\/?page_id=336","title":{"rendered":"Virtu\u00e1lis terem"},"content":{"rendered":"\n<style>\n  .konfigurator-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    background: #f8f9fa;\n    padding: 25px;\n    border-radius: 12px;\n    border: 1px solid #e9ecef;\n    font-family: Arial, sans-serif;\n  }\n  .konfig-kepernyo {\n    flex: 1 1 500px;\n    background: #ffffff;\n    border: 2px solid #dee2e6;\n    border-radius: 8px;\n    min-height: 400px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .konfig-kepernyo img.main-img {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n  .layer-img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    pointer-events: none;\n  }\n  .konfig-panel {\n    flex: 1 1 300px;\n    background: #ffffff;\n    padding: 20px;\n    border-radius: 8px;\n    border: 1px solid #dee2e6;\n  }\n  .konfig-group {\n    margin-bottom: 20px;\n  }\n  .konfig-group h4 {\n    margin-bottom: 10px;\n    color: #212529;\n    font-size: 16px;\n  }\n  .konfig-btn-grid {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  .konfig-btn {\n    padding: 8px 14px;\n    border: 1px solid #ced4da;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 5px;\n    font-size: 14px;\n    transition: all 0.2s;\n  }\n  .konfig-btn:hover {\n    background: #e9ecef;\n  }\n  .konfig-btn.active {\n    background: #0d6efd;\n    color: #fff;\n    border-color: #0d6efd;\n  }\n  .konfig-check-item {\n    display: block;\n    margin-bottom: 8px;\n    font-size: 14px;\n    cursor: pointer;\n  }\n  .konfig-cta {\n    margin-top: 20px;\n    padding-top: 15px;\n    border-top: 2px solid #f1f3f5;\n  }\n  .konfig-submit-btn {\n    width: 100%;\n    padding: 14px;\n    background: #198754;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n  .konfig-submit-btn:hover {\n    background: #157347;\n  }\n<\/style>\n\n<div class=\"konfigurator-wrapper\">\n  <!-- BAL OLDAL: Bemutat\u00f3 ablak (F\u0151 k\u00e9p \u00e9s r\u00e9tegek) -->\n  <div class=\"konfig-kepernyo\">\n    <!-- F\u0150 K\u00c9P: A Mobilh\u00e1z alapmodellje -->\n    <img decoding=\"async\" id=\"main-house-img\" class=\"main-img\" src=\"https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Feher-Ablakos.png\" alt=\"Mobilh\u00e1z Bemutat\u00f3\">\n    \n    <!-- R\u00c1T\u00c9T K\u00c9PEK: Kieg\u00e9sz\u00edt\u0151k (\u00e1tl\u00e1tsz\u00f3 h\u00e1tt\u00e9rrel) -->\n    <img decoding=\"async\" id=\"layer-napelem\" class=\"layer-img\" src=\"https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Solar-panelv-RESIZED.png\" style=\"display:none;\">\n    <img decoding=\"async\" id=\"layer-hoszivattyu\" class=\"layer-img\" src=\"https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Heatpump-RESIZED.png\" style=\"display:none;\">\n    <img decoding=\"async\" id=\"layer-pergola\" class=\"layer-img\" src=\"https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Floor-RESIZED.png\" style=\"display:none;\">\n    <img decoding=\"async\" id=\"layer-terasz\" class=\"layer-img\" src=\"https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Pergola-RESIZED.png\" style=\"display:none;\">\n  <\/div>\n\n  <!-- JOBB OLDAL: Kezel\u0151panel -->\n  <div class=\"konfig-panel\">\n    <h3 style=\"margin-top:0;\">Mobilh\u00e1z Konfigur\u00e1tor<\/h3>\n    <hr style=\"margin-bottom:20px;\">\n    \n    <!-- 1. Homlokzat -->\n    <div class=\"konfig-group\">\n      <h4>1. Homlokzat &amp; \u00dcvegez\u00e9s<\/h4>\n      <div class=\"konfig-btn-grid\">\n        <button type=\"button\" class=\"konfig-btn active\" id=\"btn-glass-ablak\" onclick=\"setGlass('ablak')\">\u00dcvegajt\u00f3 + 2 ablak<\/button>\n        <button type=\"button\" class=\"konfig-btn\" id=\"btn-glass-uveg\" onclick=\"setGlass('uveg')\">Teljes \u00fcveg homlokzat<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- 2. Sz\u00ednek -->\n    <div class=\"konfig-group\">\n      <h4>2. Sz\u00ednv\u00e1laszt\u00e1s<\/h4>\n      <div class=\"konfig-btn-grid\">\n        <button type=\"button\" class=\"konfig-btn active\" id=\"btn-color-feher\" onclick=\"setColor('feher')\">Feh\u00e9r<\/button>\n        <button type=\"button\" class=\"konfig-btn\" id=\"btn-color-antracit\" onclick=\"setColor('antracit')\">Antracit<\/button>\n        <button type=\"button\" class=\"konfig-btn\" id=\"btn-color-tolgy\" onclick=\"setColor('tolgy')\">T\u00f6lgy<\/button>\n        <button type=\"button\" class=\"konfig-btn\" id=\"btn-color-dio\" onclick=\"setColor('dio')\">Di\u00f3<\/button>\n        <button type=\"button\" class=\"konfig-btn\" id=\"btn-color-mahagoni\" onclick=\"setColor('mahagoni')\">Mahag\u00f3ni<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- 3. Kieg\u00e9sz\u00edt\u0151k -->\n    <div class=\"konfig-group\">\n      <h4>3. Kieg\u00e9sz\u00edt\u0151k<\/h4>\n      <label class=\"konfig-check-item\">\n        <input type=\"checkbox\" onchange=\"toggleAddon('layer-napelem', this.checked)\"> Napelem rendszer\n      <\/label>\n      <label class=\"konfig-check-item\">\n        <input type=\"checkbox\" onchange=\"toggleAddon('layer-hoszivattyu', this.checked)\"> H\u0151szivatty\u00fa\n      <\/label>\n      <label class=\"konfig-check-item\">\n        <input type=\"checkbox\" onchange=\"toggleAddon('layer-pergola', this.checked)\"> WPC Terasz \/ Padl\u00f3zat\n      <\/label>\n      <label class=\"konfig-check-item\">\n        <input type=\"checkbox\" onchange=\"toggleAddon('layer-terasz', this.checked)\"> Pergola\n      <\/label>\n    <\/div>\n\n    <!-- Aj\u00e1nlatk\u00e9r\u00e9s -->\n   <div class=\"konfig-cta\">\n  <button type=\"button\" class=\"konfig-submit-btn\" onclick=\"sendConfiguration()\">K\u00e9rj aj\u00e1nlatot erre a konfigur\u00e1ci\u00f3ra<\/button>\n  <p style=\"font-size: 12px; color: #6c757d; text-align: center; margin-top: 10px; margin-bottom: 0;\">\n    \ud83d\udca1 <i>Mobilh\u00e1zaink ak\u00e1r teljes k\u00f6r\u0171 banki hitel\u00fcgyint\u00e9z\u00e9ssel is megv\u00e1s\u00e1rolhat\u00f3k!<\/i>\n  <\/p>\n<\/div>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ K\u00c9PLIST\u00c1K: A WordPress M\u00e9dia k\u00f6nyvt\u00e1rb\u00f3l kim\u00e1solt URL-eket ide kell beillesztened!\n  const houseImages = {\n    'feher_ablak': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Feher-Ablakos.png',\n    'feher_uveg': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Feher-Tele.png',\n    \n    'antracit_ablak': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Antracit-Ablakos.png',\n    'antracit_uveg': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Antra-Tele.png',\n    \n    'tolgy_ablak': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Tolgy-Ablakos.png',\n    'tolgy_uveg': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Tolgy-Tele.png',\n    \n    'dio_ablak': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Dio-Ablakos.png',\n    'dio_uveg': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Dio-Tele.png',\n    \n    'mahagoni_ablak': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Mahagoni-Ablakos.png',\n    'mahagoni_uveg': 'https:\/\/euromod.hu\/wp-content\/uploads\/2026\/08\/Maha-Tele.png'\n  };\n\n  let selectedColor = 'feher';\n  let selectedGlass = 'ablak';\n\n  function updateHouse() {\n    const key = selectedColor + '_' + selectedGlass;\n    if (houseImages[key] && !houseImages[key].includes('IDE_MASOLD')) {\n      document.getElementById('main-house-img').src = houseImages[key];\n    }\n  }\n\n  function setColor(color) {\n    selectedColor = color;\n    document.querySelectorAll('[id^=\"btn-color-\"]').forEach(btn => btn.classList.remove('active'));\n    document.getElementById('btn-color-' + color).classList.add('active');\n    updateHouse();\n  }\n\n  function setGlass(glass) {\n    selectedGlass = glass;\n    document.querySelectorAll('[id^=\"btn-glass-\"]').forEach(btn => btn.classList.remove('active'));\n    document.getElementById('btn-glass-' + glass).classList.add('active');\n    updateHouse();\n  }\n\n  function toggleAddon(layerId, show) {\n    const el = document.getElementById(layerId);\n    if (el) el.style.display = show ? 'block' : 'none';\n  }\nfunction sendConfiguration() {\n  \/\/ 1. \u00d6sszegy\u0171jtj\u00fck a kiv\u00e1lasztott kieg\u00e9sz\u00edt\u0151ket\n  let selectedAddons = [];\n  if (document.querySelector('input[onchange*=\"layer-napelem\"]')?.checked) selectedAddons.push(\"Napelem\");\n  if (document.querySelector('input[onchange*=\"layer-hoszivattyu\"]')?.checked) selectedAddons.push(\"H\u0151szivatty\u00fa\");\n  if (document.querySelector('input[onchange*=\"layer-pergola\"]')?.checked) selectedAddons.push(\"Pergola\");\n  if (document.querySelector('input[onchange*=\"layer-terasz\"]')?.checked) selectedAddons.push(\"WPC Terasz\");\n\n  const addonsText = selectedAddons.length > 0 ? selectedAddons.join(\", \") : \"Nincs kieg\u00e9sz\u00edt\u0151\";\n\n  \/\/ V\u00e1ltoz\u00f3k beolvas\u00e1sa\n  const szin = typeof selectedColor !== 'undefined' ? selectedColor : 'Feh\u00e9r';\n  const uveg = typeof selectedGlass !== 'undefined' ? selectedGlass : 'Ablak';\n\n  const details = `Sz\u00edn: ${szin}, \u00dcvegez\u00e9s: ${uveg}, Kieg\u00e9sz\u00edt\u0151k: ${addonsText}`;\n\n  \/\/ 2. \u00c1tir\u00e1ny\u00edt\u00e1s a kapcsolati oldalra (& jellel \u00f6sszek\u00f6tve!)\n  window.location.href = 'https:\/\/euromod.hu\/?page_id=31&konfiguracio=' + encodeURIComponent(details);\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Mobilh\u00e1z Konfigur\u00e1tor 1. Homlokzat &amp; \u00dcvegez\u00e9s \u00dcvegajt\u00f3 + 2 ablak Teljes \u00fcveg homlokzat 2. Sz\u00ednv\u00e1laszt\u00e1s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-336","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/pages\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/euromod.hu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=336"}],"version-history":[{"count":22,"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/pages\/336\/revisions"}],"predecessor-version":[{"id":424,"href":"https:\/\/euromod.hu\/index.php?rest_route=\/wp\/v2\/pages\/336\/revisions\/424"}],"wp:attachment":[{"href":"https:\/\/euromod.hu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}