Webleb - UI Elements

HTML

<!DOCTYPE html>

<html lang="en">
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@5374d57e9cee53129e2a4b730a63b8a6322e81de/iron%20snout/" </base>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta charset="utf-8" />
  <title>Iron Snout</title>
  <style>
    body {
      background: #C0C0C0;
      color: #cccccc;
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

canvas {
      image-rendering: optimizeSpeed;
      -webkit-interpolation-mode: nearest-neighbor;
      -ms-touch-action: none;
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

:-webkit-full-screen #canvas {
      width: 100%;
      height: 100%;
    }

div.gm4html5_div_class {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

/* START - Login Dialog Box */
    div.gm4html5_login {
      padding: 20px;
      position: absolute;
      border: solid 2px #000000;
      background-color: #404040;
      color: #00ff00;
      border-radius: 15px;
      box-shadow: #101010 20px 20px 40px;
    }

div.gm4html5_cancel_button {
      float: right;
    }

div.gm4html5_login_button {
      float: left;
    }

div.gm4html5_login_header {
      text-align: center;
    }

/* END - Login Dialog Box */
    :-webkit-full-screen {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="gm4html5_div_class" id="gm4html5_div_id">
    
    <canvas id="canvas" width="640" height="400">
      <p>Your browser doesn't support HTML5 canvas.</p>
    </canvas>
  </div>

<script type="text/javascript" src="html5game/IronSnout.js?TGDYB=1698209485"></script>
</body>

</html>

CSS

JS