82 lines
4.1 KiB
HTML
82 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Location History Visualizer</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="sidebar">
|
|
<div class="header">Location History Visualizer</div>
|
|
|
|
<div class="section drop-zone">
|
|
<h3>Data Management</h3>
|
|
<input type="file" id="fileUpload" accept=".csv,.json,.gpx,.kml" style="width: 100%; padding: 8px; margin: 5px 0;">
|
|
<button class="btn" onclick="uploadFile(event)">Upload & Analyze</button>
|
|
<p id="uploadStatus"></p>
|
|
<div style="height: 100px; margin-top: 10px; border: 2px dashed #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; cursor: pointer;">
|
|
Or drag files here...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Filters</h3>
|
|
<select id="dateFilter" class="filter-input" onchange="applyFilters()">
|
|
<option value="all">All Dates</option>
|
|
</select>
|
|
<span id="dateCount" style="font-size: 0.8em; color: #666;"></span>
|
|
<input type="text" id="locationFilter" class="filter-input" placeholder="Search locations" oninput="applyFilters()">
|
|
<button class="btn" onclick="applyFilters()">Apply</button>
|
|
<button class="btn btn-secondary" onclick="clearFilters()">Clear</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Pins & Annotations</h3>
|
|
<button class="btn" onclick="togglePinMode()">Toggle Pin Mode</button>
|
|
<button class="btn btn-secondary" onclick="exportPins()">Export Pins</button>
|
|
<div id="pinsList"></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Analytics</h3>
|
|
<button class="btn" onclick="runVisitDetection()">Detect Visits</button>
|
|
<button class="btn btn-secondary" onclick="analyzeTrips()">Analyze Trips</button>
|
|
<p id="analyticsInfo">Load data to see analytics!</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Timeline View</h3>
|
|
<div id="timeline" style="height: 200px; overflow-y: auto; background: #f8f9fa; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></div>
|
|
</div>
|
|
|
|
<button class="btn" onclick="toggleTheme()" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">Toggle Theme</button>
|
|
</div>
|
|
|
|
<div id="map" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>
|
|
</div>
|
|
|
|
<!-- Progress Overlay -->
|
|
<div id="progress" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 10000; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px;">
|
|
Processing...
|
|
</div>
|
|
|
|
<div id="overlay" onclick="closeExport()" style="display: none;"></div>
|
|
<div id="export" style="display: none;">
|
|
<h3>Exported Data</h3>
|
|
<pre id="exportContent"></pre>
|
|
<button class="btn" onclick="copyToClipboard()">Copy to Clipboard</button>
|
|
<button class="btn btn-secondary" onclick="closeExport()">Close</button>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|