GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Transit Routes UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F7F7F7;13 }14 15 /* Status bar */16 .statusbar {17 height: 120px;18 background: #1f2d1f;19 color: #fff;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 40px;24 box-sizing: border-box;25 }26 .status-left { display: flex; align-items: center; gap: 24px; }27 .status-time { font-size: 44px; font-weight: 600; letter-spacing: 1px; }28 .mini-pill {29 background: #2a3a2a;30 color: #d9ffd9;31 border: 1px solid #3d4d3d;32 padding: 8px 16px;33 border-radius: 10px;34 font-size: 26px;35 line-height: 1;36 }37 .status-right { display: flex; align-items: center; gap: 22px; }38 .status-icon { width: 40px; height: 40px; }39 40 /* Header Pills */41 .header {42 padding: 26px 40px 0 40px;43 display: grid;44 grid-template-columns: 70px 1fr;45 grid-row-gap: 26px;46 align-items: center;47 }48 .back-btn {49 width: 70px; height: 70px; border-radius: 18px;50 display: flex; align-items: center; justify-content: center;51 }52 .back-btn svg { width: 48px; height: 48px; fill: #65b665; }53 .pill {54 background: #E6E7E8;55 border-radius: 24px;56 padding: 26px 30px;57 display: flex;58 align-items: center;59 justify-content: space-between;60 box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);61 }62 .pill .label {63 font-size: 44px;64 color: #1d1d1d;65 font-weight: 700;66 }67 .pill-right {68 display: flex; align-items: center; gap: 26px;69 }70 .icon-btn {71 width: 70px; height: 70px; border-radius: 16px;72 background: #f2f2f2; border: 1px solid #d0d0d0;73 display: flex; align-items: center; justify-content: center;74 }75 .icon-btn svg { width: 40px; height: 40px; }76 .divider {77 height: 4px;78 margin: 22px 80px 0;79 background: #DADADA;80 border-radius: 4px;81 }82 83 /* Title */84 .title {85 text-align: center;86 color: #3fa34d;87 font-size: 46px;88 font-weight: 800;89 margin: 36px 0 10px;90 }91 92 /* Cards list */93 .cards { padding: 0 24px 40px; }94 .card {95 width: 1032px;96 margin: 26px auto;97 background: #ffffff;98 border: 2px solid #E2E2E2;99 border-radius: 36px;100 box-shadow: 0 2px 0 rgba(0,0,0,0.03);101 padding: 30px 30px 34px 30px;102 box-sizing: border-box;103 }104 .card-header {105 display: flex; align-items: center; justify-content: space-between;106 margin-bottom: 22px;107 }108 .time-range { font-size: 38px; color: #666; }109 .duration { font-size: 40px; color: #1d4e22; font-weight: 800; }110 111 .route {112 display: grid;113 grid-template-columns: 90px 1fr;114 align-items: start;115 grid-column-gap: 24px;116 }117 .timeline {118 position: relative;119 width: 90px;120 padding-top: 6px;121 }122 .dot {123 width: 36px; height: 36px; background: #66C266; border: 4px solid #DFF3DF; border-radius: 50%;124 margin-left: 20px;125 }126 .dash {127 border-left: 4px dashed #9ad49a;128 height: 72px;129 margin: 8px 0 8px 36px;130 }131 132 .route-text .stop {133 font-size: 44px;134 color: #111; font-weight: 800;135 margin-bottom: 18px;136 }137 .route-text .stop.secondary { color: #1a1a1a; }138 139 /* Sequence strip */140 .sequence {141 margin: 22px 0 0 0;142 position: relative;143 height: 120px;144 background: #EBEBEB;145 border-radius: 24px;146 display: flex; align-items: center; justify-content: flex-start;147 padding-left: 60px;148 gap: 52px;149 overflow: visible;150 }151 .sequence .arrow {152 position: absolute;153 right: -2px; top: 0;154 width: 0; height: 0;155 border-top: 60px solid transparent;156 border-bottom: 60px solid transparent;157 border-left: 60px solid #E0E0E0;158 filter: drop-shadow(0 0 0 rgba(0,0,0,0));159 }160 .seq-icon { width: 70px; height: 70px; }161 .seq-walk path, .seq-bus rect, .seq-bus circle { fill: #3fa34d; }162 163 /* Helper icons styling */164 .green-stroke { stroke: #3fa34d; fill: none; stroke-width: 8; }165 .grey-fill { fill: #757575; }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status bar -->172 <div class="statusbar">173 <div class="status-left">174 <div class="status-time">12:55</div>175 <div class="mini-pill">LR</div>176 <div class="mini-pill">LR</div>177 <div class="mini-pill">△</div>178 </div>179 <div class="status-right">180 <!-- Simple WiFi icon -->181 <svg class="status-icon" viewBox="0 0 24 24">182 <path fill="#ffffff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm5 5c3-2 7-2 10 0l-2 2c-2-1-4-1-6 0l-2-2zm5 6l3-3-3-3-3 3 3 3z"/>183 </svg>184 <!-- Battery icon -->185 <svg class="status-icon" viewBox="0 0 24 24">186 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="#ffffff"/>187 <rect x="5" y="8" width="12" height="8" fill="#1f2d1f"/>188 <rect x="5" y="8" width="9" height="8" fill="#7CDA7C"/>189 <rect x="19" y="10" width="2" height="4" fill="#ffffff"/>190 </svg>191 </div>192 </div>193 194 <!-- Header with back and pills -->195 <div class="header">196 <div class="back-btn">197 <svg viewBox="0 0 24 24"><path d="M15 4l-8 8 8 8" class="green-stroke"/></svg>198 </div>199 200 <div class="pill">201 <div class="label">Madina Munwarah 411</div>202 <div class="pill-right">203 <div class="icon-btn">204 <!-- Map pin -->205 <svg viewBox="0 0 24 24">206 <path d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6a6a6a"/>207 </svg>208 </div>209 <div class="icon-btn">210 <!-- Star outline -->211 <svg viewBox="0 0 24 24">212 <path d="M12 3l2.9 6h6.1l-5 4.2 1.9 6.3L12 16l-5.9 3.5 1.9-6.3-5-4.2h6.1L12 3z" fill="none" stroke="#6a6a6a" stroke-width="2"/>213 </svg>214 </div>215 </div>216 </div>217 218 <div></div>219 <div class="pill">220 <div class="label">Makkah Al Mukarramah 401</div>221 <div class="pill-right">222 <div class="icon-btn">223 <!-- Map pin -->224 <svg viewBox="0 0 24 24">225 <path d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6a6a6a"/>226 </svg>227 </div>228 <div class="icon-btn">229 <!-- Up/Down arrows -->230 <svg viewBox="0 0 24 24">231 <path d="M8 4l-4 4h3v8h2V8h3L8 4zm8 16l4-4h-3V8h-2v8h-3l4 4z" fill="#6a6a6a"/>232 </svg>233 </div>234 </div>235 </div>236 </div>237 238 <div class="divider"></div>239 240 <div class="title">Favourite Routes</div>241 242 <div class="cards">243 244 <!-- Card 1 -->245 <div class="card">246 <div class="card-header">247 <div class="time-range">12:57 - Arrive 14:35</div>248 <div class="duration">85 min</div>249 </div>250 251 <div class="route">252 <div class="timeline">253 <div class="dot"></div>254 <div class="dash"></div>255 <div class="dot"></div>256 </div>257 <div class="route-text">258 <div class="stop">Madina Munwarah 311</div>259 <div class="stop secondary">Makkah Al Mukarramah 401</div>260 261 <div class="sequence">262 <!-- Bus -->263 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">264 <rect x="3" y="6" width="18" height="9" rx="2"></rect>265 <rect x="5" y="8" width="6" height="4"></rect>266 <rect x="13" y="8" width="6" height="4"></rect>267 <circle cx="8" cy="17" r="2"></circle>268 <circle cx="16" cy="17" r="2"></circle>269 </svg>270 <!-- Walk -->271 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">272 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>273 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>274 </svg>275 <!-- Bus -->276 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">277 <rect x="3" y="6" width="18" height="9" rx="2"></rect>278 <rect x="5" y="8" width="6" height="4"></rect>279 <rect x="13" y="8" width="6" height="4"></rect>280 <circle cx="8" cy="17" r="2"></circle>281 <circle cx="16" cy="17" r="2"></circle>282 </svg>283 <!-- Walk -->284 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">285 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>286 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>287 </svg>288 <!-- Bus -->289 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">290 <rect x="3" y="6" width="18" height="9" rx="2"></rect>291 <rect x="5" y="8" width="6" height="4"></rect>292 <rect x="13" y="8" width="6" height="4"></rect>293 <circle cx="8" cy="17" r="2"></circle>294 <circle cx="16" cy="17" r="2"></circle>295 </svg>296 <div class="arrow"></div>297 </div>298 </div>299 </div>300 </div>301 302 <!-- Card 2 -->303 <div class="card">304 <div class="card-header">305 <div class="time-range">12:57 - Arrive 14:39</div>306 <div class="duration">82 min</div>307 </div>308 309 <div class="route">310 <div class="timeline">311 <div class="dot"></div>312 <div class="dash"></div>313 <div class="dot"></div>314 </div>315 <div class="route-text">316 <div class="stop">Madina Munwarah 311</div>317 <div class="stop secondary">Makkah Al Mukarramah 301</div>318 319 <div class="sequence">320 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">321 <rect x="3" y="6" width="18" height="9" rx="2"></rect>322 <rect x="5" y="8" width="6" height="4"></rect>323 <rect x="13" y="8" width="6" height="4"></rect>324 <circle cx="8" cy="17" r="2"></circle>325 <circle cx="16" cy="17" r="2"></circle>326 </svg>327 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">328 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>329 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>330 </svg>331 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">332 <rect x="3" y="6" width="18" height="9" rx="2"></rect>333 <rect x="5" y="8" width="6" height="4"></rect>334 <rect x="13" y="8" width="6" height="4"></rect>335 <circle cx="8" cy="17" r="2"></circle>336 <circle cx="16" cy="17" r="2"></circle>337 </svg>338 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">339 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>340 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>341 </svg>342 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">343 <rect x="3" y="6" width="18" height="9" rx="2"></rect>344 <rect x="5" y="8" width="6" height="4"></rect>345 <rect x="13" y="8" width="6" height="4"></rect>346 <circle cx="8" cy="17" r="2"></circle>347 <circle cx="16" cy="17" r="2"></circle>348 </svg>349 <div class="arrow"></div>350 </div>351 </div>352 </div>353 </div>354 355 <!-- Card 3 -->356 <div class="card">357 <div class="card-header">358 <div class="time-range">13:12 - Arrive 14:55</div>359 <div class="duration">85 min</div>360 </div>361 362 <div class="route">363 <div class="timeline">364 <div class="dot"></div>365 <div class="dash"></div>366 <div class="dot"></div>367 </div>368 <div class="route-text">369 <div class="stop">Madina Munwarah 311</div>370 <div class="stop secondary">Makkah Al Mukarramah 401</div>371 372 <div class="sequence">373 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">374 <rect x="3" y="6" width="18" height="9" rx="2"></rect>375 <rect x="5" y="8" width="6" height="4"></rect>376 <rect x="13" y="8" width="6" height="4"></rect>377 <circle cx="8" cy="17" r="2"></circle>378 <circle cx="16" cy="17" r="2"></circle>379 </svg>380 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">381 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>382 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>383 </svg>384 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">385 <rect x="3" y="6" width="18" height="9" rx="2"></rect>386 <rect x="5" y="8" width="6" height="4"></rect>387 <rect x="13" y="8" width="6" height="4"></rect>388 <circle cx="8" cy="17" r="2"></circle>389 <circle cx="16" cy="17" r="2"></circle>390 </svg>391 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">392 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>393 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>394 </svg>395 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">396 <rect x="3" y="6" width="18" height="9" rx="2"></rect>397 <rect x="5" y="8" width="6" height="4"></rect>398 <rect x="13" y="8" width="6" height="4"></rect>399 <circle cx="8" cy="17" r="2"></circle>400 <circle cx="16" cy="17" r="2"></circle>401 </svg>402 <div class="arrow"></div>403 </div>404 </div>405 </div>406 </div>407 408 <!-- Card 4 -->409 <div class="card">410 <div class="card-header">411 <div class="time-range">13:27 - Arrive 14:59</div>412 <div class="duration">82 min</div>413 </div>414 415 <div class="route">416 <div class="timeline">417 <div class="dot"></div>418 <div class="dash"></div>419 <div class="dot"></div>420 </div>421 <div class="route-text">422 <div class="stop">Madina Munwarah 311</div>423 <div class="stop secondary">Makkah Al Mukarramah 301</div>424 425 <div class="sequence">426 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">427 <rect x="3" y="6" width="18" height="9" rx="2"></rect>428 <rect x="5" y="8" width="6" height="4"></rect>429 <rect x="13" y="8" width="6" height="4"></rect>430 <circle cx="8" cy="17" r="2"></circle>431 <circle cx="16" cy="17" r="2"></circle>432 </svg>433 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">434 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>435 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>436 </svg>437 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">438 <rect x="3" y="6" width="18" height="9" rx="2"></rect>439 <rect x="5" y="8" width="6" height="4"></rect>440 <rect x="13" y="8" width="6" height="4"></rect>441 <circle cx="8" cy="17" r="2"></circle>442 <circle cx="16" cy="17" r="2"></circle>443 </svg>444 <svg class="seq-icon seq-walk" viewBox="0 0 24 24">445 <circle cx="12" cy="5" r="3" fill="#3fa34d"></circle>446 <path d="M12 8l-3 4 2 1 1-2 2 2 2 6h2l-2-7-2-2 1-2" fill="none" stroke="#3fa34d" stroke-width="2"></path>447 </svg>448 <svg class="seq-icon seq-bus" viewBox="0 0 24 24">449 <rect x="3" y="6" width="18" height="9" rx="2"></rect>450 <rect x="5" y="8" width="6" height="4"></rect>451 <rect x="13" y="8" width="6" height="4"></rect>452 <circle cx="8" cy="17" r="2"></circle>453 <circle cx="16" cy="17" r="2"></circle>454 </svg>455 <div class="arrow"></div>456 </div>457 </div>458 </div>459 </div>460 461 </div>462 463</div>464</body>465</html>