Spaces:

yunyongsu
/

deepsite-project

Running

App Files Files Community

yunyongsu commited on Sep 28, 2025

Commit

bf00dfa

verified ·

1 Parent(s): 8f9aa58

트래킹 어플 만들어 줘

Browse files

Files changed (3) hide show

index.html +28 -11
tracking.html +72 -0
tracking.js +169 -0

index.html CHANGED Viewed

@@ -4,16 +4,33 @@
 		<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>

 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<title>My static Space</title>
+        <link rel="stylesheet" href="style.css" />
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</head>
 	<body>
+        <div class="card">
+            <h1>Triangle Tracking App</h1>
+            <p>Track your outdoor activities with simple interface.</p>
+            <a href="tracking.html" class="btn btn-primary">Go to Tracking</a>
+            <div class="features mt-3">
+                <h5>Features:</h5>
+                <ul>
+                    <li>Path tracking on map</li>
+                    <li>Distance, speed and duration</li>
+                    <li>Activity history</li>
+                    <li>Offline map support</li>
+                </ul>
+            </div>
+        </div>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+        <style>
+            .card {
+                max-width: 800px;
+                margin: 2rem auto;
+                padding: 2rem;
+                box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            }
+            .btn { margin-top: 1rem; }
+        </style>
+</body>
 </html>

tracking.html ADDED Viewed

	@@ -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>Triangle Tracking</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
+    <style>
+        #map { height: 60vh; }
+        .stats-card { margin-bottom: 1rem; }
+    </style>
+</head>
+<body>
+    <div class="container-fluid p-4">
+        <h1 class="text-center mb-4">Triangle Tracking</h1>
+        <div class="row">
+            <div class="col-md-8">
+                <div id="map"></div>
+            </div>
+            <div class="col-md-4">
+                <div class="card stats-card">
+                    <div class="card-body">
+                        <h5 class="card-title">Current Session</h5>
+                        <p class="mb-1">Distance: <span id="distance">0</span> km</p>
+                        <p class="mb-1">Duration: <span id="duration">00:00:00</span></p>
+                        <p class="mb-1">Speed: <span id="speed">0</span> km/h</p>
+                        <p class="mb-1">Calories: <span id="calories">0</span> kcal</p>
+                    </div>
+                </div>
+                <div class="card stats-card">
+                    <div class="card-body">
+                        <h5 class="card-title">Controls</h5>
+                        <button id="startBtn" class="btn btn-success w-100 mb-2">Start Tracking</button>
+                        <button id="stopBtn" class="btn btn-danger w-100 mb-2" disabled>Stop Tracking</button>
+                        <button id="saveBtn" class="btn btn-primary w-100" disabled>Save Session</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Activity History</h5>
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Distance</th>
+                                    <th>Duration</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="historyTable">
+                                <!-- Will be populated by JS -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="tracking.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

tracking.js ADDED Viewed

	@@ -0,0 +1,169 @@

+```javascript
+// Initialize map
+const map = L.map('map').setView([37.5665, 126.9780], 13); // Default to Seoul
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+// Tracking variables
+let tracking = false;
+let startTime = null;
+let path = [];
+let polyline = null;
+let totalDistance = 0;
+let watchId = null;
+// DOM elements
+const startBtn = document.getElementById('startBtn');
+const stopBtn = document.getElementById('stopBtn');
+const saveBtn = document.getElementById('saveBtn');
+const distanceEl = document.getElementById('distance');
+const durationEl = document.getElementById('duration');
+const speedEl = document.getElementById('speed');
+const caloriesEl = document.getElementById('calories');
+const historyTable = document.getElementById('historyTable');
+// Event listeners
+startBtn.addEventListener('click', startTracking);
+stopBtn.addEventListener('click', stopTracking);
+saveBtn.addEventListener('click', saveSession);
+function startTracking() {
+    tracking = true;
+    startTime = new Date();
+    path = [];
+    totalDistance = 0;
+    if (polyline) {
+        map.removeLayer(polyline);
+    }
+    startBtn.disabled = true;
+    stopBtn.disabled = false;
+    saveBtn.disabled = true;
+    watchId = navigator.geolocation.watchPosition(
+        updatePosition,
+        handleError,
+        { enableHighAccuracy: true, maximumAge: 10000, timeout: 5000 }
+    );
+    updateTimer();
+    timerInterval = setInterval(updateTimer, 1000);
+}
+function stopTracking() {
+    tracking = false;
+    if (watchId) {
+        navigator.geolocation.clearWatch(watchId);
+    }
+    startBtn.disabled = false;
+    stopBtn.disabled = true;
+    saveBtn.disabled = false;
+    clearInterval(timerInterval);
+}
+function saveSession() {
+    // Save to local storage
+    const sessions = JSON.parse(localStorage.getItem('trackingSessions') || '[]');
+    const duration = (new Date() - startTime) / 1000;
+    sessions.push({
+        date: new Date().toLocaleString(),
+        distance: totalDistance,
+        duration: formatTime(duration),
+        path: path
+    });
+    localStorage.setItem('trackingSessions', JSON.stringify(sessions));
+    updateHistoryTable();
+    saveBtn.disabled = true;
+}
+function updatePosition(position) {
+    const { latitude, longitude, speed, altitude } = position.coords;
+    const newPoint = [latitude, longitude];
+    // Add to path
+    path.push(newPoint);
+    // Update polyline
+    if (polyline) {
+        map.removeLayer(polyline);
+    }
+    polyline = L.polyline(path, {color: 'blue'}).addTo(map);
+    // Calculate distance
+    if (path.length > 1) {
+        const lastPoint = path[path.length - 2];
+        const distance = calculateDistance(lastPoint[0], lastPoint[1], latitude, longitude);
+        totalDistance += distance;
+        distanceEl.textContent = (totalDistance / 1000).toFixed(2);
+    }
+    // Update speed
+    const speedKmh = speed ? (speed * 3.6).toFixed(1) : 0;
+    speedEl.textContent = speedKmh;
+    // Estimate calories (very rough estimate)
+    const calories = (totalDistance / 1000) * 60; // 60kcal per km
+    caloriesEl.textContent = Math.round(calories);
+    // Center map on current position
+    map.setView(newPoint, map.getZoom());
+}
+function handleError(error) {
+    console.error('Geolocation error:', error.message);
+    if (tracking) {
+        stopTracking();
+        alert('Geolocation error: ' + error.message);
+    }
+}
+function updateTimer() {
+    if (!startTime) return;
+    const elapsed = (new Date() - startTime) / 1000;
+    durationEl.textContent = formatTime(elapsed);
+}
+function formatTime(seconds) {
+    const hrs = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+function calculateDistance(lat1, lon1, lat2, lon2) {
+    const R = 6371e3; // Earth radius in meters
+    const φ1 = lat1 * Math.PI/180;
+    const φ2 = lat2 * Math.PI/180;
+    const Δφ = (lat2-lat1) * Math.PI/180;
+    const Δλ = (lon2-lon1) * Math.PI/180;
+    const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
+              Math.cos(φ1) * Math.cos(φ2) *
+              Math.sin(Δλ/2) * Math.sin(Δλ/2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+    return R * c;
+}
+function updateHistoryTable() {
+    const sessions = JSON.parse(localStorage.getItem('trackingSessions') || '[]');
+    historyTable.innerHTML = sessions.map(session => `
+        <tr>
+            <td>${session.date}</td>
+            <td>${(session.distance / 1000).toFixed(2)} km</td>
+            <td>${session.duration}</td>
+            <td><button class="btn btn-sm btn-outline-primary">View</button></td>
+        </tr>
+    `).join('');
+}
+// Initialize
+updateHistoryTable();
+```