93 lines
4.4 KiB
HTML
93 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>UPG 100 List (dev)</title>
|
|
<link rel="icon" href="data:,">
|
|
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet" />
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
|
|
<!-- 09b-search-reuse-geocoder §1(b): the SHARED GeocoderComponent wraps
|
|
mapbox-gl-geocoder and references the MapboxGeocoder global (it early-
|
|
returns if undefined). Same two tags research-map's index.html loads
|
|
(research-map-embed/index.html:10-12). The component injects the geocoder
|
|
CSS into the shadow root itself, so only the JS global is strictly needed;
|
|
the CSS link is added for parity + the non-shadow staging fallback. This is
|
|
a dev-harness addition only — it does NOT touch the IIFE bundle or siblings. -->
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" rel="stylesheet" />
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body {
|
|
background: #0b0f14; color: #e5e7eb; min-height: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
.stage-head {
|
|
padding: 18px 16px 8px; text-align: center;
|
|
}
|
|
.stage-head h1 {
|
|
font: 700 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: .06em; color: #e5e7eb;
|
|
}
|
|
.stage-head .sub {
|
|
margin-top: 6px;
|
|
font: 11px/1 ui-monospace, monospace; color: #94a3b8;
|
|
letter-spacing: .12em; text-transform: uppercase;
|
|
}
|
|
#stage {
|
|
position: relative;
|
|
width: 100%; max-width: 1100px; margin: 16px auto; padding: 0 16px;
|
|
}
|
|
.slot {
|
|
position: relative; width: 100%; aspect-ratio: 16 / 9;
|
|
border: 2px solid #1f2937; background: #142118;
|
|
}
|
|
my-upg-100-list-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
|
|
my-upg-100-list-map:fullscreen, my-upg-100-list-map:-webkit-full-screen { position: fixed; inset: 0; width: 100vw; height: 100vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════════
|
|
SLICE 00 staging page — mounts a single <my-upg-100-list-map> with a
|
|
minimal profile-config (profile: "upg-100-list"). The mapbox token is
|
|
pulled from .env at dev-server start (Vite replaces runtime ?tk= or window.MAPBOX_TOKEN).
|
|
═══════════════════════════════════════════════════════════════════ -->
|
|
<script>
|
|
window.UPG_TOKEN = (new URLSearchParams(location.search).get('tk')||(typeof window!=='undefined'&&window.MAPBOX_TOKEN)||'');
|
|
</script>
|
|
|
|
<div class="stage-head">
|
|
<h1>my-upg-100-list</h1>
|
|
<div class="sub">slice 00 · scaffold-bundle</div>
|
|
</div>
|
|
|
|
<div id="stage">
|
|
<div class="slot" id="slot"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Mount one element. Profile is selectable via ?profile= (dev convenience) so
|
|
// the composite MFE profile (upg-100-app) can be previewed too; defaults to the map.
|
|
var _profile = (new URLSearchParams(location.search).get('profile') || 'upg-100-list');
|
|
// Inherited language: the SPA/studio nests this leaf as an iframe and passes the chosen language
|
|
// as ?locale=; ProfileLoader reads profile-config.locale and drives the bundle's i18n. Empty →
|
|
// the leaf keeps its own document.documentElement.lang detection.
|
|
var _locale = (new URLSearchParams(location.search).get('locale') || '');
|
|
var config = { profile: _profile, tk: window.UPG_TOKEN || '' };
|
|
if (_locale) config.locale = _locale;
|
|
var el = document.createElement('my-upg-100-list-map');
|
|
el.setAttribute('profile-config', JSON.stringify(config));
|
|
document.getElementById('slot').appendChild(el);
|
|
</script>
|
|
|
|
<script>window.MAP_APP_BASE_URL = '/';</script>
|
|
|
|
<!-- Vite multi-page entry. In dev, served transformed; in build, Vite emits
|
|
../../app/my-upg-100-list.js and rewrites this script tag. -->
|
|
<script type="module" src="./index.js"></script>
|
|
|
|
</body>
|
|
</html>
|