nearmiss/web/embed.html at main · ghzhost/nearmiss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="theme-color" content="#152A30" />
    <link rel="icon" href="/web/vendor/brand/clearance-mark.svg" type="image/svg+xml" />
    <title>nearmiss synthetic hotspot fixture (local embed)</title>
    <meta
      name="description"
      content="Source-only nearmiss synthetic fixture for locally testing exposure-normalized road-hazard hotspot methods."
    />
    <link rel="stylesheet" href="vendor/leaflet/leaflet.css" />
    <link rel="stylesheet" href="embed.css" />
    <link rel="stylesheet" href="brand.css" />
  </head>
  <body class="embed">
    <a class="skip-link" href="#main">Skip to the hotspot list</a>
    <main id="main" class="embed-main">
      <h1 class="visually-hidden">nearmiss synthetic exposure-normalized hazard hotspot fixture</h1>

      <div class="embed-brand">
        <a
          id="embed-brand-link"
          class="brand-lockup"
          href="/web/davis-demo.html?city=davis"
          target="_blank"
          rel="noopener"
          aria-label="Open the nearmiss local synthetic methods demo"
        >
          <svg class="clearance-mark" viewBox="0 0 48 32" aria-hidden="true" focusable="false">
            <path class="clearance-path clearance-path-a" d="M3 27 17 13h5" />
            <path class="clearance-path clearance-path-b" d="M45 5 31 19h-5" />
          </svg>
          <span class="brand-lockup-copy"><strong>nearmiss</strong><span>Conflict Atlas</span></span>
        </a>
      </div>

      <div
        id="embed-map"
        class="embed-map"
        role="group"
        aria-label="Map of exposure-normalized hazard rates with significant hotspots. A text list of hotspots follows."
        aria-describedby="embed-caption"
      ></div>

      <p id="embed-caption" class="embed-caption" aria-live="polite">Loading hotspot data…</p>

      <p class="embed-disclaimer" role="note">
        Source-only synthetic fixture for methods development —
        <strong>not historical observations and not for safety-critical routing</strong>
        or navigation.
      </p>

      <!-- Non-visual equivalent: nothing here is conveyed by color alone. -->
      <section class="embed-list" aria-labelledby="embed-list-heading">
        <h2 id="embed-list-heading" class="visually-hidden">Significant hotspots (text)</h2>
        <ul id="embed-hotspots"></ul>
      </section>

      <p class="embed-footer">
        <span id="embed-source">Exposure-normalized rates · synthetic fixture</span>
        <a
          id="embed-fulllink"
          href="/web/davis-demo.html?city=davis"
          target="_blank"
          rel="noopener"
          >Open the full local methods demo →</a
        >
      </p>
    </main>
    <script src="vendor/leaflet/leaflet.js"></script>
    <script src="embed.js"></script>
  </body>
</html>