One self-contained page under frontend/mockup shows the redesigned shell in both directions the palette can go - paper, with linen chrome, olive ink, and the navy kept for map surround and data readouts, and night, with navy chrome and linen text - switchable from a control bar along with the three states of the new right dock. The dock is the redesign's centerpiece: a Google-Maps-style results shortlist that pushes into a detail card and folds away to a thin rail, sitting beside the minimap instead of painting over it the way the current toast does. Demo content is real Clair Obscur categories, zones, and copy so the proportions are honest.
- commit
- 79b0cec2bd33de692349d8433207ed48b1092345
- parent
- 2fb0bfa68a89bb8de39e0c78cb8d3fb154ef4c3a
- author
- Dami <dami.etoile@gmail.com>
| A | frontend/ | 595 | ++++++++++++++++++++++++++++++ |
@@ -0,0 +1,595 @@
1+2+<html lang="en" data-theme="paper" data-dock="list">3+<head>4+<meta charset="utf-8">5+<meta name="viewport" content="width=device-width, initial-scale=1">6+<title>Atlas — visual identity mockup</title>7+<style>8+/* ---------- palette: #463f1a #60492c #f9ebe0 #208aae #0d2149 ---------- */9+:root {10+ --olive: #463f1a;11+ --umber: #60492c;12+ --linen: #f9ebe0;13+ --cerulean: #208aae;14+ --navy: #0d2149;15+ --radius: 8px;16+ --topbar: 64px;17+ --sidebar: 316px;18+ --dock: 336px;19+ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;20+ font-synthesis: none;21+}22+:root[data-theme="paper"] {23+ color-scheme: light;24+ --bg: var(--linen);25+ --panel: #f3e7d8;26+ --panel-raised: #fdf7ef;27+ --ink: var(--olive);28+ --ink-strong: #33300f;29+ --muted: rgba(96, 73, 44, 0.72);30+ --line: rgba(96, 73, 44, 0.22);31+ --line-strong: rgba(96, 73, 44, 0.38);32+ --accent: var(--cerulean);33+ --accent-ink: #f9ebe0;34+ --accent-wash: rgba(32, 138, 174, 0.11);35+ --accent-wash-strong: rgba(32, 138, 174, 0.2);36+ --data: var(--navy);37+ --map-surround: var(--navy);38+ --hover: rgba(96, 73, 44, 0.08);39+ --shadow: 0 10px 30px rgba(13, 33, 73, 0.18);40+ --shadow-soft: 0 2px 10px rgba(13, 33, 73, 0.1);41+ --scrim: rgba(249, 235, 224, 0.86);42+}43+:root[data-theme="night"] {44+ color-scheme: dark;45+ --bg: #081530;46+ --panel: var(--navy);47+ --panel-raised: #16305e;48+ --ink: var(--linen);49+ --ink-strong: #fdf7ef;50+ --muted: rgba(249, 235, 224, 0.6);51+ --line: rgba(249, 235, 224, 0.14);52+ --line-strong: rgba(249, 235, 224, 0.28);53+ --accent: #35a9cf;54+ --accent-ink: #081530;55+ --accent-wash: rgba(53, 169, 207, 0.14);56+ --accent-wash-strong: rgba(53, 169, 207, 0.26);57+ --data: #8fd6ee;58+ --map-surround: #050e21;59+ --hover: rgba(249, 235, 224, 0.07);60+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);61+ --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);62+ --scrim: rgba(13, 33, 73, 0.82);63+}64+* { margin: 0; padding: 0; box-sizing: border-box; }65+body { background: #202020; color: var(--ink); }66+67+/* ---------- mockup chrome (not part of the app) ---------- */68+.mock-bar {69+ display: flex; gap: 24px; align-items: center; justify-content: center;70+ padding: 10px; background: #161616; color: #bbb;71+ font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;72+}73+.mock-bar strong { color: #eee; font-weight: 600; }74+.mock-bar .set { display: flex; gap: 4px; align-items: center; }75+.mock-bar button {76+ font: inherit; color: #bbb; background: #262626; border: 1px solid #333;77+ padding: 4px 10px; border-radius: 5px; cursor: pointer;78+}79+.mock-bar button.on { background: #3b3b3b; color: #fff; border-color: #555; }80+81+/* ---------- app frame ---------- */82+.frame {83+ width: min(1560px, calc(100vw - 32px)); height: 940px; margin: 16px auto 40px;84+ border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55);85+ display: grid;86+ grid-template-columns: var(--sidebar) minmax(0, 1fr) auto;87+ grid-template-rows: var(--topbar) minmax(0, 1fr);88+ background: var(--bg);89+ transition: background 200ms ease;90+}91+92+/* ---------- topbar ---------- */93+.topbar {94+ grid-column: 1 / 4; display: flex; align-items: center; gap: 28px;95+ padding: 0 20px; background: var(--panel);96+ border-bottom: 1px solid var(--line);97+}98+.brand { display: flex; gap: 12px; align-items: center; width: calc(var(--sidebar) - 20px); }99+.brand-mark {100+ width: 34px; height: 34px; display: grid; place-items: center;101+ color: var(--accent-ink); background: var(--accent); border-radius: 9px;102+}103+.brand-mark svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }104+.brand-word strong {105+ display: block; font-family: "Arial Narrow", "Roboto Condensed", sans-serif;106+ font-size: 19px; letter-spacing: 0.34em; color: var(--ink-strong);107+}108+.brand-word small {109+ font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);110+}111+.pickers { display: flex; gap: 18px; }112+.pickers label { display: flex; flex-direction: column; gap: 3px; }113+.pickers span {114+ font-size: 8.5px; font-weight: 700; letter-spacing: 0.17em;115+ text-transform: uppercase; color: var(--muted);116+}117+.pickers select {118+ font: 600 13px inherit; font-family: inherit; color: var(--ink-strong);119+ background: var(--panel-raised); border: 1px solid var(--line);120+ border-radius: 7px; padding: 6px 30px 6px 10px; appearance: none;121+ background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),122+ linear-gradient(135deg, var(--muted) 50%, transparent 50%);123+ background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;124+ background-size: 5px 5px;125+ background-repeat: no-repeat;126+}127+.topbar-scale {128+ margin-left: auto; display: flex; align-items: center; gap: 10px;129+ font: 500 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);130+}131+.topbar-scale .rule { width: 74px; height: 5px; border: 1px solid var(--muted); border-top: none; }132+133+/* ---------- left sidebar ---------- */134+.sidebar {135+ grid-row: 2; grid-column: 1; overflow: hidden auto; background: var(--panel);136+ border-right: 1px solid var(--line); display: flex; flex-direction: column;137+}138+.sidebar-heading { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }139+.eyebrow {140+ font-size: 9px; font-weight: 800; letter-spacing: 0.24em; color: var(--accent);141+ text-transform: uppercase;142+}143+.sidebar-heading h1 {144+ font-family: "Arial Narrow", "Roboto Condensed", sans-serif;145+ font-size: 25px; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink-strong);146+ margin: 5px 0 4px;147+}148+.map-name { font-size: 12.5px; font-weight: 600; }149+.map-meta { font: 500 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); margin-top: 5px; }150+.search {151+ margin: 14px 16px 0; display: flex; align-items: center; gap: 9px;152+ background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius);153+ padding: 8px 12px; color: var(--muted); font-size: 12.5px;154+}155+.search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }156+.search kbd {157+ margin-left: auto; font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace;158+ background: var(--hover); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;159+}160+.legend-toolbar {161+ display: flex; align-items: baseline; gap: 8px; padding: 18px 20px 8px;162+}163+.legend-toolbar > span {164+ font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;165+ color: var(--muted);166+}167+.legend-toolbar .actions { margin-left: auto; display: flex; gap: 2px; }168+.legend-toolbar .actions i {169+ width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;170+ color: var(--muted); font-style: normal;171+}172+.legend-toolbar .actions i:hover { background: var(--hover); color: var(--ink-strong); }173+.legend-toolbar .actions svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }174+.group { border-top: 1px solid var(--line); }175+.group-header {176+ display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer;177+}178+.group-header:hover { background: var(--hover); }179+.chev { color: var(--muted); display: grid; }180+.chev svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; transform: rotate(90deg); }181+.group-title {182+ font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;183+ color: var(--ink-strong);184+}185+.group-count { font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); }186+.switch {187+ margin-left: auto; width: 26px; height: 15px; border-radius: 8px;188+ background: var(--accent); position: relative;189+}190+.switch::after {191+ content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px;192+ border-radius: 50%; background: var(--panel-raised);193+}194+.switch.off { background: var(--line-strong); }195+.switch.off::after { right: auto; left: 2px; }196+.rows { padding-bottom: 6px; }197+.row {198+ display: flex; align-items: center; gap: 10px; padding: 5px 20px 5px 30px; font-size: 12.5px;199+}200+.row:hover { background: var(--hover); }201+.dot {202+ width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;203+ color: #fff; font: 800 8px ui-sans-serif, sans-serif; flex: none;204+ box-shadow: 0 0 0 1.5px var(--panel-raised), var(--shadow-soft);205+}206+.row .n { font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); margin-left: auto; }207+.row.dim { opacity: 0.45; }208+.zone-row { display: flex; gap: 9px; padding: 4.5px 20px 4.5px 30px; font-size: 12.5px; align-items: center; }209+.zone-row:hover { background: var(--hover); }210+.zone-row .zm { width: 9px; height: 9px; border: 2px solid var(--umber); border-radius: 2.5px; flex: none; }211+.zone-row.current { color: var(--ink-strong); font-weight: 700; }212+.zone-row.current .zm { background: var(--accent); border-color: var(--accent); }213+.sidebar-footer {214+ margin-top: auto; display: flex; gap: 8px; align-items: center;215+ padding: 11px 20px; border-top: 1px solid var(--line);216+ font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data);217+}218+.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }219+220+/* ---------- map ---------- */221+.map { grid-row: 2; grid-column: 2; position: relative; background: var(--map-surround); overflow: hidden; }222+.map svg.terrain { position: absolute; inset: 0; width: 100%; height: 100%; }223+.zoom {224+ position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;225+ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);226+ border: 1px solid var(--line-strong);227+}228+.zoom b {229+ width: 34px; height: 33px; display: grid; place-items: center; background: var(--panel-raised);230+ color: var(--ink-strong); font: 500 17px ui-sans-serif, sans-serif; cursor: pointer;231+}232+.zoom b + b { border-top: 1px solid var(--line); }233+.zoom b:hover { background: var(--panel); }234+.map-hint {235+ position: absolute; left: 16px; bottom: 14px; display: flex; gap: 9px; align-items: center;236+ padding: 5px 12px; border-radius: 20px; background: var(--scrim);237+ backdrop-filter: blur(8px); border: 1px solid var(--line);238+ font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em;239+ color: var(--muted); text-transform: uppercase;240+}241+.map-hint i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }242+.overview {243+ position: absolute; right: 16px; bottom: 14px; width: 168px; border-radius: var(--radius);244+ overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow);245+ background: var(--map-surround);246+}247+.overview .ov-map { height: 110px; position: relative; }248+.overview .ov-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }249+.overview .viewport {250+ position: absolute; left: 34%; top: 26%; width: 38%; height: 42%;251+ border: 1.5px solid var(--accent); background: var(--accent-wash);252+}253+.overview footer {254+ padding: 4px 9px; background: var(--panel); color: var(--muted);255+ font: 600 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em;256+}257+.pin { position: absolute; translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%;258+ display: grid; place-items: center; color: #fff; font: 800 10px ui-sans-serif, sans-serif;259+ box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 3px 6px rgba(0,0,0,0.4); }260+.pin.sel { outline: 3px solid var(--accent); outline-offset: 1.5px; }261+.pin-label {262+ position: absolute; translate: -50% 14px; padding: 2px 6px; border-radius: 4px;263+ background: rgba(8, 14, 24, 0.82); color: #f4f0e6; white-space: nowrap;264+ font: 700 10px "Arial Narrow", "Roboto Condensed", sans-serif; letter-spacing: 0.04em;265+}266+267+/* ---------- right dock: the signature ---------- */268+.dock {269+ grid-row: 2; grid-column: 3; width: var(--dock); display: flex; flex-direction: column;270+ background: var(--panel); border-left: 1px solid var(--line); overflow: hidden;271+ transition: width 200ms ease;272+}273+.dock-readout {274+ display: flex; align-items: center; gap: 8px; padding: 11px 16px;275+ border-bottom: 1px solid var(--line); background: var(--panel-raised);276+ font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em;277+ color: var(--data); text-transform: uppercase; white-space: nowrap;278+}279+.dock-readout .flag {280+ padding: 2px 7px; border-radius: 4px; background: var(--accent-wash-strong); color: var(--accent);281+}282+.dock-readout .fold {283+ margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center;284+ border-radius: 5px; color: var(--muted); cursor: pointer;285+}286+.dock-readout .fold:hover { background: var(--hover); color: var(--ink-strong); }287+.dock-readout .fold svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }288+.dock-body { position: relative; flex: 1; overflow: hidden; }289+.pane { position: absolute; inset: 0; overflow: hidden auto; transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1); }290+.pane.list { transform: translateX(0); }291+.pane.detail { transform: translateX(100%); border-left: 1px solid var(--line); background: var(--panel); }292+[data-dock="detail"] .pane.list { transform: translateX(-24%); }293+[data-dock="detail"] .pane.detail { transform: translateX(0); }294+.result {295+ display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer;296+}297+.result:hover { background: var(--hover); }298+.result.sel { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }299+.result .dot { margin-top: 2px; }300+.result b { display: block; font-size: 13px; color: var(--ink-strong); }301+.result .sub { display: flex; gap: 7px; margin-top: 2px; font-size: 10.5px; color: var(--muted); }302+.result .sub .zone::before { content: "▸ "; color: var(--line-strong); }303+.result .dist {304+ margin-left: auto; align-self: center;305+ font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);306+}307+/* detail pane */308+.detail-top { padding: 14px 18px 0; }309+.back {310+ display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;311+ color: var(--accent); cursor: pointer; letter-spacing: 0.04em;312+}313+.back svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; }314+.cat-chip {315+ display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 8px;316+ font-size: 9px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);317+}318+.detail-top h2 {319+ font-family: "Arial Narrow", "Roboto Condensed", sans-serif; font-size: 26px;320+ line-height: 1.05; color: var(--ink-strong);321+}322+.detail-desc { padding: 10px 18px 0; font-size: 12.5px; line-height: 1.55; }323+.detail-links { padding: 14px 18px 0; display: grid; gap: 6px; }324+.detail-links a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }325+.detail-links a::before { content: "↳ "; color: var(--muted); }326+.detail-data {327+ margin: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);328+ background: var(--panel-raised); padding: 11px 13px; display: grid; gap: 7px;329+}330+.detail-data div { display: flex; justify-content: space-between; font-size: 10px; }331+.detail-data dt { font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }332+.detail-data dd { font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); }333+/* folded rail */334+[data-dock="hidden"] .dock { width: 40px; }335+[data-dock="hidden"] .dock-readout { padding: 11px 0; justify-content: center; }336+[data-dock="hidden"] .dock-readout > :not(.fold) { display: none; }337+[data-dock="hidden"] .dock-readout .fold { margin: 0; }338+[data-dock="hidden"] .dock-readout .fold svg { transform: rotate(180deg); }339+[data-dock="hidden"] .dock-body { display: none; }340+[data-dock="hidden"] .dock .rail-label {341+ display: block; writing-mode: vertical-rl; margin: 14px auto 0;342+ font: 700 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.18em;343+ color: var(--muted); text-transform: uppercase;344+}345+.rail-label { display: none; }346+</style>347+</head>348+<body>349+350+<div class="mock-bar">351+ <strong>ATLAS IDENTITY MOCKUP</strong>352+ <span class="set">theme353+ <button data-set-theme="paper" class="on">paper</button>354+ <button data-set-theme="night">night</button>355+ </span>356+ <span class="set">dock357+ <button data-set-dock="list" class="on">results</button>358+ <button data-set-dock="detail">detail</button>359+ <button data-set-dock="hidden">hidden</button>360+ </span>361+</div>362+363+<div class="frame">364+ <!-- topbar -->365+ <header class="topbar">366+ <div class="brand">367+ <span class="brand-mark">368+ <svg viewBox="0 0 24 24"><path d="M12 2c3.9 0 7 3 7 6.8 0 4.8-5 10.4-6.5 12.6a.6.6 0 0 1-1 0C10 19.2 5 13.6 5 8.8 5 5 8.1 2 12 2Z"/><path d="m8.8 10.5 2.2-4.6 1.6 3.4 1-1.9 1.6 3.1"/></svg>369+ </span>370+ <span class="brand-word"><strong>ATLAS</strong><small>Game map explorer</small></span>371+ </div>372+ <div class="pickers">373+ <label><span>Game</span><select><option>Clair Obscur: Expedition 33</option></select></label>374+ <label><span>Map</span><select><option>The Continent</option></select></label>375+ <label><span>Layer</span><select disabled><option>Base</option></select></label>376+ </div>377+ <div class="topbar-scale"><span class="rule"></span>500 m</div>378+ </header>379+380+ <!-- left sidebar -->381+ <aside class="sidebar">382+ <div class="sidebar-heading">383+ <p class="eyebrow">Explore</p>384+ <h1>Clair Obscur: Expedition 33</h1>385+ <p class="map-name">The Continent</p>386+ <p class="map-meta">2,814 LOCATIONS · 24 REGIONS</p>387+ </div>388+ <div class="search">389+ <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/></svg>390+ Search locations <kbd>⌘K</kbd>391+ </div>392+ <div class="legend-toolbar"><span>Layers</span>393+ <span class="actions">394+ <i><svg viewBox="0 0 16 16"><path d="M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3"/></svg></i>395+ <i><svg viewBox="0 0 16 16"><path d="M5 3.5 8 6.5l3-3M5 12.5l3-3 3 3"/></svg></i>396+ <i><svg viewBox="0 0 16 16"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><circle cx="8" cy="8" r="1.9"/></svg></i>397+ <i><svg viewBox="0 0 16 16"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><path d="m3 13 10-10"/></svg></i>398+ </span>399+ </div>400+ <section class="group">401+ <div class="group-header">402+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>403+ <span class="group-title">Zones</span><span class="group-count">24</span>404+ <span class="switch"></span>405+ </div>406+ <div class="rows">407+ <div class="zone-row"><span class="zm"></span>Ancient Sanctuary</div>408+ <div class="zone-row current"><span class="zm"></span>Crimson Forest</div>409+ <div class="zone-row"><span class="zm"></span>Esquie's Nest</div>410+ <div class="zone-row"><span class="zm"></span>Flying Manor</div>411+ <div class="zone-row"><span class="zm"></span>Gestral Village</div>412+ </div>413+ </section>414+ <section class="group">415+ <div class="group-header">416+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>417+ <span class="group-title">Collectibles</span><span class="group-count">718</span>418+ <span class="switch"></span>419+ </div>420+ <div class="rows">421+ <div class="row"><span class="dot" style="background:#a4553a">H</span>Haircut<span class="n">105</span></div>422+ <div class="row"><span class="dot" style="background:#3e7a4e">J</span>Journal Entry<span class="n">49</span></div>423+ <div class="row"><span class="dot" style="background:#208aae">P</span>Pictos<span class="n">252</span></div>424+ <div class="row dim"><span class="dot" style="background:#7e5fa0">M</span>Music Record<span class="n">34</span></div>425+ <div class="row"><span class="dot" style="background:#b0812e">W</span>Weapon<span class="n">121</span></div>426+ </div>427+ </section>428+ <section class="group">429+ <div class="group-header">430+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>431+ <span class="group-title">Locations</span><span class="group-count">326</span>432+ <span class="switch off"></span>433+ </div>434+ </section>435+ <footer class="sidebar-footer"><span class="live"></span>2,780 ENABLED · 252 IN VIEW</footer>436+ </aside>437+438+ <!-- map -->439+ <main class="map">440+ <svg class="terrain" viewBox="0 0 900 800" preserveAspectRatio="xMidYMid slice">441+ <defs>442+ <pattern id="contour" width="90" height="90" patternUnits="userSpaceOnUse">443+ <circle cx="45" cy="45" r="28" fill="none" stroke="rgba(70,63,26,0.14)" stroke-width="1"/>444+ <circle cx="45" cy="45" r="14" fill="none" stroke="rgba(70,63,26,0.1)" stroke-width="1"/>445+ </pattern>446+ </defs>447+ <rect width="900" height="800" fill="#123c63"/>448+ <path d="M170 90 C 380 20, 600 60, 730 150 C 850 230, 840 420, 760 540 C 690 650, 520 740, 360 700 C 200 660, 90 540, 110 380 C 125 250, 90 160, 170 90 Z" fill="#e8d9bd" stroke="#a08a5f" stroke-width="3"/>449+ <path d="M170 90 C 380 20, 600 60, 730 150 C 850 230, 840 420, 760 540 C 690 650, 520 740, 360 700 C 200 660, 90 540, 110 380 C 125 250, 90 160, 170 90 Z" fill="url(#contour)"/>450+ <path d="M300 240 C 380 180, 520 190, 590 260 C 650 320, 640 420, 560 470 C 470 520, 350 500, 300 420 C 260 350, 250 290, 300 240 Z" fill="#cfe0c2" stroke="#7e9a6b" stroke-width="2"/>451+ <path d="M600 300 C 660 280, 720 320, 710 380 C 700 430, 640 450, 600 420 C 560 390, 560 330, 600 300 Z" fill="#e0e4e6" stroke="#9aa4ab" stroke-width="2"/>452+ <path d="M420 560 q 60 -30 130 0" fill="none" stroke="#3c78a8" stroke-width="5" stroke-linecap="round"/>453+ <text x="450" y="150" text-anchor="middle" font-family="Arial Narrow, sans-serif" font-size="26" letter-spacing="8" fill="rgba(70,63,26,0.55)">CRIMSON FOREST</text>454+ <text x="660" y="500" text-anchor="middle" font-family="Arial Narrow, sans-serif" font-size="17" letter-spacing="5" fill="rgba(70,63,26,0.45)">DARK SHORES</text>455+ </svg>456+ <span class="pin sel" style="left:46%;top:38%;background:#208aae">P</span>457+ <span class="pin-label" style="left:46%;top:38%">Confrontation</span>458+ <span class="pin" style="left:57%;top:47%;background:#a4553a">H</span>459+ <span class="pin" style="left:38%;top:55%;background:#3e7a4e">J</span>460+ <span class="pin" style="left:64%;top:30%;background:#b0812e">W</span>461+ <span class="pin" style="left:30%;top:34%;background:#208aae">P</span>462+ <div class="zoom"><b>+</b><b>−</b></div>463+ <div class="map-hint">464+ <span>Drag to pan</span><i></i><span>Scroll to zoom</span><i></i>465+ <span>Z · labels off</span><i></i><span>G · grid off</span>466+ </div>467+ <div class="overview">468+ <div class="ov-map">469+ <svg viewBox="0 0 168 110" preserveAspectRatio="xMidYMid slice">470+ <rect width="168" height="110" fill="#123c63"/>471+ <path d="M35 18 C 70 5, 115 12, 135 28 C 155 44, 152 78, 138 92 C 120 108, 70 108, 48 96 C 25 84, 18 60, 22 44 C 25 32, 20 26, 35 18 Z" fill="#e8d9bd"/>472+ </svg>473+ <span class="viewport"></span>474+ </div>475+ <footer>THE CONTINENT</footer>476+ </div>477+ </main>478+479+ <!-- right dock -->480+ <aside class="dock">481+ <div class="dock-readout">482+ <span class="count">252 RESULTS</span>483+ <span class="flag">PICTOS</span>484+ <span class="fold" data-toggle-dock>485+ <svg viewBox="0 0 16 16"><path d="m6 3 5 5-5 5"/></svg>486+ </span>487+ </div>488+ <span class="rail-label">252 results</span>489+ <div class="dock-body">490+ <div class="pane list">491+ <div class="result sel" data-open-detail>492+ <span class="dot" style="background:#208aae">P</span>493+ <span><b>Confrontation</b>494+ <span class="sub">Pictos<span class="zone">Crimson Forest</span></span></span>495+ <span class="dist">g4x·2</span>496+ </div>497+ <div class="result" data-open-detail>498+ <span class="dot" style="background:#208aae">P</span>499+ <span><b>Augmented Counter III</b>500+ <span class="sub">Pictos<span class="zone">Ancient Sanctuary</span></span></span>501+ <span class="dist">g4x·8</span>502+ </div>503+ <div class="result" data-open-detail>504+ <span class="dot" style="background:#208aae">P</span>505+ <span><b>Critical Burn</b>506+ <span class="sub">Pictos<span class="zone">Dark Shores</span></span></span>507+ <span class="dist">g5m·1</span>508+ </div>509+ <div class="result" data-open-detail>510+ <span class="dot" style="background:#208aae">P</span>511+ <span><b>Energising Start</b>512+ <span class="sub">Pictos<span class="zone">Esquie's Nest</span></span></span>513+ <span class="dist">g5m·4</span>514+ </div>515+ <div class="result" data-open-detail>516+ <span class="dot" style="background:#208aae">P</span>517+ <span><b>Glass Canevas</b>518+ <span class="sub">Pictos<span class="zone">Flying Manor</span></span></span>519+ <span class="dist">g5q·0</span>520+ </div>521+ <div class="result" data-open-detail>522+ <span class="dot" style="background:#208aae">P</span>523+ <span><b>Painted Power</b>524+ <span class="sub">Pictos<span class="zone">Gestral Village</span></span></span>525+ <span class="dist">g5q·6</span>526+ </div>527+ <div class="result" data-open-detail>528+ <span class="dot" style="background:#208aae">P</span>529+ <span><b>Rewarding Mark</b>530+ <span class="sub">Pictos<span class="zone">Old Lumiere</span></span></span>531+ <span class="dist">g5r·3</span>532+ </div>533+ </div>534+ <div class="pane detail">535+ <div class="detail-top">536+ <span class="back" data-close-detail>537+ <svg viewBox="0 0 16 16"><path d="M10 3 5 8l5 5"/></svg>Back to results538+ </span>539+ <p class="cat-chip"><span class="dot" style="background:#208aae">P</span>Pictos</p>540+ <h2>Confrontation</h2>541+ </div>542+ <p class="detail-desc">On parry: gain a burn charge. Consumed on the next base attack,543+ applying two burn stacks per charge. Found on the ridge west of the544+ Crimson Forest flag, behind the paint wall.</p>545+ <div class="detail-links">546+ <a href="#">Crimson Forest flag</a>547+ <a href="#">Paint wall (Quest Item)</a>548+ </div>549+ <dl class="detail-data">550+ <div><dt>Location ID</dt><dd>112 048</dd></div>551+ <div><dt>Coordinates</dt><dd>4 812 · 3 097</dd></div>552+ <div><dt>Geohash</dt><dd>g4x2m</dd></div>553+ </dl>554+ </div>555+ </div>556+ </aside>557+</div>558+559+<script>560+const root = document.documentElement;561+for (const button of document.querySelectorAll("[data-set-theme]")) {562+ button.addEventListener("click", () => {563+ root.dataset.theme = button.dataset.setTheme;564+ sync("data-set-theme", button);565+ });566+}567+for (const button of document.querySelectorAll("[data-set-dock]")) {568+ button.addEventListener("click", () => {569+ root.dataset.dock = button.dataset.setDock;570+ sync("data-set-dock", button);571+ });572+}573+function sync(attribute, active) {574+ for (const button of document.querySelectorAll(`[${attribute}]`)) {575+ button.classList.toggle("on", button === active);576+ }577+}578+for (const result of document.querySelectorAll("[data-open-detail]")) {579+ result.addEventListener("click", () => { root.dataset.dock = "detail"; syncDock(); });580+}581+document.querySelector("[data-close-detail]").addEventListener("click", () => {582+ root.dataset.dock = "list"; syncDock();583+});584+document.querySelector("[data-toggle-dock]").addEventListener("click", () => {585+ root.dataset.dock = root.dataset.dock === "hidden" ? "list" : "hidden"; syncDock();586+});587+function syncDock() {588+ const current = root.dataset.dock;589+ for (const button of document.querySelectorAll("[data-set-dock]")) {590+ button.classList.toggle("on", button.dataset.setDock === current);591+ }592+}593+</script>594+</body>595+</html>