170 lines
7.1 KiB
HTML
170 lines
7.1 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>
|
||
|
||
<!-- 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, publisher, footer go here in Task 4 -->
|
||
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html>
|