# Dashboard project of Jiatong Su

.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

boston-bike/css/style.css

@@ -0,0 +1,119 @@
+/* style.css */
+
+/* 設置整體的樣式 */
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, sans-serif;
+}
+
+/* Title Section */
+#header {
+    background-color: #0e466c;
+    padding: 50px;
+    text-align: left;
+        font-size: 15px;
+    font-weight: bold;
+    color: #020a10b9; /* Change this color as desired */
+
+}
+
+#title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #f1f4f6b9; /* Change this color as desired */
+
+}
+
+#search-box {
+    margin-top: 10px;
+}
+
+/* 搜索容器的樣式 */
+#search-container {
+    position: absolute; /* 絕對定位 */
+    top: 10px; /* 上邊距 */
+    left: 50%; /* 水平居中 */
+    transform: translateX(-50%); /* 調整居中 */
+    background-color: white; /* 背景顏色 */
+    padding: 10px; /* 內邊距 */
+    border-radius: 5px; /* 圓角邊框 */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 投影效果 */
+    z-index: 1000; /* 確保在其他元素之上 */
+}
+
+#suggestions {
+    position: absolute;
+    background-color: white;
+    border: 1px solid #ccc;
+    z-index: 1000;
+    max-height: 150px;
+    overflow-y: auto;
+    width: calc(100% - 20px); /* Adjust width to match the search box */
+}
+
+
+
+/* 搜索框的樣式 */
+#station-search {
+    width: 250px; /* 寬度 */
+    padding: 8px; /* 內邊距 */
+    border: 1px solid #ccc; /* 邊框顏色 */
+    border-radius: 1px; /* 圓角邊框 */
+    margin-bottom: 5px; /* 下邊距 */
+}
+
+/* 按鈕的樣式 */
+#search-button {
+    padding: 8px 12px; /* 內邊距 */
+    border: none; /* 去掉邊框 */
+    background-color: #007bff; /* 背景顏色 */
+    color: white; /* 字體顏色 */
+    border-radius: 4px; /* 圓角邊框 */
+    cursor: pointer; /* 鼠標樣式 */
+}
+
+/* 按鈕懸停效果 */
+#search-button:hover {
+    background-color: #0056b3; /* 懸停時的背景顏色 */
+}
+
+/* 提示列表的樣式 */
+#suggestions {
+    list-style-type: none; /* 去掉列表標記 */
+    padding: 0; /* 去掉內邊距 */
+    margin: 0; /* 去掉外邊距 */
+    background-color: white; /* 背景顏色 */
+    border: 1px solid #ccc; /* 邊框顏色 */
+    border-radius: 4px; /* 圓角邊框 */
+    z-index: 1000; /* 確保在其他元素之上 */
+}
+
+/* 提示項的樣式 */
+#suggestions li {
+    padding: 8px; /* 內邊距 */
+    cursor: pointer; /* 鼠標樣式 */
+}
+
+/* 提示項懸停效果 */
+#suggestions li:hover {
+    background-color: #f0f0f0; /* 懸停時的背景顏色 */
+}
+
+/* 地圖容器的樣式 */
+#map {
+    height: 80vh; /* 高度填滿視口 */
+    width: 100%; /* 寬度填滿容器 */
+}
+
+/* 下拉列表的樣式 */
+#district-dropdown {
+    margin-top: 10px; /* 與搜索框保持距離 */
+    padding: 5px; /* 添加內邊距 */
+    border: 1px solid #ccc; /* 邊框顏色 */
+    border-radius: 4px; /* 圓角邊框 */
+    width: 250px; /* 寬度 */
+}