GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Directions 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: 0;14 box-shadow: 0 0 0 rgba(0,0,0,0.1);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 90px;22 display: flex;23 align-items: center;24 padding: 0 24px;25 color: #222;26 font-size: 32px;27 }28 .status-right {29 margin-left: auto;30 display: flex;31 gap: 18px;32 align-items: center;33 color: #555;34 font-size: 28px;35 }36 .icon {37 width: 56px; height: 56px;38 display: inline-flex;39 align-items: center;40 justify-content: center;41 border-radius: 50%;42 color: #333;43 }44 .icon svg { width: 36px; height: 36px; }45 46 /* Search panel */47 .search-panel {48 position: absolute;49 top: 90px;50 left: 24px; right: 24px;51 padding-top: 14px;52 }53 .search-top {54 display: flex; align-items: center;55 gap: 12px;56 }57 .more-dots {58 margin-left: auto;59 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;60 }61 .input {62 margin-top: 18px;63 background: #fff;64 border: 2px solid #e0e0e0;65 border-radius: 22px;66 height: 86px;67 display: flex; align-items: center;68 padding: 0 26px;69 box-shadow: 0 2px 4px rgba(0,0,0,0.04);70 font-size: 36px;71 color: #111;72 }73 .input .label {74 flex: 1;75 }76 .input .hint { color: #5f6368; }77 .swap {78 width: 52px; height: 52px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0;79 margin-left: 14px;80 }81 82 /* Transport chips */83 .modes {84 position: absolute;85 top: 290px;86 left: 24px; right: 24px;87 display: flex;88 gap: 16px;89 align-items: center;90 }91 .chip {92 padding: 18px 26px;93 border-radius: 36px;94 border: 2px solid #e0e0e0;95 background: #fff;96 color: #333;97 font-size: 34px;98 display: flex; align-items: center; gap: 14px;99 }100 .chip svg { width: 34px; height: 34px; }101 .chip.active {102 background: #1a73e8;103 border-color: #1a73e8;104 color: #fff;105 }106 107 /* Map placeholder */108 .map {109 position: absolute;110 top: 380px;111 left: 0; right: 0;112 height: 1370px;113 background: #E0E0E0;114 border-top: 1px solid #BDBDBD;115 border-bottom: 1px solid #BDBDBD;116 display: flex;117 align-items: center;118 justify-content: center;119 color: #6b6b6b;120 font-size: 36px;121 }122 .map .note { pointer-events: none; }123 124 /* Floating buttons */125 .float {126 position: absolute;127 width: 108px; height: 108px;128 border-radius: 50%;129 background: #fff;130 border: 1px solid #e0e0e0;131 box-shadow: 0 4px 10px rgba(0,0,0,0.12);132 display: flex; align-items: center; justify-content: center;133 }134 .float svg { width: 48px; height: 48px; }135 136 .float.layers { top: 460px; right: 26px; }137 .float.search { top: 620px; right: 26px; }138 .float.locate { bottom: 540px; right: 26px; }139 140 /* Small white ETA boxes on map */141 .eta-tag {142 position: absolute;143 background: #fff;144 border: 1px solid #d0d0d0;145 border-radius: 16px;146 padding: 14px 16px;147 color: #333;148 font-size: 34px;149 box-shadow: 0 1px 2px rgba(0,0,0,0.08);150 }151 .eta-blue {152 background: #1a73e8;153 color: #fff;154 border-color: #1a73e8;155 }156 157 /* Street view thumbnail */158 .thumb {159 position: absolute;160 bottom: 620px; left: 38px;161 width: 280px; height: 180px;162 background: #E0E0E0;163 border: 1px solid #BDBDBD;164 border-radius: 14px;165 display: flex; align-items: center; justify-content: center;166 color: #6b6b6b; font-size: 26px;167 }168 169 /* Bottom sheet */170 .sheet {171 position: absolute;172 left: 0; right: 0; bottom: 0;173 height: 350px;174 background: #fff;175 border-top-left-radius: 22px;176 border-top-right-radius: 22px;177 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);178 padding: 18px 28px;179 }180 .sheet .grabber {181 width: 120px; height: 10px; background: #e0e0e0; border-radius: 6px; margin: 10px auto 18px;182 }183 .sheet .title {184 font-size: 56px; color: #0b57d0; font-weight: 700;185 }186 .sheet .subtitle {187 margin-top: 12px;188 color: #6b6b6b;189 font-size: 32px;190 }191 .actions {192 position: absolute; left: 28px; right: 28px; bottom: 22px;193 display: flex; gap: 22px;194 }195 .btn {196 flex: none;197 padding: 26px 40px;198 border-radius: 60px;199 border: 2px solid #dfe1e5;200 background: #fff;201 color: #1a73e8;202 font-weight: 600;203 font-size: 36px;204 display: flex; align-items: center; gap: 16px;205 box-shadow: 0 1px 2px rgba(0,0,0,0.08);206 }207 .btn.primary {208 background: #1a73e8;209 color: #fff;210 border-color: #1a73e8;211 }212 .btn svg { width: 38px; height: 38px; }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div>5:29</div>221 <div class="status-right">222 <div>16°</div>223 <div class="icon">224 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#555" stroke-width="2"/></svg>225 </div>226 <div class="icon">227 <svg viewBox="0 0 24 24"><path d="M4 18h16V6" stroke="#555" stroke-width="2" fill="none"/></svg>228 </div>229 <div class="icon">230 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"/><rect x="6" y="8" width="12" height="8" fill="#555"/></svg>231 </div>232 </div>233 </div>234 235 <!-- Search panel -->236 <div class="search-panel">237 <div class="search-top">238 <div class="icon" style="background:#fff;">239 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#1f1f1f" stroke-width="2"/></svg>240 </div>241 <div class="icon" style="background:#fff;">242 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#333"/></svg>243 </div>244 <div class="more-dots">245 <svg viewBox="0 0 24 24">246 <circle cx="12" cy="5" r="2" fill="#666"/>247 <circle cx="12" cy="12" r="2" fill="#666"/>248 <circle cx="12" cy="19" r="2" fill="#666"/>249 </svg>250 </div>251 </div>252 253 <div class="input">254 <div class="icon" style="width:48px;height:48px;">255 <svg viewBox="0 0 24 24"><path d="M12 2L4 9v11h6v-6h4v6h6V9z" fill="#5f6368"/></svg>256 </div>257 <div class="label">Home</div>258 </div>259 260 <div class="input">261 <div class="icon" style="width:48px;height:48px;">262 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#c5221f"/></svg>263 </div>264 <div class="label">Ristorante Pizzeria Positano</div>265 <div class="swap">266 <svg viewBox="0 0 24 24">267 <path d="M7 4v10m0 0l-3-3m3 3l3-3" stroke="#555" stroke-width="2" fill="none"/>268 <path d="M17 20V10m0 0l3 3m-3-3l-3 3" stroke="#555" stroke-width="2" fill="none"/>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Mode chips -->275 <div class="modes">276 <div class="chip active">277 <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="7" rx="2" fill="#fff"/><circle cx="8" cy="17" r="2" fill="#fff"/><circle cx="16" cy="17" r="2" fill="#fff"/></svg>278 <div>35 min</div>279 </div>280 <div class="chip">281 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="12" rx="2" ry="2" fill="#666"/><circle cx="9" cy="16" r="1.5" fill="#fff"/><circle cx="15" cy="16" r="1.5" fill="#fff"/></svg>282 <div>2 hr 6</div>283 </div>284 <div class="chip">285 <svg viewBox="0 0 24 24"><path d="M6 20l3-7-3-3m8 10v-5l3-3" stroke="#444" stroke-width="2" fill="none"/></svg>286 <div>7 hr</div>287 </div>288 <div class="chip">289 <svg viewBox="0 0 24 24"><circle cx="7" cy="16" r="3" stroke="#444" stroke-width="2" fill="none"/><circle cx="17" cy="16" r="3" stroke="#444" stroke-width="2" fill="none"/><path d="M7 16l4-6 6 6M11 10h5" stroke="#444" stroke-width="2" fill="none"/></svg>290 <div>1 hr 52</div>291 </div>292 </div>293 294 <!-- Map -->295 <div class="map">296 <div class="note">[IMG: Google Map with routes]</div>297 </div>298 299 <!-- ETA tags on map -->300 <div class="eta-tag eta-blue" style="top: 1040px; left: 236px;">35 min</div>301 <div class="eta-tag" style="top: 980px; left: 390px;">39 min</div>302 <div class="eta-tag" style="top: 900px; left: 160px;">35 min</div>303 304 <!-- Floating buttons -->305 <div class="float layers">306 <svg viewBox="0 0 24 24">307 <path d="M12 4l8 4-8 4-8-4 8-4z" fill="#5f6368"/>308 <path d="M20 12l-8 4-8-4" stroke="#5f6368" stroke-width="2" fill="none"/>309 <path d="M20 16l-8 4-8-4" stroke="#5f6368" stroke-width="2" fill="none"/>310 </svg>311 </div>312 <div class="float search">313 <svg viewBox="0 0 24 24">314 <circle cx="11" cy="11" r="6" stroke="#5f6368" stroke-width="2" fill="none"/>315 <path d="M16 16l5 5" stroke="#5f6368" stroke-width="2"/>316 </svg>317 </div>318 <div class="float locate">319 <svg viewBox="0 0 24 24">320 <circle cx="12" cy="12" r="8" stroke="#5f6368" stroke-width="2" fill="none"/>321 <circle cx="12" cy="12" r="2" fill="#5f6368"/>322 </svg>323 </div>324 325 <!-- Street view thumbnail -->326 <div class="thumb">[IMG: Street View Preview]</div>327 328 <!-- Bottom sheet -->329 <div class="sheet">330 <div class="grabber"></div>331 <div class="title">35 min (28 km)</div>332 <div class="subtitle">Fastest route now, avoids road closure on Via dei Chiodi</div>333 334 <div class="actions">335 <div class="btn primary">336 <span>»</span>337 <span>Preview</span>338 </div>339 <div class="btn">340 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10" stroke="#1a73e8" stroke-width="2"/></svg>341 <span>Steps</span>342 </div>343 <div class="btn">344 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 0 0-6-6zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#1a73e8"/></svg>345 <span>Pin</span>346 </div>347 </div>348 </div>349 350</div>351</body>352</html>