GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Directions UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 color: #202124;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 18px;22 left: 24px;23 right: 24px;24 height: 64px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #5f6368;29 font-size: 34px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .sb-dot { width: 14px; height: 14px; background:#9aa0a6; border-radius:50%; opacity:.6; display:inline-block; }37 .sb-signal {38 width: 26px; height: 26px; border: 2px solid #9aa0a6; border-radius: 3px; position: relative;39 }40 .sb-battery {41 width: 44px; height: 22px; border: 2px solid #9aa0a6; border-radius: 5px; position: relative;42 }43 .sb-battery::after {44 content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 10px; background: #9aa0a6; border-radius: 1px;45 }46 47 /* Map area */48 .map {49 position: absolute;50 top: 0;51 left: 0;52 width: 1080px;53 height: 980px;54 }55 .map .img {56 position: absolute;57 inset: 0;58 background: #E0E0E0;59 border: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center;61 color: #757575; font-size: 40px;62 }63 64 /* Floating map badges */65 .badge {66 position: absolute;67 padding: 22px 26px;68 border-radius: 20px;69 box-shadow: 0 6px 16px rgba(0,0,0,0.18);70 font-size: 36px;71 line-height: 1.1;72 display: inline-flex;73 gap: 14px;74 align-items: center;75 }76 .badge.white { background:#ffffff; color:#202124; top: 240px; left: 350px; }77 .badge.blue { background:#1a73e8; color:#ffffff; top: 520px; left: 260px; }78 .badge .small-i {79 width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor;80 display: inline-flex; align-items: center; justify-content: center; font-size: 22px;81 opacity: .9;82 }83 84 /* Floating buttons on the map */85 .fab {86 position: absolute;87 right: 30px;88 width: 112px; height: 112px;89 background: #ffffff;90 border-radius: 50%;91 box-shadow: 0 8px 22px rgba(0,0,0,0.18);92 display: flex; align-items: center; justify-content: center;93 }94 .fab.layers { top: 170px; }95 .fab.search { top: 350px; }96 .fab svg { width: 56px; height: 56px; fill: #5f6368; }97 98 /* Bottom sheet */99 .sheet {100 position: absolute;101 left: 0;102 top: 620px;103 width: 1080px;104 height: 1780px;105 background: #ffffff;106 border-top-left-radius: 28px;107 border-top-right-radius: 28px;108 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);109 }110 .drag-handle {111 width: 160px; height: 12px; border-radius: 6px; background: #E0E0E0;112 margin: 14px auto 10px auto;113 }114 .sheet-inner { padding: 10px 42px 220px 42px; }115 .eta { font-size: 64px; font-weight: 600; margin-top: 10px; }116 .eta-time { color: #188038; }117 .eta-dist { color: #3c4043; margin-left: 10px; font-weight: 500; }118 .subtext { color: #80868b; font-size: 36px; margin-top: 10px; }119 120 .toll-box {121 margin-top: 36px;122 padding: 26px 0;123 border-top: 1px solid #ECECEC;124 border-bottom: 1px solid #ECECEC;125 display: flex; gap: 24px; align-items: center;126 }127 .toll-round {128 width: 64px; height: 64px; border-radius: 50%;129 display:flex; align-items:center; justify-content:center;130 background:#F1F3F4;131 }132 .toll-text .bold { font-size: 38px; font-weight: 600; color:#202124; }133 .toll-text .link { font-size: 34px; color:#1a73e8; margin-top: 6px; }134 135 .section { margin-top: 36px; }136 .section-title { font-size: 44px; font-weight: 600; color:#202124; margin-bottom: 22px; }137 138 /* Traffic chart */139 .chart {140 padding: 24px 6px 6px 6px;141 border-top: 1px dashed #E0E0E0;142 position: relative;143 }144 .bars { display: flex; gap: 18px; padding: 26px 8px 6px 8px; }145 .bar {146 width: 120px; height: 150px; background:#ECEFF1; border-radius: 22px;147 }148 .bar.active { background:#6da87a; }149 .chart-time {150 display: flex; justify-content: space-between; color:#9AA0A6; font-size: 28px; padding: 8px 14px 0 14px;151 }152 153 /* Steps */154 .step {155 display: grid;156 grid-template-columns: 70px 1fr 244px;157 align-items: center;158 gap: 24px;159 padding: 28px 0;160 }161 .step + .step { border-top: 1px solid #eee; }162 .step-title { font-size: 40px; color:#3c4043; }163 .step-sub { font-size: 32px; color:#80868b; margin-top: 10px; }164 .thumb {165 width: 220px; height: 120px;166 background:#E0E0E0; border:1px solid #BDBDBD;167 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;168 border-radius: 8px;169 }170 171 /* Bottom actions */172 .bottom-actions {173 position: absolute;174 left: 0; right: 0; bottom: 0;175 padding: 22px 24px 44px 24px;176 background: #ffffff;177 box-shadow: 0 -6px 18px rgba(0,0,0,0.08);178 }179 .action-row {180 display: flex; align-items: center; justify-content: space-between; gap: 18px;181 }182 .btn {183 height: 120px; padding: 0 46px; border-radius: 60px; border: 2px solid #E0E0E0;184 display: inline-flex; align-items: center; gap: 22px; font-size: 40px; color:#1a73e8; background:#ffffff;185 }186 .btn svg { width: 44px; height: 44px; fill:#1a73e8; }187 .btn.primary {188 background:#1a73e8; border-color:#1a73e8; color:#ffffff;189 }190 .btn.primary svg { fill:#ffffff; }191 192 /* Home indicator */193 .home-indicator {194 position: absolute;195 bottom: 18px;196 left: 50%;197 transform: translateX(-50%);198 width: 220px; height: 12px; background:#C7C8CB; border-radius: 8px;199 opacity: .9;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar (minimal) -->207 <div class="status-bar">208 <div>6:43</div>209 <div class="status-right">210 <span class="sb-dot"></span><span class="sb-dot"></span><span class="sb-dot"></span><span class="sb-dot"></span>211 <div class="sb-signal"></div>212 <div class="sb-battery"></div>213 </div>214 </div>215 216 <!-- Map area -->217 <div class="map">218 <div class="img">[IMG: Map with route]</div>219 220 <div class="badge white">221 <div>55 min<br>Tolls</div>222 <div class="small-i">i</div>223 </div>224 225 <div class="badge blue">226 <div>44 min<br>Tolls</div>227 <div class="small-i">i</div>228 </div>229 230 <div class="fab layers" aria-label="Layers">231 <svg viewBox="0 0 24 24">232 <path d="M12 2 2 7l10 5 10-5-10-5Zm0 9L2 6v3l10 5 10-5V6l-10 5Zm0 5L2 11v3l10 5 10-5v-3l-10 5Z"/>233 </svg>234 </div>235 <div class="fab search" aria-label="Search">236 <svg viewBox="0 0 24 24">237 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z"/>238 </svg>239 </div>240 </div>241 242 <!-- Bottom sheet -->243 <div class="sheet">244 <div class="drag-handle"></div>245 <div class="sheet-inner">246 <div class="eta">247 <span class="eta-time">44 min</span> <span class="eta-dist">(62 km)</span>248 </div>249 <div class="subtext">Fastest route now due to traffic conditions</div>250 251 <div class="toll-box">252 <div class="toll-round">253 <svg width="36" height="36" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="10" fill="#ffffff" stroke="#9aa0a6" stroke-width="2"/>255 <path d="M8 9h8M12 9v8" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>256 </svg>257 </div>258 <div class="toll-text">259 <div class="bold">This route has tolls.</div>260 <div class="link">Change toll settings</div>261 </div>262 </div>263 264 <div class="section">265 <div class="section-title">Traffic</div>266 <div class="chart">267 <div class="bars">268 <div class="bar"></div>269 <div class="bar active"></div>270 <div class="bar"></div>271 <div class="bar"></div>272 <div class="bar"></div>273 <div class="bar"></div>274 </div>275 <div class="chart-time">276 <span>6:30 PM</span>277 <span>7:30 PM</span>278 <span>8:30 PM</span>279 </div>280 </div>281 </div>282 283 <div class="section">284 <div class="section-title">Steps</div>285 286 <div class="step">287 <div>288 <svg viewBox="0 0 24 24" width="56" height="56">289 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" fill="#5f6368"/>290 </svg>291 </div>292 <div class="step-title">Cañada de Gómez</div>293 <div class="thumb">[IMG: Street view]</div>294 </div>295 296 <div class="step">297 <div>298 <svg viewBox="0 0 24 24" width="56" height="56">299 <path d="M12 2 5 9h4v9h6V9h4L12 2z" fill="#5f6368"/>300 </svg>301 </div>302 <div>303 <div class="step-title">Head east on Aizpuru toward Schnack</div>304 <div class="step-sub">80 m</div>305 </div>306 <div class="thumb">[IMG: Street view]</div>307 </div>308 309 </div>310 </div>311 312 <div class="bottom-actions">313 <div class="action-row">314 <button class="btn primary">315 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7V5z"/></svg>316 Preview317 </button>318 <button class="btn">319 <svg viewBox="0 0 24 24"><path d="M4 11l8-6 8 6-8 6-8-6zm0 6l8 6 8-6" /></svg>320 Show map321 </button>322 <button class="btn">323 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>324 Pin325 </button>326 </div>327 </div>328 </div>329 330 <!-- Home indicator -->331 <div class="home-indicator"></div>332 333</div>334</body>335</html>