aaron/darkwatch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add brochure feature rows

Browse source
This commit is contained in:
Aaron Wood 2026-04-11 18:29:43 -04:00
parent 8fb59b5c17
commit 6d0fee941e
1 changed files with 139 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
site/index.html
View file

@ -25,7 +25,145 @@
</div>
</section>
<!-- features, system support, publisher, footer go here in later tasks -->
<!-- ── 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>