Spaces:

mistpe
/

mapceshi

Running

App Files Files Community

mistpe commited on Feb 20, 2025

Commit

e1dd24e

verified ·

1 Parent(s): e78f9f2

Update index.html

Browse files

Files changed (1) hide show

index.html +281 -19

index.html CHANGED Viewed

@@ -1,19 +1,281 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>地图打卡系统</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        }
+        #map {
+            width: 100%;
+            height: 100vh;
+            position: relative;
+            z-index: 1;
+        }
+        .toolbar {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            display: flex;
+            gap: 10px;
+            z-index: 1000;
+        }
+        .button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 15px;
+            background: #4CAF50;
+            color: white;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .button:hover {
+            background: #45a049;
+        }
+        .checkin-list {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: white;
+            padding: 10px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            max-height: 50vh;
+            overflow-y: auto;
+            z-index: 1000;
+        }
+        .checkin-item {
+            margin-bottom: 8px;
+            padding: 8px;
+            background: #f5f5f5;
+            border-radius: 5px;
+            font-size: 12px;
+        }
+        .dialog {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 20px rgba(0,0,0,0.2);
+            z-index: 1000;
+            width: 80%;
+            max-width: 300px;
+        }
+        .dialog input {
+            width: 100%;
+            padding: 8px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        .dialog-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <div class="toolbar">
+        <button class="button" onclick="getCurrentLocation()">定位</button>
+        <button class="button" onclick="startCheckin()">打卡</button>
+        <button class="button" onclick="toggleCheckinList()">记录</button>
+    </div>
+    <div class="checkin-list" id="checkinList" style="display: none;">
+        <h3>打卡记录</h3>
+        <div id="checkinRecords"></div>
+    </div>
+    <div class="overlay" id="overlay"></div>
+    <div class="dialog" id="checkinDialog">
+        <h3>添加打卡记录</h3>
+        <input type="text" id="checkinNote" placeholder="添加备注...">
+        <div class="dialog-buttons">
+            <button class="button" onclick="cancelCheckin()">取消</button>
+            <button class="button" onclick="saveCheckin()">保存</button>
+        </div>
+    </div>
+    <script>
+        let map;
+        let marker;
+        let checkinLocation;
+        const STORAGE_KEY = 'mapCheckins';
+        // 初始化地图
+        function initMap() {
+            map = L.map('map').setView([39.9042, 116.4074], 11);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '© OpenStreetMap contributors'
+            }).addTo(map);
+            // 从本地存储加载打卡记录并显示标记
+            loadCheckins();
+            // 添加点击事件监听
+            map.on('click', function(e) {
+                checkinLocation = e.latlng;
+                if (marker) {
+                    marker.setLatLng(checkinLocation);
+                } else {
+                    marker = L.marker(checkinLocation).addTo(map);
+                }
+            });
+        }
+        // 获取当前位置
+        function getCurrentLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    function(position) {
+                        const lat = position.coords.latitude;
+                        const lng = position.coords.longitude;
+                        checkinLocation = L.latLng(lat, lng);
+                        map.setView(checkinLocation, 15);
+                        if (marker) {
+                            marker.setLatLng(checkinLocation);
+                        } else {
+                            marker = L.marker(checkinLocation).addTo(map);
+                        }
+                    },
+                    function(error) {
+                        alert('无法获取位置：' + error.message);
+                    },
+                    {
+                        enableHighAccuracy: true,
+                        timeout: 5000,
+                        maximumAge: 0
+                    }
+                );
+            } else {
+                alert('您的浏览器不支持地理定位');
+            }
+        }
+        // 开始打卡
+        function startCheckin() {
+            if (!checkinLocation) {
+                alert('请先在地图上选择位置或使用定位！');
+                return;
+            }
+            document.getElementById('overlay').style.display = 'block';
+            document.getElementById('checkinDialog').style.display = 'block';
+        }
+        // 取消打卡
+        function cancelCheckin() {
+            document.getElementById('overlay').style.display = 'none';
+            document.getElementById('checkinDialog').style.display = 'none';
+            document.getElementById('checkinNote').value = '';
+        }
+        // 保存打卡记录
+        function saveCheckin() {
+            const note = document.getElementById('checkinNote').value;
+            const checkin = {
+                location: {
+                    lat: checkinLocation.lat,
+                    lng: checkinLocation.lng
+                },
+                note: note,
+                timestamp: new Date().toLocaleString()
+            };
+            let checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+            checkins.push(checkin);
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(checkins));
+            // 添加新标记
+            L.marker([checkin.location.lat, checkin.location.lng])
+                .bindPopup(note)
+                .addTo(map);
+            cancelCheckin();
+            updateCheckinList();
+        }
+        // 加载已有的打卡记录
+        function loadCheckins() {
+            const checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+            checkins.forEach(checkin => {
+                L.marker([checkin.location.lat, checkin.location.lng])
+                    .bindPopup(checkin.note)
+                    .addTo(map);
+            });
+            updateCheckinList();
+        }
+        // 更新打卡记录列表
+        function updateCheckinList() {
+            const checkins = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+            const recordsContainer = document.getElementById('checkinRecords');
+            recordsContainer.innerHTML = '';
+            checkins.reverse().forEach(checkin => {
+                const item = document.createElement('div');
+                item.className = 'checkin-item';
+                item.innerHTML = `
+                    <div>${checkin.note}</div>
+                    <div style="color: #666; font-size: 11px;">${checkin.timestamp}</div>
+                `;
+                recordsContainer.appendChild(item);
+            });
+        }
+        // 切换打卡记录列表显示状态
+        function toggleCheckinList() {
+            const list = document.getElementById('checkinList');
+            list.style.display = list.style.display === 'none' ? 'block' : 'none';
+        }
+        // 初始化地图
+        initMap();
+    </script>
+</body>
+</html>