lizard/views/index.ejs

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Filament Tracker</title>

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="/styles.css" rel="stylesheet" />
  </head>

  <body class="bg-dark text-light d-flex flex-column min-vh-100">
    <div
      class="container my-5 flex-grow-1 d-flex justify-content-center align-items-center"
    >
      <div class="spools-grid bg-secondary rounded-4 p-4 shadow-lg">
        <p class="text-center display-5 fw-semibold text-light">Filament Tracker</p>
        <div class="d-grid spool-grid">
          <% spools.forEach((spool, i)=> { %>
          <div
            class="spool-card rounded-3 p-3 d-flex flex-column justify-content-between"
            style="
              background-color: <%= spool.color %>;
              color: <%= getTextColor(spool.color) %>;
              cursor: pointer;
            "
            onclick="openModal(<%= i %>)"
          >
            <h5><%= spool.name %></h5>
            <p class="mb-2">
              Remaining:
              <strong>
                <%= (spool.initial - spool.used).toFixed(1) %> g
              </strong>
            </p>
            <small>Initial: <%= spool.initial %> g</small>
            <small>Used: <%= spool.used.toFixed(1) %> g</small>
          </div>
          <% }) %>
        </div>
      </div>
    </div>

    <!-- Edit Modal -->
    <div
      class="modal fade"
      id="editModal"
      tabindex="-1"
      aria-labelledby="editModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <form
          id="editForm"
          action="/update"
          method="POST"
          class="modal-content bg-dark text-light"
        >
          <input type="hidden" name="index" id="modal-index" />
          <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">Edit Spool</h5>
            <button
              type="button"
              class="btn-close btn-close-white"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="modal-initial" class="form-label"
                >Starting Weight (g)</label
              >
              <input
                type="number"
                min="0"
                step="any"
                class="form-control"
                id="modal-initial"
                name="initial"
                required
              />
            </div>
            <div class="mb-3">
              <label for="modal-used" class="form-label">Used Weight (g)</label>
              <input
                type="number"
                min="0"
                step="any"
                class="form-control"
                id="modal-used"
                name="used"
                required
              />
            </div>

            <div class="mb-3">
              <label class="form-label">Adjust Usage</label>
              <div class="input-group">
                <select
                  class="form-select"
                  id="adjust-operation"
                  aria-label="Add or Subtract"
                >
                  <option value="add" selected>+</option>
                  <option value="subtract">-</option>
                </select>
                <input
                  type="number"
                  min="0"
                  step="any"
                  class="form-control"
                  id="adjust-amount"
                  placeholder="Amount (g)"
                  aria-label="Amount to add or subtract"
                />
                <button
                  class="btn btn-outline-light"
                  type="button"
                  id="apply-adjustment"
                  aria-label="Apply adjustment"
                >
                  Apply
                </button>
              </div>
            </div>

            <div class="mb-3">
              <label for="modal-color" class="form-label">Filament Color</label>
              <input
                type="color"
                class="form-control form-control-color p-0"
                id="modal-color"
                name="color"
                title="Choose filament color"
              />
            </div>
          </div>

          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save</button>
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/main.js"></script>
  </body>
</html>