GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Maps Directions UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 24px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.15);15 }16 17 /* Top status bar */18 .status-bar {19 height: 64px;20 padding: 0 24px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-size: 30px;26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .notif-dot { width: 10px; height: 10px; background:#333; border-radius:50%; display:inline-block; }29 .status-right { display:flex; align-items:center; gap:18px; }30 .icon-wifi, .icon-battery, .icon-gps { width: 36px; height: 24px; }31 .icon-battery { border:2px solid #333; border-radius:4px; position:relative; }32 .icon-battery:after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#333; border-radius:2px; }33 .icon-battery .level { position:absolute; left:2px; top:2px; height:16px; width:24px; background:#4caf50; }34 35 /* App bar / inputs */36 .controls {37 padding: 12px 20px 10px 20px;38 }39 .row { display:flex; align-items:center; gap:16px; }40 .circle-btn {41 width:60px; height:60px; border-radius:50%;42 background:#F0F0F0; display:flex; align-items:center; justify-content:center;43 border:1px solid #D0D0D0;44 }45 .pill {46 flex:1;47 height:84px;48 border:1px solid #D5D5D5;49 border-radius:14px;50 display:flex;51 align-items:center;52 padding:0 20px;53 font-size:34px;54 color:#222;55 background:#fff;56 }57 .pill .label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }58 .pill .end { color:#555; }59 .three-dots { width:60px; height:84px; display:flex; align-items:center; justify-content:center; }60 .dots { width:8px; height:8px; background:#333; border-radius:50%; margin:4px 0; }61 .dots + .dots { margin-top:6px; }62 63 .sub-row { margin-top:12px; display:flex; align-items:center; gap:16px; }64 .swap-btn {65 width:60px; height:60px; border-radius:50%;66 background:#F0F0F0; border:1px solid #D0D0D0;67 display:flex; align-items:center; justify-content:center;68 }69 70 /* Mode chips */71 .modes { display:flex; align-items:center; gap:24px; padding:14px 20px; }72 .mode { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:24px; border:1px solid #E0E0E0; font-size:30px; color:#333; background:#fff; }73 .mode svg { width:30px; height:30px; }74 .mode.active { background:#1a73e8; color:#fff; border-color:#1a73e8; }75 .mode.small { color:#666; }76 77 /* Map placeholder */78 .map {79 margin: 10px 12px 0 12px;80 width: calc(100% - 24px);81 height: 1520px;82 background:#E0E0E0;83 border:1px solid #BDBDBD;84 border-radius:18px;85 display:flex;86 align-items:center;87 justify-content:center;88 color:#616161;89 font-size:36px;90 position: relative;91 }92 93 /* Floating elements on map */94 .floating-scale {95 position:absolute;96 right: 260px;97 bottom: 260px;98 color:#333;99 font-size:26px;100 text-align:right;101 }102 .scale-lines { display:flex; align-items:center; gap:24px; margin-top:8px; }103 .scale-line { width:160px; height:6px; background:#000; }104 .scale-line.short { width:80px; }105 106 .float-help {107 position:absolute;108 right: 30px;109 bottom: 260px;110 width:120px; height:120px; border-radius:50%;111 background:#fff; border:1px solid #E0E0E0; box-shadow:0 4px 12px rgba(0,0,0,0.2);112 display:flex; align-items:center; justify-content:center;113 }114 .float-help .question {115 width:72px; height:72px; border-radius:50%; background:#ff6b6b; color:#fff;116 display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:46px;117 }118 119 /* Bottom sheet */120 .bottom-sheet {121 position:absolute;122 left:0; right:0; bottom:0;123 height:360px; background:#fff;124 border-top-left-radius:28px; border-top-right-radius:28px;125 box-shadow:0 -8px 24px rgba(0,0,0,0.15);126 padding:24px 28px;127 }128 .drag-handle {129 width:120px; height:10px; background:#E0E0E0; border-radius:8px; margin:0 auto 16px auto;130 }131 .summary {132 font-size:46px; color:#111; font-weight:600;133 }134 .summary .sub { font-size:36px; color:#6b6b6b; font-weight:400; margin-left:18px; }135 .via { margin-top:8px; font-size:34px; color:#6b6b6b; }136 137 .actions { position:absolute; left:28px; right:28px; bottom:24px; display:flex; gap:26px; }138 .btn {139 flex: none;140 padding: 24px 34px;141 border-radius:42px;142 font-size:38px;143 display:flex; align-items:center; gap:16px;144 box-shadow:0 2px 6px rgba(0,0,0,0.1);145 border:1px solid #DADADA;146 background:#F5F7FF; color:#174EA6;147 }148 .btn.secondary { background:#fff; color:#174EA6; }149 .btn svg { width:36px; height:36px; }150 151 /* Simple icons */152 .icon {153 width:32px; height:32px;154 }155 .icon path { fill:#333; }156 .icon.white path { fill:#fff; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status Bar -->163 <div class="status-bar">164 <div class="status-left">165 <div>11:07</div>166 <span class="notif-dot"></span>167 <span class="notif-dot"></span>168 <span class="notif-dot"></span>169 <span class="notif-dot"></span>170 <span class="notif-dot"></span>171 <span style="font-size:28px; color:#777;">•</span>172 </div>173 <div class="status-right">174 <div class="icon-wifi" style="border:2px solid #333; border-left-color:transparent; border-bottom-color:transparent; transform:rotate(45deg);"></div>175 <div class="icon-gps" style="width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:24px solid #333;"></div>176 <div class="icon-battery"><div class="level"></div></div>177 </div>178 </div>179 180 <!-- Search Controls -->181 <div class="controls">182 <div class="row">183 <div class="circle-btn" title="Back">184 <svg class="icon" viewBox="0 0 24 24">185 <path d="M15.5 4l-8 8 8 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186 </svg>187 </div>188 <div class="pill">189 <svg class="icon" viewBox="0 0 24 24" style="margin-right:14px;">190 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"></circle>191 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>192 </svg>193 <div class="label">Grays Ferry Crescent Skatep...</div>194 </div>195 <div class="three-dots">196 <div class="dots"></div>197 <div class="dots"></div>198 <div class="dots"></div>199 </div>200 </div>201 202 <div class="sub-row">203 <div class="pill">204 <svg class="icon" viewBox="0 0 24 24" style="margin-right:14px;">205 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 14-6 14S6 12.5 6 8c0-3.3 2.7-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#e53935"/>206 </svg>207 <div class="label">Philadelphia</div>208 </div>209 <div class="swap-btn" title="Swap">210 <svg class="icon" viewBox="0 0 24 24">211 <path d="M7 7h10l-3-3M17 17H7l3 3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212 </svg>213 </div>214 </div>215 </div>216 217 <!-- Mode selector -->218 <div class="modes">219 <div class="mode small">220 <svg viewBox="0 0 24 24">221 <path d="M3 18h18M7 18l2-10h6l2 10M10 18v2M14 18v2" fill="none" stroke="#666" stroke-width="2"/>222 </svg>223 <span> </span>224 </div>225 <div class="mode">226 <svg viewBox="0 0 24 24">227 <rect x="3" y="7" width="18" height="10" rx="3" ry="3" fill="#666"></rect>228 <circle cx="7" cy="18" r="2" fill="#666"></circle>229 <circle cx="17" cy="18" r="2" fill="#666"></circle>230 </svg>231 <span>26 min</span>232 </div>233 <div class="mode active">234 <svg class="white" viewBox="0 0 24 24">235 <path d="M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-3 8l3 2 2 4 3 6M5 22l4-9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 <span>1 hr 15</span>238 </div>239 <div class="mode">240 <svg viewBox="0 0 24 24">241 <path d="M3 10h18l-2 6H5l-2-6zM6 7h12l1 3H5l1-3z" fill="#666"></path>242 </svg>243 <span>17 min</span>244 </div>245 <div class="mode">246 <svg viewBox="0 0 24 24">247 <circle cx="6" cy="18" r="2" fill="#666"></circle>248 <circle cx="18" cy="18" r="2" fill="#666"></circle>249 <path d="M5 18l3-7h6l3 7M8 11l2-3h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>250 </svg>251 <span>23 min</span>252 </div>253 </div>254 255 <!-- Map -->256 <div class="map">257 [IMG: Google Map with walking route]258 <div class="floating-scale">259 <div>2000 ft</div>260 <div class="scale-lines">261 <div class="scale-line"></div>262 <div class="scale-line short"></div>263 </div>264 <div style="margin-top:6px;">500 m</div>265 </div>266 <div class="float-help">267 <div class="question">?</div>268 </div>269 </div>270 271 <!-- Bottom sheet -->272 <div class="bottom-sheet">273 <div class="drag-handle"></div>274 <div class="summary">275 1 hr 15 min (3.3 mi) <span class="sub">Mostly flat</span>276 </div>277 <div class="via">via Market St</div>278 279 <div class="actions">280 <div class="btn">281 <svg viewBox="0 0 24 24">282 <path d="M6 12h12M12 6l4 6-4 6" stroke="#174EA6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 <span>Preview</span>285 </div>286 <div class="btn secondary">287 <svg viewBox="0 0 24 24">288 <path d="M4 6h16M4 12h16M4 18h16" stroke="#174EA6" stroke-width="2" fill="none" stroke-linecap="round"/>289 </svg>290 <span>Steps</span>291 </div>292 </div>293 </div>294 295</div>296</body>297</html>