{{ extends "global/Page.html" }}
{{ block title }}Typing{{ endblock }}

{{ block content }}


 <style>
    :root {
      --bg: #0f1419;
      --panel: #1a2332;
      --border: #2d3a4d;
      --text: #e8eef4;
      --muted: #8b9cb3;
      --accent: #3d9eff;
      --success: #3ecf8e;
      --warn: #f0b429;
      --break: #c084fc;
      --font: "Segoe UI", system-ui, sans-serif;
      --mono: "Consolas", "Cascadia Code", monospace;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      background: radial-gradient(ellipse 120% 80% at 50% -20%, #1e3a5f 0%, var(--bg) 55%);
      color: var(--text);
      line-height: 1.5;
    }

    .wrap {
      max-width: 960px;
      margin: 0 auto;
      padding: 1.5rem 1.25rem 2rem;
    }

    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    header h1 {
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0 0 0.5rem;
      letter-spacing: 0.02em;
    }

    .intro {
      font-size: 0.875rem;
      color: var(--muted);
      max-width: 42rem;
      margin: 0 auto 1rem;
    }

    .timer-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 1.5rem;
    }

    .phase-badge {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      background: rgba(61, 158, 255, 0.15);
      color: var(--accent);
      border: 1px solid rgba(61, 158, 255, 0.35);
    }

    .phase-badge.break {
      background: rgba(192, 132, 252, 0.15);
      color: var(--break);
      border-color: rgba(192, 132, 252, 0.35);
    }

    .phase-badge.done {
      background: rgba(62, 207, 142, 0.15);
      color: var(--success);
      border-color: rgba(62, 207, 142, 0.35);
    }

    .countdown {
      font-variant-numeric: tabular-nums;
      font-size: 1.75rem;
      font-weight: 700;
      font-family: var(--mono);
      letter-spacing: 0.05em;
    }

    .layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      align-items: start;
    }

    @media (max-width: 720px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.25rem;
    }

    .panel h2 {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin: 0 0 1rem;
      font-weight: 600;
    }

    .chars-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      border: 1px dashed var(--border);
    }

    .chars-stack .char-cell {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 1.5rem;
      font-weight: 700;
      background: var(--bg);
      border: 2px solid var(--border);
      border-radius: 8px;
      color: var(--accent);
    }

    .stats-block {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .stats-block:first-of-type {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }

    .stats-block h3 {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin: 0 0 0.5rem;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      font-size: 0.9rem;
      margin-bottom: 0.35rem;
    }

    .stat-row span:last-child {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
    }

    .right-top {
      margin-bottom: 1rem;
      padding: 0.875rem 1rem;
      background: rgba(61, 158, 255, 0.08);
      border: 1px solid rgba(61, 158, 255, 0.25);
      border-radius: 8px;
      font-size: 0.9rem;
    }

    .right-top strong {
      color: var(--accent);
    }

    label[for="entry"] {
      display: block;
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: 0.35rem;
    }

    #entry {
      width: 100%;
      padding: 0.75rem 1rem;
      font-family: var(--mono);
      font-size: 1.125rem;
      border: 2px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      margin-bottom: 0.75rem;
    }

    #entry:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(61, 158, 255, 0.2);
    }

    #entry:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-row {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    button#submit {
      padding: 0.65rem 1.5rem;
      font-size: 1rem;
      font-weight: 600;
      font-family: var(--font);
      background: var(--accent);
      color: #0a1628;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: filter 0.15s, transform 0.1s;
    }

    button#submit:hover:not(:disabled) {
      filter: brightness(1.08);
    }

    button#submit:active:not(:disabled) {
      transform: translateY(1px);
    }

    button#submit:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .hint {
      margin-top: 1rem;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .msg {
      margin-top: 0.75rem;
      min-height: 1.25rem;
      font-size: 0.85rem;
    }

    .msg.error {
      color: #f87171;
    }

    .msg.ok {
      color: var(--success);
    }

    .overlay-break {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      text-align: center;
      background: rgba(192, 132, 252, 0.1);
      border: 1px solid rgba(192, 132, 252, 0.3);
      border-radius: 8px;
      color: var(--break);
      font-size: 0.95rem;
    }

    .overlay-break.visible {
      display: block;
    }

    .final {
      display: none;
      margin-top: 1.5rem;
      padding: 1.25rem;
      background: rgba(62, 207, 142, 0.1);
      border: 1px solid rgba(62, 207, 142, 0.35);
      border-radius: 12px;
      text-align: center;
    }

    .final.visible {
      display: block;
    }

    .final h3 {
      margin: 0 0 0.5rem;
      color: var(--success);
      font-size: 1.1rem;
    }
  </style>


  <div class="wrap">
    <header>
      <h1>Typing Task</h1>
      <p class="intro">
        This study includes <strong>30 minutes</strong> of task time in three
        <strong>10-minute</strong> work blocks, with <strong>10-minute</strong> breaks between blocks.
        Type the five characters shown (Shift + digits 1–9) in order, then click <strong>Enter</strong>.
      </p>
    </header>

    <div class="timer-bar">
      <span id="phaseLabel" class="phase-badge">Starting…</span>
      <span id="countdown" class="countdown">—:—</span>
    </div>

    <div class="layout">
      <div class="panel" id="leftPanel">
        <h2>Current string &amp; earnings (this work block)</h2>
        <div class="chars-stack" id="charStack" aria-live="polite"></div>

        <div class="stats-block">
          <h3>This 10-minute work period</h3>
          <div class="stat-row">
            <span>Strings completed</span>
            <span id="segCount">0</span>
          </div>
          <div class="stat-row">
            <span>Earnings (pre-tax)</span>
            <span id="segPre">$0.00</span>
          </div>
          <div class="stat-row">
            <span>Earnings (after-tax)</span>
            <span id="segPost">$0.00</span>
          </div>
        </div>

        <div class="stats-block">
          <h3>Total (all work blocks)</h3>
          <div class="stat-row">
            <span>Strings completed</span>
            <span id="totalCount">0</span>
          </div>
          <div class="stat-row">
            <span>Earnings (pre-tax)</span>
            <span id="totalPre">$0.00</span>
          </div>
          <div class="stat-row">
            <span>Earnings (after-tax)</span>
            <span id="totalPost">$0.00</span>
          </div>
        </div>
      </div>

      <div class="panel" id="rightPanel">
        <h2>Enter your response</h2>
        <div class="right-top" id="earnHint">
          Earnings for completing <strong>one</strong> string:
          <strong id="hintPre">$0.00</strong> pre-tax ·
          <strong id="hintPost">$0.00</strong> after-tax
        </div>

        <label for="entry">Type five characters, then submit</label>
        <input type="text" id="entry" maxlength="10" autocomplete="off" spellcheck="false" disabled />

        <div class="btn-row">
          <button type="button" id="submit" disabled>Enter</button>
        </div>

        <div class="overlay-break" id="breakOverlay">
          Break time — task input is paused. Next work block starts when the timer ends.
        </div>

        <p class="hint">
          Use <kbd>Shift</kbd> + number keys <kbd>1</kbd>–<kbd>9</kbd> (e.g. <kbd>Shift</kbd>+<kbd>1</kbd> = !).
        </p>
        <div class="msg" id="feedback" role="status"></div>
      </div>
    </div>

    <div class="final" id="finalScreen">
      <h3>All work blocks complete</h3>
      <p>
        Total strings completed: <strong id="finalCount">0</strong><br />
        Total pre-tax: <strong id="finalPre">$0.00</strong> ·
        Total after-tax: <strong id="finalPost">$0.00</strong>
      </p>
    </div>
  </div>

  <script>
    (function () {
      /** Payment: edit these for your study */
      var PRE_TAX_PER_STRING = 0.5;
      var TAX_RATE = 0.2;

      var SHIFT_DIGIT_SYMBOLS = ["!", "@", "#", "$", "%", "^", "&", "*", "("];
      var WORK_SEC = 10 * 60;
      var BREAK_SEC = 10 * 60;

      var phases = [
        { type: "work", duration: WORK_SEC, label: "Work block 1 / 3" },
        { type: "break", duration: BREAK_SEC, label: "Break 1 / 2" },
        { type: "work", duration: WORK_SEC, label: "Work block 2 / 3" },
        { type: "break", duration: BREAK_SEC, label: "Break 2 / 2" },
        { type: "work", duration: WORK_SEC, label: "Work block 3 / 3" }
      ];

      var phaseIndex = 0;
      var remainingSec = 0;
      var timerId = null;

      var currentTarget = "";
      var segmentCompletions = 0;
      var totalCompletions = 0;

      var el = {
        phaseLabel: document.getElementById("phaseLabel"),
        countdown: document.getElementById("countdown"),
        charStack: document.getElementById("charStack"),
        segCount: document.getElementById("segCount"),
        segPre: document.getElementById("segPre"),
        segPost: document.getElementById("segPost"),
        totalCount: document.getElementById("totalCount"),
        totalPre: document.getElementById("totalPre"),
        totalPost: document.getElementById("totalPost"),
        hintPre: document.getElementById("hintPre"),
        hintPost: document.getElementById("hintPost"),
        entry: document.getElementById("entry"),
        submit: document.getElementById("submit"),
        feedback: document.getElementById("feedback"),
        breakOverlay: document.getElementById("breakOverlay"),
        finalScreen: document.getElementById("finalScreen"),
        finalCount: document.getElementById("finalCount"),
        finalPre: document.getElementById("finalPre"),
        finalPost: document.getElementById("finalPost")
      };

      function afterTax(pre) {
        return pre * (1 - TAX_RATE);
      }

      function formatMoney(n) {
        return "$" + n.toFixed(2);
      }

      function formatTime(sec) {
        if (sec < 0) sec = 0;
        var m = Math.floor(sec / 60);
        var s = sec % 60;
        return m + ":" + (s < 10 ? "0" : "") + s;
      }

      function randomChar() {
        var i = Math.floor(Math.random() * SHIFT_DIGIT_SYMBOLS.length);
        return SHIFT_DIGIT_SYMBOLS[i];
      }

      function newTarget() {
        var s = "";
        for (var k = 0; k < 5; k++) s += randomChar();
        currentTarget = s;
        renderChars();
      }

      function renderChars() {
        el.charStack.innerHTML = "";
        for (var i = 0; i < currentTarget.length; i++) {
          var div = document.createElement("div");
          div.className = "char-cell";
          div.textContent = currentTarget[i];
          el.charStack.appendChild(div);
        }
      }

      function updateEarningHints() {
        var pre = PRE_TAX_PER_STRING;
        var post = afterTax(pre);
        el.hintPre.textContent = formatMoney(pre);
        el.hintPost.textContent = formatMoney(post);
      }

      function updateStats() {
        var segPre = segmentCompletions * PRE_TAX_PER_STRING;
        var segPost = afterTax(segPre);
        var totPre = totalCompletions * PRE_TAX_PER_STRING;
        var totPost = afterTax(totPre);

        el.segCount.textContent = String(segmentCompletions);
        el.segPre.textContent = formatMoney(segPre);
        el.segPost.textContent = formatMoney(segPost);
        el.totalCount.textContent = String(totalCompletions);
        el.totalPre.textContent = formatMoney(totPre);
        el.totalPost.textContent = formatMoney(totPost);
      }

      function isWorkPhase() {
        if (phaseIndex >= phases.length) return false;
        return phases[phaseIndex].type === "work";
      }

      function setInputEnabled(on) {
        el.entry.disabled = !on;
        el.submit.disabled = !on;
        el.breakOverlay.classList.toggle("visible", !on && phaseIndex < phases.length);
      }

      function applyPhaseUI() {
        if (phaseIndex >= phases.length) {
          el.phaseLabel.textContent = "Study complete";
          el.phaseLabel.className = "phase-badge done";
          el.countdown.textContent = "0:00";
          setInputEnabled(false);
          el.breakOverlay.classList.remove("visible");
          showFinal();
          return;
        }

        var p = phases[phaseIndex];
        el.phaseLabel.textContent = p.label;
        el.phaseLabel.className = p.type === "break" ? "phase-badge break" : "phase-badge";

        if (p.type === "work") {
          setInputEnabled(true);
          el.entry.focus();
        } else {
          setInputEnabled(false);
        }
      }

      function showFinal() {
        var totPre = totalCompletions * PRE_TAX_PER_STRING;
        var totPost = afterTax(totPre);
        el.finalCount.textContent = String(totalCompletions);
        el.finalPre.textContent = formatMoney(totPre);
        el.finalPost.textContent = formatMoney(totPost);
        el.finalScreen.classList.add("visible");
      }

      function tick() {
        remainingSec--;
        if (remainingSec <= 0) {
          advancePhase();
        } else {
          el.countdown.textContent = formatTime(remainingSec);
        }
      }

      function advancePhase() {
        if (timerId) {
          clearInterval(timerId);
          timerId = null;
        }

        phaseIndex++;

        if (phaseIndex >= phases.length) {
          applyPhaseUI();
          return;
        }

        var p = phases[phaseIndex];
        remainingSec = p.duration;

        if (p.type === "work") {
          segmentCompletions = 0;
          updateStats();
          newTarget();
          el.feedback.textContent = "";
          el.feedback.className = "msg";
        }

        applyPhaseUI();
        el.countdown.textContent = formatTime(remainingSec);
        timerId = setInterval(tick, 1000);
      }

      function startStudy() {
        updateEarningHints();
        updateStats();
        phaseIndex = 0;
        remainingSec = phases[0].duration;
        newTarget();
        el.countdown.textContent = formatTime(remainingSec);
        applyPhaseUI();
        timerId = setInterval(tick, 1000);
      }

      function trySubmit() {
        if (!isWorkPhase() || el.entry.disabled) return;

        var val = el.entry.value;
        el.feedback.textContent = "";
        el.feedback.className = "msg";

        if (val !== currentTarget) {
          el.feedback.textContent = "Incorrect — try again.";
          el.feedback.classList.add("error");
          return;
        }

        segmentCompletions++;
        totalCompletions++;
        updateStats();
        el.feedback.textContent = "Correct.";
        el.feedback.classList.add("ok");
        el.entry.value = "";
        newTarget();
      }

      el.submit.addEventListener("click", trySubmit);

      el.entry.addEventListener("keydown", function (e) {
        if (e.key === "Enter") {
          e.preventDefault();
          trySubmit();
        }
      });

      startStudy();
    })();
  </script>

{{ endblock }}