PTT ask/over18 dialog

ptt.ask18.html

<script id="template-ask18" type="text/template">
  <div class="bbs-screen bbs-content">
    <div class="over18-notice">
      <p>本網站已依網站內容分級規定處理</p>
      <p>警告︰您即將進入之看板內容需滿十八歲方可瀏覽。</p>
      <p>若您尚未年滿十八歲，請點選離開。若您已滿十八歲，亦不可將本區之內容派發、傳閱、出售、出租、交給或借予年齡未滿18歲的人士瀏覽，或將本網站內容向該人士出示、播放或放映。</p>
    </div>
  </div>
  <div class="bbs-screen bbs-content center clear">
    <div class="over18-button-container">
      <button class="btn-big btn-yes">我同意，我已年滿十八歲<br><small>進入</small></button>
    </div>
    <div class="over18-button-container">
      <button class="btn-big btn-no">未滿十八歲或不同意本條款<br><small>離開</small></button>
    </div>
  </div>
</script>
<script>
(() => {
  if (document.cookie.indexOf('over18=1') !== -1) {
    return;
  }

  const div = document.createElement('div');

  div.innerHTML = document.getElementById('template-ask18').textContent;
  div.style.cssText = 'position: fixed; inset: 0; z-index: 100; background: black; max-height: 100vh; overflow-y: auto';

  div.querySelector('.btn-yes').addEventListener('click', () => {
    document.cookie = 'over18=1; path=/';
    document.body.removeChild(div);
  });

  div.querySelector('.btn-no').addEventListener('click', () => {
    location = '/';
  });

  document.body.appendChild(div);
})();
</script>