Prototype

2026-06-26 11:23:09 -05:00
commit 2a52e0546e
19 changed files with 1406 additions and 0 deletions
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yard Map</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="panel">
+        <p class="eyebrow">Static map</p>
+        <h1>Yard Atlas</h1>
+        <p class="intro">
+          Leaflet renders OpenStreetMap tiles underneath a client-side geometry
+          pipeline. Source files stay as JavaScript so you can author points and
+          shapes with absolute coordinates or offset math.
+        </p>
+        <div class="legend" id="legend"></div>
+        <section class="notes">
+          <h2>Authoring style</h2>
+          <pre><code>new House()
+  .trace([
+    [-100.8988347540, 46.8268080234],
+    [-100.8986668041, 46.8268307100],
+  ])
+
+new Sprinkler("Front bed sprinkler")
+  .add(offset(lotCorner), south(ft(15)), east(ft(10)))</code></pre>
+        </section>
+      </aside>
+      <main>
+        <div id="map" aria-label="Map of yard"></div>
+      </main>
+    </div>
+
+    <script
+      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>