Create new project design plans

2026-08-28 14:23:26 -07:00
parent a7d6db8177
commit 7ce73f19c5
22 changed files with 2682 additions and 263 deletions
@@ -0,0 +1,207 @@
+/* Shared chrome for Leaflet map pages: full-screen map, the slide-out
+   controls panel, mobile hamburger toggle, and status banner. Page-specific
+   controls (layer lists, legends, buttons) are styled by each page. */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#map {
+    flex: 1;
+    width: 100%;
+}
+
+.controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    background: white;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    min-width: 175px;
+    max-height: calc(100vh - 20px);
+    overflow-y: auto;
+}
+
+.controls h3 {
+    margin: 0 0 6px 0;
+    font-size: 12px;
+    color: #333;
+}
+
+.controls label {
+    display: flex;
+    align-items: center;
+    margin: 4px 0;
+    cursor: pointer;
+    font-size: 11px;
+}
+
+.controls input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+.controls select {
+    width: 100%;
+    font-size: 11px;
+    padding: 3px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.controls button {
+    width: 100%;
+    padding: 7px;
+    margin-top: 7px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.controls button:hover {
+    background: #0056b3;
+}
+
+.controls button:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.status {
+    margin-top: 7px;
+    padding: 6px;
+    border-radius: 4px;
+    font-size: 11px;
+    text-align: center;
+}
+
+.status.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.status.error {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.status.hidden {
+    display: none;
+}
+
+.hamburger-button {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1001;
+    background: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    width: 44px;
+    height: 44px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+.hamburger-button span {
+    display: block;
+    width: 24px;
+    height: 3px;
+    background: #333;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.hamburger-button.active span:nth-child(1) {
+    transform: rotate(45deg) translate(6px, 6px);
+}
+
+.hamburger-button.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-button.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(6px, -6px);
+}
+
+@media (max-width: 768px) {
+    .hamburger-button {
+        display: flex;
+    }
+
+    .controls {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 80%;
+        max-width: 320px;
+        height: 100vh;
+        overflow-y: auto;
+        transition: right 0.3s ease;
+        border-radius: 0;
+        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
+        padding-top: 50px;
+    }
+
+    .controls.open {
+        right: 0;
+    }
+
+    .controls h3 {
+        font-size: 13px;
+    }
+
+    .controls label {
+        font-size: 12px;
+    }
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 999;
+}
+
+.overlay.active {
+    display: block;
+}
+
+.btn-back {
+    display: block;
+    margin-bottom: 12px;
+    padding: 5px 10px;
+    background: #1a1a2e;
+    color: #ddd;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    text-decoration: none;
+    text-align: center;
+}
+.btn-back:hover { background: #2d2d4e; color: #fff; }