srdjankotarlic · srdjankotarlic · Aug 28, 2026 · Aug 28, 2026
diff --git a/README.md b/README.md
@@ -100,6 +100,14 @@ The **Backstage view** shows NOW, NEXT, the schedule and over/under status on an
 
 ![ProTimer backstage view](docs/screenshot-backstage.png)
 
+## Practical Guides and Templates
+
+- [Add a free OBS countdown timer with a phone remote](https://srdjankotarlic.github.io/protimer/guides/obs-countdown-timer-phone-remote.html)
+- [Set up a stage timer for conference speakers](https://srdjankotarlic.github.io/protimer/guides/conference-stage-timer-setup.html)
+- [Control ProTimer with Bitfocus Companion and Stream Deck](https://srdjankotarlic.github.io/protimer/guides/bitfocus-companion-stage-timer.html)
+- [Configure warning colors, overtime, and speaker messages](https://srdjankotarlic.github.io/protimer/guides/warning-colors-overtime-speaker-messages.html)
+- [Sample conference rundown CSV](templates/conference-rundown.csv) and [OBS Browser Source checklist](templates/OBS-BROWSER-SOURCE-CHECKLIST.md)
+
 <details>
 <summary><strong>📖 Open the full operator guide</strong> — display, OBS, phones, rundown, automation and shortcuts</summary>
 
@@ -244,6 +252,8 @@ Issues and pull requests are welcome — bug reports, feature ideas, translation
 
 If you use ProTimer on a show, a ⭐ or a quick note about what worked (or didn't) genuinely helps.
 
+For PowerPoint and PDF presentation playback inside OBS, see [PPTBridge SK](https://srdjankotarlic.github.io/pptbridge-sk-obs/), the free presentation-source plugin from the same author.
+
 ---
 
 ## 👤 Author

diff --git a/docs/guides/bitfocus-companion-stage-timer.html b/docs/guides/bitfocus-companion-stage-timer.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>How to Control a Stage Timer With Bitfocus Companion</title>
+  <meta name="description" content="Control ProTimer from Bitfocus Companion and Stream Deck with actions, live timer variables, running and blackout feedback, or Generic HTTP commands." />
+  <link rel="canonical" href="https://srdjankotarlic.github.io/protimer/guides/bitfocus-companion-stage-timer.html" />
+  <link rel="icon" type="image/png" href="../favicon.png" />
+  <link rel="stylesheet" href="guide.css" />
+</head>
+<body>
+<header class="site-header"><div class="wrap"><img src="../favicon.png" alt="" /><a class="brand" href="../">ProTimer</a><nav><a href="./">Guides</a><a href="../#features">Features</a><a href="https://github.com/srdjankotarlic/protimer">GitHub</a></nav></div></header>
+<main><article class="wrap">
+  <div class="eyebrow">Stream Deck and show control</div>
+  <h1>Control ProTimer with Bitfocus Companion</h1>
+  <p class="lede">The dedicated ProTimer module gives Companion named actions, live status, timer variables, and starter presets. Generic HTTP remains a useful zero-install fallback.</p>
+  <div class="meta"><span>Bitfocus Companion</span><span>Stream Deck</span><span>Live feedback</span></div>
+  <h2>Get the connection details</h2>
+  <ol><li>Open ProTimer's <strong>Network - OBS / Phone</strong> panel.</li><li>Find the API row and note the computer IP, port, and the value after <code>t=</code>.</li><li>Keep ProTimer and Companion on the same trusted network.</li></ol>
+  <div class="callout"><strong>Session token:</strong> the token changes whenever ProTimer restarts. Update the Companion connection after an app restart or use the newly shown API URL.</div>
+  <h2>Dedicated module</h2>
+  <p>The module repository is <a href="https://github.com/srdjankotarlic/companion-module-protimer">companion-module-protimer</a>. Until the module is accepted into the official Companion registry, install it through Companion's developer-modules path and enter the host, port, and token from ProTimer.</p>
+  <p>Core actions include Start/Pause, Reset, GO next cue, Blackout, time adjustment, set duration, mode, on-screen text, and speaker messages. Variables and feedback expose the live timer and connection state.</p>
+  <h2>Suggested first page</h2>
+  <table><thead><tr><th>Button</th><th>Purpose</th></tr></thead><tbody>
+    <tr><td>START / PAUSE</td><td>Main transport with green running feedback.</td></tr>
+    <tr><td>RESET</td><td>Returns the current timer to its configured duration.</td></tr>
+    <tr><td>GO</td><td>Loads and starts the next rundown cue.</td></tr>
+    <tr><td>+1 MIN / -1 MIN</td><td>Fast correction during a live session.</td></tr>
+    <tr><td>BLACKOUT</td><td>Hides the timer with a red active feedback.</td></tr>
+    <tr><td>WRAP UP / CLEAR</td><td>Sends and clears the speaker message.</td></tr>
+  </tbody></table>
+  <h2>Generic HTTP fallback</h2>
+  <p>Add a Generic HTTP connection and send GET requests using the API URL displayed by ProTimer:</p>
+  <pre><code>http://&lt;protimer-ip&gt;:7878/cmd?type=start&amp;t=&lt;token&gt;
+http://&lt;protimer-ip&gt;:7878/cmd?type=go&amp;t=&lt;token&gt;
+http://&lt;protimer-ip&gt;:7878/cmd?type=adjust&amp;value=-60&amp;t=&lt;token&gt;</code></pre>
+  <h2>Test the page</h2>
+  <ol><li>Start the timer and confirm the live time variable updates.</li><li>Pause and verify running feedback turns off.</li><li>Load a two-cue rundown and press GO.</li><li>Toggle Blackout twice and verify both the stage output and button feedback.</li><li>Restart ProTimer, update the token, and confirm the connection recovers.</li></ol>
+  <div class="cta-row"><a class="btn primary" href="https://github.com/srdjankotarlic/companion-module-protimer">Open the Companion module</a><a class="btn secondary" href="https://github.com/srdjankotarlic/protimer/releases/latest">Download ProTimer</a></div>
+  <div class="next"><strong>Fine-tuning the stage display?</strong> <a href="warning-colors-overtime-speaker-messages.html">Configure warning colors, overtime, and messages</a>.</div>
+</article></main>
+<footer><div class="wrap"><a href="./">All ProTimer guides</a> | <a href="https://github.com/srdjankotarlic/protimer/issues">Report an issue</a></div></footer>
+</body>
+</html>
diff --git a/docs/guides/conference-stage-timer-setup.html b/docs/guides/conference-stage-timer-setup.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>How to Set Up a Stage Timer for Conference Speakers</title>
+  <meta name="description" content="Set up ProTimer for conference speakers with a confidence screen, rundown, NOW/NEXT, backstage schedule, warning colors, and phone access." />
+  <link rel="canonical" href="https://srdjankotarlic.github.io/protimer/guides/conference-stage-timer-setup.html" />
+  <link rel="icon" type="image/png" href="../favicon.png" />
+  <link rel="stylesheet" href="guide.css" />
+</head>
+<body>
+<header class="site-header"><div class="wrap"><img src="../favicon.png" alt="" /><a class="brand" href="../">ProTimer</a><nav><a href="./">Guides</a><a href="../#features">Features</a><a href="https://github.com/srdjankotarlic/protimer">GitHub</a></nav></div></header>
+<main><article class="wrap">
+  <div class="eyebrow">Conference workflow</div>
+  <h1>Set up a stage timer for conference speakers</h1>
+  <p class="lede">A good timer workflow gives the speaker one clear number, the operator fast control, and the crew a shared view of what is happening next.</p>
+  <div class="meta"><span>Confidence monitor</span><span>Rundown</span><span>Backstage view</span></div>
+  <img class="shot" src="../screenshot-backstage.png" alt="ProTimer backstage view with NOW, NEXT, schedule, and over-under status" width="1280" height="688" />
+  <h2>Prepare the stage output</h2>
+  <ol><li>Connect every display before opening ProTimer.</li><li>Choose the confidence monitor in Control and use <strong>Send to screen</strong>.</li><li>Set background, digit, yellow, and red colors for the room lighting and display.</li><li>Choose the warning thresholds and decide whether overtime should continue below zero.</li></ol>
+  <h2>Build the rundown</h2>
+  <p>Each cue uses four fields: name, duration, optional note, and optional color. You can add cues manually or paste rows from Excel/Google Sheets in this order:</p>
+  <pre><code>Session name    00:20:00    Speaker / operator note    #2563EB</code></pre>
+  <p>Set the planned show start so every row receives a clock time. Enable NOW/NEXT on the stage output if that information helps the speaker.</p>
+  <div class="callout"><strong>Sample file:</strong> start with the <a href="https://github.com/srdjankotarlic/protimer/blob/main/templates/conference-rundown.csv">conference rundown CSV</a>. Open it in Excel or Sheets, edit the rows, copy them, click an empty part of the ProTimer rundown card, and paste.</div>
+  <h2>Give the crew a backstage view</h2>
+  <p>Open the Backstage URL on a stage-manager laptop, green-room display, or phone. It shows the current cue, next cue, full schedule, live remaining time, and whether the projected finish is ahead or behind plan.</p>
+  <h2>Rehearse the operator actions</h2>
+  <ul><li><strong>START RUNDOWN</strong> always loads and starts cue one.</li><li><strong>GO</strong> or the <code>N</code> key loads and starts the next cue.</li><li>Arrow keys adjust the live countdown when Control is focused.</li><li>Speaker messages appear at the bottom without replacing the timer.</li><li>Blackout hides the output when timing should not be visible.</li></ul>
+  <h2>Five-minute pre-show check</h2>
+  <ul><li>Confirm Control and Output are on the intended displays.</li><li>Start cue one, GO to cue two, then Reset.</li><li>Open Backstage on the real crew device.</li><li>Send a speaker message and clear it.</li><li>Verify warning colors and overtime behavior.</li><li>Disable sleep, notifications, and automatic updates.</li></ul>
+  <div class="cta-row"><a class="btn primary" href="https://github.com/srdjankotarlic/protimer/releases/latest">Download ProTimer</a><a class="btn secondary" href="https://github.com/srdjankotarlic/protimer/blob/main/templates/README.md">Open all templates</a></div>
+  <div class="next"><strong>Adding a control surface?</strong> <a href="bitfocus-companion-stage-timer.html">Connect Bitfocus Companion and Stream Deck</a>.</div>
+</article></main>
+<footer><div class="wrap"><a href="./">All ProTimer guides</a> | <a href="https://github.com/srdjankotarlic/protimer/discussions">Setup questions</a></div></footer>
+</body>
+</html>
diff --git a/docs/guides/guide.css b/docs/guides/guide.css
@@ -0,0 +1,90 @@
+:root {
+  --bg: #090d14;
+  --panel: #111827;
+  --panel2: #192235;
+  --border: #27344a;
+  --text: #f1f5f9;
+  --dim: #a5b4c7;
+  --accent: #2563eb;
+  --accent2: #60a5fa;
+  --green: #4ade80;
+  --radius: 10px;
+  --maxw: 860px;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--accent2); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  border-bottom: 1px solid var(--border);
+  background: rgba(9, 13, 20, 0.9);
+  backdrop-filter: blur(8px);
+}
+.site-header .wrap { min-height: 60px; display: flex; align-items: center; gap: 12px; }
+.site-header img { width: 30px; height: 30px; border-radius: 7px; }
+.brand { color: var(--text); font-weight: 800; }
+.site-header nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
+.site-header nav a { color: var(--dim); }
+main { padding: 56px 0 72px; }
+.eyebrow { color: var(--green); font-size: 14px; font-weight: 800; text-transform: uppercase; }
+h1 { margin: 8px 0 16px; max-width: 790px; font-size: 44px; line-height: 1.15; letter-spacing: 0; }
+h2 { margin: 48px 0 12px; font-size: 28px; line-height: 1.25; letter-spacing: 0; }
+h3 { margin: 28px 0 8px; font-size: 20px; letter-spacing: 0; }
+.lede { margin: 0 0 26px; color: var(--dim); font-size: 20px; }
+.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
+.meta span { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--dim); font-size: 13px; }
+.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
+.btn { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 17px; font-weight: 700; }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn.secondary { background: var(--panel); color: var(--text); }
+.callout, .card {
+  margin: 24px 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  padding: 20px;
+}
+.callout strong { color: var(--green); }
+ol, ul { padding-left: 24px; }
+li { margin: 8px 0; }
+code { border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); padding: 1px 6px; font-size: 0.9em; }
+pre { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 16px; }
+pre code { border: 0; background: transparent; padding: 0; }
+.shot { width: 100%; height: auto; margin: 30px 0; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
+.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
+.card { margin: 0; }
+.card h2, .card h3 { margin: 0 0 8px; font-size: 20px; }
+.card p { margin: 0; color: var(--dim); font-size: 15px; }
+.card a { display: block; color: var(--text); }
+.card a:hover { text-decoration: none; }
+.card a:hover h2, .card a:hover h3 { color: var(--accent2); }
+.next { margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--border); }
+table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
+th, td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
+th { background: var(--panel); }
+footer { border-top: 1px solid var(--border); padding: 30px 0; color: var(--dim); font-size: 14px; text-align: center; }
+footer a { color: var(--dim); }
+
+@media (max-width: 680px) {
+  body { font-size: 16px; }
+  .site-header nav a:not(:last-child) { display: none; }
+  main { padding-top: 38px; }
+  h1 { font-size: 32px; overflow-wrap: anywhere; }
+  .lede { font-size: 18px; }
+  .guide-grid { grid-template-columns: 1fr; }
+  .cta-row { flex-direction: column; }
+  .btn { text-align: center; }
+  table { display: block; overflow-x: auto; }
+}
diff --git a/docs/guides/index.html b/docs/guides/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ProTimer Guides - Stage timer, OBS, phones and Companion</title>
+  <meta name="description" content="Practical ProTimer guides for conference speaker timing, OBS Browser Source overlays, phone remotes, Bitfocus Companion, warning colors, and rundowns." />
+  <link rel="canonical" href="https://srdjankotarlic.github.io/protimer/guides/" />
+  <link rel="icon" type="image/png" href="../favicon.png" />
+  <link rel="stylesheet" href="guide.css" />
+</head>
+<body>
+<header class="site-header"><div class="wrap"><img src="../favicon.png" alt="" /><a class="brand" href="../">ProTimer</a><nav><a href="../#start">Quick start</a><a href="../#download">Download</a><a href="https://github.com/srdjankotarlic/protimer">GitHub</a></nav></div></header>
+<main><div class="wrap">
+  <div class="eyebrow">Practical guides</div>
+  <h1>Put the same clear timer everywhere your show needs it</h1>
+  <p class="lede">Short walkthroughs for OBS, conference stages, phones, Stream Deck, warning colors, and speaker messages.</p>
+  <div class="guide-grid">
+    <article class="card"><a href="obs-countdown-timer-phone-remote.html"><h2>OBS countdown timer with a phone remote</h2><p>Add a transparent Browser Source and control it safely over the venue Wi-Fi.</p></a></article>
+    <article class="card"><a href="conference-stage-timer-setup.html"><h2>Set up a stage timer for conference speakers</h2><p>Prepare the output, rundown, backstage view, and rehearsal checks.</p></a></article>
+    <article class="card"><a href="bitfocus-companion-stage-timer.html"><h2>Control ProTimer with Bitfocus Companion</h2><p>Use the dedicated module or a Generic HTTP fallback from Stream Deck.</p></a></article>
+    <article class="card"><a href="warning-colors-overtime-speaker-messages.html"><h2>Warning colors, overtime, and speaker messages</h2><p>Make the stage screen communicate clearly without distracting the room.</p></a></article>
+  </div>
+  <div class="callout"><strong>Ready-made starting point:</strong> download the <a href="https://github.com/srdjankotarlic/protimer/blob/main/templates/conference-rundown.csv">conference rundown CSV</a> and open the <a href="https://github.com/srdjankotarlic/protimer/blob/main/templates/README.md">template guide</a>.</div>
+  <div class="cta-row"><a class="btn primary" href="https://github.com/srdjankotarlic/protimer/releases/latest">Download ProTimer</a><a class="btn secondary" href="https://github.com/srdjankotarlic/protimer/discussions">Ask a setup question</a></div>
+</div></main>
+<footer><div class="wrap"><a href="../">ProTimer</a> | <a href="https://github.com/srdjankotarlic/protimer/issues">Report an issue</a> | <a href="https://srdjankotarlic.github.io/pptbridge-sk-obs/">PPTBridge SK for OBS</a></div></footer>
+</body>
+</html>