docs(mockups): add the UI/systems bible (11 screens + README)

High-fidelity HTML/CSS/JS design references for the tactical-CRPG direction — title, character creation, character sheet, inventory, world map, quest log, shop, pause/settings, dialogue, combat HUD, main exploration window. README is the handoff spec (visual system, per-screen state models, Godot translation notes). Not production code — the source of truth for the game's look + systems. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-10 16:06:23 -05:00
parent b639cab0c2
commit 49bc6b22c0
13 changed files with 4671 additions and 0 deletions
--- a/Screen.dc.html
+++ b/Screen.dc.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet data-dc-atomics>
+<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
+<style>
+body{margin:0;background:#0a0806;font-family:system-ui,sans-serif}
+a{color:#8f3a34}a:hover{color:#6f2b26}
+@keyframes ember{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.85}100%{transform:translateY(-460px) scale(.3);opacity:0}}
+@keyframes glow{0%,100%{opacity:.5}50%{opacity:.8}}
+</style>
+</helmet>
+<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 20%,#2a2018 0%,#160f0a 45%,#0a0806 100%)">
+
+  <!-- key-art placeholder -->
+  <div style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,#181310 0 22px,#141009 22px 44px);opacity:.5"></div>
+  <div style="position:absolute;right:8%;top:44%;transform:translateY(-50%);text-align:center;color:#4a3f30;font:13px ui-monospace,monospace;letter-spacing:.18em;opacity:.6">KEY ART DROPS IN HERE<br><span style="font:13px 'Architects Daughter',cursive;letter-spacing:.02em">a lone figure · the gallows · rain</span></div>
+
+  <!-- warm glow from below (off-screen fire) -->
+  <div style="position:absolute;left:0;right:0;bottom:0;height:420px;background:radial-gradient(80% 100% at 30% 100%,rgba(143,58,52,.28),rgba(169,132,63,.12) 40%,transparent 70%);animation:glow 6s ease-in-out infinite;pointer-events:none"></div>
+  <!-- vignette -->
+  <div style="position:absolute;inset:0;background:radial-gradient(110% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.72) 100%);pointer-events:none"></div>
+
+  <!-- embers -->
+  <div style="position:absolute;left:0;right:0;bottom:0;height:600px;pointer-events:none">
+    <div style="position:absolute;bottom:0;left:12%;width:4px;height:4px;border-radius:50%;background:#c8963f;animation:ember 7s linear infinite;animation-delay:0s"></div>
+    <div style="position:absolute;bottom:0;left:20%;width:3px;height:3px;border-radius:50%;background:#a5442e;animation:ember 9s linear infinite;animation-delay:1.4s"></div>
+    <div style="position:absolute;bottom:0;left:28%;width:5px;height:5px;border-radius:50%;background:#c8963f;animation:ember 8s linear infinite;animation-delay:2.8s"></div>
+    <div style="position:absolute;bottom:0;left:35%;width:3px;height:3px;border-radius:50%;background:#8f6a2a;animation:ember 10s linear infinite;animation-delay:0.7s"></div>
+    <div style="position:absolute;bottom:0;left:44%;width:4px;height:4px;border-radius:50%;background:#c8963f;animation:ember 7.5s linear infinite;animation-delay:3.6s"></div>
+    <div style="position:absolute;bottom:0;left:52%;width:3px;height:3px;border-radius:50%;background:#a5442e;animation:ember 9.5s linear infinite;animation-delay:2.1s"></div>
+    <div style="position:absolute;bottom:0;left:61%;width:5px;height:5px;border-radius:50%;background:#c8963f;animation:ember 8.5s linear infinite;animation-delay:4.4s"></div>
+    <div style="position:absolute;bottom:0;left:70%;width:3px;height:3px;border-radius:50%;background:#8f6a2a;animation:ember 11s linear infinite;animation-delay:1.1s"></div>
+    <div style="position:absolute;bottom:0;left:78%;width:4px;height:4px;border-radius:50%;background:#c8963f;animation:ember 7.8s linear infinite;animation-delay:3.1s"></div>
+    <div style="position:absolute;bottom:0;left:86%;width:3px;height:3px;border-radius:50%;background:#a5442e;animation:ember 9.2s linear infinite;animation-delay:5s"></div>
+  </div>
+
+  <!-- content -->
+  <div style="position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 120px">
+    <!-- title -->
+    <div style="position:relative">
+      <div style="font:13px ui-monospace,monospace;letter-spacing:.42em;color:#a9843f;margin-bottom:16px">A DARK FANTASY RPG</div>
+      <div style="font:800 116px Georgia,serif;letter-spacing:.02em;color:#e8ddc8;line-height:.9;text-shadow:0 4px 30px rgba(0,0,0,.8)">CODE OF<br>CONQUEST</div>
+      <div style="width:220px;height:2px;background:linear-gradient(90deg,#a9843f,transparent);margin:26px 0 18px"></div>
+      <div style="font:20px 'Architects Daughter',cursive;color:#b0a488;max-width:520px">The world has real problems, and it does not care about you.</div>
+    </div>
+
+    <!-- menu -->
+    <div style="margin-top:52px;display:flex;flex-direction:column;gap:5px">
+      <sc-for list="{{ items }}" as="m" hint-placeholder-count="6">
+        <div onClick="{{ m.onSelect }}" style="display:flex;align-items:center;gap:16px;cursor:pointer;padding:7px 0">
+          <span style="color:#a9843f;font-size:15px;opacity:{{ m.markOpacity }};transition:opacity .12s">◆</span>
+          <div>
+            <span style="font:600 30px Georgia,serif;letter-spacing:.04em;color:{{ m.color }};transition:color .12s" style-hover="color:#f0e6d0">{{ m.label }}</span>
+            <sc-if value="{{ m.hasSub }}" hint-placeholder-val="{{ false }}"><div style="font:12px ui-monospace,monospace;letter-spacing:.06em;color:#7a6f58;margin-top:1px">{{ m.sub }}</div></sc-if>
+          </div>
+        </div>
+      </sc-for>
+    </div>
+  </div>
+
+  <!-- footer -->
+  <div style="position:absolute;left:120px;bottom:40px;font:12px ui-monospace,monospace;letter-spacing:.06em;color:#5a5040">v0.4.1 · BUILT IN GODOT 4.7 · © 2026</div>
+  <div style="position:absolute;right:120px;bottom:40px;font:12px ui-monospace,monospace;letter-spacing:.08em;color:#5a5040">[ ↑ ↓ ] CHOOSE &nbsp; [ ↵ ] ENTER</div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1920,&quot;height&quot;:1080}}">
+class Component extends DCLogic {
+  state = { sel: 0 };
+
+  renderVals() {
+    const defs = [
+      { label: 'New Game' },
+      { label: 'Continue', sub: 'CHAPTER II · VEXCCA · 14:22:07' },
+      { label: 'Load Game' },
+      { label: 'Settings' },
+      { label: 'Credits' },
+      { label: 'Quit' },
+    ];
+    const items = defs.map((d, i) => ({
+      label: d.label,
+      hasSub: !!d.sub, sub: d.sub || '',
+      markOpacity: i === this.state.sel ? '1' : '0',
+      color: i === this.state.sel ? '#f0e6d0' : '#9a8f78',
+      onSelect: () => this.setState({ sel: i }),
+    }));
+    return { items };
+  }
+}
+</script>
+</body>
+</html>