Initial commit: caddy static file server workspace

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:33:50 +08:00
commit a98b21114c
1438 changed files with 15044 additions and 0 deletions
--- a/caddy/www/gps_location_map_example.html
+++ b/caddy/www/gps_location_map_example.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Get GPS Location and Map Example</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <style>
+      #map {
+        height: 800px;
+        width: 50%;
+        margin-top: 20px; /* 調整上邊距為 20px */
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Get GPS Location and Map Example</h1>
+    <p>Click the button below to get your GPS location:</p>
+    <button onclick="getLocation()">Get Location</button>
+    <p id="location"></p>
+    <button onclick="copyText()">複製經緯度</button>
+    <textarea id="latlong" style="opacity: 0; position: absolute"></textarea>
+    <div id="map"></div>
+
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script>
+      var map;
+
+      function initMap() {
+        // 在地圖容器上初始化一個 Leaflet 地圖
+        map = L.map("map");
+
+        // 添加一個 OpenStreetMap 圖層
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+          maxZoom: 18,
+        }).addTo(map);
+
+        // 設定地圖視圖為台灣的中心點
+        var taiwanCenter = [23.6978, 120.9605];
+        map.setView(taiwanCenter, 8);
+      }
+
+      function addMarker(latitude, longitude, popupContent) {
+        // 在地圖上添加一個標記
+        var marker = L.marker([latitude, longitude]).addTo(map).bindPopup(popupContent).openPopup();
+
+        // 將地圖視圖設定為標記的位置
+        map.setView([latitude, longitude], 17);
+      }
+
+      function copyText() {
+        var text = document.getElementById("latlong");
+        text.select();
+        document.execCommand("copy");
+        alert("經緯度已複製到剪貼簿");
+      }
+
+      function reverseGeocode(latitude, longitude) {
+        var apiUrl = "https://nominatim.openstreetmap.org/reverse?format=json&lat=" + latitude + "&lon=" + longitude;
+
+        return fetch(apiUrl)
+          .then(function (response) {
+            return response.json();
+          })
+          .then(function (data) {
+            if (data.address) {
+              var address = data.display_name;
+              console.log("Address: " + address);
+              document.getElementById("location").textContent = address; // 將地址顯示在網頁上
+              return address; // 將地址返回
+            } else {
+              console.log("No results found");
+              return null; // 若無結果則返回 null
+            }
+          })
+          .catch(function (error) {
+            console.log("Error: " + error);
+            return null; // 若出現錯誤則返回 null
+          });
+      }
+
+      function getLocation() {
+        if (navigator.geolocation) {
+          navigator.geolocation.getCurrentPosition(
+            function (position) {
+              var latitude = position.coords.latitude;
+              var longitude = position.coords.longitude;
+              var locationText = latitude + ", " + longitude;
+              document.getElementById("location").textContent = locationText;
+              document.getElementById("latlong").textContent = locationText;
+
+              reverseGeocode(latitude, longitude)
+                .then(function (address) {
+                  // addMarker(latitude, longitude, address); // 將地址傳遞給 addMarker()
+                  console.log(latitude, longitude, address);
+                })
+                .catch(function (error) {
+                  console.log("Reverse geocoding error: " + error);
+                });
+            },
+            function (error) {
+              var message = "Error code: " + error.code + ", Error message: " + error.message;
+              document.getElementById("location").textContent = message;
+            }
+          );
+        } else {
+          document.getElementById("location").textContent = "Geolocation is not supported by this browser.";
+        }
+      }
+      // 初始化地圖
+      initMap();
+    </script>
+  </body>
+</html>