initial commit

2026-06-25 21:26:53 +00:00
commit e5a1511098
68 changed files with 186669 additions and 0 deletions
@@ -0,0 +1,126 @@
+
+/* =========================================================
+   maps.css — Page-specific styles for the Maps page
+   ========================================================= */
+
+/* Inputs: match your theme, scoped to this page */
+.input {
+  background: #151924;
+  color: var(--fg);
+  border: 1px solid #2a3246;
+  border-radius: 8px;
+  padding: 8px 12px;
+  min-width: 220px;
+}
+.input::placeholder { color: #8fd8b3; }
+
+/* Toolbar layout and small-screen tweaks */
+.map-toolbar { gap: 10px; }
+
+@media (max-width: 560px) {
+  /* Slightly trim the global content padding on phones so the
+     viewer sits closer to the title/tools. This overrides the
+     top padding defined in styles.css for small screens only. */
+  .content {
+    padding: 84px 14px 24px; /* was 96px top in styles.css */
+  }
+
+  .map-toolbar .spacer { display: none; }
+  #mapSelect { width: 100%; }
+
+  .zoom-controls {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+  }
+}
+
+/* =========================================================
+   Map Viewer Container
+   - Desktop/tablet: comfortable bounded height
+   - Phone: fixed height using svh to ignore URL bar growth
+   ========================================================= */
+.map-viewer {
+  position: relative;
+  background: #0e131a;
+  border: 1px solid rgba(0, 255, 102, 0.18);
+  border-radius: 12px;
+  overflow: hidden;
+
+  /* Desktop/tablet defaults */
+  min-height: min(78vh, 900px);
+  max-height: 82vh;
+
+  /* Enable smooth gestures */
+  touch-action: none;      /* allow custom pinch/pan */
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* Phone-specific viewer height:
+   Use the "small viewport" to avoid oversized containers
+   when the mobile URL bar is visible. Provide fallbacks. */
+@media (max-width: 560px) {
+  .map-viewer {
+    min-height: 0;
+    max-height: none;
+    height: 65svh;   /* preferred: stable with URL bar shown */
+    height: 65dvh;   /* dynamic viewport fallback */
+    height: 65vh;    /* legacy fallback */
+  }
+}
+
+/* =========================================================
+   Map Image
+   - Centered by default using translate(-50%, -50%)
+   - JS appends pan (x,y) + scale() after this base transform
+   ========================================================= */
+#mapImage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  /* Base centering; JS keeps this and adds pan/zoom */
+  transform: translate3d(-50%, -50%, 0) scale(1);
+  transform-origin: 50% 50%;
+
+  will-change: transform;
+  image-rendering: auto;
+
+  /* Allow zooming beyond container bounds */
+  max-width: none;
+  height: auto;
+}
+
+/* Optional: subtle grid overlay for orientation while zoomed */
+.map-grid-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(0,255,102,0.06), rgba(0,255,102,0.06)),
+    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px),
+    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px);
+  opacity: .2;
+}
+
+/* Zoom control button states */
+.zoom-controls .btn[disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+/* Accessibility helper (scoped copy in case the global one isn't loaded here) */
+.visually-hidden {
+  position: absolute !important;
+  height: 1px; width: 1px; overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap; clip-path: inset(50%);
+}
+
+/* Desktop cursor cues */
+@media (hover: hover) and (pointer: fine) {
+  .map-viewer { cursor: grab; }
+  .map-viewer.is-panning { cursor: grabbing; }
+}