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>Transit Directions UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #2b2b2b;12 }13 14 /* Status bar */15 .statusbar {16 height: 120px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;17 font-size: 42px; color: #4d4d4d;18 }19 .status-icons { display: flex; align-items: center; gap: 24px; }20 21 /* Top search section */22 .top-controls {23 padding: 16px 24px 12px 24px;24 }25 .search-row {26 display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;27 gap: 16px; margin-bottom: 20px;28 }29 .field {30 background: #F5F7F9; border: 1px solid #E2E6EA; height: 120px;31 border-radius: 28px; display: flex; align-items: center; padding: 0 28px;32 font-size: 40px; color: #555; box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;33 }34 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }35 .kebab { width: 26px; height: 60px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 10px; }36 .dot { width: 10px; height: 10px; background: #8f8f8f; border-radius: 50%; }37 38 .modes {39 display: flex; justify-content: space-between; align-items: center;40 padding: 24px 40px 8px 40px;41 }42 .mode {43 width: 220px; text-align: center; color: #6a6a6a;44 }45 .mode svg { display:block; margin: 0 auto 12px auto; }46 .mode .time { font-size: 34px; }47 .selected {48 background: #E8F0FE; color: #1a73e8; border-radius: 40px; padding: 16px 0;49 box-shadow: inset 0 0 0 2px #D6E4FF;50 }51 52 /* Filter bar */53 .filter-bar {54 margin: 24px 24px 0 24px; background: #F5F5F7; border: 1px solid #E0E0E0;55 border-radius: 28px; display: flex; gap: 16px; padding: 20px;56 }57 .pill {58 flex: 1; background: #fff; border: 1px solid #E0E0E0; border-radius: 24px;59 height: 90px; display: flex; align-items: center; justify-content: space-between;60 padding: 0 26px; font-size: 36px; color: #555;61 }62 .dropdown { display: inline-flex; align-items: center; gap: 12px; }63 64 /* Content sections */65 .content { padding: 24px; }66 .section-label {67 font-size: 30px; font-weight: 700; color: #6d6d6d; letter-spacing: 1px; margin: 28px 8px 14px 8px;68 }69 .card {70 position: relative; background: #fff; border-top: 1px solid #e8e8e8;71 padding: 24px 8px 24px 8px;72 }73 .route-row {74 display: flex; align-items: center; gap: 22px; padding: 12px 8px;75 font-size: 36px; color: #555;76 }77 .chev { color: #b0b0b0; font-size: 40px; }78 79 .yellow-pill {80 background: #FFE68C; border: 1px solid #EAD777; color: #333; padding: 8px 16px;81 border-radius: 16px; font-weight: 700; font-size: 34px;82 }83 .details { font-size: 34px; color: #6a6a6a; padding: 6px 8px; }84 .subtle { color: #8d8d8d; }85 .result-meta {86 position: absolute; right: 24px; top: 26px; text-align: right;87 }88 .duration { font-size: 56px; font-weight: 700; color: #2b2b2b; }89 .price { font-size: 34px; color: #7a7a7a; margin-top: 6px; }90 91 .bus-card { padding-bottom: 18px; }92 .time-cost { font-size: 36px; color: #4d4d4d; padding: 8px 8px; }93 .schedule { font-size: 32px; color: #7a7a7a; padding: 0 8px; }94 .start-btn {95 position: absolute; right: 24px; top: 88px; height: 100px; width: 220px;96 border-radius: 50px; border: 1px solid #D0D4DA; background: #fff; display: flex;97 align-items: center; justify-content: center; gap: 16px; color: #1976d2; font-size: 40px; font-weight: 700;98 }99 .divider { height: 16px; background: #f1f2f4; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin: 8px -24px; }100 101 /* Bottom handle */102 .home-handle {103 position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);104 width: 320px; height: 12px; background: #C8C8CC; border-radius: 8px;105 }106 107 /* Small helper icons/text pills */108 .number-pill {109 background: #EFEFF1; border: 1px solid #DADADA; color: #4d4d4d;110 border-radius: 14px; padding: 4px 10px; font-weight: 700; font-size: 32px;111 }112 .walk-count { color: #7a7a7a; font-size: 34px; }113 114 /* Tiny */115 .tiny-note { font-size: 30px; color: #8d8d8d; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="statusbar">123 <div>3:43</div>124 <div class="status-icons">125 <!-- location icon -->126 <svg width="46" height="46" viewBox="0 0 46 46">127 <circle cx="23" cy="23" r="10" fill="#757575"></circle>128 <path d="M23 2 L27 12 L19 12 Z" fill="#757575"></path>129 </svg>130 <!-- wifi -->131 <svg width="54" height="46" viewBox="0 0 54 46">132 <path d="M3 18 Q27 -2 51 18" stroke="#757575" stroke-width="4" fill="none"/>133 <path d="M10 26 Q27 12 44 26" stroke="#757575" stroke-width="4" fill="none"/>134 <path d="M18 34 Q27 26 36 34" stroke="#757575" stroke-width="4" fill="none"/>135 <circle cx="27" cy="39" r="4" fill="#757575"/>136 </svg>137 <!-- battery -->138 <svg width="64" height="46" viewBox="0 0 64 46">139 <rect x="2" y="10" width="50" height="26" rx="6" ry="6" stroke="#757575" stroke-width="4" fill="none"/>140 <rect x="6" y="14" width="40" height="18" fill="#757575"/>141 <rect x="54" y="16" width="8" height="14" rx="2" fill="#757575"/>142 </svg>143 </div>144 </div>145 146 <!-- Top search / directions inputs -->147 <div class="top-controls">148 <!-- Back arrow row + origin field -->149 <div class="search-row">150 <div class="icon-btn">151 <!-- back arrow -->152 <svg width="56" height="56" viewBox="0 0 56 56">153 <path d="M32 10 L14 28 L32 46" stroke="#5f6368" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 <div class="field">157 <svg width="34" height="34" viewBox="0 0 34 34" style="margin-right:18px;">158 <circle cx="17" cy="17" r="12" fill="#4285F4"/>159 </svg>160 <span>Your location</span>161 </div>162 <div class="kebab">163 <div class="dot"></div><div class="dot"></div><div class="dot"></div>164 </div>165 </div>166 167 <!-- spacer dots between fields -->168 <div style="width: 20px; margin: 0 0 8px 128px;">169 <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>170 <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>171 <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>172 </div>173 174 <!-- Destination row -->175 <div class="search-row" style="margin-top: 8px;">176 <div class="icon-btn">177 <!-- red pin -->178 <svg width="44" height="44" viewBox="0 0 44 44">179 <circle cx="22" cy="18" r="14" fill="#EA4335"/>180 <path d="M22 32 L22 44" stroke="#EA4335" stroke-width="6" stroke-linecap="round"/>181 </svg>182 </div>183 <div class="field">184 <span>India Gate</span>185 </div>186 <div class="icon-btn">187 <!-- swap up-down -->188 <svg width="56" height="56" viewBox="0 0 56 56">189 <path d="M28 10 L36 18 L20 18 Z" fill="#5f6368"/>190 <rect x="24" y="18" width="8" height="16" fill="#5f6368"/>191 <path d="M28 46 L20 38 L36 38 Z" fill="#5f6368"/>192 <rect x="24" y="22" width="8" height="0" fill="#5f6368"/>193 </svg>194 </div>195 </div>196 197 <!-- transport modes -->198 <div class="modes">199 <div class="mode">200 <svg width="72" height="48" viewBox="0 0 72 48">201 <rect x="10" y="14" width="52" height="20" rx="8" fill="#616161"/>202 <circle cx="22" cy="38" r="6" fill="#616161"/>203 <circle cx="50" cy="38" r="6" fill="#616161"/>204 </svg>205 <div class="time">1 hr 2</div>206 </div>207 <div class="mode">208 <svg width="72" height="48" viewBox="0 0 72 48">209 <circle cx="22" cy="38" r="6" fill="#616161"/>210 <circle cx="50" cy="38" r="6" fill="#616161"/>211 <path d="M14 30 L30 20 L44 30" stroke="#616161" stroke-width="4" fill="none"/>212 <rect x="46" y="20" width="16" height="10" fill="#616161"/>213 </svg>214 <div class="time">55 min</div>215 </div>216 <div class="mode selected">217 <svg width="72" height="48" viewBox="0 0 72 48">218 <rect x="10" y="10" width="52" height="28" rx="6" fill="#1a73e8"/>219 <circle cx="24" cy="34" r="4" fill="#fff"/>220 <circle cx="48" cy="34" r="4" fill="#fff"/>221 </svg>222 <div class="time">1 hr 16</div>223 </div>224 <div class="mode">225 <svg width="72" height="48" viewBox="0 0 72 48">226 <path d="M18 36 L36 12 L54 36" stroke="#616161" stroke-width="6" fill="none" stroke-linecap="round"/>227 </svg>228 <div class="time">5 hr</div>229 </div>230 </div>231 232 <!-- filter bar -->233 <div class="filter-bar">234 <div class="pill">235 <span>Depart at 3:43 PM</span>236 <span class="dropdown">237 <span style="color:#7a7a7a; font-size:34px;">▼</span>238 </span>239 </div>240 <div class="pill">241 <span>All modes</span>242 <span class="dropdown">243 <span style="color:#7a7a7a; font-size:34px;">▼</span>244 </span>245 </div>246 <div class="pill">247 <span>Best route</span>248 <span class="dropdown">249 <span style="color:#7a7a7a; font-size:34px;">▼</span>250 </span>251 </div>252 </div>253 </div>254 255 <div class="divider"></div>256 257 <!-- Content cards -->258 <div class="content">259 <div class="section-label">EARLIEST ARRIVAL</div>260 <div class="card" style="padding-bottom: 36px;">261 <div class="route-row">262 <!-- car -->263 <svg width="64" height="40" viewBox="0 0 64 40">264 <rect x="6" y="8" width="52" height="18" rx="6" fill="#616161"/>265 <circle cx="20" cy="32" r="5" fill="#616161"/>266 <circle cx="44" cy="32" r="5" fill="#616161"/>267 </svg>268 <span class="chev">›</span>269 <!-- metro logo (red circle with bar) -->270 <svg width="44" height="44" viewBox="0 0 44 44">271 <circle cx="22" cy="22" r="20" fill="#EA4335"/>272 <rect x="10" y="20" width="24" height="4" fill="#fff"/>273 </svg>274 <span class="chev">›</span>275 <span class="yellow-pill">Yellow Line</span>276 <span class="chev">›</span>277 <!-- auto rickshaw (green) -->278 <svg width="46" height="34" viewBox="0 0 46 34">279 <rect x="4" y="8" width="26" height="12" rx="3" fill="#2E7D32"/>280 <rect x="30" y="12" width="10" height="8" fill="#2E7D32"/>281 <circle cx="16" cy="26" r="4" fill="#2E7D32"/>282 <circle cx="34" cy="26" r="4" fill="#2E7D32"/>283 </svg>284 <span class="tiny-note">5</span>285 </div>286 <div class="details">Leave by 3:43 PM · Normal traffic</div>287 <div class="details subtle">Every 6 min from Arjan Garh</div>288 <div class="result-meta">289 <div class="duration">1 hr 16 min</div>290 <div class="price">₹81–84</div>291 </div>292 </div>293 294 <div class="divider"></div>295 296 <div class="section-label">MORE BY BUS</div>297 298 <!-- Bus card 1 -->299 <div class="card bus-card">300 <div class="route-row">301 <!-- walking -->302 <svg width="46" height="40" viewBox="0 0 46 40">303 <circle cx="18" cy="10" r="5" fill="#757575"/>304 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />305 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />306 </svg>307 <span class="walk-count">22</span>308 <span class="chev">›</span>309 <!-- bus -->310 <svg width="50" height="40" viewBox="0 0 50 40">311 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>312 <circle cx="16" cy="30" r="4" fill="#616161"/>313 <circle cx="34" cy="30" r="4" fill="#616161"/>314 </svg>315 <span class="number-pill">519</span>316 <span class="chev">›</span>317 <svg width="50" height="40" viewBox="0 0 50 40">318 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>319 <circle cx="16" cy="30" r="4" fill="#616161"/>320 <circle cx="34" cy="30" r="4" fill="#616161"/>321 </svg>322 <span class="number-pill">501</span>323 <span class="number-pill">502</span>324 <span class="chev">›</span>325 <svg width="46" height="40" viewBox="0 0 46 40">326 <circle cx="18" cy="10" r="5" fill="#757575"/>327 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />328 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />329 </svg>330 <span class="walk-count">6</span>331 </div>332 <div class="time-cost">3:56 PM – 5:47 PM · ₹30</div>333 <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>334 <div class="result-meta" style="top: 20px;">335 <div class="duration">1 hr 51 min</div>336 </div>337 <div class="start-btn">338 <svg width="34" height="34" viewBox="0 0 34 34">339 <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>340 </svg>341 <span>Start</span>342 </div>343 </div>344 345 <div class="divider"></div>346 347 <!-- Bus card 2 -->348 <div class="card bus-card">349 <div class="route-row">350 <svg width="46" height="40" viewBox="0 0 46 40">351 <circle cx="18" cy="10" r="5" fill="#757575"/>352 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />353 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />354 </svg>355 <span class="walk-count">22</span>356 <span class="chev">›</span>357 <svg width="50" height="40" viewBox="0 0 50 40">358 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>359 <circle cx="16" cy="30" r="4" fill="#616161"/>360 <circle cx="34" cy="30" r="4" fill="#616161"/>361 </svg>362 <span class="number-pill">519</span>363 <span class="chev">›</span>364 <svg width="50" height="40" viewBox="0 0 50 40">365 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>366 <circle cx="16" cy="30" r="4" fill="#616161"/>367 <circle cx="34" cy="30" r="4" fill="#616161"/>368 </svg>369 <span class="chev">›</span>370 <svg width="46" height="40" viewBox="0 0 46 40">371 <circle cx="18" cy="10" r="5" fill="#757575"/>372 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />373 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />374 </svg>375 <span class="walk-count">6</span>376 </div>377 <div class="time-cost">3:56 PM – 5:50 PM · ₹30</div>378 <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>379 <div class="result-meta" style="top: 20px;">380 <div class="duration">1 hr 54 min</div>381 </div>382 <div class="start-btn">383 <svg width="34" height="34" viewBox="0 0 34 34">384 <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>385 </svg>386 <span>Start</span>387 </div>388 </div>389 390 <div class="divider"></div>391 392 <!-- Bus card 3 -->393 <div class="card bus-card">394 <div class="route-row">395 <svg width="46" height="40" viewBox="0 0 46 40">396 <circle cx="18" cy="10" r="5" fill="#757575"/>397 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />398 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />399 </svg>400 <span class="walk-count">22</span>401 <span class="chev">›</span>402 <svg width="50" height="40" viewBox="0 0 50 40">403 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>404 <circle cx="16" cy="30" r="4" fill="#616161"/>405 <circle cx="34" cy="30" r="4" fill="#616161"/>406 </svg>407 <span class="number-pill">519</span>408 <span class="chev">›</span>409 <svg width="50" height="40" viewBox="0 0 50 40">410 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>411 <circle cx="16" cy="30" r="4" fill="#616161"/>412 <circle cx="34" cy="30" r="4" fill="#616161"/>413 </svg>414 <span class="chev">›</span>415 <svg width="50" height="40" viewBox="0 0 50 40">416 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>417 <circle cx="16" cy="30" r="4" fill="#616161"/>418 <circle cx="34" cy="30" r="4" fill="#616161"/>419 </svg>420 <span class="number-pill">507</span>421 <span class="chev">›</span>422 <svg width="46" height="40" viewBox="0 0 46 40">423 <circle cx="18" cy="10" r="5" fill="#757575"/>424 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />425 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />426 </svg>427 <span class="walk-count">6</span>428 </div>429 <div class="time-cost">3:56 PM – 6:01 PM · ₹30</div>430 <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>431 <div class="result-meta" style="top: 20px;">432 <div class="duration">2 hr 5 min</div>433 </div>434 <div class="start-btn">435 <svg width="34" height="34" viewBox="0 0 34 34">436 <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>437 </svg>438 <span>Start</span>439 </div>440 </div>441 442 <div class="divider"></div>443 444 <!-- Final summary row -->445 <div class="card" style="padding-bottom: 60px;">446 <div class="route-row">447 <svg width="46" height="40" viewBox="0 0 46 40">448 <circle cx="18" cy="10" r="5" fill="#757575"/>449 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />450 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />451 </svg>452 <span class="walk-count">22</span>453 <span class="chev">›</span>454 <svg width="50" height="40" viewBox="0 0 50 40">455 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>456 <circle cx="16" cy="30" r="4" fill="#616161"/>457 <circle cx="34" cy="30" r="4" fill="#616161"/>458 </svg>459 <span class="number-pill">519</span>460 <span class="chev">›</span>461 <svg width="50" height="40" viewBox="0 0 50 40">462 <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>463 <circle cx="16" cy="30" r="4" fill="#616161"/>464 <circle cx="34" cy="30" r="4" fill="#616161"/>465 </svg>466 <span class="chev">›</span>467 <svg width="46" height="40" viewBox="0 0 46 40">468 <circle cx="18" cy="10" r="5" fill="#757575"/>469 <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />470 <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />471 </svg>472 <span class="walk-count">6</span>473 </div>474 <div class="result-meta" style="top: 20px;">475 <div class="duration">1 hr 50 min</div>476 </div>477 </div>478 </div>479 480 <div class="home-handle"></div>481</div>482</body>483</html>