Session CONV-25 · session · offplan.online

Resume Prompt

Sales-app mockup (docs/mockups/sales-app-atelier.html) is ~95% complete — 20 of 22 screens done. Two remaining: (1) Login modal (data-screen="login") — glass overlay triggered by corner-btn top-right, two states: anonymous sign-in (Google + email/password) and buyer-token state (login icon hidden, agent CTA prominent per Phase 1.10.0 + 1.11.AA); (2) Buyer-token unit page (data-screen="buyer-unit") — active heart icons, "Get in touch" primary CTA, attributed agent card. After those: polish pass (cross-screen consistency), commit untracked files (html + assets/velvet-exterior.jpg + assets/velvet-pano-balcony.jpg), sync to offplan-online/preview repo. Use local HTTP server at http://127.0.0.1:8765 (not file://) for Pannellum 360 to work. Also remind Sergey about Figma MCP setup (see memory/project_figma_mcp_pending.md).

Summary

Large UI mockup session — built docs/mockups/sales-app-atelier.html from scratch: a full-fidelity desktop sales-app redesign for offplan.online, styled in Brandbook v2.2 (atmospheric gradient + glass panels, Cormorant Garamond display, neutral status palette). Covered Welcome → Video → Building Exterior (with Pannellum 360° toggle, static/360 dual-mode, global info panel with rail/overview/unit-detail states) → full Apartments filter flow (Filters → Floor Plans grid → Vertical Stack, Phase 1.10.1/1.10.2) → Interior + Amenities (360° walkthroughs) → Unit Views × 3 → Floor Plates/Plans modals → Gallery (Shimmer/Album/Image/Video) → Unit List table — 20 of 22 screens complete. Global info panel refactored to position: fixed driven by CSS variable --panel-w so all 22 screens auto-respond without per-screen duplication. Real 360° panorama from Nineteen project (Balcony.jpg, 8000×4000) integrated as placeholder. Switched mid-session from Opus 4.7 to Sonnet 4.6 1M context.

Changes

docs/mockups/sales-app-atelier.html — created, ~3500 lines: full sales-app mockup with 22 screens, Brandbook v2.2 tokens, Pannellum 360° viewer, global info panel (rail/overview/unit-detail), Apartments filter flow, all UI components
docs/mockups/assets/velvet-exterior.jpg — copied from Dropbox CÔTE project (3600×4000 exterior render, placeholder hero image for Building screen)
docs/mockups/assets/velvet-pano-balcony.jpg — copied from Dropbox Nineteen project (8000×4000 equirectangular 360° panorama, placeholder for Interior/Amenities walkthroughs)
memory/project_figma_mcp_pending.md — new: Figma MCP integration deferred to post-mockup, reminder to set up when mockup is complete
memory/MEMORY.md — updated index with Figma MCP entry

Decisions

Global info panel over per-screen duplication: Panel initially embedded inside Building screen as a flex sibling. Refactored to position: fixed global element (infoPanelGlobal) driven by --panel-w CSS variable on :root. All screens use left: var(--panel-w) instead of inset: 0. This means adding a panel to any new screen is zero-effort — just add data-needs-panel attribute and updateLayout() handles the rest. Alternative (duplicating ~300 lines of panel HTML per screen) rejected.

Static + 360 dual mode on Building Exterior: User requested keeping the static exterior render as default (not replacing it with 360). Added a floating circular FAB button (116px) bottom-right of Building screen: click → shows Pannellum 360 viewer. An "Exit 360°" pill button appears top-right in 360 mode to return to static. In admin, two uploads: hero render (required) + 360 panorama (optional — FAB hidden if absent). Aligns with Phase 1.10.Z.

panState TDZ bug fix: const panState = new WeakMap() was declared mid-script but called via fitPan() from showScreen() which runs at page parse time on initial hash navigation. This produced ReferenceError (TDZ for const), silently breaking the rest of the script including the info panel auto-open. Fixed by hoisting panState to top of <script> block.

Neutral status palette (Phase 1.10.4): Replaced Figma's bright traffic-light colours (red/yellow/green hotspots) with brandbook-aligned neutrals: --st-avail (muted sage #6B8C6E), --st-reserved (gold-amber #B8955A), --st-sold (brown #8C7060). Applied consistently across hotspots, status tags, tower viz, unit list, floor plate unit dots.

Pannellum requires HTTP server: WebGL cannot load textures via file:// protocol (CORS restriction). python3 -m http.server 8765 started in background for session. URL http://127.0.0.1:8765 must be used instead of file:/// for 360 screens to work. This needs to be noted for every future session working on the mockup.

Next Steps

Build Login modal (data-screen="login") — glass overlay triggered by corner-btn top-right. Two states: (a) anonymous visitor: Google primary + email/password fallback, re-use auth tokens from Phase 1.3.3 design; (b) buyer-token state ?b=<token>: login icon hidden, agent card prominent, "Get in touch" as primary action per Phase 1.10.0 + 1.11.AA
Build Buyer-token unit page (data-screen="buyer-unit") — Phase 1.11.AA: shows attributed Sales Agent contact card, active heart icons, «Связаться со мной» / «Get in touch» as primary CTA, sign-in icon hidden from chrome
Polish pass: cross-screen consistency check (font sizes, spacing, status tag colours), fix any broken data-goto links pointing at TBD screens
Commit untracked files: docs/mockups/sales-app-atelier.html + docs/mockups/assets/velvet-exterior.jpg + docs/mockups/assets/velvet-pano-balcony.jpg
Sync to offplan-online/preview repo for shareable public link before sending to Roman
Remind Sergey: set up Figma MCP integration (see memory/project_figma_mcp_pending.md)

Open Questions

Hotspot positions on Building exterior render — current % coordinates are approximations on the CÔTE image. Need content team to position on actual Velvet building render once available.
Panorama replacement plan — what is Velvet's 360° shoot date? All Pannellum viewers use Nineteen "Balcony" image as placeholder throughout.
Welcome screen (0.1) image — should it use the static exterior render, or a separate atmospheric/lifestyle image?

Context for next session

Local HTTP server must be running at http://127.0.0.1:8765 for Pannellum 360° to work (CORS/WebGL requirement). Start with: python3 -m http.server 8765 --bind 127.0.0.1 from os/ directory. Will need restart if Mac rebooted.
sales-app-atelier.html is ~3500 lines. All screens use data-needs-panel attribute to trigger global panel visibility. Pannellum loaded via CDN defer in <head>.
Remaining TBD screens in dev-nav: login and buyer-unit — both show placeholder text. building-unit (1.2) and building-filter (1.3) were superseded by the global info panel + in-panel availability control and can be removed during polish.
CSS variables driving layout: --panel-w (0px / 80px / 460px based on panel state + current screen). Screen transitions: left: var(--panel-w) with transition: left 320ms.
Tasks #10 and #11 are the only remaining open items in the task tracker.
Figma MCP: user wants this set up. See memory/project_figma_mcp_pending.md. Spawn claude-code-guide agent for current setup steps since the integration is post Jan 2026 cutoff.