Hugging Face's logo

Spaces:
Joey889
/
GPS_Swiss_Docker
Sleeping

App Files Community
Joey889 commited on
Commit
3c542dc
·
verified ·
1 Parent(s): f0e74fa

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +103 -1
templates/index.html CHANGED
@@ -1 +1,103 @@
1
- 📄 你可以從上一版正確的 index.html 複製過來使用
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html>
4
+ <head>
5
+ <title>GPS 瑞士花園任務</title>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
9
+ <style>
10
+ body { font-family: sans-serif; margin: 0; }
11
+ #map { height: 60vh; width: 100%; }
12
+ #infoBox { padding: 10px; background: #eef; font-size: 1em; }
13
+ #formBox { padding: 10px; display: none; background: #f4f4f4; border-top: 2px solid #ccc; }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <h3 style="text-align:center;">📍 GPS 任務：抵達瑞士花園</h3>
18
+ <div id="map"></div>
19
+ <div id="infoBox">
20
+ <div id="gpsInfo">📡 目前位置資訊載入中...</div>
21
+ </div>
22
+ <div id="formBox">
23
+ <p>🎯 你已進入瑞士花園 3000 公尺範圍內</p>
24
+ <label>請輸入學員姓名：</label><br/>
25
+ <input id="nameInput" type="text" style="font-size: 1.2em;" />
26
+ <button onclick="submitData()">✅ 提交</button>
27
+ <p id="submitMsg"></p>
28
+ </div>
29
+ <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
30
+ <script>
31
+ const target = [24.98570132, 121.28884319];
32
+ let alreadyShown = false;
33
+
34
+ function distance(a, b) {
35
+ const R = 6371000;
36
+ const dLat = (b[0]-a[0]) * Math.PI/180;
37
+ const dLon = (b[1]-a[1]) * Math.PI/180;
38
+ const lat1 = a[0] * Math.PI/180;
39
+ const lat2 = b[0] * Math.PI/180;
40
+ const a_ = Math.sin(dLat/2)**2 + Math.cos(lat1)*Math.cos(lat2)*Math.sin(dLon/2)**2;
41
+ return R * 2 * Math.atan2(Math.sqrt(a_), Math.sqrt(1-a_));
42
+ }
43
+
44
+ const map = L.map('map').setView(target, 18);
45
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
46
+ L.marker(target).addTo(map).bindPopup("🎯 瑞士花園");
47
+
48
+ if (navigator.geolocation) {
49
+ navigator.geolocation.watchPosition(pos => {
50
+ const lat = pos.coords.latitude;
51
+ const lon = pos.coords.longitude;
52
+ const myLatLng = [lat, lon];
53
+ const dist = distance(myLatLng, target);
54
+ window.myLat = lat;
55
+ window.myLon = lon;
56
+
57
+ L.marker(myLatLng).addTo(map).bindPopup("你的位置").openPopup();
58
+ map.setView(myLatLng);
59
+
60
+ document.getElementById("gpsInfo").innerHTML =
61
+ `📌 緯度：${lat.toFixed(6)}<br/>📌 經度：${lon.toFixed(6)}<br/>📏 與瑞士花園距離：${dist.toFixed(2)} 公尺`;
62
+
63
+ if (dist < 3000 && !alreadyShown) {
64
+ document.getElementById("formBox").style.display = "block";
65
+ alreadyShown = true;
66
+ }
67
+ }, err => {
68
+ document.getElementById("gpsInfo").innerText = "❌ 無法取得 GPS：" + err.message;
69
+ });
70
+ }
71
+
72
+ function submitData() {
73
+ const name = document.getElementById("nameInput").value;
74
+ const ua = navigator.userAgent;
75
+ if (!name || !window.myLat || !window.myLon) {
76
+ alert("請輸入姓名並確認定位成功！");
77
+ return;
78
+ }
79
+ fetch("/submit", {
80
+ method: "POST",
81
+ headers: { "Content-Type": "application/json" },
82
+ body: JSON.stringify({
83
+ name: name,
84
+ lat: window.myLat,
85
+ lon: window.myLon,
86
+ ua: ua
87
+ })
88
+ })
89
+ .then(r => r.json())
90
+ .then(res => {
91
+ if (res.status === "ok") {
92
+ document.getElementById("submitMsg").innerHTML = "✅ 已成功提交！";
93
+ } else {
94
+ document.getElementById("submitMsg").innerHTML = "❌ 錯誤：" + res.message;
95
+ }
96
+ })
97
+ .catch(e => {
98
+ document.getElementById("submitMsg").innerHTML = "❌ 送出失敗：" + e.message;
99
+ });
100
+ }
101
+ </script>
102
+ </body>
103
+ </html>