9607462a7c
Adds a new feature row (Row 8) describing the dying mechanic — 1d4+CON countdown, recovery saves, and permanent death. Screenshot generated via the Playwright script showing a dying character card with red border in the DM view. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
213 lines
9.3 KiB
HTML
213 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Darkwatch — Real-Time Shadowdark Companion</title>
|
||
<meta name="description" content="A real-time session companion for Shadowdark RPG. Characters, dice, spells, and atmosphere — synced live across every device at the table.">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ── Hero ─────────────────────────────────────────── -->
|
||
<section class="hero" id="top">
|
||
<div class="hero-content">
|
||
<div class="wordmark">◈ Darkwatch</div>
|
||
<h1 class="hero-headline">Your whole party.<br>One screen. No paper.</h1>
|
||
<p class="hero-subhead">
|
||
A real-time session companion for Shadowdark RPG. Characters, dice, spells,
|
||
and atmosphere — synced live across every device at the table.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="https://discord.gg/PLACEHOLDER" class="btn-primary">Join the Beta</a>
|
||
<a href="#features" class="scroll-hint">↓ See what it does</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── Features ──────────────────────────────────────── -->
|
||
<section class="features" id="features">
|
||
|
||
<div class="features-intro">
|
||
<div class="section-label">Everything at the table</div>
|
||
<h2>Built for Shadowdark. Designed for the whole party.</h2>
|
||
</div>
|
||
|
||
<!-- Row 1: screenshot left, text right -->
|
||
<div class="feature-row">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/character-sheet.png" alt="Darkwatch character sheet showing stats, gear, and talents">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Characters</div>
|
||
<h2 class="feature-heading">Every stat, always in sync.</h2>
|
||
<p class="feature-desc">
|
||
Full Shadowdark character sheets — STR, DEX, CON, INT, WIS, CHA, HP, AC, XP,
|
||
gear, and talents. Click any value to edit it. Changes sync to the DM and every
|
||
player at the table in real time.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 2: text left, screenshot right -->
|
||
<div class="feature-row reverse">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/character-creation.png" alt="Character creation wizard showing 3d6 stat rolling">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Character Creation</div>
|
||
<h2 class="feature-heading">Roll to begin.</h2>
|
||
<p class="feature-desc">
|
||
A guided four-step wizard: name, class, and ancestry — then roll 3d6 for each
|
||
stat and watch them land. Background, alignment, and deity last. HP, gear slots,
|
||
gold, and your title are all derived automatically.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 3: screenshot left, text right -->
|
||
<div class="feature-row">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/dice-roll.png" alt="3D dice rolling with character-colored dice and shared roll log">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Dice Rolling</div>
|
||
<h2 class="feature-heading">3D dice. Shared results. No hiding rolls.</h2>
|
||
<p class="feature-desc">
|
||
Dice roll in 3D, in your character's color. Results are determined server-side —
|
||
no one can fudge them. Every roll appears in a shared log that the whole table
|
||
sees at the same time.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 4: text left, screenshot right -->
|
||
<div class="feature-row reverse">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/spellcasting.png" alt="Spellcasting panel with spell slots and exhaustion tracking">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Spellcasting</div>
|
||
<h2 class="feature-heading">Cast, fail, and suffer — together.</h2>
|
||
<p class="feature-desc">
|
||
34 Tier 1–2 spells for Wizard and Priest. Every cast rolls a d20 — fail and
|
||
lose a spell slot. Wizards risk the mishap table. Priests do penance. Rest to
|
||
recover. The DM sees your spell focus state at a glance.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 5: screenshot left, text right -->
|
||
<div class="feature-row">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/atmosphere.png" alt="Atmospheric fog effect covering the campaign view">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Atmosphere</div>
|
||
<h2 class="feature-heading">Set the scene.</h2>
|
||
<p class="feature-desc">
|
||
The DM controls atmosphere effects that every player sees in real time:
|
||
creeping fog, crackling fire, rain, or drifting embers. One click and the
|
||
whole table feels the dungeon shift.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 6: text left, screenshot right -->
|
||
<div class="feature-row reverse">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/initiative-active.png" alt="Initiative tracker showing party vs enemies with round counter">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Initiative Tracker</div>
|
||
<h2 class="feature-heading">Shadowdark initiative, handled.</h2>
|
||
<p class="feature-desc">
|
||
Everyone rolls. The tracker takes the party's highest result against the DM's
|
||
single enemy roll. Whoever wins goes first — then the DM clicks Next Turn and
|
||
the round counter climbs. Enemy HP is visible to the DM only.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 7: screenshot left, text right -->
|
||
<div class="feature-row">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/dm-cards.png" alt="DM view showing compact character cards for the whole party">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">DM View</div>
|
||
<h2 class="feature-heading">The whole party, at a glance.</h2>
|
||
<p class="feature-desc">
|
||
The DM sees every character in a compact grid: HP, AC, luck token, torch timer,
|
||
and all six stat modifiers — without opening a single sheet. Drill in when you
|
||
need to, stay out when you don't.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 8: text left, screenshot right -->
|
||
<div class="feature-row reverse">
|
||
<div class="feature-image">
|
||
<img src="assets/screenshots/death-timer.png" alt="Initiative tracker showing a dying character with skull countdown and Roll Recovery button">
|
||
</div>
|
||
<div class="feature-text">
|
||
<div class="feature-label">Death Timer</div>
|
||
<h2 class="feature-heading">Every round could be the last.</h2>
|
||
<p class="feature-desc">
|
||
When a character drops to 0 HP, a countdown begins: 1d4 + CON modifier rounds
|
||
before permanent death. The DM sees the timer on the card and can roll a d20
|
||
recovery save from the initiative tracker — an 18 or higher lets the character
|
||
stand at 1 HP. Run out the clock and they're gone for good.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Torch + Luck callout cards (no screenshot) -->
|
||
<div class="callout-row">
|
||
<div class="callout-card">
|
||
<div class="callout-icon">🕯</div>
|
||
<h3>Torch Timer</h3>
|
||
<p>A real 60-minute countdown, synced across every device. The DM starts it when
|
||
the torch is lit. Everyone watches it burn.</p>
|
||
</div>
|
||
<div class="callout-card">
|
||
<div class="callout-icon">✦</div>
|
||
<h3>Luck Tokens</h3>
|
||
<p>Each character has a luck token the DM and player can both see and toggle.
|
||
No more forgetting who spent their luck last session.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- ── System Support ────────────────────────────────── -->
|
||
<section class="system-support">
|
||
<div class="section-label">System Support</div>
|
||
<h2>Built for Shadowdark RPG. More systems coming.</h2>
|
||
<p>Currently: Shadowdark RPG · Next: based on demand</p>
|
||
</section>
|
||
|
||
<!-- ── Publisher ─────────────────────────────────────── -->
|
||
<section class="publisher">
|
||
<div class="section-label">For game publishers</div>
|
||
<h2>"We're not here to sell your rules."</h2>
|
||
<p>
|
||
Darkwatch is a session companion — a torch timer, a dice roller, an initiative
|
||
tracker. Your players still need the book. We just want to make the table more
|
||
fun. If you'd like to talk, we'd love to.
|
||
</p>
|
||
<a href="mailto:email@email.com" class="btn-secondary">Get in touch</a>
|
||
</section>
|
||
|
||
<!-- ── Footer ────────────────────────────────────────── -->
|
||
<footer class="footer">
|
||
<div class="footer-left">Darkwatch · Built for the table</div>
|
||
<div class="footer-right">
|
||
<a href="https://discord.gg/PLACEHOLDER">Discord</a>
|
||
<a href="https://github.com/PLACEHOLDER/darkwatch">GitHub</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html>
|