Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>TripTrace Visualizer — Uber × Search × Gmail</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366F1', // indigo-500 | |
| secondary: '#F59E0B' // amber-500 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Leaflet (map) --> | |
| <link | |
| rel="stylesheet" | |
| href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" | |
| integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" | |
| crossorigin="" | |
| /> | |
| <script | |
| src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" | |
| integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" | |
| crossorigin="" | |
| ></script> | |
| <!-- PapaParse for CSV --> | |
| <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script> | |
| <!-- Day.js for dates --> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/dayjs.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/plugin/utc.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/plugin/timezone.js"></script> | |
| <style> | |
| /* Leaflet container sizing */ | |
| #map { height: 520px; } | |
| .leaflet-div-icon { border: none; background: transparent; } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50 text-gray-900"> | |
| <header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-2xl bg-primary text-white grid place-items-center font-bold">TT</div> | |
| <h1 class="text-lg md:text-xl font-semibold">TripTrace Visualizer — <span class="text-gray-500">Uber × Search × Gmail</span></h1> | |
| </div> | |
| </header> | |
| <main class="max-w-7xl mx-auto px-4 py-6 grid md:grid-cols-5 gap-6"> | |
| <!-- Controls --> | |
| <section class="md:col-span-2 space-y-6"> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4"> | |
| <h2 class="font-semibold mb-3">1) Upload your data</h2> | |
| <div class="space-y-3 text-sm"> | |
| <div> | |
| <label class="block font-medium">Uber Trips (CSV)</label> | |
| <input id="uberCsv" type="file" accept=".csv" class="mt-1 block w-full" /> | |
| <p class="text-gray-500 mt-1">Required headers (case-insensitive): <code>timestamp,pickup_lat,pickup_lng,dropoff_lat,dropoff_lng,pickup_address,dropoff_address</code></p> | |
| </div> | |
| <div> | |
| <label class="block font-medium">Google Search History (JSON or CSV)</label> | |
| <input id="searchFile" type="file" accept=".json,.csv" class="mt-1 block w-full" /> | |
| <p class="text-gray-500 mt-1">Google Takeout JSON supported (keys like <code>time,title,url</code>). CSV accepted with <code>date,query,url,source</code>.</p> | |
| </div> | |
| <div> | |
| <label class="block font-medium">Gmail Index (CSV) — optional</label> | |
| <input id="gmailCsv" type="file" accept=".csv" class="mt-1 block w-full" /> | |
| <p class="text-gray-500 mt-1">Headers: <code>date,from,subject,labels</code>. (Export from your mailbox tool.)</p> | |
| </div> | |
| </div> | |
| <button id="loadBtn" class="mt-4 inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-primary text-white hover:bg-primary-600 disabled:opacity-40"> | |
| Load & Visualize | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4"> | |
| <h2 class="font-semibold mb-3">2) Filter by day & time</h2> | |
| <div class="grid grid-cols-2 gap-3 text-sm"> | |
| <div> | |
| <label class="block font-medium">Date</label> | |
| <input id="dateFilter" type="date" class="mt-1 w-full border rounded-lg px-2 py-1" /> | |
| </div> | |
| <div> | |
| <label class="block font-medium">Hour (0–23)</label> | |
| <input id="hourFilter" type="number" min="0" max="23" step="1" class="mt-1 w-full border rounded-lg px-2 py-1" placeholder="All" /> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex gap-2"> | |
| <button id="applyFilters" class="px-3 py-2 rounded-xl bg-primary text-white hover:bg-primary-600">Apply</button> | |
| <button id="clearFilters" class="px-3 py-2 rounded-xl bg-gray-200 hover:bg-gray-300">Clear</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 text-sm"> | |
| <h2 class="font-semibold mb-3">Legend</h2> | |
| <ul class="space-y-1"> | |
| <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-green-600 inline-block"></span> Pickup</li> | |
| <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-red-600 inline-block"></span> Dropoff</li> | |
| <li class="flex items-center gap-2"><span class="w-4 h-0.5 bg-blue-600 inline-block"></span> Route</li> | |
| <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-primary inline-block"></span> Search query</li> | |
| <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-secondary inline-block"></span> Gmail event</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 text-sm"> | |
| <h2 class="font-semibold mb-3">Export</h2> | |
| <button id="exportMd" class="px-3 py-2 rounded-xl bg-white border hover:bg-gray-50">Download Markdown Snapshot</button> | |
| </div> | |
| </section> | |
| <!-- Map & Activity --> | |
| <section class="md:col-span-3 space-y-6"> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <div id="map"></div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4"> | |
| <h2 class="font-semibold mb-3">Activity (Selected Day/Hour)</h2> | |
| <div id="activity" class="grid md:grid-cols-2 gap-4 text-sm"> | |
| <div> | |
| <h3 class="font-medium mb-2">Search History</h3> | |
| <ul id="searchList" class="space-y-1 text-gray-700"></ul> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Gmail</h3> | |
| <ul id="gmailList" class="space-y-1 text-gray-700"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="max-w-7xl mx-auto px-4 pb-8 text-xs text-gray-500"> | |
| <p>All data is processed locally in your browser. No uploads leave your device.</p> | |
| </footer> | |
| <script> | |
| // ------------------------ Utilities ------------------------ | |
| const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'America/New_York'; | |
| function parseCsv(file) { | |
| return new Promise((resolve, reject) => { | |
| Papa.parse(file, { | |
| header: true, | |
| skipEmptyLines: true, | |
| complete: (res) => resolve(res.data), | |
| error: reject, | |
| }); | |
| }); | |
| } | |
| function parseJson(file) { | |
| return file.text().then(txt => { | |
| try { return JSON.parse(txt); } catch (e) { return []; } | |
| }); | |
| } | |
| function normalizeDate(d) { | |
| if (!d) return null; | |
| const guess = dayjs(d).isValid() ? dayjs(d) : (dayjs.utc(Number(d)).isValid() ? dayjs.utc(Number(d)) : null); | |
| return guess ? guess.tz(tz) : null; | |
| } | |
| function toNumber(x) { const n = Number(x); return Number.isFinite(n) ? n : null; } | |
| function formatTime(dj) { return dj ? dj.format('YYYY-MM-DD HH:mm') : ''; } | |
| function download(name, content) { | |
| const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' }); | |
| const a = document.createElement('a'); | |
| a.href = URL.createObjectURL(blob); | |
| a.download = name; | |
| a.click(); | |
| URL.revokeObjectURL(a.href); | |
| } | |
| // ------------------------ State ------------------------ | |
| let uber = []; // {ts, pickup:[lat,lng], dropoff:[lat,lng], paddr, daddr} | |
| let searches = []; // {ts, query, url, source} | |
| let mails = []; // {ts, from, subject, labels} | |
| // ------------------------ Map Setup ------------------------ | |
| const map = L.map('map'); | |
| const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 20, | |
| attribution: '© OpenStreetMap' | |
| }).addTo(map); | |
| const groupRoutes = L.layerGroup().addTo(map); | |
| const groupPickups = L.layerGroup().addTo(map); | |
| const groupDropoffs = L.layerGroup().addTo(map); | |
| const groupSearches = L.layerGroup().addTo(map); | |
| const groupMails = L.layerGroup().addTo(map); | |
| function fitAll() { | |
| const group = L.featureGroup([ | |
| groupRoutes, groupPickups, groupDropoffs, groupSearches, groupMails | |
| ]); | |
| try { map.fitBounds(group.getBounds(), { padding: [20,20] }); } | |
| catch { map.setView([40.7128, -74.006], 11); } | |
| } | |
| function marker(colorClass, lat, lng, title) { | |
| const el = document.createElement('div'); | |
| el.className = `w-3 h-3 rounded-full ${colorClass} ring-2 ring-white shadow`; | |
| return L.marker([lat, lng], { icon: L.divIcon({ html: el, iconSize: [12,12] })}).bindTooltip(title); | |
| } | |
| function render(dayStr, hour) { | |
| [groupRoutes, groupPickups, groupDropoffs, groupSearches, groupMails].forEach(g=>g.clearLayers()); | |
| document.getElementById('searchList').innerHTML = ''; | |
| document.getElementById('gmailList').innerHTML = ''; | |
| const day = dayStr ? dayjs(dayStr).startOf('day') : null; | |
| const inWindow = (ts) => { | |
| if (!day) return true; | |
| if (hour==='' || hour===null || Number.isNaN(Number(hour))) { | |
| return ts.isSame(day, 'day'); | |
| } else { | |
| const start = day.add(hour, 'hour'); | |
| const end = start.add(1, 'hour'); | |
| return ts.isAfter(start) && ts.isBefore(end); | |
| } | |
| }; | |
| // Uber trips | |
| const tripBounds = []; | |
| uber.filter(u => inWindow(u.ts)).forEach(u => { | |
| const line = L.polyline([u.pickup, u.dropoff], { color: '#2563eb', weight: 3, opacity: 0.8 }); | |
| line.addTo(groupRoutes); | |
| const m1 = marker('bg-green-600', u.pickup[0], u.pickup[1], `${formatTime(u.ts)}\nPickup\n${u.paddr || ''}`).addTo(groupPickups); | |
| const m2 = marker('bg-red-600', u.dropoff[0], u.dropoff[1], `${formatTime(u.ts)}\nDropoff\n${u.daddr || ''}`).addTo(groupDropoffs); | |
| tripBounds.push(u.pickup, u.dropoff); | |
| }); | |
| // Searches | |
| searches.filter(s => inWindow(s.ts)).forEach(s => { | |
| const li = document.createElement('li'); | |
| li.innerHTML = `<span class="inline-flex w-2 h-2 rounded-full bg-primary mr-2 align-middle"></span>${formatTime(s.ts)} — <span class="font-medium">${escapeHtml(s.query)}</span> ${s.url ? `· <a class='text-primary-700 underline' href='${s.url}' target='_blank' rel='noreferrer'>link</a>`:''}`; | |
| document.getElementById('searchList').appendChild(li); | |
| }); | |
| // Gmail | |
| mails.filter(m => inWindow(m.ts)).forEach(m => { | |
| const li = document.createElement('li'); | |
| li.innerHTML = `<span class="inline-flex w-2 h-2 rounded-full bg-secondary mr-2 align-middle"></span>${formatTime(m.ts)} — <span class="font-medium">${escapeHtml(m.from)}</span>: ${escapeHtml(m.subject)} ${m.labels?`<span class='text-gray-500'>(${escapeHtml(m.labels)})</span>`:''}`; | |
| document.getElementById('gmailList').appendChild(li); | |
| }); | |
| // Fit map | |
| if (tripBounds.length) { | |
| const bounds = L.latLngBounds(tripBounds); | |
| map.fitBounds(bounds.pad(0.25)); | |
| } else { | |
| fitAll(); | |
| } | |
| } | |
| function escapeHtml(str) { | |
| return (str||'').replace(/[&<>"']/g, (c)=>({ | |
| '&':'&','<':'<','>':'>','"':'"','\'':''' | |
| })[c]); | |
| } | |
| // Initialize map center | |
| map.setView([40.7128, -74.006], 11); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |