Engagement Project – Final Submission

css/styles.css

@@ -0,0 +1,243 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;         
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+
+main {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;              
+}
+
+.map-section {
+  flex: 1 1 auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: #f3f4f6;
+}
+
+.station-list-section {
+  width: 420px;             
+  flex-shrink: 0;
+  overflow-y: auto;
+  background-color: #ffffff;
+  padding: 12px;
+  border-left: 1px solid #e0e0e0;
+}
+
+
+.map-search-controls {
+  display: flex;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  padding: 0.4rem 0.6rem;
+  width: 100%;
+  gap: 0.4rem;
+  justify-content: space-between;
+  background-color: #e5e7eb;
+  z-index: 1;
+}
+
+.map-search-controls input {
+  box-sizing: border-box;
+  border: 1px solid #9ca3af;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  font-family: monospace;
+  padding: 0.2rem 0.3rem;
+}
+
+[name="address-search"] {
+  background-image: url("../img/location.svg");
+  background-size: 1em;
+  background-repeat: no-repeat;
+  background-position: 98% center;
+  padding-right: 1.4em;
+  width: 60%;
+}
+
+[name="time-search"] {
+  width: 40%;
+}
+
+.map {
+  flex: 1;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.bike-search-controls {
+  border: 0;
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+  background-color: #f9fafb;
+  position: sticky;
+  top: 0;            
+  z-index: 1;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.electric-bikes-only-label {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+}
+
+.min-battery-level-label {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+.min-battery-level-label input[type="range"] {
+  width: 7rem;
+}
+
+.station-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.station-list .station {
+  display: grid;
+  grid-template-areas:
+    "name             name"
+    "blank            distance"
+    "bikes-info       docks-info"
+    "drop-off-info    pick-up-info"
+    "details          details";
+  grid-template-columns: 1fr 1fr;
+
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.9rem;
+}
+
+.station-list .station:first-child {
+  border-top: 1px solid #e5e7eb;
+}
+
+.station .name {
+  grid-area: name;
+  font-weight: 600;
+}
+
+.station .distance {
+  grid-area: distance;
+  justify-self: end;
+  font-size: 0.8em;
+  font-style: italic;
+  padding-bottom: 0.2rem;
+}
+
+.station .available-bikes {
+  grid-area: bikes-info;
+}
+
+.station .available-docks {
+  grid-area: docks-info;
+  text-align: right;
+}
+
+.station .next-drop-off-est {
+  grid-area: drop-off-info;
+}
+
+.station .next-pick-up-est {
+  grid-area: pick-up-info;
+  text-align: right;
+}
+
+.station .details {
+  grid-area: details;
+  justify-self: center;
+  width: 100%;
+}
+
+.station .details .chart {
+  box-sizing: border-box;
+  margin-top: 0.4rem;
+  padding: 0.4rem;
+  width: 100%;
+  height: 3.5rem;
+  background-color: #e5e7eb;
+  font-size: 0.8rem;
+}
+
+/* POI category checkbox layout */
+.poi-category-panel {
+  margin-top: 0.5rem;
+}
+
+.poi-category-panel .control-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  display: block;
+}
+
+.poi-cat-item {
+  display: block;       
+  margin: 0.15rem 0;
+  font-size: 0.9rem;
+}
+
+.poi-cat-item input[type="checkbox"] {
+  margin-right: 0.4rem;
+}
+
+.poi-category-panel {
+  margin-top: 0.75rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #ddd;
+}
+
+.poi-cat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.2rem 0;
+}
+
+.panel {
+  position: static;     
+  width: 100%;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+  margin-bottom: 16px;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+.panel h2 { margin: 0 0 10px; font-size: 18px; }
+.panel h3 { margin: 12px 0 8px; font-size: 14px; }
+.field { display: grid; gap: 6px; margin: 10px 0; }
+.field span { font-size: 13px; }
+.field input[type="text"] { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; }
+.field input[type="range"] { width: 100%; }
+
+.cards { display: grid; gap: 10px; }
+.card {
+  border: 1px solid #eee;
+  border-radius: 10px;
+  padding: 10px;
+}
+.card .title { font-weight: 700; margin-bottom: 6px; }
+.card .meta { font-size: 12px; color: #444; line-height: 1.35; }

data/NJ_Fishnet_CenterPoints_WGS84.cpg

@@ -0,0 +1 @@
+UTF-8

data/NJ_Fishnet_CenterPoints_WGS84.prj

@@ -0,0 +1 @@
+PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],PARAMETER["Standard_Parallel_1",0.0],PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0]]