<!DOCTYPE html>
<html>
  <head>
    <title>Calendar</title>
    <link rel="shortcut icon" href="https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico">
    <style>
      * {
        font-family: Sans-Serif;
      }
      
      @keyframes iframeNoticeDisappear {
        0%, 95% {
          height: calc(100vh - 24px);
        }
        
        100% {
          height: 100vh;
        }
      }
      
      @keyframes betaNoticeDisappear {
        0%, 95% {
          opacity: 1;
        }
        
        100% {
          opacity: 0.3;
        }
      }
      
      html {
        background: black;
      }
    
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
      }
      
      a {
        color: rgb(200,200,240);
      }
      
      iframe {
        outline: none;
        border: none;
        width: 100vw;
        height: 100vh;
        position: absolute;
        animation: iframeNoticeDisappear 10s ease;
        bottom: 0;
        z-index: 1;
        transition: 0.2s ease;
      }
      
      .betaNotice {
        margin: 0;
        margin-top: 2px;
        max-height: 24px;
        background: black;
        position: fixed;
        color: white;
        text-align: center;
        opacity: 0.2;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100vw;
        transition: 0.2s ease;
        animation: betaNoticeDisappear 10s ease;
      }
      
      .betaNotice:hover {
        opacity: 1;
      }
      
      .noticeFrame {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 2;
        color: white;
        backdrop-filter: blur(12px) brightness(90%);
        -webkit-backdrop-filter: blur(12px) brightness(90%);
        
        .notice {
          background: rgba(120,120,140,0.5);
          padding: 12px;
          border-radius: 12px;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: 0.2s ease opacity;
          opacity: 1;
          
          button {
            font-size: 18px;
            border-radius: 16px;
            padding: 12px;
            border: 3px solid rgba(130,130,150, 0.5);
            background: rgba(125,125,145,0.5);
            color: inherit;
            cursor: pointer;
            width: 100%;
            transition: 0.2s ease;
          }
          
          button:hover {
            background: rgba(130,130,150, 0.7);
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="noticeFrame" id="noticeFrame">
      <div class="notice">
        <h2>By using our website, you agree to the ButterDogCo <a href="https://butterdogceo.github.io/bdogco/tos" target="_blank">Terms of Service</a> and <a href="https://butterdogceo.github.io/bdogco/pp" target="_blank">Privacy Policy</a>.</h2>
        <button onclick="agree()">Agree and Continue</button>
      </div>
    </div>
    <p class="betaNotice">Please note that ButterDog Chat is in a very early version, many features are subject to change. Report bugs here: <a href="https://forms.gle/C4sHpJ2jPsratpnY7">https://forms.gle/C4sHpJ2jPsratpnY7</a></p>
    <iframe id="iframe"></iframe>
    <script>
      let iframe = document.getElementById("iframe");
      let homeUrl = "https://butterdog-chat-ultra-deluxe.fly.dev/";
      let noticeFrame = document.getElementById("noticeFrame");
      
      function agree() {
        localStorage.setItem("agreed", "true");
        noticeFrame.style.opacity = 0;
        setTimeout(function() {
          noticeFrame.style.display = "none";
        }, 200);
      }
      
      if (localStorage.getItem("agreed") == "true") {
        agree();
      }
      
      iframe.src = homeUrl;
    </script>
  </body>
</html>