CodePen Embed - 23. Inactivity pop-up

Live

Live

Live

This Pen is owned by web.dev on CodePen.

See more by @web-dot-dev on CodePen

External CSS

External JavaScript

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"QWrwLMv\",\"auto_save\":true},\"hashid\":\"QWrwLMv\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/web-dot-dev/pen/XWqWYgB.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/web-dot-dev/pen/XWqWYgB.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/web-dot-dev/pen/ZExZWBQ.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/web-dot-dev/pen/ZExZWBQ.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":62926161,\"user_id\":5928893,\"html\":\"<svg class=\\\"inactivity-ring\\\" viewBox=\\\"0 0 50 50\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n  <circle cx=\\\"25\\\" cy=\\\"25\\\" r=\\\"20\\\" stroke-width=\\\"10\\\" stroke-linejoin=\\\"round\\\" />\\n</svg>\\n<main>\\n  <header>\\n    <h1>Inactivity Pop-up</h1>\\n  </header>\\n  <article>\\n    <p>\\n      <strong>\\n        In this demo, leave the page inactive for 4 seconds, and a pop-up will appear. Inactivity pop-ups are often seen in apps that display secure information. They often tell the user they'll get logged out if the inactivity continues.\\n      </strong>\\n    </p>\\n    <p>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Repellat illo eum hic possimus, libero voluptates, facere nihil deserunt similique error sunt vero minima enim cupiditate quis velit rem ab repellendus.</p>\\n    <p>Neque hic veniam cum voluptates quae magnam quisquam saepe. Dolorum quasi amet officiis vero aliquid pariatur commodi repellendus. Quos iure nobis doloremque ipsum facere nostrum neque adipisci hic labore voluptates?</p>\\n    <p>Mollitia beatae, repellat est laboriosam officiis? Earum veritatis incidunt explicabo id tempora perspiciatis non doloribus natus nisi asperiores quia error autem laudantium, amet doloremque, vitae quos. Soluta unde numquam id.</p>\\n    <p>Recusandae facere esse quod dolorum maxime corrupti ex quam iure id quis eius cumque fugiat, consequatur autem, excepturi molestias libero velit illo a quo. Sed quae aut inventore quia, ipsa.</p>\\n    <p>Eius id laboriosam, quas iure laborum corrupti optio corporis tempore odit laudantium similique, accusamus, vel! Perspiciatis sed saepe rem. Nihil explicabo ea at vitae rerum eum, corrupti ipsam suscipit, id!</p>\\n    <p>Voluptate pariatur, cum praesentium, veniam tenetur distinctio totam voluptates ea beatae, dicta voluptatum illum sit! Earum harum odio natus perspiciatis. Magni eos temporibus harum quas laborum aspernatur, minus, sunt illum.</p>\\n    <p>Ducimus nobis, libero illum commodi aliquid. Molestias beatae ducimus ratione quod, quis itaque ipsum, illum amet labore, nostrum quisquam enim. Sint aperiam qui nihil eaque id quam odio? Repudiandae, sint!</p>\\n    <p>In rem tenetur accusamus accusantium id, officia quaerat atque, placeat architecto nihil unde, sit cupiditate minima tempore! Magni, atque labore. Dolor voluptatum eius incidunt, enim? Asperiores similique, ut amet atque?</p>\\n    <p>Illum, quam fugiat, veniam officia totam nihil aut dolore quo! Officiis ipsa harum vero voluptatibus eaque repudiandae amet eligendi ducimus laboriosam ab maiores labore, odit, voluptas quos illo sint nulla.</p>\\n    <p>Eius earum nihil officiis, inventore accusantium consequuntur dolor reprehenderit in esse quos eos iste nemo amet facere, mollitia, assumenda cum provident quam. Ipsam, vitae! Excepturi quos possimus enim, quia distinctio.</p>\\n  </article>\\n</main>\\n<div id=\\\"inactivity-pop-up\\\" popover>\\n  <div class=\\\"card elevated\\\">\\n    <div class=\\\"title\\\">You've barely touched your HTML</div>\\n    <div class=\\\"subtitle\\\">It'll self-destruct in <span class=\\\"seconds\\\"></span> seconds unless you interact.</div>\\n    <div class=\\\"actions\\\">\\n      <button class=\\\"button filled ripple\\\" popoverhidetarget=\\\"inactivity-pop-up\\\">Keep it</button>\\n      <button class=\\\"button destructive ripple\\\">Destroy it</button>\\n    </div>\\n  </div>\\n</div>\",\"css\":\"@layer demo {\\n  [popover] {\\n    transition: transform 0.2s;\\n    transform: scale(var(--open, 0));\\n    max-width: calc(100% - (2 * var(--size-4)));\\n    overflow: visible;\\n  }\\n\\n  [popover]:open,\\n  [popover]:open::backdrop {\\n    --open: 1;\\n  }\\n\\n  [popover]::backdrop {\\n    transition: opacity 0.2s;\\n    opacity: var(--open, 0);\\n    background: hsl(0 0% 10% / 0.5);\\n  }\\n\\n  .seconds {\\n    font-weight: var(--font-weight-9);\\n  }\\n\\n  .card {\\n    min-width: 0;\\n  }\\n\\n  .card .actions {\\n    justify-content: flex-end;\\n    gap: 1ch;\\n  }\\n\\n  .inactivity-ring {\\n    fill: none;\\n    position: fixed;\\n    top: var(--size-4);\\n    right: var(--size-4);\\n    color: var(--red-6);\\n    width: 40px;\\n    aspect-ratio: 1;\\n    stroke-dasharray: 130;\\n    stroke-dashoffset: 130;\\n    transform: rotate(-90deg);\\n    z-index: 20;\\n  }\\n\\n  .inactivity-ring circle {\\n    stroke: currentColor;\\n  }\\n\\n  .timing .inactivity-ring {\\n    animation: load calc(var(--threshold) * 1ms) linear;\\n  }\\n\\n  .button.destructive {\\n    background: var(--md-sys-color-error);\\n    color: var(--md-sys-color-surface);\\n  }\\n\\n  .button.destructive:is(:hover, :focus) {\\n    background: var(--red-6);\\n  }\\n\\n  @keyframes load {\\n    to {\\n      stroke-dashoffset: 0;\\n    }\\n  }\\n}\\n\\n@layer base {\\n  *,\\n  *:after,\\n  *:before {\\n    box-sizing: border-box;\\n    /*cursor: none;*/\\n    touch-action: none;\\n  }\\n\\n  body {\\n    display: block;\\n    min-height: 100vh;\\n    font-family: \\\"Google Sans\\\", sans-serif, system-ui;\\n    overflow: auto;\\n  }\\n\\n  :where([popover]) {\\n    margin: auto;\\n    border-width: 0;\\n    border-style: none;\\n    background: transparent;\\n  }\\n\\n  h1 {\\n    margin: 0;\\n    color: var(--gray-0);\\n  }\\n\\n  header {\\n    height: 25vmin;\\n    min-height: 200px;\\n    background: var(--gradient-2);\\n    display: grid;\\n    place-items: center;\\n    color: var(--gray-0);\\n    padding: var(--size-4);\\n    grid-template-columns: 1fr;\\n  }\\n\\n  main {\\n    margin: 0 auto;\\n  }\\n\\n  article {\\n    padding: var(--size-4);\\n    display: flex;\\n    flex-direction: column;\\n    align-items: center;\\n  }\\n\\n  article > * + * {\\n    margin-top: var(--size-4);\\n  }\\n}\\n\",\"js\":\"const POPUP = document.querySelector(\\\"#inactivity-pop-up\\\");\\nconst RING = document.querySelector(\\\"svg\\\");\\nconst BUTTON = document.querySelector(\\\"button.destructive\\\");\\n\\nconst SCREENSAVER_THRESHOLD = 4000;\\nconst DESTRUCTIVE_THRESHOLD = 9;\\n\\nlet checker;\\nlet screensaverTimeout;\\nlet secondsInterval;\\nconst EVENT_TYPES = [\\n  \\\"pointermove\\\",\\n  \\\"keypress\\\",\\n  \\\"keydown\\\",\\n  \\\"keyup\\\",\\n  \\\"scroll\\\",\\n  \\\"click\\\"\\n];\\n\\nconst setSaverTimer = () => {\\n  if (screensaverTimeout) {\\n    clearTimeout(screensaverTimeout);\\n    document.body.classList.remove(\\\"timing\\\");\\n  }\\n\\n  if (!POPUP.matches(\\\":open\\\")) {\\n    screensaverTimeout = setTimeout(() => {\\n      document.body.classList.remove(\\\"timing\\\");\\n      POPUP.showPopover();\\n    }, SCREENSAVER_THRESHOLD);\\n    requestAnimationFrame(() => {\\n      document.body.classList.add(\\\"timing\\\");\\n    });\\n  }\\n};\\n\\nconst destroy = () => {\\n  if (secondsInterval) clearInterval(secondsInterval);\\n\\n  document.body.style = `\\n    display: grid;\\n    place-items: center;\\n  `;\\n  document.body.innerHTML = \\\"<p>it's gone...</p>\\\";\\n\\n  if (screensaverTimeout) {\\n    clearTimeout(screensaverTimeout);\\n    document.body.classList.remove(\\\"timing\\\");\\n  }\\n\\n  EVENT_TYPES.forEach((e) =>\\n    document.body.removeEventListener(e, setSaverTimer)\\n  );\\n};\\n\\ndocument.body.classList.add(\\\"timing\\\");\\ndocument.documentElement.style.setProperty(\\n  \\\"--threshold\\\",\\n  SCREENSAVER_THRESHOLD\\n);\\n\\nconst SECONDS = document.querySelector(\\\".seconds\\\");\\n\\nPOPUP.addEventListener(\\\"beforetoggle\\\", ({ newState }) => {\\n  if (newState === \\\"closed\\\") {\\n    if (POPUP.parentNode) setSaverTimer();\\n    if (secondsInterval) clearInterval(secondsInterval);\\n  } else {\\n    SECONDS.innerText = DESTRUCTIVE_THRESHOLD;\\n    secondsInterval = setInterval(() => {\\n      SECONDS.innerText -= 1;\\n      if (parseInt(SECONDS.innerText, 10) === 0) destroy();\\n    }, 1000);\\n  }\\n});\\n\\nBUTTON.addEventListener(\\\"click\\\", destroy);\\n\\nsetSaverTimer();\\n\\nEVENT_TYPES.forEach((e) => document.body.addEventListener(e, setSaverTimer));\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"popup-support\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-09-03T20:21:43.832Z\",\"updated_at\":\"2023-01-19T11:26:41.110Z\",\"title\":\"23. Inactivity pop-up\",\"description\":\"\",\"slug_hash\":\"QWrwLMv\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01830504-2f18-7587-bb08-f2e5b87d0350\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-f0d5935eb4c2121dfc41.js"}