Skip to content
Snippets Groups Projects
Select Git revision
  • 65ffedd64a695a2360c0703a486ff159791fd19d
  • master default protected
2 results

index.html

Blame
  • index.html 9.56 KiB
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <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">
      <style>
        html {
          width: 100%;
          min-height: 100%;
        }
    
        #wsMessages {
          font-size: 0.7rem;
        }
      </style>
    </head>
    
    <body class="w-100 min-vh-100 d-flex align-items-center py-3" data-bs-theme="dark">
    
      <div class="container justify-content-center">
    
        <div class="row">
    
          <div class="col-lg-4 offset-lg-2">
    
            <div class="mb-3">
    
              <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">
    
                  <!-- color mode -->
                  <div class="row mb-3 px-3">
                    <div class="btn-group" role="group">
                      <input type="radio" class="btn-check btnColorMode" id="btnColorMode_0" data-mode="0" data-control="#collapseColorpicker" autocomplete="off" disabled>
                      <label class="btn btn-outline-primary" for="btnColorMode_0">Static</label>
                    
                      <input type="radio" class="btn-check btnColorMode" id="btnColorMode_1" data-mode="1" autocomplete="off" disabled>
                      <label class="btn btn-outline-primary" for="btnColorMode_1">Simple</label>
                    
                      <input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" data-control="#collapseDecay" autocomplete="off" disabled>
                      <label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
                    </div>
                  </div>
                  <!-- // color mode -->
    
                  <div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorpicker">
                    <div id="colorpicker" class="d-flex justify-content-center"></div>
                  </div>
                  <div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
                    <label for="rangeDecay" class="col-form-label">Cell Aging</label>
                    <input type="range" class="form-range rangeSetting" id="rangeDecay" data-name="colorDecay" min="1"
                      max="100" steps="1" disabled>
                  </div>
                  <div class="row mb-2 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-2 px-3">