https://atharvcapricorn07-pathopen.hf.space/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>PathOpen</title>
6  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
7  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
8  <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
9  <link rel="stylesheet" href="css/styles.css" />
10  <link rel="manifest" href="/manifest.json">
11  <meta name="theme-color" content="#F3F5F7">
12  <link rel="icon" href="/favicon.ico" sizes="any">
13  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
14</head>
15<body>
16  
17
18  

18<script>
19    if ("serviceWorker" in navigator) {
20      navigator.serviceWorker.register("/sw.js");
21    }
22  </script>

22
23
24  <div id="navbar">
25    <div class="input-group">
26      <input id="startSearch" type="text" placeholder="Start" autocomplete="off" />
27      <button id="useLocationBtn" title="Use my location">
28        <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
29          <path d="M11 2c-3.3 0-6 2.7-6 6 0 4.5 6 11 6 11s6-6.5 6-11c0-3.3-2.7-6-6-6z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
30          <circle cx="11" cy="8" r="2.2" stroke="currentColor" stroke-width="1.75"/>
31        </svg>
32      </button>
33    </div>
34    <input id="endSearch" type="text" placeholder="End" autocomplete="off" />
35  </div>
36
37  <div id="suggestions"></div>
38  <div id="mapViewport"><div id="map"></div></div>
39
40  <!-- Distance + ETA, shown once a route is computed. Labeled walk vs.
41       drive so the numbers can't be misread as one or the other. -->
42  <div id="routeSummary">
43    <span id="routeSummaryDistance">—</span>
44    <span class="route-summary-dot">&middot;</span>
45    <span id="routeSummaryWalk">—</span>
46    <span class="route-summary-dot">&middot;</span>
47    <span id="routeSummaryDrive">—</span>
48  </div>
49
50  <!-- Decorative rotating globe shown until we know where the user is -->
51  <div id="globeIntro">
52    <canvas id="globeCanvas"></canvas>
53    <div class="globe-caption">
54      <div class="globe-caption-title">Finding your place in the world</div>
55      <div class="globe-caption-sub">Allow location above, or just start typing an address</div>
56    </div>
57  </div>
58
59  <div class="zoom-controls">
60    <button id="zoomInBtn" class="zoom-btn" aria-label="Zoom in">
61      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
62        <path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
63      </svg>
64    </button>
65    <div class="zoom-divider"></div>
66    <button id="zoomOutBtn" class="zoom-btn" aria-label="Zoom out">
67      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
68        <path d="M4 10h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
69      </svg>
70    </button>
71  </div>
72
73  <div class="bottom-controls">
74    <button id="routeBtn">Get Directions</button>
75    <button id="startNavBtn" style="display:none;">
76      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
77        <path d="M10 3l6 14-6-3-6 3 6-14z" fill="currentColor"/>
78      </svg>
79      Start Navigation
80    </button>
81    <button id="cancelRouteBtn" style="display:none;">Cancel Route</button>
82  </div>
83
84  <!-- Active turn-by-turn navigation overlay -->
85  <div id="navMode">
86    <div id="navTopStack">
87      <div id="navCallout">
88        <div id="navCalloutIcon"></div>
89        <span id="navCalloutText"></span>
90      </div>
91      <div id="navInstructionCard">
92        <div id="navIcon"></div>
93        <div class="nav-instruction-text">
94          <div id="navStreet">—</div>
95          <div id="navDistance">—</div>
96        </div>
97      </div>
98    </div>
99    <div id="navBottomBar">
100      <div class="nav-stats">
101        <span id="navRemainingDistance">—</span>
102        <span class="nav-dot">&middot;</span>
103        <span id="navEta">—</span>
104      </div>
105      <button id="navExitBtn">Exit</button>
106    </div>
107  </div>
108
109  <!-- Unified action rail: same size, same shape, one component -->
110  <div class="action-rail">
111    <button id="fab" class="rail-btn">
112      <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
113        <path d="M3 7.5c0-.83.67-1.5 1.5-1.5h2l1-1.5h7l1 1.5h2c.83 0 1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5h-13C3.67 18 3 17.33 3 16.5v-9z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
114        <circle cx="11" cy="11.4" r="3.1" stroke="currentColor" stroke-width="1.6"/>
115      </svg>
116      Report Feature
117    </button>
118    <button id="bugReportBtn" class="rail-btn is-ochre">
119      <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
120        <path d="M5 2.5v17" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
121        <path d="M5 3.5h9l-2 3.5 2 3.5H5z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
122      </svg>
123      Report Bug
124    </button>
125    <a href="how-to-use.html" class="rail-link">
126      <button id="helpBtn" class="rail-btn">
127        <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
128          <circle cx="11" cy="11" r="8.25" stroke="currentColor" stroke-width="1.6"/>
129          <path d="M8.5 8.6c.25-1.4 1.5-2.25 2.85-2.05 1.35.2 2.3 1.25 2.1 2.55-.15.95-.85 1.4-1.5 1.85-.55.4-1.05.75-1.15 1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
130          <circle cx="11" cy="15" r="0.95" fill="currentColor" stroke="none"/>
131        </svg>
132        Help
133      </button>
134    </a>
135  </div>
136
137  <!-- Location prompt banner (shown on page load instead of auto-requesting) -->
138  <div id="locationBanner">
139    <span>Enable location for better routing</span>
140    <button id="locationBannerBtn">Allow</button>
141    <button id="locationBannerDismiss">&#10005;</button>
142  </div>
143
144  <!-- Bug report modal -->
145  <div id="bugReportOverlay">
146    <div class="bug-modal">
147      <div class="bug-modal-icon">
148        <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
149          <path d="M5 2.5v17" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
150          <path d="M5 3.5h9l-2 3.5 2 3.5H5z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
151        </svg>
152      </div>
153      <h3>Report a bug</h3>
154      <p>Tell us what went wrong. Be as specific as you can.</p>
155      <textarea id="bugReportText" rows="5" placeholder="Example: The route button didn't respond when I ta

155pped it near Green Lake"></textarea>
156      <div class="bug-modal-actions">
157        <button id="bugReportCancel">Cancel</button>
158        <button id="bugReportSubmit">Submit</button>
159      </div>
160    </div>
161  </div>
162
163  <div id="toast"></div>
164
165  <div class="copyright">&copy; 2026 PathOpen. All rights reserved. &nbsp;·&nbsp; <a href="privacy.html">Privacy</a> &nbsp;·&nbsp; <a href="terms.html">Terms</a></div>
166
167  

167<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

167
168  <!-- Adds real map-rotation support to Leaflet core (bearing, correct
169       pinch/pan math under rotation, upright markers via rotateWithView).
170       Must load after leaflet.js and before script.js. -->
171  

171<script src="https://unpkg.com/[email protected]/dist/leaflet-rotate-src.js"></script>

171
172  

172<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

172
173  

173<script src="js/script.js"></script>

173
174</body>
175</html>