|
<svg xmlns="http://www.w3.org/2000/svg" width="760" height="760" viewBox="0 0 760 760" role="img" aria-labelledby="title desc"> |
|
<title id="title">Minimal Chrome — no persistent navigation</title> |
|
<desc id="desc">Two phone screens contrasted: scoring stays full-bleed with a slim contextual top bar; there is no bottom bar, shown as a crossed-out ghost silhouette for comparison.</desc> |
|
<defs><filter id="shadow" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="10" stdDeviation="16" flood-color="#203b3f" flood-opacity=".18"/></filter><style> |
|
text{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:#364958} |
|
.eyebrow{font-size:15px;font-weight:800;letter-spacing:2px;fill:#55828b} |
|
.h1{font-size:30px;font-weight:800;fill:#0f172a} |
|
.sub{font-size:15px;fill:#55828b} |
|
.label{font-size:12px;font-weight:800;letter-spacing:.6px;fill:#55828b} |
|
.panel-title{font-size:18px;font-weight:800} |
|
.body{font-size:14px} |
|
.bold{font-weight:800} |
|
.small{font-size:12px} |
|
.tiny{font-size:10px} |
|
.muted{fill:#6f8588} |
|
.white{fill:#fff} |
|
.rule{stroke:#c9e4ca;stroke-width:1} |
|
</style></defs> |
|
<rect width="760" height="760" fill="#e8f1ef"/> |
|
<path d="M0 0h760v10H0z" fill="#55828b"/> |
|
|
|
<text x="40" y="60" class="eyebrow">OPTION 1 · MINIMAL CHROME</text> |
|
<text x="40" y="98" class="h1">Contextual top bar, no bottom nav</text> |
|
<text x="40" y="126" class="sub">Scoring keeps its full-bleed shell. Every other screen gets a slim back/menu bar instead of persistent chrome.</text> |
|
|
|
<g transform="translate(50 160)" filter="url(#shadow)"> |
|
<rect width="300" height="560" rx="26" fill="#203b3f"/> |
|
<rect x="0" y="0" width="300" height="56" rx="26" fill="#203b3f"/> |
|
<rect y="34" width="300" height="22" fill="#203b3f"/> |
|
<path d="M24 28 l-8 8 l8 8" stroke="#f7fbf1" stroke-width="2.5" fill="none"/> |
|
<text x="44" y="33" class="small white bold">Round · Ironwood GC</text> |
|
<text x="255" y="33" class="small white">⋯</text> |
|
<text x="24" y="110" class="tiny white" style="letter-spacing:1.5px">HOLE 8 · PAR 4</text> |
|
<text x="24" y="160" style="font-size:52px;font-weight:800;fill:#fff">4</text> |
|
<text x="24" y="192" class="body" fill="#c6d9d4">Scott Halliday</text> |
|
<rect x="24" y="230" width="252" height="80" rx="16" fill="#2b4a4f"/> |
|
<text x="44" y="264" class="small white bold">Ironwood</text> |
|
<text x="44" y="288" class="small" fill="#c6d9d4">SH / GS +1 ×2</text> |
|
<rect x="24" y="470" width="252" height="56" rx="14" fill="#f1d27a"/> |
|
<text x="150" y="504" text-anchor="middle" class="body bold" fill="#203b3f">Next hole</text> |
|
<text x="24" y="548" class="tiny" fill="#7fa39c">No tab bar — score entry stays edge-to-edge.</text> |
|
</g> |
|
|
|
<g transform="translate(410 160)" filter="url(#shadow)" opacity="0.55"> |
|
<rect width="300" height="560" rx="26" fill="#fff" stroke="#c9e4ca"/> |
|
<rect y="0" width="300" height="56" rx="26" fill="#f7fbf8"/> |
|
<rect y="34" width="300" height="22" fill="#f7fbf8"/> |
|
<text x="24" y="33" class="small bold">Leaderboard</text> |
|
<line x1="24" y1="80" x2="276" y2="80" class="rule"/> |
|
<rect x="24" y="96" width="252" height="40" rx="10" fill="#f7fbf8"/> |
|
<rect x="24" y="144" width="252" height="40" rx="10" fill="#f7fbf8"/> |
|
<rect x="24" y="192" width="252" height="40" rx="10" fill="#f7fbf8"/> |
|
<g transform="translate(24 486)"> |
|
<rect width="252" height="60" rx="16" fill="none" stroke="#b91c1c" stroke-width="2" stroke-dasharray="6 5"/> |
|
<line x1="10" y1="10" x2="242" y2="50" stroke="#b91c1c" stroke-width="2"/> |
|
<line x1="242" y1="10" x2="10" y2="50" stroke="#b91c1c" stroke-width="2"/> |
|
<text x="126" y="35" text-anchor="middle" class="tiny bold" fill="#b91c1c">no bottom bar here either</text> |
|
</g> |
|
</g> |
|
<text x="40" y="745" class="tiny muted">Lowest build cost. Trade-off: Leaderboard / Card are one tap deeper, reached from a menu rather than a always-visible anchor.</text> |
|
|
|
</svg> |
