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">6<title>Transit Directions UI - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1b1d1f;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 background: #0f1013;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-weight: 600;31 font-size: 40px;32 }33 .sb-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .sb-dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.7; }40 .sb-icon { width: 44px; height: 44px; opacity: 0.85; }41 42 /* Header / chips */43 .header {44 position: absolute;45 top: 110px;46 left: 0;47 right: 0;48 padding: 30px 36px 24px 36px;49 box-sizing: border-box;50 background: #191a1d;51 border-bottom: 1px solid #2a2c30;52 }53 .back-row {54 display: flex;55 align-items: center;56 gap: 26px;57 }58 .back-icon { width: 54px; height: 54px; }59 .chip-stack {60 flex: 1;61 display: flex;62 flex-direction: column;63 gap: 22px;64 }65 .chip {66 background: #26282c;67 border-radius: 20px;68 padding: 26px 28px;69 display: flex;70 align-items: center;71 gap: 22px;72 box-shadow: inset 0 0 0 1px #31343a;73 font-size: 36px;74 line-height: 1.2;75 }76 .dot-grey, .dot-orange {77 width: 26px; height: 26px; border-radius: 50%;78 flex: 0 0 26px;79 }80 .dot-grey { background: #b0b3b8; }81 .dot-orange { background: #ff6d00; }82 .chip-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }83 .swap-icon { width: 56px; height: 56px; opacity: 0.7; }84 85 .prefs-wrap {86 display: flex;87 align-items: center;88 margin-left: 24px;89 }90 .prefs-btn {91 border: 1px solid #6a6f78;92 color: #e9eaee;93 border-radius: 16px;94 padding: 18px 26px;95 background: #2b2d31;96 display: inline-flex;97 align-items: center;98 gap: 14px;99 font-size: 32px;100 }101 .prefs-count {102 position: relative;103 margin-left: 14px;104 }105 .badge {106 position: absolute;107 top: -16px; right: -20px;108 background: #2d8cff;109 color: #fff;110 font-weight: 700;111 border-radius: 16px;112 font-size: 26px;113 padding: 6px 12px;114 }115 .sliders-icon { width: 46px; height: 46px; }116 117 /* Depart row */118 .depart-row {119 position: absolute;120 top: 310px;121 left: 0;122 right: 0;123 padding: 22px 36px;124 box-sizing: border-box;125 display: flex;126 align-items: center;127 gap: 20px;128 font-size: 34px;129 color: #c7c9ce;130 }131 .depart-row .dropdown {132 margin-left: 10px;133 display: inline-flex;134 align-items: center;135 gap: 10px;136 color: #e3e4e8;137 }138 .clock-icon, .chev-icon { width: 44px; height: 44px; opacity: 0.8; }139 140 /* Time strip */141 .time-strip {142 position: absolute;143 top: 386px;144 left: 0;145 right: 0;146 height: 120px;147 background: #1f2023;148 border-top: 1px solid #2a2c30;149 border-bottom: 1px solid #2a2c30;150 display: flex;151 align-items: center;152 padding: 0 36px;153 box-sizing: border-box;154 color: #cfd1d6;155 font-size: 34px;156 }157 .time-strip .center {158 margin: 0 auto;159 color: #ffffff;160 font-weight: 700;161 }162 .time-strip .side {163 display: inline-flex;164 align-items: center;165 gap: 14px;166 opacity: 0.85;167 }168 .time-strip .side .chev-icon { width: 40px; height: 40px; }169 170 /* Suggested routes section */171 .section {172 position: absolute;173 top: 506px;174 left: 0;175 right: 0;176 padding: 30px 36px 0 36px;177 box-sizing: border-box;178 }179 .section h3 {180 margin: 0;181 font-size: 38px;182 font-weight: 700;183 color: #e3e4e8;184 }185 .map-row {186 margin-top: 36px;187 padding: 32px 0;188 border-top: 1px solid #2a2c30;189 border-bottom: 1px solid #2a2c30;190 display: flex;191 align-items: center;192 justify-content: space-between;193 color: #cfd1d6;194 font-size: 34px;195 }196 .compare-btn {197 background: #2d8cff;198 color: #fff;199 border-radius: 24px;200 padding: 20px 28px;201 display: inline-flex;202 align-items: center;203 gap: 18px;204 font-size: 34px;205 box-shadow: 0 4px 12px rgba(45,140,255,0.4);206 }207 .map-icon { width: 44px; height: 44px; }208 209 /* Route card */210 .route-meta {211 margin-top: 28px;212 font-size: 42px;213 color: #ffffff;214 }215 .route-meta .sub {216 color: #b7bbc1;217 font-size: 34px;218 font-weight: 500;219 margin-left: 16px;220 }221 .route-card {222 margin-top: 24px;223 background: #24262a;224 border-radius: 20px;225 padding: 22px;226 box-shadow: inset 0 0 0 1px #32353b;227 }228 .route-row {229 display: flex;230 align-items: center;231 gap: 22px;232 }233 .walk-icon, .bus-icon, .arrow-icon { width: 50px; height: 50px; opacity: 0.9; }234 .bus-chip {235 flex: 0 1 auto;236 background: #2e3136;237 border: 1px solid #4a4e55;238 border-radius: 14px;239 padding: 16px 18px;240 font-size: 34px;241 color: #ffffff;242 display: inline-flex;243 align-items: center;244 gap: 14px;245 position: relative;246 }247 .bus-chip::after {248 content: "";249 position: absolute;250 left: 0; right: 0; bottom: -6px;251 height: 8px;252 background: #ff8f3a;253 border-radius: 8px;254 }255 .route-details {256 margin-top: 22px;257 font-size: 34px;258 color: #cfd1d6;259 }260 261 /* Bottom gesture bar */262 .bottom-area {263 position: absolute;264 bottom: 0;265 left: 0;266 width: 1080px;267 height: 120px;268 background: #000;269 display: flex;270 align-items: center;271 justify-content: center;272 }273 .gesture {274 width: 240px;275 height: 16px;276 background: #e9e9ea;277 border-radius: 12px;278 opacity: 0.9;279 }280</style>281</head>282<body>283<div id="render-target">284 285 <!-- Status Bar -->286 <div class="status-bar">287 <div>4:20</div>288 <div class="sb-right">289 <!-- Simple status icons -->290 <svg class="sb-icon" viewBox="0 0 24 24">291 <circle cx="12" cy="12" r="10" fill="#fff"></circle>292 </svg>293 <svg class="sb-icon" viewBox="0 0 24 24">294 <rect x="4" y="6" width="16" height="12" rx="2" fill="#fff"></rect>295 </svg>296 <div class="sb-dot"></div>297 <svg class="sb-icon" viewBox="0 0 24 24">298 <path d="M12 3l4 4h-3v10h-2V7H8l4-4z" fill="#fff"></path>299 </svg>300 <svg class="sb-icon" viewBox="0 0 24 24">301 <path d="M12 3a6 6 0 016 6v4l2 2H4l2-2V9a6 6 0 016-6z" fill="#fff"></path>302 </svg>303 </div>304 </div>305 306 <!-- Header area with back and chips -->307 <div class="header">308 <div class="back-row">309 <svg class="back-icon" viewBox="0 0 24 24">310 <polyline points="15,5 7,12 15,19" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>311 </svg>312 313 <div class="chip-stack">314 <div class="chip">315 <div class="dot-grey"></div>316 <div class="chip-text">Pacific Mall Tagore Garden, Najafga...</div>317 <svg class="swap-icon" viewBox="0 0 24 24">318 <path d="M7 6h10l-3-3M17 18H7l3 3" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>319 </svg>320 </div>321 <div class="chip">322 <div class="dot-orange"></div>323 <div class="chip-text">Rajiv Chowk Flyover, Shanti Nagar, Shivaji ...</div>324 </div>325 </div>326 327 <div class="prefs-wrap">328 <div class="prefs-btn">329 <svg class="sliders-icon" viewBox="0 0 24 24">330 <path d="M4 6h10M4 12h16M4 18h7" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>331 <circle cx="16" cy="6" r="2" fill="#fff"></circle>332 <circle cx="10" cy="12" r="2" fill="#fff"></circle>333 <circle cx="13" cy="18" r="2" fill="#fff"></circle>334 </svg>335 <span>Preferences</span>336 <span class="prefs-count"><span class="badge">2</span></span>337 </div>338 </div>339 </div>340 </div>341 342 <!-- Depart now row -->343 <div class="depart-row">344 <svg class="clock-icon" viewBox="0 0 24 24">345 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfd1d6" stroke-width="2"></circle>346 <path d="M12 7v6l4 2" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round"></path>347 </svg>348 <span>Depart now</span>349 <span class="dropdown">350 <svg class="chev-icon" viewBox="0 0 24 24">351 <polyline points="6,9 12,15 18,9" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>352 </svg>353 </span>354 </div>355 356 <!-- Time strip -->357 <div class="time-strip">358 <div class="side">359 <svg class="chev-icon" viewBox="0 0 24 24">360 <polyline points="15,5 7,12 15,19" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>361 </svg>362 <span>- 15 min</span>363 </div>364 <div class="center">4:20 pm</div>365 <div class="side">366 <span>+ 15 min</span>367 <svg class="chev-icon" viewBox="0 0 24 24">368 <polyline points="9,5 17,12 9,19" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>369 </svg>370 </div>371 </div>372 373 <!-- Suggested Routes -->374 <div class="section">375 <h3>Suggested Routes</h3>376 377 <div class="map-row">378 <div>View routes on map</div>379 <div class="compare-btn">380 <svg class="map-icon" viewBox="0 0 24 24">381 <path d="M4 6l6-2 6 2 4-1v15l-4 1-6-2-6 2V6z" fill="#fff"></path>382 <circle cx="10" cy="11" r="2" fill="#2d8cff"></circle>383 </svg>384 <span>Compare</span>385 </div>386 </div>387 388 <div class="route-meta">389 1 hr 52 min <span class="sub">Arrive at 6:13 pm</span>390 </div>391 392 <div class="route-card">393 <div class="route-row">394 <svg class="walk-icon" viewBox="0 0 24 24">395 <path d="M12 4a2 2 0 110 4 2 2 0 010-4zM8 12l3-2 3 2 2 6h-2l-1-3-2-1-2 1-1 3H6l2-6z" fill="#cfd1d6"></path>396 </svg>397 <svg class="arrow-icon" viewBox="0 0 24 24">398 <polyline points="8,6 16,12 8,18" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>399 </svg>400 <div class="bus-chip">401 <svg class="bus-icon" viewBox="0 0 24 24">402 <rect x="4" y="5" width="16" height="12" rx="2" fill="#cfd1d6"></rect>403 <circle cx="8" cy="18" r="1.5" fill="#cfd1d6"></circle>404 <circle cx="16" cy="18" r="1.5" fill="#cfd1d6"></circle>405 </svg>406 <span>410CL / 410 / 810LSTL / 810</span>407 </div>408 <svg class="arrow-icon" viewBox="0 0 24 24">409 <polyline points="8,6 16,12 8,18" fill="none" stroke="#cfd1d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>410 </svg>411 <svg class="walk-icon" viewBox="0 0 24 24">412 <path d="M12 4a2 2 0 110 4 2 2 0 010-4zM8 12l3-2 3 2 2 6h-2l-1-3-2-1-2 1-1 3H6l2-6z" fill="#cfd1d6"></path>413 </svg>414 <svg class="bus-icon" viewBox="0 0 24 24">415 <rect x="4" y="5" width="16" height="12" rx="2" fill="#cfd1d6"></rect>416 <circle cx="8" cy="18" r="1.5" fill="#cfd1d6"></circle>417 <circle cx="16" cy="18" r="1.5" fill="#cfd1d6"></circle>418 </svg>419 </div>420 421 <div class="route-details">422 Leaves at 4:25 pm from Subhash Nagar Crossing / Mukherji Park423 </div>424 </div>425 </div>426 427 <!-- Bottom gesture bar -->428 <div class="bottom-area">429 <div class="gesture"></div>430 </div>431 432</div>433</body>434</html>