Skip to content
Snippets Groups Projects
Select Git revision
1 result Searching

index.html

Blame
  • index.html 7.24 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>
                </div>
              </div>
            </div>
    
          </div>
    
        </div> <!-- main -->
    
        <div class="col-lg-4 offset-lg-4 mt-3" id="scores">
    
          <div class="card">
            <h5 class="card-header">
              Last Game / Highscores