Skip to content
Snippets Groups Projects
Select Git revision
  • 9948bd1c72586de06c38f1a4659876bb3987315b
  • master default protected
2 results

index.html

Blame
    • index.html 4.01 KiB 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Matrix of Life</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link href="styles.css" rel="stylesheet">
</head>

<body class="w-100 h-100 d-flex align-items-center" data-bs-theme="dark">

  <div class="container justify-content-center">

    <div class="col-lg-4 offset-lg-4">

      <div class="card">
        <h5 class="card-header">
          Matrix of Life <div id="spinner" class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </h5>
        <div class="card-body text-center">

          <div class="row mb-3 px-3">
            <div id="colorpicker" class="d-flex justify-content-center"></div>
          </div>
          <div class="row mb-3 px-3">
            <label for="rangeBrightness" class="col-form-label">Brightness</label>
            <input type="range" class="form-range rangeSetting" id="rangeBrightness" data-name="brightness" min="1"
              max="100" steps="1" disabled>
          </div>
          <div class="row mb-3 px-3">
            <label for="rangeSpeed" class="col-form-label">Speed</label>
            <input type="range" class="form-range rangeSetting" id="rangeSpeed" data-name="interval" min="1" max="100"
              steps="10" disabled>
          </div>
          <div class="row mb-3 px-3 mt-5">
            <button type="button" class="btn btn-primary btnAction" data-action="addGlider" disabled>Add
              Glider</button>
          </div>

        </div>

        <div class="card-footer text-body-secondary py-3">
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-sm btn-success btnAction me-1" data-action="loadSettings"
                disabled>Load</button>
              <button type="button" class="btn btn-sm btn-success btnAction" data-action="saveSettings"
                disabled>Save</button>
            </div>
            <div class="col-6 text-end">
              <button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
                data-bs-target="#debug">Debug</button>
              <button type="button" class="btn btn-sm btn-danger btnAction" data-action="reboot"
                disabled>Reboot</button>
            </div>
          </div>
        </div>

      </div>

    </div> <!-- main -->

    <div class="col-lg-4 offset-lg-4 mt-3 collapse" id="debug">

      <div class="card">
            <h5 class="card-header">
          Debug
        </h5>
        <div class="card-body">

          <textarea id="wsMessages" class="form-control mb-2 font-monospace" rows="10" spellcheck="false"></textarea>
          <div id="input_div">
            <div class="input-group">
              <span class="input-group-text">➡️</span>
              <input type="text" id="prompt" class="form-control form-control-sm fs-6 font-monospace">
            </div>

          </div>

        </div>
      </div>

    </div> <!-- debug -->

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <script
    src="https://cdn.jsdelivr.net/gh/jbloemendal/jquery-simple-websocket@master/dist/jquery.simple.websocket.min.js"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5.5.2/dist/iro.min.js"
    integrity="sha256-XQju26ya9yEvX99+M2rrLah6xHsjZIGK1LvX/L3RjQ0=" crossorigin="anonymous"></script>
  <script src="main.js"></script>

</body>

</html>