{"id":106,"date":"2025-10-21T08:47:33","date_gmt":"2025-10-21T03:47:33","guid":{"rendered":"https:\/\/lpyatayeva.me\/?page_id=106"},"modified":"2025-10-21T14:56:23","modified_gmt":"2025-10-21T09:56:23","slug":"interactivemanara","status":"publish","type":"page","link":"https:\/\/lpyatayeva.me\/index.php\/interactivemanara\/","title":{"rendered":"InteractiveManara"},"content":{"rendered":"<div class=\"et_d4_element et_pb_section et_pb_section_0  et_pb_css_mix_blend_mode et_section_regular et_block_section\" >\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_d4_element et_pb_row et_pb_row_0  et_pb_css_mix_blend_mode et_block_row\">\n\t\t\t\t<div class=\"et_d4_element et_pb_column_4_4 et_pb_column et_pb_column_0  et_pb_css_mix_blend_mode et-last-child et_block_column\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_pb_module et_d4_element et_pb_code et_pb_code_0\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_pb_code_inner\"><style>\n.tl-block {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  margin-bottom: 40px;\n}\n.tl-card {\n  width: 160px;\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n.tl-card img {\n  width: 100%;\n  border-radius: 10px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n}\n.tl-card:hover { transform: translateY(-4px); }\n.tl-card.selected { transform: scale(1.05); opacity: 0.85; pointer-events: none; }\n.tl-card.disabled { opacity: 0.4; pointer-events: none; }\n\n.tl-popup-overlay {\n  position: fixed;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(0,0,0,0.8);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999999 !important;\n  pointer-events: all;\n  isolation: isolate;             \/* \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 *\/\n  transform: translateZ(0);       \/* \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 Divi *\/\n  will-change: transform;\n}\n\n\n.tl-popup-overlay.active { display: flex; }\n.tl-popup {\n  background: #fff;\n  border-radius: 12px;\n  padding: 20px;\n  max-width: 420px;\n  width: 90%;\n  text-align: center;\n  max-height: 90vh;          \/* \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u043e\u043a\u043d\u0430 *\/\n  overflow-y: auto;          \/* \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b *\/\n  box-sizing: border-box;    \/* \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b *\/\n  position: relative;        \/* \u0434\u043b\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 *\/\n}\n\n.tl-popup img {\n  max-width: 100%;\n  max-height: 50vh;     \/* \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u2014 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 *\/\n  height: auto;\n  border-radius: 8px;\n  margin-bottom: 15px;\n  object-fit: contain;  \/* \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0431\u0435\u0437 \u043e\u0431\u0440\u0435\u0437\u043a\u0438 *\/\n}\n\n.tl-popup .desc { margin-top: 15px; font-size: 15px; color: #222; }\n.button-close {\n  margin-top: 20px; padding: 10px 20px;\n  background: #222; color: #fff; border: none;\n  border-radius: 6px; cursor: pointer; font-size: 15px;\n  transition: background .3s;\n}\n.button-close:hover { background: #444; }\n\n#show-result {\n  display: none; margin: 40px auto; background: #111; color: #fff;\n  border: none; border-radius: 8px; padding: 12px 24px; cursor: pointer;\n  font-size: 16px; transition: background .3s;\n}\n#show-result:hover { background: #333; }\n\n#final-result {\n  display: none; margin-top: 30px; background: #f6f6f6;\n  padding: 20px; border-radius: 10px; font-size: 16px; line-height: 1.5;\n  white-space: pre-wrap;\n}\n<\/style>\n\n<!-- \u0411\u041b\u041e\u041a\u0418 -->\n<div id=\"blocks-wrapper\">\n  <!-- \u0411\u043b\u043e\u043a 1 -->\n  <div class=\"tl-block\" data-block=\"1\">\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/08Fire.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 1A\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/04Fire.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 1B\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/11Strength.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 1C\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n  <\/div>\n  <!-- \u0411\u043b\u043e\u043a 2 -->\n  <div class=\"tl-block\" data-block=\"2\" style=\"display:none;\">\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/04Emperor.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 2A\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/16Tower.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 2B\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/18Moon.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 2C\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n  <\/div>\n  <!-- \u0411\u043b\u043e\u043a 3 -->\n  <div class=\"tl-block\" data-block=\"3\" style=\"display:none;\">\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/EarthKnave.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 3A\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/09Fire.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 3B\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/07Water.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 3C\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n  <\/div>\n  <!-- \u0411\u043b\u043e\u043a 4 -->\n  <div class=\"tl-block\" data-block=\"4\" style=\"display:none;\">\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/WaterKnight.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 4A\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/08Water.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 4B\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/WaterQueen.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 4C\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n  <\/div>\n  <!-- \u0411\u043b\u043e\u043a 5 -->\n  <div class=\"tl-block\" data-block=\"5\" style=\"display:none;\">\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/05Earth.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 5A\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/03Empress.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 5B\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n    <div class=\"tl-card\" data-front=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/09Earth.gif\" data-desc=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 5C\"><img decoding=\"async\" src=\"https:\/\/lpyatayeva.me\/wp-content\/uploads\/2025\/10\/Cover.gif\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- \u041f\u043e\u043f\u0430\u043f -->\n<div class=\"tl-popup-overlay\" id=\"popup\">\n  <div class=\"tl-popup\">\n    <img decoding=\"async\" src=\"\" alt=\"card face\" id=\"popup-img\">\n    <div class=\"desc\" id=\"popup-desc\"><\/div>\n    <button id=\"popup-close\" class=\"button-close\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c<\/button>\n  <\/div>\n<\/div>\n\n<!-- \u0418\u0442\u043e\u0433 -->\n<button id=\"show-result\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/button>\n<div id=\"final-result\"><\/div>\n\n<script>\n(function(){\n  const blocks = document.querySelectorAll('.tl-block');\n  const popup = document.getElementById('popup');\n  const popupImg = document.getElementById('popup-img');\n  const popupDesc = document.getElementById('popup-desc');\n  const closeBtn = document.getElementById('popup-close');\n  const resultBtn = document.getElementById('show-result');\n  const resultBox = document.getElementById('final-result');\n  const totalBlocks = blocks.length;\n  const selections = {};\n  let activeCard = null;\n\n  \/\/ \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u043f\u043e \u043d\u043e\u043c\u0435\u0440\u0443\n  function showBlock(num){\n    const block = document.querySelector(`.tl-block[data-block=\"${num}\"]`);\n    if(block){ block.style.display='flex'; block.scrollIntoView({behavior:'smooth', block:'center'}); }\n  }\n\n  \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u043f\u0430\u043f\n  function openPopup(card, blockNum){\n    const front = card.dataset.front;\n    const desc = card.dataset.desc;\n    popupImg.src = front;\n    popupDesc.textContent = desc;\n    popup.classList.add('active');\n    activeCard = { card, blockNum, front, desc };\n  }\n\n  \/\/ \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u043f\u0430\u043f\n  function closePopup(){\n    popup.classList.remove('active');\n    if(!activeCard) return;\n    const {card, blockNum, front, desc} = activeCard;\n    card.querySelector('img').src = front;\n    card.classList.add('selected');\n    selections[blockNum] = desc;\n    activeCard = null;\n\n    \/\/ \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0432 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435\n    document.querySelectorAll(`.tl-block[data-block=\"${blockNum}\"] .tl-card`).forEach(c=>{\n      if(c!==card) c.classList.add('disabled');\n    });\n\n    \/\/ \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a\n    if(blockNum < totalBlocks) showBlock(blockNum + 1);\n    else {\n      \/\/ \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0431\u043b\u043e\u043a \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\n      resultBtn.style.display = 'block';\n      resultBtn.scrollIntoView({behavior:'smooth', block:'center'});\n    }\n  }\n\n  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438\n  document.querySelectorAll('.tl-card').forEach(card=>{\n    card.addEventListener('click', ()=>{\n      const blockNum = parseInt(card.closest('.tl-block').dataset.block,10);\n      if(selections[blockNum]) return; \/\/ \u0443\u0436\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\n      openPopup(card, blockNum);\n    });\n  });\n\n  closeBtn.addEventListener('click', closePopup);\n  popup.addEventListener('click', e => { if(e.target===popup) closePopup(); });\n\n  \/\/ \u0438\u0442\u043e\u0433\n  resultBtn.addEventListener('click', ()=>{\n    if(Object.keys(selections).length < totalBlocks){\n      alert('\u041f\u0440\u043e\u0439\u0434\u0438 \u0432\u0441\u0435 \u0431\u043b\u043e\u043a\u0438, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.');\n      return;\n    }\n    const result = Object.values(selections).join('\\n\\n');\n    resultBox.textContent = result;\n    resultBox.style.display='block';\n    resultBox.scrollIntoView({behavior:'smooth', block:'center'});\n  });\n  \/\/ \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043f\u043e\u043f\u0430\u043f \u0432 \u043a\u043e\u043d\u0435\u0446 body \u2014 \u0432\u044b\u0448\u0435 \u0432\u0441\u0435\u0445 div \u043e\u0442 Divi\ndocument.body.appendChild(document.getElementById('popup'));\n\n})();\n<\/script>\n<\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"_links":{"self":[{"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/pages\/106"}],"collection":[{"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":20,"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/pages\/106\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/lpyatayeva.me\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}