hyperframes/docs/public/catalog/blocks/lower-third-bild.json

{"html":"<!doctype html>\n<html lang=\"en\">\n  <head><base href=\"/public/catalog/items/lower-third-bild/\">\n    <meta charset=\"UTF-8\" />\n    <style>\n      @font-face {\n        font-family: \"Barlow Condensed\";\n        font-style: normal;\n        font-weight: 700;\n        font-display: block;\n        src: url(\"/public/catalog/assets/75b7b8e878ea0c33.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"Barlow Condensed\";\n        font-style: normal;\n        font-weight: 800;\n        font-display: block;\n        src: url(\"/public/catalog/assets/2e5732c61470a890.woff2\") format(\"woff2\");\n      }\n    </style>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #lb-root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      #lb-main-outer {\n        position: absolute;\n        bottom: 215px;\n        left: 80px;\n        padding-right: 14px;\n        padding-bottom: 14px;\n      }\n\n      #lb-main-text {\n        font-family: \"Barlow Condensed\", sans-serif;\n        font-size: 88px;\n        font-weight: 800;\n        line-height: 1.05;\n        color: #212529;\n        background: #ffffff;\n        padding: 10px 22px 8px;\n        white-space: nowrap;\n        text-transform: uppercase;\n        letter-spacing: 0.02em;\n        box-shadow: 12px 12px 0 0 #dd0000;\n      }\n\n      #lb-sub-outer {\n        position: absolute;\n        bottom: 135px;\n        left: 80px;\n        padding-right: 10px;\n        padding-bottom: 10px;\n      }\n\n      #lb-sub-text {\n        font-family: \"Barlow Condensed\", sans-serif;\n        font-size: 48px;\n        font-weight: 700;\n        line-height: 1.1;\n        color: #ffffff;\n        background: #dd0000;\n        padding: 6px 18px 5px;\n        white-space: nowrap;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        box-shadow: 8px 8px 0 0 #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"lb-root\"\n      data-composition-id=\"lower-third-bild\"\n      data-composition-variables='[{\"id\":\"TXT_MAIN_1_Line\",\"type\":\"string\",\"label\":\"Main line\",\"default\":\"BILD EXKLUSIV\"},{\"id\":\"TXT_SUB\",\"type\":\"string\",\"label\":\"Sub line\",\"default\":\"Sonderbericht\"}]'\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div\n        id=\"lb-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n\n      <div id=\"lb-main-outer\">\n        <div id=\"lb-main-text\"></div>\n      </div>\n\n      <div id=\"lb-sub-outer\">\n        <div id=\"lb-sub-text\"></div>\n      </div>\n\n      <script>\n        (function () {\n          window.__timelines = window.__timelines || {};\n\n          var vars =\n            window.__hyperframes && window.__hyperframes.getVariables\n              ? window.__hyperframes.getVariables()\n              : {};\n\n          var mainText = (vars.TXT_MAIN_1_Line || \"BILD EXKLUSIV\").trim();\n          var subText = (vars.TXT_SUB || \"Sonderbericht\").trim();\n\n          var dur = parseFloat(document.getElementById(\"lb-drv\").dataset.duration) || 8;\n\n          document.getElementById(\"lb-main-text\").textContent = mainText;\n          document.getElementById(\"lb-sub-text\").textContent = subText || \" \";\n\n          var mainOuter = document.getElementById(\"lb-main-outer\");\n          var subOuter = document.getElementById(\"lb-sub-outer\");\n\n          var tl = gsap.timeline({ paused: true });\n\n          gsap.set([mainOuter, subOuter], { opacity: 1 });\n\n          tl.set([mainOuter, subOuter], { opacity: 0, visibility: \"hidden\" }, dur);\n\n          window.__timelines[\"lower-third-bild\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}