Weitzman-MUSA-JavaScript · Xiaoyo-u · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "livePreview.defaultPreviewPath": "/index.html"
+}
diff --git a/README.md b/README.md
@@ -1 +1,22 @@
-Add a readme for your story map here. Include content overview, data citations, and any relevant technical details.
+Hopi Ties To Water
+Hopi Ties to Water is an interactive storytelling map that explores the relationship between water, cultural identity, and public space on the Hopi Reservation in northeastern Arizona. In an arid landscape where rainfall is unpredictable, springs have historically served as essential water sources, social gathering spaces, and spiritual anchors for Hopi communities.
+
+This project walks through the relationship between Hopi people and springs as well as three typical springs around first mesa and keams canyon including tawapa spring, coyote spring and pipe spring.
+
+Featured Case Studies
+The storytelling map focuses on three representative springs:
+
+Tawapa Spring
+
+Once a vital water source on First Mesa, Tawapa Spring now serves as a symbolic and social public space, surrounded by community facilities and open gathering areas.
+
+Coyote Spring
+
+A sacred underground spring marked by ceremonial offerings. The site is currently threatened by erosion and declining vegetation, highlighting the vulnerability of cultural landscapes.
+
+Pipe Spring (Keams Canyon)
+
+Located deep within Keams Canyon, this spring sustains lush vegetation and wetlands. Its remote and tranquil setting supports ongoing spiritual practices and reflection.
+
+Data source:
+Spring point data were obtained from the U.S. Geological Survey (USGS).
diff --git a/Scratch/web-scripting/js/index.html b/Scratch/web-scripting/js/index.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+    <title>My Web Map</title>
+    <script defer src="js/main.js"></script>
+</head>
+<body>
+    <p id="sampleParagraph">No
+    longer blank.</p>
+
+</body>
+</html>
diff --git a/Scratch/web-scripting/js/main.js b/Scratch/web-scripting/js/main.js
@@ -0,0 +1,4 @@
+import {add} from './utils.js';
+
+const sampleParagraph = document.getElementById('sampleParagraph');
+sampleParagraph.innerHTML = `New sample content. The sum of  2 and 3 is: ${add(2,3)}`;
diff --git a/Scratch/web-scripting/js/utils.js b/Scratch/web-scripting/js/utils.js
@@ -0,0 +1,6 @@
+function add(a,b) {
+    return a + b;
+}
+export {
+    add
+};
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,312 @@
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+
+#title {
+  font-family: 'Cinzel', serif;
+  font-weight: 400; /* Regular */
+  font-size: 3rem;
+  margin: 1em;
+  text-align: center;
+}
+
+#subtitle {
+  font-size: 1.5em;
+  font-weight: 300;
+  margin-top: 10px;
+  text-align: center;
+}
+
+#author {
+  color: #34210d;
+  font-size: 0.8em;
+  font-weight: 305000;
+  margin-top: 10px;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  #title {
+    font-size: 2rem;
+    margin: 0.5em;
+  }
+
+  #subtitle {
+    font-size: 1rem;
+  }
+
+  #author {
+    font-size: 0.8rem;
+  }
+
+  .title-container {
+    padding: 20px;
+    background-position: center;
+  }
+}
+
+.title-container {
+  height: 100vh;
+  background: url('../img/Spring drawing.jpg') center center / cover no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color:#34210d
+}
+
+.title-container::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(255, 255, 255, 0.2); 
+  z-index: 1;
+  height: 100vh;
+}
+
+.title-container h1,
+.title-container h4,
+.title-container h5 {
+  position: relative;
+  z-index: 2; 
+}
+
+.map-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  z-index: 2;
+}
+
+.map {
+  height: 100%;
+  width: 100%;
+}
+
+.info.legend {
+  background: white;
+  padding: 6px 8px;
+  font: 14px/16px Arial, Helvetica, sans-serif;
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+
+.info.legend i, .info.legend span {
+  display: inline-block; 
+  width: 25px;
+  height: 12px;
+  margin-right: 6px;
+  opacity: 0.7;
+  vertical-align: middle;
+}
+
+.legend-color.hopi {
+  background-color: #FFFFFF;
+  border: 1px solid #000000;
+}
+
+.legend-color.other {
+  background-color: #A0522D;
+  border: 1px solid #A0522D;
+}
+
+.slide-section {
+  position: relative;
+  margin-top: -20vh;
+  z-index: 100;
+  pointer-events: none;
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
+}
+
+.slide {
+  margin-top: 90vh;
+  margin-bottom: 90vh;
+  margin-left: auto;
+  margin-right: 2rem;
+  padding: 1rem;
+  box-shadow: -0.5rem 0 1rem rgba(0 0 0 / 30%);
+  pointer-events: initial;
+
+  width: 16rem;
+
+  background-color: rgba(255, 255, 255, 0.4);
+
+  color: black;
+}
+
+.slide:first-child {
+  margin-top: 0;
+}
+
+.slide:last-child {
+  margin-bottom: 40vh;
+}
+
+.slide-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 0.5rem;
+
+  width: 100%;
+}
+
+.slide-nav-button {
+  transition: all 0.1s;
+
+  padding: 0;
+  margin: 1rem;
+  width: 4rem;
+  height: 3rem;
+  border: 1px solid #888;
+  border-radius: 0.25rem;
+
+  background-color: #eee;
+  font-size: 1.5em;
+}
+
+.slide-nav-button:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+.slide-nav-select {
+  min-width: 0;
+}
+
+.custom-label {
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 14px;
+  border: 1px solid #333;
+}
+
+.image-slide {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  object-fit: cover;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;     
+  margin: 0;                 
+  padding: 0;  
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.image-slide img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+
+.carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-wrapper {
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 1s ease-in-out;
+}
+
+.carousel-item {
+  min-width: 100%;
+
+}
+
+.carousel-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer; /* 点击切换 */
+}
+
+.wide-carousel {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.wide-carousel .carousel-track {
+  display: flex;
+  height: 100%;
+  transition: transform 1s ease-in-out;
+}
+
+.wide-carousel .carousel-item {
+  width: 100vw;
+  height: 100vh;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.wide-carousel .carousel-item img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  height: 100vh;
+  transform: translate(-50%, -50%);
+  object-fit: cover; 
+}
+
+.custom-cross {
+  color: rgb(98, 192, 203);
+  font-size: 40px;
+  font-weight: thin;
+  text-align: center;
+}
+
+.custom-cross1 {
+  color: rgb(243, 241, 32);
+  font-size: 40px;
+  font-weight: thin;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+
+  .slide {
+    width: 85%;
+    margin: 500px auto;       
+    padding: 12px;
+    text-align: center;  
+  }
+
+  .slide h2, .slide p {
+    text-align: center;
+  }
+
+  .slide-content {
+    font-size: 0.95rem;
+    line-height: 1.3rem;
+  }
+
+
+  .slides {
+    padding: 0 12px;
+  }
+}
diff --git a/data/contour.geojson b/data/contour.geojson
diff --git a/data/contour2.geojson b/data/contour2.geojson
diff --git a/data/fifth-slide.geojson b/data/fifth-slide.geojson
@@ -0,0 +1 @@
+{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4269"}},"features":[{"type":"Feature","id":1,"geometry":{"type":"Point","coordinates":[-110.38444607243463,35.838044477705523]},"properties":{"OBJECTID":1,"FDate":1140545045000,"Resolution":2,"GNIS_ID":"00003498","GNIS_Name":"Coyote Spring","ReachCode":null,"FType":458,"FCode":45800,"Permanent_":null,"ObjectID_1":null}}]}
diff --git a/data/fourth-slide.geojson b/data/fourth-slide.geojson
@@ -0,0 +1 @@
+{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4269"}},"features":[{"type":"Feature","id":2,"geometry":{"type":"Point","coordinates":[-110.38933080576038,35.83069827771692]},"properties":{"OBJECTID":2,"FDate":1140545045000,"Resolution":2,"GNIS_ID":"00024192","GNIS_Name":"Tawapa Spring","ReachCode":null,"FType":458,"FCode":45800,"Permanent_":null,"ObjectID_1":null}}]}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4269"}},"features":[{"type":"Feature","id":1,"geometry":{"type":"Point","coordinates":[-110.38444607243463,35.838044477705523]},"properties":{"OBJECTID":1,"FDate":1140545045000,"Resolution":2,"GNIS_ID":"00003498","GNIS_Name":"Coyote Spring","ReachCode":null,"FType":458,"FCode":45800,"Permanent_":null,"ObjectID_1":null}}]}