index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A small task manager powered by the Supabase REST API.">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://vuqcmmgozrcangvfeilb.supabase.co; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; base-uri 'self'; form-action 'self'">
  <title>Task Manager</title>
  <style>
    :root {
      color-scheme: light;
      --ink: #1c2130;
      --muted: #667085;
      --line: #d8deea;
      --paper: #ffffff;
      --wash: #f4f7fb;
      --brand: #5a43d6;
      --brand-dark: #4430b7;
      --danger: #b42318;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background: linear-gradient(135deg, #eef2ff 0%, var(--wash) 48%, #fdf6ff 100%);
    }

    main {
      width: min(780px, calc(100% - 32px));
      margin: 0 auto;
      padding: 56px 0 72px;
    }

    header { margin-bottom: 24px; }

    h1 {
      margin: 0 0 8px;
      font-size: clamp(2rem, 7vw, 3.25rem);
      letter-spacing: -0.04em;
    }

    header p { margin: 0; color: var(--muted); }

    .panel {
      padding: 24px;
      border: 1px solid rgba(216, 222, 234, 0.9);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 20px 50px rgba(34, 31, 80, 0.08);
    }

    form {
      display: grid;
      grid-template-columns: 1fr 1.5fr auto;
      gap: 12px;
      align-items: end;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    label {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    input {
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink);
      background: var(--paper);
      font: inherit;
    }

    input:focus-visible, button:focus-visible {
      outline: 3px solid rgba(90, 67, 214, 0.25);
      outline-offset: 2px;
    }

    button {
      min-height: 42px;
      padding: 9px 14px;
      border: 0;
      border-radius: 10px;
      color: var(--ink);
      background: #edf0f6;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover { filter: brightness(0.96); }
    button:disabled { cursor: wait; opacity: 0.65; }
    .primary { color: white; background: var(--brand); }
    .primary:hover { background: var(--brand-dark); }
    .danger { color: var(--danger); background: #fff0ee; }

    .status {
      min-height: 24px;
      margin: 16px 0 8px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .status.error { color: var(--danger); }

    ul {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .task-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
    }

    .task-item h2 { margin: 0 0 4px; font-size: 1rem; }
    .task-item p { margin: 0; color: var(--muted); line-height: 1.45; }
    .task-item.completed h2 { text-decoration: line-through; color: var(--muted); }
    .task-status { margin-top: 6px !important; font-size: 0.82rem; font-weight: 700; }
    .task-actions { display: flex; gap: 8px; }
    .toggle { min-width: 42px; padding: 0; font-size: 1.15rem; }
    .empty { padding: 28px 0 10px; text-align: center; color: var(--muted); }

    @media (max-width: 680px) {
      main { padding-top: 32px; }
      form { grid-template-columns: 1fr; }
      .task-item { grid-template-columns: auto 1fr; }
      .task-actions { grid-column: 2; flex-wrap: wrap; }
    }
  </style>
</head>
<body>
  <main>
    <header>
      <h1>Task Manager</h1>
      <p>Vistula student ID: <strong id="student-id">79841</strong></p>
    </header>

    <section class="panel" aria-labelledby="task-form-title">
      <h2 id="task-form-title" hidden>Add a task</h2>
      <form id="task-form">
        <label>
          Title
          <input id="task-title" name="title" maxlength="120" required autocomplete="off">
        </label>
        <label>
          Description
          <input id="task-description" name="description" maxlength="500" autocomplete="off">
        </label>
        <button id="task-submit" class="primary" type="submit">Add task</button>
      </form>

      <p id="status-message" class="status" role="status" aria-live="polite">Loading tasks…</p>
      <ul id="task-list" aria-label="Tasks"></ul>
      <p><a id="contribution-link" href="contribution.html">Open team contribution</a></p>
    </section>
  </main>

  <script src="app.js" defer></script>
</body>
</html>