|
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 900 900" font-family="Georgia, 'Times New Roman', serif"> |
|
<rect width="900" height="900" fill="#EFEFEC"/> |
|
<text x="40" y="52" font-size="30" font-weight="700" fill="#17181B">Scorecard Ledger, App-Wide</text> |
|
<text x="40" y="80" font-size="15" fill="#55565A" font-family="'Helvetica Neue', Arial, sans-serif">Completing the picture: Lists and Charts in the same paper-ledger language, app-wide.</text> |
|
|
|
<!-- ============ PHONE 1: Lists home ============ --> |
|
<g transform="translate(170,150)"> |
|
<rect x="-8" y="-8" width="276" height="576" rx="20" fill="#2B2B28"/> |
|
<clipPath id="clipAW1"><rect x="0" y="0" width="260" height="560" rx="12"/></clipPath> |
|
<g clip-path="url(#clipAW1)"> |
|
<rect width="260" height="560" fill="#F6F1E4"/> |
|
<text x="130" y="30" font-size="16" font-weight="700" fill="#2B2B28" text-anchor="middle">Lists</text> |
|
<line x1="0" y1="44" x2="260" y2="44" stroke="#C9BFA8" stroke-width="1"/> |
|
|
|
<rect x="16" y="58" width="90" height="32" rx="4" fill="none" stroke="#2B2B28" stroke-width="1.5"/> |
|
<text x="61" y="79" font-size="12" fill="#2B2B28" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif">Import</text> |
|
|
|
<text x="16" y="112" font-size="11" fill="#7A7365" letter-spacing="1" font-family="'Courier New', monospace">SNOOKER</text> |
|
<line x1="16" y1="118" x2="244" y2="118" stroke="#C9BFA8" stroke-width="1"/> |
|
<rect x="16" y="128" width="228" height="72" rx="8" fill="#EDE6D3" stroke="#C9BFA8" stroke-width="1"/> |
|
<text x="28" y="148" font-size="14" font-weight="700" fill="#2B2B28">Complete Book of</text> |
|
<text x="28" y="166" font-size="14" font-weight="700" fill="#2B2B28">Snooker Shots</text> |
|
<text x="28" y="186" font-size="11" fill="#7A7365" font-family="'Helvetica Neue', Arial, sans-serif">263 drills · practiced 2 days ago</text> |
|
|
|
<text x="16" y="228" font-size="11" fill="#7A7365" letter-spacing="1" font-family="'Courier New', monospace">CUE BALL CONTROL</text> |
|
<line x1="16" y1="234" x2="244" y2="234" stroke="#C9BFA8" stroke-width="1"/> |
|
<rect x="16" y="244" width="228" height="46" rx="8" fill="#EDE6D3" stroke="#C9BFA8" stroke-width="1"/> |
|
<text x="28" y="264" font-size="14" fill="#2B2B28">Draw Matrix Drill</text> |
|
<text x="28" y="281" font-size="11" fill="#7A7365" font-family="'Helvetica Neue', Arial, sans-serif">12 drills</text> |
|
<rect x="16" y="298" width="228" height="46" rx="8" fill="#EDE6D3" stroke="#C9BFA8" stroke-width="1"/> |
|
<text x="28" y="318" font-size="14" fill="#2B2B28">Follow Matrix Drill</text> |
|
<text x="28" y="335" font-size="11" fill="#7A7365" font-family="'Helvetica Neue', Arial, sans-serif">9 drills</text> |
|
|
|
<text x="130" y="540" font-size="11" fill="#9C9483" text-anchor="middle" font-family="'Courier New', monospace">v1.0.1 · 5 Sep 2026</text> |
|
</g> |
|
</g> |
|
<text x="300" y="742" font-size="12" fill="#333" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif">Lists home: grouped, ruled ledger cards</text> |
|
|
|
<!-- ============ PHONE 2: Charts ============ --> |
|
<g transform="translate(470,150)"> |
|
<rect x="-8" y="-8" width="276" height="576" rx="20" fill="#2B2B28"/> |
|
<clipPath id="clipAW2"><rect x="0" y="0" width="260" height="560" rx="12"/></clipPath> |
|
<g clip-path="url(#clipAW2)"> |
|
<rect width="260" height="560" fill="#F6F1E4"/> |
|
<text x="130" y="30" font-size="16" font-weight="700" fill="#2B2B28" text-anchor="middle">Charts</text> |
|
<line x1="0" y1="44" x2="260" y2="44" stroke="#C9BFA8" stroke-width="1"/> |
|
<text x="16" y="68" font-size="12" font-style="italic" fill="#7A7365" font-family="'Helvetica Neue', Arial, sans-serif">Overall trend</text> |
|
|
|
<!-- graph-paper chart --> |
|
<rect x="16" y="82" width="228" height="200" fill="#FBF8F0" stroke="#C9BFA8" stroke-width="1"/> |
|
<line x1="16" y1="122" x2="244" y2="122" stroke="#E3DBC6" stroke-width="1"/> |
|
<line x1="16" y1="162" x2="244" y2="162" stroke="#E3DBC6" stroke-width="1"/> |
|
<line x1="16" y1="202" x2="244" y2="202" stroke="#E3DBC6" stroke-width="1"/> |
|
<line x1="16" y1="242" x2="244" y2="242" stroke="#E3DBC6" stroke-width="1"/> |
|
<text x="10" y="86" font-size="9" fill="#9C9483" text-anchor="end" font-family="'Courier New', monospace">100%</text> |
|
<text x="10" y="285" font-size="9" fill="#9C9483" text-anchor="end" font-family="'Courier New', monospace">0%</text> |
|
|
|
<polyline points="26,238 68,206 110,214 152,178 194,150 234,122" fill="none" stroke="#3B5B7A" stroke-width="2"/> |
|
<circle cx="26" cy="238" r="3" fill="#3B5B7A"/> |
|
<circle cx="68" cy="206" r="3" fill="#3B5B7A"/> |
|
<circle cx="110" cy="214" r="3" fill="#3B5B7A"/> |
|
<circle cx="152" cy="178" r="3" fill="#3B5B7A"/> |
|
<circle cx="194" cy="150" r="3" fill="#3B5B7A"/> |
|
<circle cx="234" cy="122" r="4" fill="#B23A2E"/> |
|
|
|
<text x="26" y="296" font-size="9" fill="#9C9483" text-anchor="middle" font-family="'Courier New', monospace">18 Aug</text> |
|
<text x="234" y="296" font-size="9" fill="#9C9483" text-anchor="middle" font-family="'Courier New', monospace">5 Sep</text> |
|
|
|
<line x1="16" y1="316" x2="244" y2="316" stroke="#2B2B28" stroke-width="1"/> |
|
<text x="16" y="336" font-size="12" fill="#2B2B28" font-family="'Courier New', monospace">18 Aug – 5 Sep</text> |
|
<text x="244" y="336" font-size="12" font-weight="700" fill="#2B2B28" text-anchor="end" font-family="'Courier New', monospace">12 sets</text> |
|
</g> |
|
</g> |
|
<text x="600" y="742" font-size="12" fill="#333" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif">Charts: the trend line reads as ink on graph paper</text> |
|
|
|
<!-- legend --> |
|
<rect x="60" y="805" width="780" height="80" rx="12" fill="#F4F4F1" stroke="#DDD"/> |
|
<text x="80" y="828" font-size="14" fill="#222" font-family="'Helvetica Neue', Arial, sans-serif">✓ Lists and Charts pick up the same paper, rule, and ink tokens as the practice screens — one system, not two.</text> |
|
<text x="80" y="850" font-size="14" fill="#222" font-family="'Helvetica Neue', Arial, sans-serif">✓ The trend chart becomes graph paper instead of a dark card — ink line, pencil-blue, latest point in stamp-red.</text> |
|
<text x="80" y="872" font-size="14" fill="#222" font-family="'Helvetica Neue', Arial, sans-serif">✳ Still open: sign-in, offline/conflict sheets, and desktop's two-column layout aren't mocked up yet.</text> |
|
</svg> |
