diff --git a/public/index.html b/public/index.html index a99ec28..ddeffb7 100644 --- a/public/index.html +++ b/public/index.html @@ -109,54 +109,91 @@ } /* Yelp search button */ + /* Multi-provider search bar */ #map-search-wrap { display: flex; align-items: center; - gap: 6px; + gap: 0; pointer-events: all; background: rgba(19,22,31,0.95); border: 1px solid #252a38; border-radius: 8px; - display: flex; - align-items: center; padding: 0; - max-width: 360px; + max-width: 480px; backdrop-filter: blur(8px); overflow: hidden; + flex-shrink: 0; } - #map-search-wrap:focus-within { - border-color: var(--accent); - } + #map-search-wrap:focus-within { border-color: var(--accent); } #map-search-input { flex: 1; background: transparent; border: none; color: #e0e6f0; font-size: 0.82rem; - outline: none; padding: 8px 10px; + outline: none; + min-width: 120px; } #map-search-input::placeholder { color: #7a8499; } - .yelp-search-btn { + .provider-tabs { display: flex; align-items: center; - gap: 4px; - padding: 6px 10px; - background: rgba(255,107,53,0.15); - border: none; border-left: 1px solid #252a38; - color: #ff6b35; + flex-shrink: 0; + } + .provider-tab { + padding: 5px 8px; + border: none; + background: transparent; + color: #555; font-size: 0.68rem; font-weight: 700; cursor: pointer; white-space: nowrap; - transition: background 0.15s; + transition: all 0.15s; + border-right: 1px solid #252a38; + letter-spacing: 0.2px; } - .yelp-search-btn:hover { background: rgba(255,107,53,0.25); } - .yelp-search-btn.searching { - opacity: 0.7; - cursor: wait; + .provider-tab:last-child { border-right: none; } + .provider-tab:hover { color: #ccc; background: rgba(255,255,255,0.04); } + .provider-tab.active-yelp { color: #ff6b35; background: rgba(255,107,53,0.12); } + .provider-tab.active-osm { color: #fbbf24; background: rgba(251,191,36,0.10); } + .provider-tab.active-all { color: #00d4ff; background: rgba(0,212,255,0.08); } + #map-search-btn { + border: none; + background: transparent; + color: #00d4ff; + cursor: pointer; + padding: 6px 10px; + font-size: 0.9rem; + border-left: 1px solid #252a38; + flex-shrink: 0; } + #map-search-btn:hover { background: rgba(0,212,255,0.06); } + /* Quick-book mini bar */ + .map-quick-book { + display: flex; + align-items: center; + gap: 3px; + flex-wrap: wrap; + } + .qb-label { color: #444; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px; } + .qb-btn { + display: flex; align-items: center; gap: 2px; + padding: 2px 5px; + border: 1px solid #252a38; + background: rgba(255,255,255,0.03); + color: #555; + border-radius: 3px; + font-size: 0.6rem; font-weight: 600; + cursor: pointer; white-space: nowrap; text-decoration: none; + transition: all 0.15s; + } + .qb-btn:hover { border-color: #444; color: #ccc; background: rgba(255,255,255,0.07); } + /* Legend: multi-provider dots */ + .legend-dot-osm { background: #fbbf24; width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 4px; border: 1px solid rgba(0,0,0,0.3); } + .legend-dot-all { background: conic-gradient(#ff6b35 33%, #fbbf24 33%, #fbbf24 66%, #00d4ff 66%); } /* Filter bar layout */ .map-overlay { @@ -972,16 +1009,18 @@