YuanJi-StoryMap

README.md

@@ -48,4 +48,21 @@ Your story will have multiple slides, each with a title, some additional text, m
 
 ### Step 3: Submit your story map
 
-Commit your code and push it to your repository on GitHub. Set up GitHub pages on the repository and submit a new pull request into the original project repository in the class organization.
+Commit your code and push it to your repository on GitHub. Set up GitHub pages on the repository and submit a new pull request into the original project repository in the class organization.
+
+#### Submission Checklist
+
+- [ ] Pushed latest code to the `main` branch of your repository
+- [ ] Linted JS and CSS code
+- [ ] Turned on GitHub Pages for the repository and verified that your site works when deployed
+- [ ] Submitted a pull request to the original repository in the class organization
+- [ ] In the PR **title**, included your name at least
+- [ ] In the PR **description**, included a brief description of your topic, and your target audience
+
+Århusgade Quarter 55.70698227802691, 12.594967433381147
+Carlsberg 55.66618408442288, 12.528432715809961
+Grønttorvet 55.65674755244946, 12.50458518298971
+Sluseholmen 55.64655546016508, 12.553650252055936
+The Kalvebod Quarter 55.66597912467479, 12.566984342067506
+
+Århusgade Quarter, Carlsberg, Grønttorvet, Sluseholmen, and The Kalvebod

css/index.css

@@ -0,0 +1,128 @@
+/* stylelint-disable font-family-name-quotes */
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: 'Futura', sans-serif;
+}
+
+.carousel {
+  width: 100%;
+  height: 1280px;
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 2s ease-in-out;
+    object-fit: cover;
+}
+
+.carousel-item.active {
+  opacity: 1;
+}
+
+.fixed-caption {
+  position: absolute;
+  bottom: 100px;
+  left: 40px;
+  background-color: rgba(0 0 0 / 50%); 
+  padding: 15px;
+  color: white; 
+  max-width: 600px;
+  z-index: 10; 
+}
+
+.fixed-title {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  color: white; 
+  max-width: 600px;
+  z-index: 10; 
+  text-align: right;
+}
+
+.map-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 0;
+}
+
+.map {
+  height: 100%;
+}
+
+.slide-section {
+  position: relative;
+  margin-top: -30vh;
+  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 / 50%);
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  pointer-events: initial;
+
+  width: 25rem;
+
+  background-color: white;
+  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;
+}

data/fifth-slide.json

@@ -0,0 +1,25 @@
+{
+  "type": "FeatureCollection",
+  "bbox": [12.550, 55.640, 12.560, 55.650],
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [12.553865, 55.645554]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "label": "Sluseholmen Area",
+        "style": {
+          "color": "#526e84",
+          "weight": 1.0,
+          "fillColor": "#ffcc00",
+          "fillOpacity": 0.1
+        }
+      }
+    }
+  ]
+}