```html
<meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Writing sprint timer | WritersGroup.co.uk</title>
<meta name='description' content='A simple writing sprint and Pomodoro timer for short, realistic writing sessions. Set your writing time, breaks, intentions, and get started.'>
<meta name='keywords' content='writing sprint timer, Pomodoro writing timer, writing timer, creative writing timer, writing tools, writing practice, writing prompts, WritersGroup.co.uk'>

<style type='text/css'>
    :root {
      --cambridge-blue: #7BAFA6;
      --non-photo-blue: #A8DADC;
      --paynes-grey: #4A6D7C;
      --indian-red: #CF5052;
      --tiny-cream: #FAF4E4;
      --soft-mint: #F7FBFA;
      --charcoal: #3F4851;
      --oxford-blue: #021A34;
      --caribbean-current: #206473;
      --white: #ffffff;
      --page-width: min(1180px, 90vw);
      --soft-border: rgba(2, 26, 52, 0.09);
      --soft-shadow: 0 24px 54px rgba(2, 26, 52, 0.10);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #ffffff;
      color: var(--oxford-blue);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }

    .announcement-bar {
      background: var(--oxford-blue);
      color: var(--soft-mint);
      font-size: 0.9rem;
      padding: 0.6rem 5vw;
    }

    .announcement-inner {
      width: var(--page-width);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .announcement-bar a {
      color: var(--non-photo-blue);
      font-weight: 750;
    }

    .site-header {
      background: rgba(255, 255, 255, 0.96);
      border-bottom: 1px solid rgba(2, 26, 52, 0.08);
    }

    .nav {
      width: var(--page-width);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 0;
      gap: 2rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 850;
      letter-spacing: -0.04em;
      font-size: 1.45rem;
      white-space: nowrap;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--caribbean-current), var(--cambridge-blue));
      display: grid;
      place-items: center;
      color: var(--white);
      font-family: Georgia, serif;
      font-weight: 700;
    }

    .nav-links {
      display: flex;
      gap: 1.15rem;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      font-size: 0.95rem;
      color: var(--charcoal);
    }

    .nav-links a:hover { color: var(--caribbean-current); }

    .nav-cta {
      background: var(--indian-red);
      color: var(--white) !important;
      padding: 0.72rem 1rem;
      border-radius: 999px;
      font-weight: 750;
      box-shadow: 0 10px 24px rgba(207, 80, 82, 0.18);
    }

    h1,
    h2 {
      font-family: Georgia, 'Times New Roman', serif;
      letter-spacing: -0.055em;
    }

    h1 {
      font-size: clamp(3rem, 6vw, 5.8rem);
      line-height: 0.95;
      margin: 0 0 1.35rem;
    }

    h2 {
      font-size: clamp(2rem, 3vw, 3.15rem);
      line-height: 1.06;
      margin: 0 0 0.75rem;
    }

    h3 {
      margin: 0 0 0.55rem;
      font-size: 1.22rem;
      letter-spacing: -0.02em;
    }

    .hero {
      width: var(--page-width);
      margin: 0 auto;
      padding: 4.5rem 0 3.25rem;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      gap: 3.5rem;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      width: 38rem;
      height: 38rem;
      right: -20rem;
      top: -18rem;
      background: radial-gradient(circle, rgba(168, 218, 220, 0.38), rgba(168, 218, 220, 0));
      z-index: -1;
    }

    .eyebrow {
      display: inline-flex;
      background: rgba(123, 175, 166, 0.18);
      color: var(--caribbean-current);
      border: 1px solid rgba(32, 100, 115, 0.14);
      border-radius: 999px;
      padding: 0.45rem 0.8rem;
      font-size: 0.9rem;
      font-weight: 800;
      margin-bottom: 1.4rem;
    }

    .hero-lede {
      font-size: clamp(1.12rem, 1.7vw, 1.35rem);
      color: var(--charcoal);
      max-width: 650px;
      margin: 0 0 2rem;
    }

    .hero-actions {
      display: flex;
      gap: 0.9rem;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }

    .button,
    button {
      font: inherit;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0.85rem 1.2rem;
      border-radius: 999px;
      font-weight: 850;
      border: 1px solid transparent;
    }

    .button-primary {
      background: var(--oxford-blue);
      color: var(--white);
      box-shadow: 0 18px 34px rgba(2, 26, 52, 0.18);
    }

    .button-secondary {
      background: rgba(255, 255, 255, 0.88);
      color: var(--oxford-blue);
      border-color: rgba(2, 26, 52, 0.14);
    }

    .hero-panel {
      background: var(--white);
      border-radius: 32px;
      padding: 1.2rem;
      box-shadow: 0 32px 70px rgba(2, 26, 52, 0.14);
      border: 1px solid rgba(2, 26, 52, 0.08);
    }

    .timer-preview-card {
      background: linear-gradient(160deg, var(--oxford-blue), var(--caribbean-current));
      color: var(--white);
      border-radius: 26px;
      padding: 1.5rem;
      min-height: 330px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .mini-label {
      font-weight: 850;
      color: var(--non-photo-blue);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.75rem;
    }

    .hero-time {
      font-size: clamp(4rem, 8vw, 6.4rem);
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.02em;
      margin: 1rem 0;
      font-variant-numeric: tabular-nums;
    }

    .hero-note {
      color: rgba(255, 255, 255, 0.78);
      margin: 0;
    }

    .tool-section {
      padding: 1rem 0 4.5rem;
    }

    .timer-shell {
      width: var(--page-width);
      margin: 0 auto;
      background: var(--white);
      border: 1px solid var(--soft-border);
      border-radius: 34px;
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    .mode-switch {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      padding: clamp(1rem, 2vw, 1.4rem);
      background: linear-gradient(135deg, rgba(168, 218, 220, 0.24), rgba(247, 251, 250, 1));
      border-bottom: 1px solid var(--soft-border);
    }

    .mode-button,
    .control-button,
    .intention-button,
    .add-button {
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      font-weight: 850;
      transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .mode-button {
      min-height: 46px;
      padding: 0.75rem 1.1rem;
      background: var(--white);
      color: var(--oxford-blue);
      border: 1px solid rgba(2, 26, 52, 0.12);
    }

    .mode-button.active,
    .mode-button:hover {
      background: var(--oxford-blue);
      color: var(--white);
    }

    .timer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    }

    .timer-main,
    .timer-side {
      padding: clamp(1.35rem, 3vw, 2.4rem);
    }

    .timer-side {
      background: linear-gradient(180deg, rgba(247, 251, 250, 0.82), rgba(255, 255, 255, 1));
      border-left: 1px solid var(--soft-border);
    }

    .panel {
      display: none;
    }

    .panel.active {
      display: block;
    }

    .timer-face {
      background: var(--oxford-blue);
      color: var(--white);
      border-radius: 28px;
      padding: clamp(1.4rem, 4vw, 2.5rem);
      margin: 1.4rem 0;
      position: relative;
      overflow: hidden;
    }

    .timer-face::before {
      content: '';
      position: absolute;
      width: 15rem;
      height: 15rem;
      right: -7rem;
      top: -7rem;
      border-radius: 50%;
      background: rgba(168, 218, 220, 0.20);
    }

    .timer-stage,
    .timer-status {
      position: relative;
      z-index: 1;
      margin: 0;
    }

    .timer-stage {
      color: var(--non-photo-blue);
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.78rem;
      margin-bottom: 0.75rem;
    }

    .timer-display {
      position: relative;
      z-index: 1;
      font-size: clamp(4.4rem, 11vw, 8rem);
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      margin: 0;
    }

    .timer-status {
      color: rgba(255, 255, 255, 0.82);
      margin-top: 1rem;
    }

    .add-buttons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.7rem;
      margin: 1.2rem 0;
    }

    .add-button {
      min-height: 54px;
      padding: 0.75rem;
      background: rgba(168, 218, 220, 0.46);
      color: var(--oxford-blue);
      border: 1px solid rgba(2, 26, 52, 0.10);
    }

    .add-button:hover {
      background: var(--cambridge-blue);
      transform: translateY(-1px);
    }

    .length-line {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      color: var(--charcoal);
      margin: 0.8rem 0 1.3rem;
    }

    .length-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0.55rem 0.85rem;
      border-radius: 999px;
      background: rgba(168, 218, 220, 0.26);
      border: 1px solid rgba(2, 26, 52, 0.10);
      font-weight: 850;
      color: var(--oxford-blue);
    }

    .field-group {
      margin-bottom: 1.35rem;
    }

    .field-label {
      display: block;
      font-weight: 850;
      color: var(--oxford-blue);
      margin-bottom: 0.45rem;
      font-size: 0.95rem;
    }

    input,
    textarea {
      font: inherit;
      width: 100%;
      border: 1px solid rgba(2, 26, 52, 0.14);
      border-radius: 16px;
      background: var(--white);
      color: var(--oxford-blue);
      padding: 0.85rem 0.95rem;
    }

    input:focus,
    textarea:focus,
    button:focus {
      outline: 3px solid rgba(168, 218, 220, 0.9);
      outline-offset: 2px;
    }

    textarea {
      min-height: 140px;
      resize: vertical;
      line-height: 1.5;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.9rem;
      margin: 1.2rem 0;
    }

    .control-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.2rem;
    }

    .control-button {
      min-height: 50px;
      padding: 0.78rem 1.1rem;
      background: var(--oxford-blue);
      color: var(--white);
    }

    .control-button.secondary {
      background: var(--caribbean-current);
    }

    .control-button.light {
      background: var(--soft-mint);
      color: var(--oxford-blue);
      border: 1px solid rgba(2, 26, 52, 0.10);
    }

    .control-button.danger {
      background: var(--indian-red);
    }

    .control-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(2, 26, 52, 0.14);
    }

    .control-button:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .intention-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .intention-button {
      padding: 0.65rem 0.85rem;
      background: var(--white);
      color: var(--oxford-blue);
      border: 1px solid rgba(2, 26, 52, 0.12);
      font-size: 0.94rem;
    }

    .intention-button.active,
    .intention-button:hover {
      background: var(--caribbean-current);
      color: var(--white);
    }

    .sound-toggle {
      display: none;
      align-items: flex-start;
      gap: 0.55rem;
      color: var(--charcoal);
      font-size: 0.95rem;
      margin-top: 1rem;
    }

    .sound-toggle.available {
      display: flex;
    }

    .sound-toggle input {
      width: auto;
      margin-top: 0.22rem;
    }

    .completion-message {
      display: none;
      background: rgba(123, 175, 166, 0.18);
      border: 1px solid rgba(32, 100, 115, 0.16);
      color: var(--oxford-blue);
      border-radius: 22px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .completion-message.show {
      display: block;
    }

    .completion-message strong {
      display: block;
      margin-bottom: 0.15rem;
    }

    .links-card {
      border-top: 1px solid var(--soft-border);
      padding-top: 1.35rem;
      margin-top: 1.6rem;
    }

    .links-list {
      display: grid;
      gap: 0.65rem;
      margin-top: 1rem;
    }

    .links-list a {
      display: block;
      background: var(--white);
      border: 1px solid rgba(2, 26, 52, 0.10);
      border-radius: 16px;
      padding: 0.9rem 1rem;
      font-weight: 850;
      color: var(--caribbean-current);
    }

    .links-list a:hover {
      background: rgba(168, 218, 220, 0.35);
    }

    .note-section {
      padding: 4.5rem 0;
      background: linear-gradient(180deg, rgba(247, 251, 250, 1), rgba(168, 218, 220, 0.16));
    }

    .notes-grid {
      width: var(--page-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .note-card {
      background: var(--white);
      border: 1px solid rgba(2, 26, 52, 0.08);
      border-radius: 24px;
      padding: 1.45rem;
      box-shadow: 0 14px 32px rgba(2, 26, 52, 0.05);
    }

    .note-card p {
      color: var(--charcoal);
      margin: 0;
    }

    .site-footer {
      background: var(--charcoal);
      color: var(--soft-mint);
      padding: 2.5rem 5vw;
      margin-top: 0;
    }

    .footer-inner {
      width: var(--page-width);
      margin: 0 auto;
      color: rgba(247, 251, 250, 0.78);
      font-size: 0.95rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr 0.9fr;
      gap: 1.5rem;
      align-items: start;
    }

    .footer-grid strong {
      color: var(--soft-mint);
    }

    .footer-brand-block p {
      margin: 0.35rem 0 0;
    }

    .footer-links {
      display: grid;
      gap: 0.45rem;
      margin-top: 0.7rem;
    }

    .footer-links a:hover {
      color: var(--non-photo-blue);
    }

    .footer-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0.75rem 1rem;
      border-radius: 999px;
      background: var(--indian-red);
      color: var(--white);
      font-weight: 850;
      text-align: center;
      box-shadow: 0 10px 24px rgba(207, 80, 82, 0.18);
      margin-top: 0.75rem;
    }

    a.portalLink[href*='greenrope.com'],
    a.portalLink[href*='greenrope.com'] img,
    img[src*='powered_by_greenrope'],
    .site-footer ~ center {
      display: none !important;
    }

    @media (max-width: 900px) {
      .hero,
      .timer-grid,
      .footer-grid,
      .notes-grid {
        grid-template-columns: 1fr;
      }

      .timer-side {
        border-left: 0;
        border-top: 1px solid var(--soft-border);
      }

      .nav {
        align-items: flex-start;
        flex-direction: column;
      }

      .nav-links {
        justify-content: flex-start;
      }

      .brand {
        font-size: 1.25rem;
      }

      .footer-cta {
        width: 100%;
      }
    }

    @media (max-width: 620px) {
      .add-buttons,
      .settings-grid {
        grid-template-columns: 1fr 1fr;
      }

      .control-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .control-button {
        width: 100%;
      }

      .hero {
        padding-top: 3.2rem;
      }
    }

    @media (max-width: 430px) {
      .add-buttons,
      .settings-grid,
      .control-row {
        grid-template-columns: 1fr;
      }

      .timer-display {
        font-size: 4.2rem;
        letter-spacing: 0;
      }

      .hero-time {
        letter-spacing: 0;
      }
    }
</style>

<div class='announcement-bar'>
<div class='announcement-inner'><span>Free monthly meetings at Portishead Library: writers&rsquo; group and Bring Your Own Book.</span> <a href='/portishead'>View meeting times</a></div>
</div>

<header class='site-header'>
<nav class='nav'><a class='brand' href='/'><span class='brand-mark'>W</span> <span>WritersGroup.co.uk</span> </a>

<div class='nav-links'><a href='/'>Home</a> <a href='/tools'>Tools</a> <a href='/whats-on'>What&rsquo;s on</a> <a href='/community'>Community</a> <a href='/resources'>Resources</a> <a href='/shop'>Shop</a> <a href='/about'>About</a> <a class='nav-cta' href='/contact'>Contact</a></div>
</nav>
</header>

<main>
<section class='hero'>
<div>
<div class='eyebrow'>Writing tool</div>

<h1>Writing sprint timer</h1>

<p class='hero-lede'>Set a short session, choose what you&rsquo;re doing, and get on with the writing. Use a single sprint, or build a Pomodoro sequence with breaks.</p>

<div class='hero-actions'><a class='button button-primary' href='#timer-tool'>Start the timer</a> <a class='button button-secondary' href='/daily-prompt'>Need a prompt?</a></div>
</div>

<div class='hero-panel'>
<div class='timer-preview-card'>
<div>
<div class='mini-label'>Simple, not fussy</div>
<div class='hero-time'>25:00</div>
<p class='hero-note'>Good for drafting, revising, planning, freewriting, and one small repair that has been loitering about.</p>
</div>
</div>
</div>
</section>

<section class='tool-section' id='timer-tool'>
<div class='timer-shell'>
<div class='mode-switch' aria-label='Choose timer mode'>
<button class='mode-button active' type='button' data-mode='sprint'>Sprint timer</button>
<button class='mode-button' type='button' data-mode='pomodoro'>Pomodoro</button>
</div>

<div class='timer-grid'>
<div class='timer-main'>
<div class='panel active' id='sprintPanel'>
<div class='mini-label'>Simple sprint</div>
<h2>Build your sprint</h2>
<p class='muted'>Add time in blocks. Press +5 three times for a 15-minute sprint, or +30, +10, and +5 for 45 minutes. No heroic declarations required.</p>

<div class='timer-face'>
<p class='timer-stage' id='sprintStage'>Sprint ready</p>
<p class='timer-display' id='sprintDisplay'>00:00</p>
<p class='timer-status' id='sprintStatus'>Add some time, then start.</p>
</div>

<div class='add-buttons'>
<button class='add-button' type='button' data-add='5'>+5 min</button>
<button class='add-button' type='button' data-add='10'>+10 min</button>
<button class='add-button' type='button' data-add='30'>+30 min</button>
<button class='add-button' type='button' id='sprintClearLength'>Clear</button>
</div>

<div class='length-line'>
<span>Selected sprint:</span>
<span class='length-pill' id='sprintLengthLabel'>0 minutes</span>
</div>

<div class='field-group'>
<label class='field-label' for='sprintCustomMinutes'>Or type a specific length</label>
<input id='sprintCustomMinutes' type='number' min='1' max='240' step='1' placeholder='e.g. 18'>
</div>

<div class='control-row'>
<button class='control-button' id='sprintStart' type='button'>Start</button>
<button class='control-button secondary' id='sprintPause' type='button' disabled>Pause</button>
<button class='control-button secondary' id='sprintResume' type='button' disabled>Resume</button>
<button class='control-button danger' id='sprintReset' type='button'>Reset</button>
</div>

<div class='completion-message' id='sprintComplete'>
<strong>Sprint complete.</strong>
<span>Stop there if that&rsquo;s enough, or add another small block.</span>
</div>
</div>

<div class='panel' id='pomodoroPanel'>
<div class='mini-label'>Pomodoro sequence</div>
<h2>Set your writing blocks</h2>
<p class='muted'>Choose your writing time, breaks, and number of blocks. The timer moves to the next stage when each one ends.</p>

<div class='timer-face'>
<p class='timer-stage' id='pomodoroStage'>Pomodoro ready</p>
<p class='timer-display' id='pomodoroDisplay'>25:00</p>
<p class='timer-status' id='pomodoroStatus'>Pomodoro 1 of 4. Writing time.</p>
</div>

<div class='settings-grid'>
<div>
<label class='field-label' for='workMinutes'>Writing minutes</label>
<input id='workMinutes' type='number' min='1' max='120' step='1' value='25'>
</div>

<div>
<label class='field-label' for='shortBreakMinutes'>Short break minutes</label>
<input id='shortBreakMinutes' type='number' min='1' max='60' step='1' value='5'>
</div>

<div>
<label class='field-label' for='longBreakMinutes'>Long break minutes</label>
<input id='longBreakMinutes' type='number' min='1' max='90' step='1' value='15'>
</div>

<div>
<label class='field-label' for='longBreakAfter'>Long break after</label>
<input id='longBreakAfter' type='number' min='1' max='12' step='1' value='4'>
</div>

<div>
<label class='field-label' for='totalPomodoros'>Total writing blocks</label>
<input id='totalPomodoros' type='number' min='1' max='24' step='1' value='4'>
</div>
</div>

<div class='control-row'>
<button class='control-button' id='pomodoroStart' type='button'>Start</button>
<button class='control-button secondary' id='pomodoroPause' type='button' disabled>Pause</button>
<button class='control-button secondary' id='pomodoroResume' type='button' disabled>Resume</button>
<button class='control-button light' id='pomodoroSkip' type='button'>Skip stage</button>
<button class='control-button danger' id='pomodoroReset' type='button'>Reset</button>
</div>

<div class='completion-message' id='pomodoroComplete'>
<strong>Pomodoro sequence complete.</strong>
<span>Save the useful bit before wandering off.</span>
</div>
</div>
</div>

<aside class='timer-side'>
<div class='field-group'>
<h2>Sprint intention</h2>
<p class='muted'>Pick one job. Smaller usually works better.</p>

<div class='intention-grid' aria-label='Choose a sprint intention'>
<button class='intention-button active' type='button' data-intention='drafting'>Drafting</button>
<button class='intention-button' type='button' data-intention='revising'>Revising</button>
<button class='intention-button' type='button' data-intention='planning'>Planning</button>
<button class='intention-button' type='button' data-intention='freewriting'>Freewriting</button>
<button class='intention-button' type='button' data-intention='one small repair'>One small repair</button>
</div>
</div>

<div class='field-group'>
<label class='field-label' for='workNote'>What will you work on?</label>
<textarea id='workNote' placeholder='Example: draft the awkward kitchen scene, fix the opening paragraph, outline chapter three, or write something instead of preparing to write something.'></textarea>
</div>

<label class='sound-toggle' id='soundToggleWrap'>
<input type='checkbox' id='soundEnabled'>
<span>Play one cowbell ding when time is up</span>
</label>

<div class='links-card'>
<h3>Useful next stops</h3>
<p class='muted'>Need a starting point, company, or another tool?</p>

<div class='links-list'>
<a href='/daily-prompt'>Use today&rsquo;s writing prompt</a>
<a href='/writing-rooms'>Join an online Writing Room</a>
<a href='/tools'>Explore more writing tools</a>
</div>
</div>
</aside>
</div>
</div>
</section>

<section class='note-section'>
<div class='notes-grid'>
<article class='note-card'>
<h3>Keep it narrow</h3>
<p>A sprint works best when the task is specific. One scene, one paragraph, one repair.</p>
</article>

<article class='note-card'>
<h3>Breaks are breaks</h3>
<p>Use them for standing up, making tea, or staring into the middle distance with purpose.</p>
</article>

<article class='note-card'>
<h3>Leave yourself a clue</h3>
<p>When you stop, write down the next tiny step. Future you may still complain, but less.</p>
</article>
</div>
</section>
</main>

<footer class='site-footer'>
<div class='footer-grid footer-inner'>
<div class='footer-brand-block'><strong>WritersGroup.co.uk</strong>

<p>Practical writing tools, events, resources, and community for writers and readers.</p>

<p>&copy; 2026 Protheorem Ltd.</p>
</div>

<div><strong>Explore</strong> <span class='footer-links'> <a href='/tools'>Tools</a> <a href='/whats-on'>What&rsquo;s on</a> <a href='/community'>Community</a> <a href='/resources'>Resources</a> <a href='/shop'>Shop</a> </span></div>

<div><strong>Useful</strong> <span class='footer-links'> <a href='/daily-prompt'>Daily prompt</a> <a href='/writing-rooms'>Writing Rooms</a> <a href='/about'>About</a> <a href='/contact'>Contact</a> </span></div>

<div><strong>Policies</strong> <span class='footer-links'> <a href='/policies#privacy'>Privacy policy</a> <a href='/policies#terms'>Terms and conditions</a> <a href='/policies#accessibility'>Accessibility</a> </span></div>

<div><strong>Join in</strong> <a class='footer-cta' href='https://action.protheorem.com/j1.pl?a06431395e1fce54acf2a46806a6e633bca89c2058c4be50105192bc435db0ea'>Join the list</a></div>
</div>
</footer>

<audio id='cowbellAudio' preload='auto'></audio>

<script>
(function () {
  'use strict';

  const COWBELL_AUDIO_URL = '';

  const els = {
    modeButtons: Array.from(document.querySelectorAll('.mode-button')),
    sprintPanel: document.getElementById('sprintPanel'),
    pomodoroPanel: document.getElementById('pomodoroPanel'),

    sprintDisplay: document.getElementById('sprintDisplay'),
    sprintStage: document.getElementById('sprintStage'),
    sprintStatus: document.getElementById('sprintStatus'),
    sprintLengthLabel: document.getElementById('sprintLengthLabel'),
    sprintCustomMinutes: document.getElementById('sprintCustomMinutes'),
    sprintAddButtons: Array.from(document.querySelectorAll('[data-add]')),
    sprintClearLength: document.getElementById('sprintClearLength'),
    sprintStart: document.getElementById('sprintStart'),
    sprintPause: document.getElementById('sprintPause'),
    sprintResume: document.getElementById('sprintResume'),
    sprintReset: document.getElementById('sprintReset'),
    sprintComplete: document.getElementById('sprintComplete'),

    pomodoroDisplay: document.getElementById('pomodoroDisplay'),
    pomodoroStage: document.getElementById('pomodoroStage'),
    pomodoroStatus: document.getElementById('pomodoroStatus'),
    workMinutes: document.getElementById('workMinutes'),
    shortBreakMinutes: document.getElementById('shortBreakMinutes'),
    longBreakMinutes: document.getElementById('longBreakMinutes'),
    longBreakAfter: document.getElementById('longBreakAfter'),
    totalPomodoros: document.getElementById('totalPomodoros'),
    pomodoroStart: document.getElementById('pomodoroStart'),
    pomodoroPause: document.getElementById('pomodoroPause'),
    pomodoroResume: document.getElementById('pomodoroResume'),
    pomodoroSkip: document.getElementById('pomodoroSkip'),
    pomodoroReset: document.getElementById('pomodoroReset'),
    pomodoroComplete: document.getElementById('pomodoroComplete'),

    intentionButtons: Array.from(document.querySelectorAll('.intention-button')),
    workNote: document.getElementById('workNote'),
    soundToggleWrap: document.getElementById('soundToggleWrap'),
    soundEnabled: document.getElementById('soundEnabled'),
    cowbellAudio: document.getElementById('cowbellAudio')
  };

  let activeMode = 'sprint';
  let timerInterval = null;

  let sprint = {
    selectedSeconds: 0,
    remainingSeconds: 0,
    running: false,
    paused: false
  };

  let pomodoro = {
    stage: 'work',
    currentBlock: 1,
    remainingSeconds: 25 * 60,
    running: false,
    paused: false,
    waitingForNext: false
  };

  let selectedIntention = 'drafting';

  function clampNumber(value, min, max, fallback) {
    const number = parseInt(value, 10);
    if (Number.isNaN(number)) return fallback;
    return Math.min(max, Math.max(min, number));
  }

  function formatTime(totalSeconds) {
    const safeSeconds = Math.max(0, totalSeconds);
    const minutes = Math.floor(safeSeconds / 60);
    const seconds = safeSeconds % 60;
    return String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
  }

  function clearRunningTimer() {
    if (timerInterval) {
      clearInterval(timerInterval);
      timerInterval = null;
    }
  }

  function getPomodoroSettings() {
    return {
      workMinutes: clampNumber(els.workMinutes.value, 1, 120, 25),
      shortBreakMinutes: clampNumber(els.shortBreakMinutes.value, 1, 60, 5),
      longBreakMinutes: clampNumber(els.longBreakMinutes.value, 1, 90, 15),
      longBreakAfter: clampNumber(els.longBreakAfter.value, 1, 12, 4),
      totalPomodoros: clampNumber(els.totalPomodoros.value, 1, 24, 4)
    };
  }

  function saveSettings() {
    const settings = getPomodoroSettings();
    localStorage.setItem('wgTimerPomodoroSettings', JSON.stringify(settings));
    localStorage.setItem('wgTimerIntention', selectedIntention);
    localStorage.setItem('wgTimerNote', els.workNote.value || '');
    localStorage.setItem('wgTimerSoundEnabled', els.soundEnabled.checked ? 'yes' : 'no');
  }

  function loadSettings() {
    try {
      const stored = JSON.parse(localStorage.getItem('wgTimerPomodoroSettings') || '{}');

      if (stored.workMinutes) els.workMinutes.value = stored.workMinutes;
      if (stored.shortBreakMinutes) els.shortBreakMinutes.value = stored.shortBreakMinutes;
      if (stored.longBreakMinutes) els.longBreakMinutes.value = stored.longBreakMinutes;
      if (stored.longBreakAfter) els.longBreakAfter.value = stored.longBreakAfter;
      if (stored.totalPomodoros) els.totalPomodoros.value = stored.totalPomodoros;
    } catch (error) {
      localStorage.removeItem('wgTimerPomodoroSettings');
    }

    const storedIntention = localStorage.getItem('wgTimerIntention');
    if (storedIntention) {
      selectedIntention = storedIntention;
      els.intentionButtons.forEach(function (button) {
        button.classList.toggle('active', button.dataset.intention === storedIntention);
      });
    }

    els.workNote.value = localStorage.getItem('wgTimerNote') || '';
    els.soundEnabled.checked = localStorage.getItem('wgTimerSoundEnabled') === 'yes';
  }

  function prepareCowbell() {
    if (!COWBELL_AUDIO_URL) return;
    els.cowbellAudio.src = COWBELL_AUDIO_URL;
    els.soundToggleWrap.classList.add('available');
  }

  function playCowbellIfEnabled() {
    if (!COWBELL_AUDIO_URL || !els.soundEnabled.checked) return;

    try {
      els.cowbellAudio.currentTime = 0;
      els.cowbellAudio.play().catch(function () {});
    } catch (error) {}
  }

  function switchMode(mode) {
    activeMode = mode;
    clearRunningTimer();

    sprint.running = false;
    sprint.paused = false;
    pomodoro.running = false;
    pomodoro.paused = false;

    els.modeButtons.forEach(function (button) {
      button.classList.toggle('active', button.dataset.mode === mode);
    });

    els.sprintPanel.classList.toggle('active', mode === 'sprint');
    els.pomodoroPanel.classList.toggle('active', mode === 'pomodoro');

    updateSprintControls();
    updatePomodoroControls();
  }

  function updateSprintDisplay() {
    els.sprintDisplay.textContent = formatTime(sprint.remainingSeconds);
    els.sprintLengthLabel.textContent = Math.round(sprint.selectedSeconds / 60) + ' minutes';
  }

  function updateSprintControls() {
    els.sprintStart.disabled = sprint.running || sprint.selectedSeconds <= 0;
    els.sprintPause.disabled = !sprint.running;
    els.sprintResume.disabled = !sprint.paused;
  }

  function addSprintMinutes(minutes) {
    if (sprint.running) return;

    const newMinutes = Math.min(240, Math.round(sprint.selectedSeconds / 60) + minutes);
    sprint.selectedSeconds = newMinutes * 60;
    sprint.remainingSeconds = sprint.selectedSeconds;
    els.sprintCustomMinutes.value = '';
    els.sprintComplete.classList.remove('show');
    els.sprintStage.textContent = 'Sprint ready';
    els.sprintStatus.textContent = 'Ready for a ' + newMinutes + '-minute ' + selectedIntention + ' sprint.';
    updateSprintDisplay();
    updateSprintControls();
  }

  function setSprintMinutes(minutes) {
    if (sprint.running) return;

    const safeMinutes = clampNumber(minutes, 1, 240, 10);
    sprint.selectedSeconds = safeMinutes * 60;
    sprint.remainingSeconds = sprint.selectedSeconds;
    els.sprintComplete.classList.remove('show');
    els.sprintStage.textContent = 'Sprint ready';
    els.sprintStatus.textContent = 'Ready for a ' + safeMinutes + '-minute ' + selectedIntention + ' sprint.';
    updateSprintDisplay();
    updateSprintControls();
  }

  function clearSprintLength() {
    if (sprint.running) return;

    sprint.selectedSeconds = 0;
    sprint.remainingSeconds = 0;
    sprint.paused = false;
    els.sprintCustomMinutes.value = '';
    els.sprintComplete.classList.remove('show');
    els.sprintStage.textContent = 'Sprint ready';
    els.sprintStatus.textContent = 'Add some time, then start.';
    updateSprintDisplay();
    updateSprintControls();
  }

  function startSprint() {
    if (sprint.selectedSeconds <= 0) return;

    sprint.running = true;
    sprint.paused = false;
    els.sprintComplete.classList.remove('show');
    els.sprintStage.textContent = 'Writing sprint';
    els.sprintStatus.textContent = 'Sprint running. Do the bit in front of you.';
    updateSprintControls();

    clearRunningTimer();
    timerInterval = setInterval(function () {
      sprint.remainingSeconds -= 1;
      updateSprintDisplay();

      if (sprint.remainingSeconds <= 0) {
        clearRunningTimer();
        sprint.remainingSeconds = 0;
        sprint.running = false;
        sprint.paused = false;
        els.sprintStage.textContent = 'Sprint complete';
        els.sprintStatus.textContent = 'Time. That counts.';
        els.sprintComplete.classList.add('show');
        playCowbellIfEnabled();
        updateSprintDisplay();
        updateSprintControls();
      }
    }, 1000);
  }

  function pauseSprint() {
    clearRunningTimer();
    sprint.running = false;
    sprint.paused = true;
    els.sprintStatus.textContent = 'Paused. Not ideal, but sometimes necessary.';
    updateSprintControls();
  }

  function resumeSprint() {
    if (!sprint.paused) return;
    sprint.paused = false;
    startSprint();
  }

  function resetSprint() {
    clearRunningTimer();
    sprint.running = false;
    sprint.paused = false;
    sprint.remainingSeconds = sprint.selectedSeconds;
    els.sprintStage.textContent = 'Sprint ready';
    els.sprintStatus.textContent = sprint.selectedSeconds > 0 ? 'Reset. Still no need to make this dramatic.' : 'Add some time, then start.';
    els.sprintComplete.classList.remove('show');
    updateSprintDisplay();
    updateSprintControls();
  }

  function stageLabel(stage) {
    if (stage === 'work') return 'Writing time';
    if (stage === 'shortBreak') return 'Short break';
    if (stage === 'longBreak') return 'Long break';
    return 'Complete';
  }

  function stageMinutes(stage) {
    const settings = getPomodoroSettings();

    if (stage === 'work') return settings.workMinutes;
    if (stage === 'shortBreak') return settings.shortBreakMinutes;
    if (stage === 'longBreak') return settings.longBreakMinutes;
    return 0;
  }

  function updatePomodoroDisplay() {
    const settings = getPomodoroSettings();

    els.pomodoroDisplay.textContent = formatTime(pomodoro.remainingSeconds);
    els.pomodoroStage.textContent = stageLabel(pomodoro.stage);

    if (pomodoro.stage === 'work') {
      els.pomodoroStatus.textContent = 'Pomodoro ' + pomodoro.currentBlock + ' of ' + settings.totalPomodoros + '. Writing time.';
    } else if (pomodoro.stage === 'shortBreak') {
      els.pomodoroStatus.textContent = 'Short break before writing block ' + (pomodoro.currentBlock + 1) + '.';
    } else if (pomodoro.stage === 'longBreak') {
      els.pomodoroStatus.textContent = 'Long break before writing block ' + (pomodoro.currentBlock + 1) + '.';
    } else {
      els.pomodoroStatus.textContent = 'Sequence complete.';
    }

    if (pomodoro.waitingForNext && pomodoro.stage !== 'done') {
      els.pomodoroStatus.textContent += ' Press Start next when ready.';
    }
  }

  function updatePomodoroControls() {
    els.pomodoroStart.disabled = pomodoro.running || pomodoro.stage === 'done';
    els.pomodoroPause.disabled = !pomodoro.running;
    els.pomodoroResume.disabled = !pomodoro.paused;
    els.pomodoroSkip.disabled = pomodoro.stage === 'done';
    els.pomodoroStart.textContent = pomodoro.waitingForNext ? 'Start next' : 'Start';
  }

  function resetPomodoro() {
    clearRunningTimer();

    const settings = getPomodoroSettings();

    pomodoro.stage = 'work';
    pomodoro.currentBlock = 1;
    pomodoro.remainingSeconds = settings.workMinutes * 60;
    pomodoro.running = false;
    pomodoro.paused = false;
    pomodoro.waitingForNext = false;

    els.pomodoroComplete.classList.remove('show');
    saveSettings();
    updatePomodoroDisplay();
    updatePomodoroControls();
  }

  function moveToNextPomodoroStage() {
    const settings = getPomodoroSettings();

    if (pomodoro.stage === 'work') {
      if (pomodoro.currentBlock >= settings.totalPomodoros) {
        pomodoro.stage = 'done';
        pomodoro.remainingSeconds = 0;
        pomodoro.waitingForNext = false;
        els.pomodoroComplete.classList.add('show');
        playCowbellIfEnabled();
        updatePomodoroDisplay();
        updatePomodoroControls();
        return;
      }

      const nextBreakIsLong = pomodoro.currentBlock % settings.longBreakAfter === 0;
      pomodoro.stage = nextBreakIsLong ? 'longBreak' : 'shortBreak';
      pomodoro.remainingSeconds = stageMinutes(pomodoro.stage) * 60;
      pomodoro.waitingForNext = true;
      playCowbellIfEnabled();
    } else {
      pomodoro.currentBlock += 1;
      pomodoro.stage = 'work';
      pomodoro.remainingSeconds = settings.workMinutes * 60;
      pomodoro.waitingForNext = true;
      playCowbellIfEnabled();
    }

    pomodoro.running = false;
    pomodoro.paused = false;
    updatePomodoroDisplay();
    updatePomodoroControls();
  }

  function startPomodoro() {
    if (pomodoro.stage === 'done') return;

    pomodoro.running = true;
    pomodoro.paused = false;
    pomodoro.waitingForNext = false;
    els.pomodoroComplete.classList.remove('show');

    updatePomodoroDisplay();
    updatePomodoroControls();

    clearRunningTimer();
    timerInterval = setInterval(function () {
      pomodoro.remainingSeconds -= 1;
      updatePomodoroDisplay();

      if (pomodoro.remainingSeconds <= 0) {
        clearRunningTimer();
        pomodoro.remainingSeconds = 0;
        moveToNextPomodoroStage();
      }
    }, 1000);
  }

  function pausePomodoro() {
    clearRunningTimer();
    pomodoro.running = false;
    pomodoro.paused = true;
    els.pomodoroStatus.textContent = 'Paused. The tomatoes will cope.';
    updatePomodoroControls();
  }

  function resumePomodoro() {
    if (!pomodoro.paused) return;
    pomodoro.paused = false;
    startPomodoro();
  }

  function skipPomodoroStage() {
    clearRunningTimer();
    pomodoro.running = false;
    pomodoro.paused = false;
    moveToNextPomodoroStage();
  }

  els.modeButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      switchMode(button.dataset.mode);
    });
  });

  els.sprintAddButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      addSprintMinutes(parseInt(button.dataset.add, 10));
    });
  });

  els.sprintClearLength.addEventListener('click', clearSprintLength);

  els.sprintCustomMinutes.addEventListener('input', function () {
    if (els.sprintCustomMinutes.value) {
      setSprintMinutes(els.sprintCustomMinutes.value);
    }
  });

  els.sprintStart.addEventListener('click', startSprint);
  els.sprintPause.addEventListener('click', pauseSprint);
  els.sprintResume.addEventListener('click', resumeSprint);
  els.sprintReset.addEventListener('click', resetSprint);

  [
    els.workMinutes,
    els.shortBreakMinutes,
    els.longBreakMinutes,
    els.longBreakAfter,
    els.totalPomodoros
  ].forEach(function (input) {
    input.addEventListener('change', resetPomodoro);
    input.addEventListener('input', saveSettings);
  });

  els.pomodoroStart.addEventListener('click', startPomodoro);
  els.pomodoroPause.addEventListener('click', pausePomodoro);
  els.pomodoroResume.addEventListener('click', resumePomodoro);
  els.pomodoroSkip.addEventListener('click', skipPomodoroStage);
  els.pomodoroReset.addEventListener('click', resetPomodoro);

  els.intentionButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      els.intentionButtons.forEach(function (item) {
        item.classList.remove('active');
      });

      button.classList.add('active');
      selectedIntention = button.dataset.intention || 'writing';
      saveSettings();

      if (!sprint.running && sprint.selectedSeconds > 0) {
        els.sprintStatus.textContent = 'Ready for a ' + Math.round(sprint.selectedSeconds / 60) + '-minute ' + selectedIntention + ' sprint.';
      }
    });
  });

  els.workNote.addEventListener('input', saveSettings);
  els.soundEnabled.addEventListener('change', saveSettings);

  loadSettings();
  prepareCowbell();
  updateSprintDisplay();
  updateSprintControls();
  resetPomodoro();
})();
</script>
```