<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Embed Site with Fullscreen</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
    iframe {
      width: 100%;
      height: 80%;
      border: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    button {
      margin-top: 10px;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      background-color: #007BFF;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
    }
    button:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }
    button:active {
      background-color: #003f7f;
      transform: scale(1);
    }
  </style>
</head>
<body>
  <!-- The embedded iframe on the main page -->
  <iframe id="embeddedSite" src="https://gothbr4dn.github.io/Slope-Source-code/" title="Slope"></iframe>

  <!-- The button that opens a new tab (or window) -->
  <button id="newTabButton">Play in Full Screen</button>

  <script>
    const iframe = document.getElementById('embeddedSite');
    const newTabButton = document.getElementById('newTabButton');

    newTabButton.addEventListener('click', () => {
      // Get current src of our main-page iframe
      const siteUrl = iframe.src;

      // Open a new blank tab/window
      const newWindow = window.open();

      // Write the HTML (with the resizing script) into that new tab
      newWindow.document.write(`
        <!DOCTYPE html>
        <html lang='en'>
        <head>
          <meta charset='UTF-8'>
          <meta name='viewport' content='width=device-width, initial-scale=1.0'>
          <title> </title>
          <style>
            html, body {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
            }
            iframe {
              border: none;
              width: 100vw;
              height: 100vh;
            }
          </style>
        </head>
        <body>
          <!-- Our dynamically sized iframe -->
          <iframe id='dynamicIframe' src='${siteUrl}'></iframe>

          <script>
            function resizeIframe() {
              const iframe = document.getElementById('dynamicIframe');
              iframe.style.width = window.innerWidth + 'px';
              iframe.style.height = window.innerHeight + 'px';
            }

            // Resize on window resize and fullscreen changes
            window.addEventListener('resize', resizeIframe);
            window.addEventListener('fullscreenchange', resizeIframe);

            // Initial sizing
            resizeIframe();
          <\/script>
        </body>
        </html>
      `);

      // Close the document stream so the new tab can render
      newWindow.document.close();
    });
  </script>
</body>
</html>