harshith99 Claude Sonnet 4.6 commited on
Commit
bdaa9fe
Β·
1 Parent(s): 7d20eac

UX: fix demo hero font sizes and docker note copy

Browse files

- Remove hardcoded 0.85rem from strong (inherits body default), bump span to 0.88rem and docker note to 0.82rem so the hero reads consistently with the rest of the UI
- Reword docker strip to "Want to run it locally? Docker version on GitHub" β€” avoids implying only Docker is free

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (4) hide show
  1. CLAUDE.md +1 -1
  2. README.md +1 -1
  3. web/static/app.css +2 -3
  4. web/templates/index.html +1 -1
CLAUDE.md CHANGED
@@ -87,7 +87,7 @@ Key JS functions:
87
  - `updateTabBadges()` β€” sets badge counts and stat strip
88
  - `_closeFeedback()` β€” closes `#feedback-overlay`; also wired to Escape key and overlay-click. Submit handler constructs `FEEDBACK_REPO/issues/new?labels=enhancement&title=…&body=…` and opens it. `FEEDBACK_REPO` const at bottom of `app.js`.
89
  - `startTour()` / `endTour()` β€” guided demo tour (defined in `tour.js`); Escape key closes the tour at any step. Injects `DEMO_ROWS` (8 hardcoded places) into `allRows`/`currentJobId`/`lastJobCost`, calls `renderStats`/`populateFilterDropdowns`/`applyFilters`/`updateTabBadges`, pre-fills the roulette pick card directly, then restores all state on exit. Triggered by `β–Ά Watch demo` in `#demo-hero` (placed between `.header` and `#top-nav` in the HTML). Step 2 (model-card) is **Ollama-aware**: `body()` checks `document.body.dataset.ollamaEnabled === 'true'`; hosted build omits Ollama. Tour `body` field can be a string or a `function()` (called at render time by `goToStep`).
90
- - `#demo-hero` includes a `.demo-docker-note` strip (full-width row with `flex: 0 0 100%`, separated by border-top) that links to the GitHub repo for self-hosting with Docker. Only meaningful on the hosted build (Docker users already have the app).
91
 
92
  KML parser convention: folder nesting = country (outer) β†’ city (inner); `<coordinates>` order is
93
  **lng,lat,alt**; description CDATA uses `" Β· "` separator for category Β· cuisine Β· price.
 
87
  - `updateTabBadges()` β€” sets badge counts and stat strip
88
  - `_closeFeedback()` β€” closes `#feedback-overlay`; also wired to Escape key and overlay-click. Submit handler constructs `FEEDBACK_REPO/issues/new?labels=enhancement&title=…&body=…` and opens it. `FEEDBACK_REPO` const at bottom of `app.js`.
89
  - `startTour()` / `endTour()` β€” guided demo tour (defined in `tour.js`); Escape key closes the tour at any step. Injects `DEMO_ROWS` (8 hardcoded places) into `allRows`/`currentJobId`/`lastJobCost`, calls `renderStats`/`populateFilterDropdowns`/`applyFilters`/`updateTabBadges`, pre-fills the roulette pick card directly, then restores all state on exit. Triggered by `β–Ά Watch demo` in `#demo-hero` (placed between `.header` and `#top-nav` in the HTML). Step 2 (model-card) is **Ollama-aware**: `body()` checks `document.body.dataset.ollamaEnabled === 'true'`; hosted build omits Ollama. Tour `body` field can be a string or a `function()` (called at render time by `goToStep`).
90
+ - `#demo-hero` includes a `.demo-docker-note` strip (full-width row with `flex: 0 0 100%`, separated by border-top) with copy "Want to run it locally? Docker version on GitHub β†—" β€” wording is neutral (no "free") so it doesn't imply only Docker is free. Only meaningful on the hosted build (Docker users already have the app).
91
 
92
  KML parser convention: folder nesting = country (outer) β†’ city (inner); `<coordinates>` order is
93
  **lng,lat,alt**; description CDATA uses `" Β· "` separator for category Β· cuisine Β· price.
README.md CHANGED
@@ -311,7 +311,7 @@ The UI lets you:
311
  - After extraction completes, the app automatically jumps to Explore β†’ Roulette and spins immediately
312
  - **Pipeline timing note** β€” the progress card shows a persistent note ("usually 5–10 min β€” the bar may appear stuck during AI extraction") so users don't abandon a running job
313
  - **β–Ά Watch demo** β€” a hero card below the header launches a 6-step guided tour (Escape or βœ• to exit at any step) with 8 pre-loaded real-world places (Tokyo, London, Paris, LA, Bangkok…). The demo injects dummy data so users see a fully populated Roulette result, a Browse grid with a live Leaflet map, and the download bar β€” without uploading anything. The model-picker step is Ollama-aware: Ollama is only mentioned on Docker/local (where `OLLAMA_ENABLED=true`), not on the hosted build
314
- - **🐳 Docker self-host nudge** β€” a slim note below the hero card links to the GitHub repo for users who want fully free, offline extraction via Docker
315
  - **πŸ’‘ Suggest a feature** β€” a floating pill button (bottom-right, always visible) opens a modal; fills in a GitHub issue title + details and opens a pre-filled `issues/new` URL in a new tab. Collapses to emoji-only on narrow screens; safe-area-inset aware for iOS Safari
316
  - **Preview pins on a map** β€” an in-app Leaflet/OpenStreetMap map renders every geocoded place so you can sanity-check for misplaced pins before exporting. Follows your active filters; pins link back to the original reel
317
  - **Filter and search** β€” text search by name/city, country, category, and cuisine dropdowns, multi-select price range chips, "missing pins" toggle, and a **🍴 Food only** toggle (on by default) that limits Browse and Roulette to food/drink places (Restaurant, Bar, Cafe, Bakery, Market) β€” all client-side with instant results
 
311
  - After extraction completes, the app automatically jumps to Explore β†’ Roulette and spins immediately
312
  - **Pipeline timing note** β€” the progress card shows a persistent note ("usually 5–10 min β€” the bar may appear stuck during AI extraction") so users don't abandon a running job
313
  - **β–Ά Watch demo** β€” a hero card below the header launches a 6-step guided tour (Escape or βœ• to exit at any step) with 8 pre-loaded real-world places (Tokyo, London, Paris, LA, Bangkok…). The demo injects dummy data so users see a fully populated Roulette result, a Browse grid with a live Leaflet map, and the download bar β€” without uploading anything. The model-picker step is Ollama-aware: Ollama is only mentioned on Docker/local (where `OLLAMA_ENABLED=true`), not on the hosted build
314
+ - **🐳 Docker self-host nudge** β€” a slim note below the hero card ("Want to run it locally? Docker version on GitHub") links to the repo; intentionally neutral wording so it doesn't imply only Docker is free
315
  - **πŸ’‘ Suggest a feature** β€” a floating pill button (bottom-right, always visible) opens a modal; fills in a GitHub issue title + details and opens a pre-filled `issues/new` URL in a new tab. Collapses to emoji-only on narrow screens; safe-area-inset aware for iOS Safari
316
  - **Preview pins on a map** β€” an in-app Leaflet/OpenStreetMap map renders every geocoded place so you can sanity-check for misplaced pins before exporting. Follows your active filters; pins link back to the original reel
317
  - **Filter and search** β€” text search by name/city, country, category, and cuisine dropdowns, multi-select price range chips, "missing pins" toggle, and a **🍴 Food only** toggle (on by default) that limits Browse and Roulette to food/drink places (Restaurant, Bar, Cafe, Bakery, Market) β€” all client-side with instant results
web/static/app.css CHANGED
@@ -1139,16 +1139,15 @@
1139
  gap: 2px;
1140
  }
1141
  .demo-hero-copy strong {
1142
- font-size: 0.85rem;
1143
  color: var(--text);
1144
  }
1145
  .demo-hero-copy span {
1146
- font-size: 0.78rem;
1147
  color: var(--muted);
1148
  }
1149
  .demo-docker-note {
1150
  flex: 0 0 100%;
1151
- font-size: 0.74rem;
1152
  color: var(--muted);
1153
  text-align: center;
1154
  border-top: 1px solid var(--border);
 
1139
  gap: 2px;
1140
  }
1141
  .demo-hero-copy strong {
 
1142
  color: var(--text);
1143
  }
1144
  .demo-hero-copy span {
1145
+ font-size: 0.88rem;
1146
  color: var(--muted);
1147
  }
1148
  .demo-docker-note {
1149
  flex: 0 0 100%;
1150
+ font-size: 0.82rem;
1151
  color: var(--muted);
1152
  text-align: center;
1153
  border-top: 1px solid var(--border);
web/templates/index.html CHANGED
@@ -29,7 +29,7 @@
29
  <span>See what your saved posts become β€” real examples, no upload needed.</span>
30
  </div>
31
  <button class="btn-tour" onclick="startTour()">β–Ά Watch demo</button>
32
- <p class="demo-docker-note">🐳 Want free, fully offline extraction? <a href="https://github.com/harshithbelagur/instagram-restaurant-mapper" target="_blank" rel="noopener">Self-host with Docker β†—</a></p>
33
  </div>
34
 
35
  <!-- ── Top navigation (always visible) ───────────────────────── -->
 
29
  <span>See what your saved posts become β€” real examples, no upload needed.</span>
30
  </div>
31
  <button class="btn-tour" onclick="startTour()">β–Ά Watch demo</button>
32
+ <p class="demo-docker-note">🐳 Want to run it locally? <a href="https://github.com/harshithbelagur/instagram-restaurant-mapper" target="_blank" rel="noopener">Docker version on GitHub β†—</a></p>
33
  </div>
34
 
35
  <!-- ── Top navigation (always visible) ───────────────────────── -->