https://spectacular-toffee-5ae61f.netlify.app/

Scan ID:
ce79caf7-1441-4c3f-a254-5b3d0d1bb0b0Finished
Submitted URL:
https://spectacular-toffee-5ae61f.netlify.app/
Report Finished:

JavaScript Variables · 4 found

NameType
0object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject

Console log messages · 1 found

TypeCategoryLog
errornetwork
URL
https://spectacular-toffee-5ae61f.netlify.app/favicon.ico
Text
Failed to load resource: the server responded with a status of 404 ()

HTML

<!DOCTYPE html><html lang="en"><head><style>.ͼ1.cm-focused {outline: 1px dotted #212121;}
.ͼ1 {position: relative !important; box-sizing: border-box; display: flex !important; flex-direction: column;}
.ͼ1 .cm-scroller {display: flex !important; align-items: flex-start !important; font-family: monospace; line-height: 1.4; height: 100%; overflow-x: auto; position: relative; z-index: 0;}
.ͼ1 .cm-content[contenteditable=true] {-webkit-user-modify: read-write-plaintext-only;}
.ͼ1 .cm-content {margin: 0; flex-grow: 2; flex-shrink: 0; display: block; white-space: pre; word-wrap: normal; box-sizing: border-box; padding: 4px 0; outline: none;}
.ͼ1 .cm-lineWrapping {white-space: pre-wrap; white-space: break-spaces; word-break: break-word; overflow-wrap: anywhere; flex-shrink: 1;}
.ͼ2 .cm-content {caret-color: black;}
.ͼ3 .cm-content {caret-color: white;}
.ͼ1 .cm-line {display: block; padding: 0 2px 0 6px;}
.ͼ1 .cm-layer > * {position: absolute;}
.ͼ1 .cm-layer {position: absolute; left: 0; top: 0; contain: size style;}
.ͼ2 .cm-selectionBackground {background: #d9d9d9;}
.ͼ3 .cm-selectionBackground {background: #222;}
.ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {background: #d7d4f0;}
.ͼ3.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {background: #233;}
.ͼ1 .cm-cursorLayer {pointer-events: none;}
.ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer {animation: steps(1) cm-blink 1.2s infinite;}
@keyframes cm-blink {50% {opacity: 0;}}
@keyframes cm-blink2 {50% {opacity: 0;}}
.ͼ1 .cm-cursor, .ͼ1 .cm-dropCursor {border-left: 1.2px solid black; margin-left: -0.6px; pointer-events: none;}
.ͼ1 .cm-cursor {display: none;}
.ͼ3 .cm-cursor {border-left-color: #444;}
.ͼ1 .cm-dropCursor {position: absolute;}
.ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor {display: block;}
.ͼ2 .cm-activeLine {background-color: #cceeff44;}
.ͼ3 .cm-activeLine {background-color: #99eeff33;}
.ͼ2 .cm-specialChar {color: red;}
.ͼ3 .cm-specialChar {color: #f78;}
.ͼ1 .cm-gutters {flex-shrink: 0; display: flex; height: 100%; box-sizing: border-box; left: 0; z-index: 200;}
.ͼ2 .cm-gutters {background-color: #f5f5f5; color: #6c6c6c; border-right: 1px solid #ddd;}
.ͼ3 .cm-gutters {background-color: #333338; color: #ccc;}
.ͼ1 .cm-gutter {display: flex !important; flex-direction: column; flex-shrink: 0; box-sizing: border-box; min-height: 100%; overflow: hidden;}
.ͼ1 .cm-gutterElement {box-sizing: border-box;}
.ͼ1 .cm-lineNumbers .cm-gutterElement {padding: 0 3px 0 5px; min-width: 20px; text-align: right; white-space: nowrap;}
.ͼ2 .cm-activeLineGutter {background-color: #e2f2ff;}
.ͼ3 .cm-activeLineGutter {background-color: #222227;}
.ͼ1 .cm-panels {box-sizing: border-box; position: sticky; left: 0; right: 0;}
.ͼ2 .cm-panels {background-color: #f5f5f5; color: black;}
.ͼ2 .cm-panels-top {border-bottom: 1px solid #ddd;}
.ͼ2 .cm-panels-bottom {border-top: 1px solid #ddd;}
.ͼ3 .cm-panels {background-color: #333338; color: white;}
.ͼ1 .cm-tab {display: inline-block; overflow: hidden; vertical-align: bottom;}
.ͼ1 .cm-widgetBuffer {vertical-align: text-top; height: 1em; width: 0; display: inline;}
.ͼ1 .cm-placeholder {color: #888; display: inline-block; vertical-align: top;}
.ͼ1 .cm-highlightSpace:before {content: attr(data-display); position: absolute; pointer-events: none; color: #888;}
.ͼ1 .cm-highlightTab {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>'); background-size: auto 100%; background-position: right 90%; background-repeat: no-repeat;}
.ͼ1 .cm-trailingSpace {background-color: #ff332255;}
.ͼ1 .cm-button {vertical-align: middle; color: inherit; font-size: 70%; padding: .2em 1em; border-radius: 1px;}
.ͼ2 .cm-button:active {background-image: linear-gradient(#b4b4b4, #d0d3d6);}
.ͼ2 .cm-button {background-image: linear-gradient(#eff1f5, #d9d9df); border: 1px solid #888;}
.ͼ3 .cm-button:active {background-image: linear-gradient(#111, #333);}
.ͼ3 .cm-button {background-image: linear-gradient(#393939, #111); border: 1px solid #888;}
.ͼ1 .cm-textfield {vertical-align: middle; color: inherit; font-size: 70%; border: 1px solid silver; padding: .2em .5em;}
.ͼ2 .cm-textfield {background-color: white;}
.ͼ3 .cm-textfield {border: 1px solid #555; background-color: inherit;}
.ͼ1 .cm-selectionMatch {background-color: #99ff7780;}
.ͼ1 .cm-searchMatch .cm-selectionMatch {background-color: transparent;}
.ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li, .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {padding: 1px 3px; line-height: 1.2;}
.ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li {overflow-x: hidden; text-overflow: ellipsis; cursor: pointer;}
.ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {display: list-item; border-bottom: 1px solid silver; padding-left: 0.5em; opacity: 0.7;}
.ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul {font-family: monospace; white-space: nowrap; overflow: hidden auto; max-width: 700px; max-width: min(700px, 95vw); min-width: 250px; max-height: 10em; height: 100%; list-style: none; margin: 0; padding: 0;}
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {background: #17c; color: white;}
.ͼ2 .cm-tooltip-autocomplete-disabled ul li[aria-selected] {background: #777;}
.ͼ3 .cm-tooltip-autocomplete ul li[aria-selected] {background: #347; color: white;}
.ͼ3 .cm-tooltip-autocomplete-disabled ul li[aria-selected] {background: #444;}
.ͼ1 .cm-completionListIncompleteTop:before, .ͼ1 .cm-completionListIncompleteBottom:after {content: "···"; opacity: 0.5; display: block; text-align: center;}
.ͼ1 .cm-tooltip.cm-completionInfo {position: absolute; padding: 3px 9px; width: max-content; max-width: 400px; box-sizing: border-box;}
.ͼ1 .cm-completionInfo.cm-completionInfo-left {right: 100%;}
.ͼ1 .cm-completionInfo.cm-completionInfo-right {left: 100%;}
.ͼ1 .cm-completionInfo.cm-completionInfo-left-narrow {right: 30px;}
.ͼ1 .cm-completionInfo.cm-completionInfo-right-narrow {left: 30px;}
.ͼ2 .cm-snippetField {background-color: #00000022;}
.ͼ3 .cm-snippetField {background-color: #ffffff22;}
.ͼ1 .cm-snippetFieldPosition {vertical-align: text-top; width: 0; height: 1.15em; display: inline-block; margin: 0 -0.7px -.7em; border-left: 1.4px dotted #888;}
.ͼ1 .cm-completionMatchedText {text-decoration: underline;}
.ͼ1 .cm-completionDetail {margin-left: 0.5em; font-style: italic;}
.ͼ1 .cm-completionIcon {font-size: 90%; width: .8em; display: inline-block; text-align: center; padding-right: .6em; opacity: 0.6; box-sizing: content-box;}
.ͼ1 .cm-completionIcon-function:after, .ͼ1 .cm-completionIcon-method:after {content: 'ƒ';}
.ͼ1 .cm-completionIcon-class:after {content: '○';}
.ͼ1 .cm-completionIcon-interface:after {content: '◌';}
.ͼ1 .cm-completionIcon-variable:after {content: '𝑥';}
.ͼ1 .cm-completionIcon-constant:after {content: '𝐶';}
.ͼ1 .cm-completionIcon-type:after {content: '𝑡';}
.ͼ1 .cm-completionIcon-enum:after {content: '∪';}
.ͼ1 .cm-completionIcon-property:after {content: '□';}
.ͼ1 .cm-completionIcon-keyword:after {content: '🔑︎';}
.ͼ1 .cm-completionIcon-namespace:after {content: '▢';}
.ͼ1 .cm-completionIcon-text:after {content: 'abc'; font-size: 50%; vertical-align: middle;}
.ͼ1 .cm-tooltip {z-index: 100; box-sizing: border-box;}
.ͼ2 .cm-tooltip {border: 1px solid #bbb; background-color: #f5f5f5;}
.ͼ2 .cm-tooltip-section:not(:first-child) {border-top: 1px solid #bbb;}
.ͼ3 .cm-tooltip {background-color: #333338; color: white;}
.ͼ1 .cm-tooltip-arrow:before, .ͼ1 .cm-tooltip-arrow:after {content: ''; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;}
.ͼ1 .cm-tooltip-above .cm-tooltip-arrow:before {border-top: 7px solid #bbb;}
.ͼ1 .cm-tooltip-above .cm-tooltip-arrow:after {border-top: 7px solid #f5f5f5; bottom: 1px;}
.ͼ1 .cm-tooltip-above .cm-tooltip-arrow {bottom: -7px;}
.ͼ1 .cm-tooltip-below .cm-tooltip-arrow:before {border-bottom: 7px solid #bbb;}
.ͼ1 .cm-tooltip-below .cm-tooltip-arrow:after {border-bottom: 7px solid #f5f5f5; top: 1px;}
.ͼ1 .cm-tooltip-below .cm-tooltip-arrow {top: -7px;}
.ͼ1 .cm-tooltip-arrow {height: 7px; width: 14px; position: absolute; z-index: -1; overflow: hidden;}
.ͼ3 .cm-tooltip .cm-tooltip-arrow:before {border-top-color: #333338; border-bottom-color: #333338;}
.ͼ3 .cm-tooltip .cm-tooltip-arrow:after {border-top-color: transparent; border-bottom-color: transparent;}
.ͼ1.cm-focused .cm-matchingBracket {background-color: #328c8252;}
.ͼ1.cm-focused .cm-nonmatchingBracket {background-color: #bb555544;}
.ͼ1 .cm-foldPlaceholder {background-color: #eee; border: 1px solid #ddd; color: #888; border-radius: .2em; margin: 0 1px; padding: 0 1px; cursor: pointer;}
.ͼ1 .cm-foldGutter span {padding: 0 1px; cursor: pointer;}
.ͼ16 {color: #6272a4;}
.ͼ17 {color: #f1fa8c;}
.ͼ18 {color: #bd93f9;}
.ͼ19 {color: #f8f8f2;}
.ͼ1a {color: #ff79c6;}
.ͼ1b {color: #66d9ef;}
.ͼ1c {color: #50fa7b;}
.ͼ1d {color: #bd93f9;}
.ͼ15 .cm-gutters {background-color: #282a36; color: #6D8A88; border-right-color: transparent;}
.ͼ15 {background-color: #282a36; color: #f8f8f2;}
.ͼ15 .cm-content {caret-color: #f8f8f0;}
.ͼ15 .cm-cursor, .ͼ15 .cm-dropCursor {border-left-color: #f8f8f0;}
.ͼ15 .cm-activeLine {background-color: rgba(255, 255, 255, 0.1);}
.ͼ15 .cm-activeLineGutter {background-color: rgba(255, 255, 255, 0.1);}
.ͼ15.cm-focused .cm-selectionBackground, .ͼ15 .cm-selectionLayer .cm-selectionBackground, .ͼ15 .cm-content ::selection {background-color: rgba(255, 255, 255, 0.1);}
.ͼ15 .cm-selectionMatch {background-color: rgba(255, 255, 255, 0.2);}
.ͼ5 {color: #404740;}
.ͼ6 {text-decoration: underline;}
.ͼ7 {text-decoration: underline; font-weight: bold;}
.ͼ8 {font-style: italic;}
.ͼ9 {font-weight: bold;}
.ͼa {text-decoration: line-through;}
.ͼb {color: #708;}
.ͼc {color: #219;}
.ͼd {color: #164;}
.ͼe {color: #a11;}
.ͼf {color: #e40;}
.ͼg {color: #00f;}
.ͼh {color: #30a;}
.ͼi {color: #085;}
.ͼj {color: #167;}
.ͼk {color: #256;}
.ͼl {color: #00c;}
.ͼm {color: #940;}
.ͼn {color: #f00;}
.ͼ1m {height: ; min-height: ; max-height: ; width: ; min-width: ; max-width: ;}
.ͼ1k {height: ; min-height: ; max-height: ; width: ; min-width: ; max-width: ;}
.ͼ1i {height: ; min-height: ; max-height: ; width: ; min-width: ; max-width: ;}
.ͼ4 .cm-line ::selection {background-color: transparent !important;}
.ͼ4 .cm-line::selection {background-color: transparent !important;}
.ͼ4 .cm-line {caret-color: transparent !important;}
</style><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#000000"><meta name="Popup demo" content="Popup demo"><title>Popup demo</title><script defer="defer" src="/static/js/main.73383ac2.js"></script><link href="/static/css/main.cb933097.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="app"><div class="Toastify"><div class="Toastify__toast-container Toastify__toast-container--top-center"><div id="1" class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify__toast--close-on-click" style="--nth: 1; --len: 1;"><div role="alert" class="Toastify__toast-body"><div>Editors have been reset!</div></div><button class="Toastify__close-button Toastify__close-button--light" type="button" aria-label="close"><svg aria-hidden="true" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"></path></svg></button><div role="progressbar" aria-hidden="false" aria-label="notification timer" class="Toastify__progress-bar Toastify__progress-bar--animated Toastify__progress-bar-theme--light Toastify__progress-bar--default" style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"></div></div></div></div><div class="app-inner-container"><div class="editor__container"><div class="header tab-button-container mb-3"><div><button class="btn btn-primary mr-3">HTML</button></div><div><button class="btn btn-primary mr-3">CSS</button></div><div><button class="btn btn-primary mr-6">JavaScript</button></div><div><button class="btn btn-primary">Reset editors</button></div></div><div class="editor-container"><div class="cm-theme" options="[object Object]"><div class="cm-editor ͼ1 ͼ3 ͼ4 ͼ1m ͼ15"><div aria-live="polite" style="position: fixed; top: -10000px;"></div><div tabindex="-1" class="cm-scroller"><div class="cm-gutters" aria-hidden="true" style="min-height: 2081.38px; position: sticky;"><div class="cm-gutter cm-lineNumbers"><div class="cm-gutterElement" style="height: 0px; visibility: hidden; pointer-events: none;">999</div><div class="cm-gutterElement cm-activeLineGutter" style="height: 18.1875px; margin-top: 4px;">1</div><div class="cm-gutterElement" style="height: 18.1875px;">2</div><div class="cm-gutterElement" style="height: 18.1875px;">3</div><div class="cm-gutterElement" style="height: 18.1875px;">4</div><div class="cm-gutterElement" style="height: 18.1875px;">5</div><div class="cm-gutterElement" style="height: 18.1875px;">6</div><div class="cm-gutterElement" style="height: 18.1875px;">7</div><div class="cm-gutterElement" style="height: 18.1875px;">8</div><div class="cm-gutterElement" style="height: 18.1875px;">9</div><div class="cm-gutterElement" style="height: 18.1875px;">10</div><div class="cm-gutterElement" style="height: 18.1875px;">11</div><div class="cm-gutterElement" style="height: 18.1875px;">12</div><div class="cm-gutterElement" style="height: 18.1875px;">13</div><div class="cm-gutterElement" style="height: 18.1875px;">14</div><div class="cm-gutterElement" style="height: 18.1875px;">15</div><div class="cm-gutterElement" style="height: 18.1875px;">16</div><div class="cm-gutterElement" style="height: 18.1875px;">17</div><div class="cm-gutterElement" style="height: 18.1875px;">18</div><div class="cm-gutterElement" style="height: 18.1875px;">19</div><div class="cm-gutterElement" style="height: 18.1875px;">20</div><div class="cm-gutterElement" style="height: 18.1875px;">21</div><div class="cm-gutterElement" style="height: 18.1875px;">22</div><div class="cm-gutterElement" style="height: 18.1875px;">23</div><div class="cm-gutterElement" style="height: 18.1875px;">24</div><div class="cm-gutterElement" style="height: 18.1875px;">25</div><div class="cm-gutterElement" style="height: 18.1875px;">26</div><div class="cm-gutterElement" style="height: 18.1875px;">27</div><div class="cm-gutterElement" style="height: 18.1875px;">28</div><div class="cm-gutterElement" style="height: 18.1875px;">29</div><div class="cm-gutterElement" style="height: 18.1875px;">30</div><div class="cm-gutterElement" style="height: 18.1875px;">31</div><div class="cm-gutterElement" style="height: 18.1875px;">32</div><div class="cm-gutterElement" style="height: 18.1875px;">33</div><div class="cm-gutterElement" style="height: 18.1875px;">34</div><div class="cm-gutterElement" style="height: 18.1875px;">35</div><div class="cm-gutterElement" style="height: 18.1875px;">36</div></div><div class="cm-gutter cm-foldGutter"><div class="cm-gutterElement" style="height: 0px; visibility: hidden; pointer-events: none;"><span title="Unfold line">›</span></div><div class="cm-gutterElement cm-activeLineGutter" style="height: 18.1875px; margin-top: 4px;"></div><div class="cm-gutterElement" style="height: 18.1875px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px; margin-top: 72.75px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px; margin-top: 54.5625px;"><span title="Fold line">⌄</span></div><div class="cm-gutterElement" style="height: 18.1875px; margin-top: 200.062px;"><span title="Fold line">⌄</span></div></div></div><div spellcheck="false" autocorrect="off" autocapitalize="off" translate="no" contenteditable="true" class="cm-content" style="tab-size: 4;" role="textbox" aria-multiline="true" data-language="html" aria-autocomplete="list"><div class="cm-activeLine cm-line"><span class="ͼ19">&lt;!DOCTYPE html&gt;</span></div><div class="cm-line">&lt;<span class="ͼ1a">html</span> <span class="ͼ1c">lang</span><span class="ͼ1a">=</span><span class="ͼ17">"en"</span>&gt;</div><div class="cm-line">  &lt;<span class="ͼ1a">head</span>&gt;</div><div class="cm-line">    &lt;<span class="ͼ1a">meta</span> <span class="ͼ1c">charset</span><span class="ͼ1a">=</span><span class="ͼ17">"UTF-8"</span> /&gt;</div><div class="cm-line">    &lt;<span class="ͼ1a">meta</span> <span class="ͼ1c">name</span><span class="ͼ1a">=</span><span class="ͼ17">"viewport"</span> <span class="ͼ1c">content</span><span class="ͼ1a">=</span><span class="ͼ17">"width=device-width, initial-scale=1.0"</span> /&gt;</div><div class="cm-line">    &lt;<span class="ͼ1a">title</span>&gt;Popup demo&lt;/<span class="ͼ1a">title</span>&gt;</div><div class="cm-line">  &lt;/<span class="ͼ1a">head</span>&gt;</div><div class="cm-line">  &lt;<span class="ͼ1a">body</span>&gt;</div><div class="cm-line">    &lt;<span class="ͼ1a">div</span> <span class="ͼ1c">id</span><span class="ͼ1a">=</span><span class="ͼ17">"app"</span>&gt;</div><div class="cm-line">      &lt;<span class="ͼ1a">div</span> <span class="ͼ1c">class</span><span class="ͼ1a">=</span><span class="ͼ17">"cookie"</span>&gt;</div><div class="cm-line">        &lt;<span class="ͼ1a">button</span>&gt;Clear cookie&lt;/<span class="ͼ1a">button</span>&gt;</div><div class="cm-line">        &lt;<span class="ͼ1a">small</span>&gt;After clearing cookie you need to refresh the page.&lt;/<span class="ͼ1a">small</span>&gt;</div><div class="cm-line">      &lt;/<span class="ͼ1a">div</span>&gt;</div><div class="cm-line">      &lt;<span class="ͼ1a">p</span>&gt;</div><div class="cm-line">        Aliquam erat volutpat. Maecenas lorem. Nam sed tellus id magna elementum</div><div class="cm-line">        tincidunt. Nullam at arcu a est sollicitudin euismod. Itaque earum rerum</div><div class="cm-line">        hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores</div><div class="cm-line">        alias consequatur aut perferendis doloribus asperiores repellat. Aliquam</div><div class="cm-line">        erat volutpat. Cras pede libero, dapibus nec, pretium sit amet, tempor</div><div class="cm-line">        quis. Donec iaculis gravida nulla. Aliquam in lorem sit amet leo</div><div class="cm-line">        accumsan lacinia. Curabitur bibendum justo non orci. Quis autem vel eum</div><div class="cm-line">        iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae</div><div class="cm-line">        consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla</div><div class="cm-line">        pariatur? In dapibus augue non sapien.</div><div class="cm-line">      &lt;/<span class="ͼ1a">p</span>&gt;</div><div class="cm-line">      &lt;<span class="ͼ1a">p</span>&gt;</div><div class="cm-line">        Aliquam erat volutpat. Maecenas lorem. Nam sed tellus id magna elementum</div><div class="cm-line">        tincidunt. Nullam at arcu a est sollicitudin euismod. Itaque earum rerum</div><div class="cm-line">        hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores</div><div class="cm-line">        alias consequatur aut perferendis doloribus asperiores repellat. Aliquam</div><div class="cm-line">        erat volutpat. Cras pede libero, dapibus nec, pretium sit amet, tempor</div><div class="cm-line">        quis. Donec iaculis gravida nulla. Aliquam in lorem sit amet leo</div><div class="cm-line">        accumsan lacinia. Curabitur bibendum justo non orci. Quis autem vel eum</div><div class="cm-line">        iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae</div><div class="cm-line">        consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla</div><div class="cm-line">        pariatur? In dapibus augue non sapien.</div><div contenteditable="false" style="height: 1418.62px;"></div></div><div class="cm-layer cm-layer-above cm-cursorLayer" aria-hidden="true" style="z-index: 150; animation-duration: 1200ms;"><div class="cm-cursor cm-cursor-primary" style="left: 48px; top: 5px; height: 15px;"></div></div><div class="cm-layer cm-selectionLayer" aria-hidden="true" style="z-index: -2;"></div></div></div></div></div></div><div class="preview__container"><div class="header mb-3 header__dimensions" style="width: 700px;"><p>700x400</p></div><iframe id="preview__iframe" srcdoc="
          <html>
            <body><!DOCTYPE html>
<html lang=&quot;en&quot;>
  <head>
    <meta charset=&quot;UTF-8&quot; />
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; />
    <title>Popup demo</title>
  </head>
  <body>
    <div id=&quot;app&quot;>
      <div class=&quot;cookie&quot;>
        <button>Clear cookie</button>
        <small>After clearing cookie you need to refresh the page.</small>
      </div>
      <p>
        Aliquam erat volutpat. Maecenas lorem. Nam sed tellus id magna elementum
        tincidunt. Nullam at arcu a est sollicitudin euismod. Itaque earum rerum
        hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores
        alias consequatur aut perferendis doloribus asperiores repellat. Aliquam
        erat volutpat. Cras pede libero, dapibus nec, pretium sit amet, tempor
        quis. Donec iaculis gravida nulla. Aliquam in lorem sit amet leo
        accumsan lacinia. Curabitur bibendum justo non orci. Quis autem vel eum
        iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
        consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
        pariatur? In dapibus augue non sapien.
      </p>
      <p>
        Aliquam erat volutpat. Maecenas lorem. Nam sed tellus id magna elementum
        tincidunt. Nullam at arcu a est sollicitudin euismod. Itaque earum rerum
        hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores
        alias consequatur aut perferendis doloribus asperiores repellat. Aliquam
        erat volutpat. Cras pede libero, dapibus nec, pretium sit amet, tempor
        quis. Donec iaculis gravida nulla. Aliquam in lorem sit amet leo
        accumsan lacinia. Curabitur bibendum justo non orci. Quis autem vel eum
        iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
        consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
        pariatur? In dapibus augue non sapien.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <p>
        Aliquam erat volutpat. Aliquam erat volutpat. Etiam commodo dui eget
        wisi. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Mauris
        suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel
        sagittis velit mauris vel metus. Duis sapien nunc, commodo et, interdum
        suscipit, sollicitudin et, dolor. Nam sed tellus id magna elementum
        tincidunt. Nullam justo enim, consectetuer nec, ullamcorper ac,
        vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id,
        malesuada in, quam.
      </p>
      <div id=&quot;showPopUp&quot;></div>
    </div>
    <script>
    /* DO NOT USE CODE BELOW, IT WAS MADE ONLY FOR DEMO PURPOSES */
      function getRandomURL(){const urls=['https://placehold.co/500x200','https://placehold.co/320x100'];const randomIndex=Math.floor(Math.random()*urls.length);return urls[randomIndex];} class FakeSSP{getAds(props){const {id}=props[0];const fakeBanner=getRandomURL();const popupElement=document.querySelector(`#${id}`);if(popupElement){popupElement.innerHTML=`<img class=&quot;banner-img&quot; style=&quot;${fakeBanner.split('/')[3].split('x')[0] > window.parent.document.querySelector('#preview__iframe').offsetWidth ? 'display: block; width: 100%; height: &quot;auto&quot;' : ''}&quot; src=&quot;${fakeBanner}&quot;alt=&quot;reklama&quot;/>`;}}displaySeznamAds(){return true;}}const  sssp=new FakeSSP();const resetCookie=(name)=>{document.cookie=name+&quot;=&quot;+false+&quot;;Path=/;&quot;;};const cookie=document.querySelector(&quot;.cookie&quot;);cookie.addEventListener(&quot;click&quot;,()=>{resetCookie(&quot;seznam-pop-up-ad-first-look&quot;);});
    /* DO NOT USE CODE ABOVE, IT WAS MADE ONLY FOR DEMO PURPOSES */
    </script>
  </body>
</html>

</body>
            <style>:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
  
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
  
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }
  
  a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit;
  }
  a:hover {
    color: #535bf2;
  }
  
  body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
  }
  
  h1 {
    font-size: 3.2em;
    line-height: 1.1;
  }
  
  #app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  
  .cookie {
    position: fixed;
    top: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: #fff;
    background-color: #000;
    z-index: 9999;
  }
  
  .cookie p {
    margin: 1rem;
  }
  
  @media (prefers-color-scheme: light) {
    :root {
      color: #213547;
      background-color: #ffffff;
    }
    a:hover {
      color: #747bff;
    }
    button {
      background-color: #f9f9f9;
    }
  }
  
</style>
            <script>function getPopUp(breakPoint, onScrollElementId, zoneId) {
    // check if exist cookie with name &quot;cname&quot;
    function getCookie(cname) {
        var name = cname + &quot;=&quot;;
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(&quot;;&quot;);

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == &quot; &quot;) {
                c = c.substring(1);
            }

            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }

        return &quot;&quot;;
    }

    // set cookie with 30 min expiration
    function setCookie(value) {
        var d = new Date();
        d.setTime(d.getTime() + 30 * 60 * 1000);
        var expires = &quot;expires=&quot; + d.toUTCString();

        document.cookie =
            &quot;seznam-pop-up-ad-first-look=&quot; + value + &quot;;&quot; + expires + &quot;;path=/&quot;;
    }

    // add necessary styles to head of page
    function appendStyles() {
        var css =
            &quot;#seznam-pop-up-ad{ position: fixed; height: auto; width: 100%; background: rgba(0,0,0,.7);bottom: 0; left: 0; right: 0;  text-align: center; padding: 2px 0; z-index: 1001; transition: height 0.5s; }&quot; +
            &quot;#seznam-pop-up-ad-close{background: rgba(0,0,0,.7); margin-top: -31px; position: absolute; top: 0; right: 0; color: #fff; cursor: pointer; text-align: center; padding: 8px; height: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1; width: 140px; }&quot; +
            &quot;.seznam-pop-up-ad-hide{ height: 0 !important; padding: 0!important; margin: 0!important;}&quot;;
        var style = document.createElement(&quot;style&quot;);
        style.innerHTML = css;
        document.head.appendChild(style);
    }

    // create Ad divs
    function createAdDivs() {
        var div = document.createElement(&quot;div&quot;);
        div.setAttribute(&quot;id&quot;, &quot;seznam-pop-up-ad&quot;);
        div.innerHTML =
            '<div id=&quot;seznam-pop-up-ad-close&quot;>zavřít reklamu</div>' +
            '<div id=&quot;ssp-zone-' +
            zoneId +
            '&quot; style=&quot;margin: 0 auto;&quot;></div>';
        document.body.appendChild(div);
    }

    // hide Ad
    function hideAd() {
        document
            .getElementById(&quot;seznam-pop-up-ad&quot;)
            .classList.add(&quot;seznam-pop-up-ad-hide&quot;);
        document.getElementById(&quot;seznam-pop-up-ad-close&quot;).style.display = &quot;none&quot;;
    }

    if (
        window.innerWidth <= breakPoint &amp;&amp;
        sssp.displaySeznamAds() &amp;&amp;
        document.getElementById(onScrollElementId)
    ) {
        if (!getCookie(&quot;seznam-pop-up-ad-first-look&quot;)) setCookie(false);
        appendStyles();
        window.addEventListener(&quot;scroll&quot;, function() {
            var createdAd = document.getElementById(&quot;seznam-pop-up-ad&quot;);
            var elementTarget = document.getElementById(onScrollElementId);

            if (window.scrollY > elementTarget.offsetTop - window.innerHeight) {
                if (
                    !createdAd &amp;&amp;
                    getCookie(&quot;seznam-pop-up-ad-first-look&quot;) === &quot;false&quot;
                ) {
                    setCookie(true);
                    createAdDivs();

                    sssp.getAds([{
                        zoneId: zoneId,
                        id: &quot;ssp-zone-&quot; + zoneId,
                        width: 500,
                        height: 200,
                        options: {
                            infoCallback: (ad) => {
                                if (ad.type === &quot;empty&quot; || ad.type === &quot;error&quot;) {
                                    document.getElementById(&quot;seznam-pop-up-ad&quot;).style.display =
                                        &quot;none&quot;;
                                }
                            },
                            reloadCount: 0
                        }
                    }]);
                }

                if (document.getElementById(&quot;seznam-pop-up-ad-close&quot;)) {
                    document
                        .getElementById(&quot;seznam-pop-up-ad-close&quot;)
                        .addEventListener(&quot;click&quot;, function() {
                            hideAd();
                        });
                }
            }
        });
    }
}
getPopUp(700, &quot;showPopUp&quot;, 169446); //parametry první Width, druhý ID elementu, třetí ZoneID  
</script>
          </html>
        " title="output" width="700" height="400" style="width: 700px; height: 400px;"></iframe></div></div></div></div></body></html>