Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@1102f068fff0083d2a5ed979ebac6425540d78a5/undertale/" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link rel="icon" type="x-icon" href="favicon.png" />
    <title>UNDERTALE</title>
    <script src="/js/mobile.js"></script>
    <style>
      @-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }

to {
          -webkit-transform: rotate(360deg);
        }
      }

@-moz-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
        }

to {
          -moz-transform: rotate(360deg);
        }
      }

@-o-keyframes rotation {
        from {
          -o-transform: rotate(0deg);
        }

to {
          -o-transform: rotate(360deg);
        }
      }

@keyframes rotation {
        from {
          transform: rotate(0deg);
        }

to {
          transform: rotate(360deg);
        }
      }

html {
        background: #ffffff;
      }

body {
        font-family: arial;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: fill-available;
        min-height: 100vh; /* Otherwise contents can be covered by an address bar in Safari on iOS 15 */
        min-width: 100vw;
        background: radial-gradient(56.63% 56.63% at 50% 43.37%, transparent 0%, transparent 100%);
        background-color: black;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        place-items: center;
      }

body.scrollingDisabled {
        overflow: hidden;
      }

.emscripten {
        padding-right: 0;
        display: block;
      }

div.emscripten {
        text-align: center;
        font-family: 'Lucida Console', Monaco, monospace;
      }

/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten {
        display: none;
        background-color: black;
        position: flex;
        transition: opacity 5s ease-in;
        -webkit-transition: opacity 5s ease-in;
        opacity: 0;
        filter: blur(0) grayscale(0);
        image-rendering: optimizeSpeed; /* Older versions of FF          */
        image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
        image-rendering: -webkit-optimize-contrast; /* Safari                        */
        image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
        image-rendering: pixelated; /* Awesome future-browsers       */
        -ms-interpolation-mode: nearest-neighbor; /* IE                            */
      }

canvas.active {
        animation-name: fadeIn;
        animation-duration: 2s;
        opacity: 1;
      }

canvas.paused {
        animation-name: blur;
        animation-duration: 0.5s;
        filter: blur(2px) grayscale(1);
      }

canvas.unpaused {
        animation-name: none;
      }

canvas.animatedSizeTransitions {
        transition: width 0.3s ease, height 0.3s ease;
      }

@keyframes fadeIn {
        0% {
          opacity: 0;
        }

100% {
          opacity: 1;
        }
      }

@keyframes blur {
        0% {
          filter: blur(0) grayscale(0);
        }

100% {
          filter: blur(2px) grayscale(1);
        }
      }

.spinner {
        height: 30px;
        width: 30px;

-webkit-animation: rotation 0.8s linear infinite;
        -moz-animation: rotation 0.8s linear infinite;
        -o-animation: rotation 0.8s linear infinite;
        animation: rotation 0.8s linear infinite;

border: 5px solid #bdff00;
        border-top: 5px solid #719900;
        border-radius: 100%;
      }

#status {
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        color: white;
      }

#progress {
        width: 250px;
        height: 10px;
        -webkit-appearance: none;
        appearance: none;
        padding: 5px;
      }

/* Determines the style of the background of the progress bar */
      progress[value]::-webkit-progress-bar {
        background-color: #8492a6;
        height: 10px;
        border-radius: 15px;
      }
      /* Determines the style of the completed part of the progress bar */
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(left, #719900, #bdff00);
        height: 10px;
        border-radius: 15px;
      }

div.loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }
      div.loading > * {
        padding: 10px;
        margin: 10px;
      }

.output-container {
        text-align: center;
        margin-top: auto;
      }
      .output-button {
        border: none;
        width: 200px;
        height: 25px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
        background-color: black;
        color: white;
        outline-color: #20c20e;
        outline-style: dashed;
        font-family: 'Lucida Console', Monaco, monospace;
      }

#output {
        display: none;
        height: 200px;
        background-color: black;
        color: white;
        font-family: 'Lucida Console', Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
      }

#message-container {
        display: none;
        min-height: 50px;
        background-color: rgba(20, 20, 20, 0.5);
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
        position: absolute;
        top: 0;
      }

#messages {
        margin-left: 50px;
        color: white;
        font-family: 'Lucida Console', Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
      }

img.qrCode {
        opacity: 1;
        width: 50%;
        height: 50%;
      }

#pauseMenuContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

#pauseMenuContainer[hidden] {
        display: none !important;
        opacity: 0;
      }

#pauseMenuBorder {
        background: linear-gradient(135deg, #fa1e4e, transparent 40%);
        padding: 1px;
        border-radius: 4px;
        clip-path: polygon(10.5px 0, 100% 0, 100% 100%, 0 100%, 0 10.5px);
        width: 70vw;
        max-width: 400px;
      }

#pauseMenu {
        display: flex;
        flex-direction: column;
        padding: 60px 30px 60px 30px;
        background: linear-gradient(180deg, #2e273f 16.15%, rgba(46, 39, 63, 0.79) 56.25%, #2e273f 91.15%);
        border-radius: 4px;
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
        animation-name: fadeIn;
        animation-duration: 0.5s;
        opacity: 1;
      }

#pauseMenu button {
        font-weight: 500;
        font-size: 17px;
        color: white;
        background: #fa1e4e;
        border: 1px solid #fa1e4e;
        border-radius: 6px;
        padding: 12px 24px;
        margin: 5px 0;
        -webkit-user-select: none;
        user-select: none;
      }

#pauseMenu button#quitButton {
        background: #fa1e4e40;
      }

#pauseMenu button:hover {
        filter: brightness(1.15);
      }

#pauseMenu button:active {
        filter: brightness(0.85);
      }

#pauseMenu button[hidden] {
        display: none;
      }
    </style>
  </head>
  <body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"> </canvas>
    <div id="pauseMenuContainer" hidden>
      <div id="pauseMenuBorder">
        <div id="pauseMenu">
          <button id="resumeButton" onclick="resume()">Resume</button>
          <button id="quitButton" onclick="quitIfSupported()">Quit</button>
        </div>
      </div>
    </div>
    <div class="loading">
      <div class="spinner" id="spinner"></div>
      <div class="emscripten" id="status">Downloading...</div>

<div id="message-container">
      <div id="messages"></div>
    </div>
    <script>
      function mergeFiles(fileParts) {
        return new Promise((resolve, reject) => {
          let buffers = []

function fetchPart(index) {
            if (index >= fileParts.length) {
              let mergedBlob = new Blob(buffers)
              let mergedFileUrl = URL.createObjectURL(mergedBlob)
              resolve(mergedFileUrl)
              return
            }
            fetch(fileParts[index])
              .then((response) => {
                if (!response.ok) {
                  throw new Error('Failed to load part ' + (index + 1) + ': HTTP ' + response.status)
                }
                return response.arrayBuffer()
              })
              .then((data) => {
                console.log('Loaded part', index + 1, 'size:', data.byteLength)
                buffers.push(data)
                document.getElementById('progress').value = ((index + 1) / fileParts.length) * 100
                document.getElementById('status').innerText =
                  'Downloading... ' + Math.round(((index + 1) / fileParts.length) * 100) + '%'
                fetchPart(index + 1)
              })
              .catch(reject)
          }
          fetchPart(0)
        })
      }

function getParts(file, start, end) {
        let parts = []
        for (let i = start; i <= end; i++) {
          parts.push(file + '.part' + i)
        }
        return parts
      }

mergeFiles(getParts('game.unx', 1, 5))
        .then(async (url) => {
          window.gameUnxUrl = url

const originalFetch = window.fetch
          window.fetch = async function (...args) {
            let [url, options] = args
            if (typeof url === 'string' && url.includes('game.unx')) {
              console.log('fetch:', url)
              url = window.gameUnxUrl
            } else if (url instanceof Request && url.url.includes('game.unx')) {
              console.log('fetch request:', url.url)
              url = new Request(window.gameUnxUrl, url)
            }
            return originalFetch.call(this, url, options)
          }

const originalOpen = XMLHttpRequest.prototype.open
          XMLHttpRequest.prototype.open = function (method, url, ...rest) {
            if (url.includes('game.unx')) {
              console.log('XHR:', url)
              url = window.gameUnxUrl
            }
            return originalOpen.call(this, method, url, ...rest)
          }
          let index = document.createElement('script')
          index.src = 'index.js'
          document.body.appendChild(index)

let runner = document.createElement('script')
          runner.src = 'runner.js'
          document.body.appendChild(runner)
        })
        .catch((error) => {
          console.error('Failed to merge files:', error)
        })
    </script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"aaf6d32a02dd44fd95a497458a06ef11","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html><!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@1102f068fff0083d2a5ed979ebac6425540d78a5/undertale/" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link rel="icon" type="x-icon" href="favicon.png" />
    <title>UNDERTALE</title>
    <script src="/js/mobile.js"></script>
    <style>
      @-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }