Weitzman-MUSA-JavaScript · sujiatong · Dec 19, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/.github/workflows/lint-css-files.yml b/.github/workflows/lint-css-files.yml
diff --git a/.github/workflows/lint-js-files.yml b/.github/workflows/lint-js-files.yml
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -0,0 +1,89 @@
+/* General Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+    font-family: arial, sans-serif;
+    background-color: #b0761f62;
+    color: #333;
+    line-height: 1.6;
+    align-items: center;
+    padding: 10px;
+  }
+  .section {
+    display: none;
+    margin-top: 20px;
+    width: 100%;
+    padding: 20px;
+    margin-top: 10px;  
+  }
+
+  .section.active {
+    display: block;
+  }
+  .button-container {
+    display: flex;
+    justify-content: center;  /* 水平居中 */
+    gap: 10px;                 /* 按钮之间的间距 */
+    margin: 20px 0;            /* 上下间距 */
+  }
+
+  .button-container button {
+    background-color: #482e0b;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    margin: 5px;
+    font-size: 1rem;
+  }
+
+  .intro-section {
+    background-color: #f8f5f0;  /* 淡米色背景，可换主题色 */
+    padding: 30px 20px;         /* 上下左右留白 */
+    margin: 30px 0;             /* 与其他内容拉开间距 */
+  }
+
+  .intro-section p {
+    font-size: 1.2rem;          /* 比正文大一点 */
+    line-height: 1.8;           /* 更舒适的行距 */
+    max-width: 900px;           /* 限制文字行宽 */
+    margin: 0 auto;             /* 水平居中 */
+  }
+
+
+
+  #map1, #map2, #map3{
+    width: min(1100px, 90vw);
+    height: 80vh;
+    margin: 10px auto 0;
+    border-radius: 24px;
+    overflow: hidden;           /* 圆角裁切瓦片 */
+    box-shadow: 0 8px 24px rgba(0,0,0,.12);
+  }
+  .leaflet-container{ background:#9ed6f0; } /* 海色底，避免露灰 */
+
+  /* Select and Button in Section 2 */
+#year-select {
+  font-size: 1rem;
+  padding: 5px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+/* Button in Section 3 */
+#toggle-labeling {
+  background-color: #b07613;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 15px;
+  font-size: 1rem;
+  cursor: pointer;
+}
diff --git a/frontend/data_his/100.geojson b/frontend/data_his/100.geojson
diff --git a/frontend/data_his/1000.geojson b/frontend/data_his/1000.geojson
diff --git a/frontend/data_his/1300.geojson b/frontend/data_his/1300.geojson
diff --git a/frontend/data_his/1500.geojson b/frontend/data_his/1500.geojson
diff --git a/frontend/data_his/1650.geojson b/frontend/data_his/1650.geojson
diff --git a/frontend/data_his/1700.geojson b/frontend/data_his/1700.geojson
diff --git a/frontend/data_his/1800.geojson b/frontend/data_his/1800.geojson
diff --git a/frontend/data_his/1880.geojson b/frontend/data_his/1880.geojson
diff --git a/frontend/data_his/1900.geojson b/frontend/data_his/1900.geojson
diff --git a/frontend/data_his/1920.geojson b/frontend/data_his/1920.geojson
diff --git a/frontend/data_his/1930.geojson b/frontend/data_his/1930.geojson
diff --git a/frontend/data_his/1945.geojson b/frontend/data_his/1945.geojson
diff --git a/frontend/data_his/1960.geojson b/frontend/data_his/1960.geojson
diff --git a/frontend/data_his/2000.geojson b/frontend/data_his/2000.geojson
diff --git a/frontend/data_his/300.geojson b/frontend/data_his/300.geojson
diff --git a/frontend/data_his/600.geojson b/frontend/data_his/600.geojson
diff --git a/frontend/data_his/800.geojson b/frontend/data_his/800.geojson
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>History boundary</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <link rel="stylesheet" href="css/style.css" />
+
+</head>
+<body>
+
+  <div class="intro-section">
+    <p>
+      This website visualizes the historical boundaries of world countries and cultural regions. Explore the fascinating evolution of world boundaries through time. 
+      Our interactive platform brings history to life, offering a detailed look at how nations and regions have changed shape over centuries. Whether you're a history enthusiast, a student, 
+      or simply curious, dive into the shifting borders that have shaped the world we know today.
+    </p>
+
+    <div class="button-container">
+      <button onclick="showSection('section2')">Yearly World Boundary</button>
+      <button onclick="showSection('section3')"> Add Your Marker</button>
+    </div>
+
+  </div>
+
+
+
+
+
+  <div id="section2" class="section" ">
+    <h2>World Boundary by Year</h2>
+    <p>Navigate the past with interactive maps, uncover stories behind the lines, and gain new perspectives on the forces that have shaped our global landscape. Start your journey through history now!</p>
+    <label for="year-select">Select year </label>
+    <select id="year-select">
+      <option value="100">100</option>
+      <option value="300">300</option>
+      <option value="600">600</option>
+      <option value="800">800</option>
+      <option value="1000">1000</option>
+      <option value="1300">1300</option>
+      <option value="1500">1500</option>
+      <option value="1800">1800</option>
+      <option value="1900">1900</option>
+      <option value="1930">1930</option>
+      <option value="1960">1960</option>
+      <option value="2000">2000</option>
+    </select>
+
+    <div id="map2"></div>
+  </div>
+
+  <div id="section3" class="section">
+    <h2>World Boundaries in 1800</h2>
+    <p>Share your story! Mark a point on the map to show where you or your ancestors were from in 1800, 
+      and fill in your current nationality. 
+      See how history connects us all!
+    </p>
+    <button id="toggle-labeling" onclick="toggleLabeling()">Enable Labeling</button>
+    <div id="map3"></div>
+  </div>
+
+
+  </div>
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="js/script.js"></script>
+  <script src="js/sec_1.js"></script>
+  <script src="js/sec_2.js"></script>
+  <script type="module" src="js/firebase.js"></script>
+
+</body>
+</html>