Skip to content

Commit f3ea659

Browse files
justinsuojustinsuo
committed
Add NorCal Chinese Food map at /food.html
A second map alongside the touge map. Same dark UI, same sidebar pattern, but with restaurants instead of routes. Data - food.json: 36 hand-curated Chinese restaurants across NorCal — SF (Chinatown, Richmond, Sunset, Embarcadero), Oakland, Berkeley, Albany, Emeryville, Richmond CA, Daly City, Millbrae, San Mateo, Mountain View, Cupertino, Los Altos, San Jose, Fremont, Newark, and Sacramento. - Each restaurant: cuisine, neighborhood, city, lat/lon, price, rating, known_for, and vibe. - 10 cuisine subtypes — Cantonese, Dim Sum, Sichuan, Hunan, Shanghai, Northern, Taiwanese, Hot Pot, Noodle/Dumpling, Modern — each with a distinct color used for both markers and filter chips. UI - food.html, food.js - Filter chips: cuisine (auto-populated from data), region, min rating, price - Detail panel: cuisine accent gradient, known-for + vibe sections, Google Maps lookup link - Cross-page nav at top of both index.html and food.html: Roads / Food Restaurants like: Mister Jiu's, Z&Y, R&G Lounge, Yank Sing, Hong Kong Lounge II, San Tung, Spices! II, Koi Palace, HK Flower Lounge, Royal Feast, Great China (Berkeley), China Village, Daimo, Shan Dong, Din Tai Fung, Hai Di Lao, Sichuan Home, Chef Chu's, Spicy King, Frank Fat's.
1 parent 755db24 commit f3ea659

5 files changed

Lines changed: 1004 additions & 1 deletion

File tree

‎food.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>NorCal Chinese Food Map — by Justin Suo</title>
7+
<meta name="description" content="A curated map of the best Chinese restaurants in Northern California — Cantonese, Sichuan, Shanghai, Taiwanese, dim sum, hot pot." />
8+
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
10+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
11+
<link rel="stylesheet" href="styles.css" />
12+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext y='14' font-size='14'%3E%F0%9F%A5%A2%3C/text%3E%3C/svg%3E" />
13+
</head>
14+
<body>
15+
<aside id="sidebar" aria-label="Restaurants and filters">
16+
<header class="sidebar-header">
17+
<nav class="page-nav" aria-label="Section navigation">
18+
<a href="index.html" class="nav-tab">🗻 Roads</a>
19+
<a href="food.html" class="nav-tab active" aria-current="page">🥢 Food</a>
20+
</nav>
21+
<h1>NorCal Chinese Food</h1>
22+
<p class="subtitle">The good stuff · Curated by <a href="https://github.com/justinsuo" target="_blank" rel="noopener">Justin Suo</a></p>
23+
</header>
24+
25+
<section class="filters" aria-label="Filters">
26+
<div class="filter-group">
27+
<label class="filter-label">Cuisine</label>
28+
<div class="chip-row" id="cuisine-chips">
29+
<button class="chip active" data-cuisine="all">All</button>
30+
</div>
31+
</div>
32+
<div class="filter-group">
33+
<label class="filter-label">Region</label>
34+
<div class="chip-row" id="region-chips">
35+
<button class="chip active" data-region="all">All</button>
36+
<button class="chip" data-region="San Francisco">SF</button>
37+
<button class="chip" data-region="Oakland">Oakland</button>
38+
<button class="chip" data-region="Berkeley">Berkeley</button>
39+
<button class="chip" data-region="Peninsula">Peninsula</button>
40+
<button class="chip" data-region="South Bay">South Bay</button>
41+
<button class="chip" data-region="Sacramento">Sac</button>
42+
</div>
43+
</div>
44+
<div class="filter-group">
45+
<label class="filter-label">Min rating</label>
46+
<div class="chip-row" id="rating-chips">
47+
<button class="chip active" data-rating="0">All</button>
48+
<button class="chip" data-rating="4">4+</button>
49+
<button class="chip" data-rating="4.5">4.5+</button>
50+
<button class="chip" data-rating="5">5</button>
51+
</div>
52+
</div>
53+
<div class="filter-group">
54+
<label class="filter-label">Price</label>
55+
<div class="chip-row" id="price-chips">
56+
<button class="chip active" data-price="all">All</button>
57+
<button class="chip" data-price="$">$</button>
58+
<button class="chip" data-price="$$">$$</button>
59+
<button class="chip" data-price="$$$">$$$</button>
60+
<button class="chip" data-price="$$$$">$$$$</button>
61+
</div>
62+
</div>
63+
</section>
64+
65+
<section class="route-list-wrap" aria-label="Restaurants">
66+
<div id="restaurant-list" class="route-list" role="listbox" aria-label="Restaurants"></div>
67+
</section>
68+
69+
<footer class="sidebar-footer">
70+
<a href="https://github.com/justinsuo/tougespot-in-norcal" target="_blank" rel="noopener">GitHub</a>
71+
<span aria-hidden="true">·</span>
72+
<a href="https://github.com/justinsuo/tougespot-in-norcal/issues/new" target="_blank" rel="noopener">Suggest a spot</a>
73+
</footer>
74+
</aside>
75+
76+
<main id="map" role="application" aria-label="Map of NorCal Chinese restaurants"></main>
77+
78+
<button id="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="true">
79+
<span class="bars" aria-hidden="true"></span>
80+
</button>
81+
82+
<aside id="detail-panel" aria-hidden="true" aria-label="Restaurant details">
83+
<button class="detail-close" id="detail-close" aria-label="Close details">×</button>
84+
<div id="detail-body"></div>
85+
</aside>
86+
87+
<div id="loading" class="loading" aria-live="polite">Loading restaurants…</div>
88+
89+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
90+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
91+
<script src="food.js"></script>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)