GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Transit UI 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 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #1f2a1f;24 color: #ffffff;25 display: flex;26 align-items: center;27 padding: 0 28px;28 box-sizing: border-box;29 }30 .status-time {31 font-size: 44px;32 font-weight: 700;33 letter-spacing: 1px;34 }35 .status-icons {36 margin-left: 26px;37 display: flex;38 gap: 22px;39 align-items: center;40 font-size: 34px;41 }42 .status-icons .chip-icon {43 background: rgba(255,255,255,0.12);44 color: #fff;45 padding: 8px 14px;46 border-radius: 8px;47 }48 .status-icons svg { width: 36px; height: 36px; fill: #ffffff; }49 50 /* Header chips area */51 .header-area {52 position: absolute;53 top: 110px;54 left: 0;55 width: 1080px;56 padding: 22px 30px 10px 30px;57 box-sizing: border-box;58 background: #ffffff;59 }60 .chip-row {61 display: flex;62 align-items: center;63 gap: 20px;64 }65 .back-btn {66 width: 80px;67 height: 80px;68 border-radius: 40px;69 display: flex;70 align-items: center;71 justify-content: center;72 border: 2px solid #a5d6a7;73 }74 .back-btn svg { width: 36px; height: 36px; fill: #3a5f39; }75 .chip {76 flex: 1;77 background: #f1f2f3;78 border-radius: 20px;79 padding: 22px 26px;80 box-sizing: border-box;81 display: flex;82 align-items: center;83 justify-content: space-between;84 }85 .chip .title {86 font-size: 44px;87 color: #222;88 font-weight: 700;89 }90 .chip .small-icon {91 display: flex;92 align-items: center;93 gap: 10px;94 }95 .chip .small-icon svg { width: 40px; height: 40px; fill: #9e9e9e; }96 .side-action {97 width: 90px;98 height: 90px;99 margin-left: 10px;100 display: flex;101 align-items: center;102 justify-content: center;103 }104 .side-action svg { width: 54px; height: 54px; fill: #6abf69; }105 .divider {106 width: 100%;107 height: 2px;108 background: #e0e0e0;109 margin: 18px 0 12px;110 }111 .fav-title {112 text-align: center;113 font-size: 46px;114 color: #53a653;115 font-weight: 700;116 }117 118 /* Map section */119 .duration-row {120 position: absolute;121 top: 395px;122 left: 30px;123 width: 1020px;124 display: flex;125 align-items: center;126 justify-content: space-between;127 padding-right: 20px;128 box-sizing: border-box;129 }130 .duration {131 font-size: 64px;132 font-weight: 800;133 color: #444;134 }135 .share-btn svg { width: 52px; height: 52px; fill: #3a5f39; }136 137 .map-box {138 position: absolute;139 top: 470px;140 left: 30px;141 width: 1020px;142 height: 900px;143 background: #E0E0E0;144 border: 1px solid #BDBDBD;145 color: #757575;146 display: flex;147 justify-content: center;148 align-items: center;149 font-size: 40px;150 }151 152 /* Route card overlay */153 .route-card {154 position: absolute;155 top: 1230px;156 left: 0;157 width: 1080px;158 height: 980px;159 background: #ffffff;160 border-top-left-radius: 28px;161 border-top-right-radius: 28px;162 box-shadow: 0 -10px 20px rgba(0,0,0,0.06);163 padding: 30px 40px;164 box-sizing: border-box;165 }166 .route-header {167 display: flex;168 align-items: baseline;169 gap: 16px;170 }171 .bus-icon {172 width: 60px;173 height: 60px;174 border-radius: 10px;175 background: #e8f5e9;176 display: flex;177 align-items: center;178 justify-content: center;179 margin-right: 8px;180 }181 .bus-icon svg { width: 40px; height: 40px; fill: #3a5f39; }182 .route-title {183 font-size: 50px;184 font-weight: 800;185 color: #1f1f1f;186 }187 .route-sub {188 font-size: 42px;189 color: #333;190 font-weight: 700;191 }192 .depart {193 margin-top: 10px;194 font-size: 36px;195 color: #7a7a7a;196 }197 .summary {198 margin-top: 34px;199 font-size: 40px;200 color: #555;201 display: flex;202 align-items: center;203 gap: 16px;204 }205 .summary .caret {206 width: 26px; height: 26px; border: 6px solid #3a5f39; border-left: 0; border-top: 0; transform: rotate(45deg);207 display: inline-block;208 margin-left: 6px;209 }210 211 /* Timeline */212 .timeline {213 position: relative;214 margin-top: 36px;215 padding-left: 90px;216 }217 .timeline:before {218 content: "";219 position: absolute;220 left: 44px;221 top: 0;222 bottom: 0;223 width: 8px;224 background: linear-gradient(#4caf50, #4caf50);225 border-radius: 6px;226 }227 .node {228 position: relative;229 margin-bottom: 70px;230 }231 .node .dot {232 position: absolute;233 left: -60px;234 top: 6px;235 width: 28px;236 height: 28px;237 border-radius: 50%;238 background: #fff;239 border: 8px solid #4caf50;240 }241 .node .walk-dot {242 position: absolute;243 left: -60px;244 top: 6px;245 width: 28px;246 height: 28px;247 border-radius: 50%;248 background: #fff;249 border: 8px dashed #8bc34a;250 box-sizing: border-box;251 }252 .node .label {253 font-size: 46px;254 font-weight: 800;255 color: #1a1a1a;256 }257 .node .label small {258 font-size: 40px;259 font-weight: 700;260 color: #3a5f39;261 margin-left: 12px;262 }263 .node .time {264 margin-top: 6px;265 font-size: 36px;266 color: #7a7a7a;267 }268 .node .minor {269 font-size: 40px;270 color: #444;271 margin-top: 12px;272 }273 .node .minor .caret {274 margin-left: 10px;275 }276 .node .bus-inline {277 display: inline-flex;278 align-items: center;279 gap: 16px;280 margin-top: 8px;281 }282 .node .small-bus {283 width: 58px;284 height: 58px;285 border-radius: 8px;286 background: #e8f5e9;287 display: flex;288 align-items: center;289 justify-content: center;290 }291 .node .small-bus svg { width: 36px; height: 36px; fill: #3a5f39; }292 293 /* Bottom home indicator */294 .home-indicator {295 position: absolute;296 bottom: 28px;297 left: 50%;298 transform: translateX(-50%);299 width: 640px;300 height: 18px;301 background: #000000;302 border-radius: 12px;303 opacity: 0.1;304 }305</style>306</head>307<body>308<div id="render-target">309 310 <!-- Status bar -->311 <div class="status-bar">312 <div class="status-time">12:56</div>313 <div class="status-icons">314 <div class="chip-icon">LR</div>315 <div class="chip-icon">LR</div>316 <div class="chip-icon">▢</div>317 <svg viewBox="0 0 24 24"><path d="M12 4l-1.4 1.4 6.6 6.6-6.6 6.6L12 20l8-8z"/></svg>318 <svg viewBox="0 0 24 24"><path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-5 17a7 7 0 110-14 7 7 0 010 14z"/></svg>319 </div>320 </div>321 322 <!-- Header chips -->323 <div class="header-area">324 <div class="chip-row">325 <div class="back-btn">326 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5-6.5-6.5 6.5-6.5z"/></svg>327 </div>328 <div class="chip">329 <div class="title">Madina Munwarah 411</div>330 <div class="small-icon">331 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>332 </div>333 </div>334 <div class="side-action">335 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>336 </div>337 </div>338 339 <div class="chip-row" style="margin-top: 20px;">340 <div style="width:80px;"></div>341 <div class="chip">342 <div class="title">Makkah Al Mukarramah 401</div>343 <div class="small-icon">344 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>345 </div>346 </div>347 <div class="side-action" style="flex-direction: column; gap:8px;">348 <svg viewBox="0 0 24 24"><path d="M12 4l-6 6h4v10h4V10h4z"/></svg>349 <svg viewBox="0 0 24 24"><path d="M12 20l6-6h-4V4h-4v10H6z"/></svg>350 </div>351 </div>352 353 <div class="divider"></div>354 <div class="fav-title">Favourite Routes</div>355 </div>356 357 <!-- Duration and share -->358 <div class="duration-row">359 <div class="duration">85 min</div>360 <div class="share-btn">361 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 00-2.5 1.3L8.9 13a3 3 0 000-2l6.6-4.3A3 3 0 0018 8a3 3 0 10-2.9-4 3 3 0 00.1 1L8.6 9A3 3 0 106 16a3 3 0 002.9-2l6.6 4.3a3 3 0 102.5-2.3z"/></svg>362 </div>363 </div>364 365 <!-- Map Placeholder -->366 <div class="map-box">[IMG: Google Map]</div>367 368 <!-- Route Detail Card -->369 <div class="route-card">370 <div class="route-header">371 <div class="bus-icon">372 <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 012 2v11a3 3 0 01-3 3v2h-2v-2H8v2H6v-2a3 3 0 01-3-3V5a2 2 0 012-2zm2 3v6h10V6H7zM6 16a1 1 0 100-2 1 1 0 000 2zm12-2a1 1 0 110 2 1 1 0 010-2z"/></svg>373 </div>374 <div class="route-title">Bus 16</div>375 </div>376 <div class="route-sub">towards Al Batha 01</div>377 <div class="depart">12:57 Madina Munwarah 311</div>378 <div class="summary">35 min , 15 Stops <span class="caret"></span></div>379 380 <div class="timeline">381 <!-- Stop 1 -->382 <div class="node">383 <div class="dot"></div>384 <div class="minor">Walk</div>385 <div class="time">13:33 Al Batha 101</div>386 </div>387 388 <!-- Transfer walk -->389 <div class="node">390 <div class="walk-dot"></div>391 <div class="minor">3 min <span class="caret"></span></div>392 </div>393 394 <!-- Bus 7 -->395 <div class="node">396 <div class="dot"></div>397 <div class="bus-inline">398 <div class="small-bus">399 <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 012 2v11a3 3 0 01-3 3v2h-2v-2H8v2H6v-2a3 3 0 01-3-3V5a2 2 0 012-2zm2 3v6h10V6H7zM6 16a1 1 0 100-2 1 1 0 000 2zm12-2a1 1 0 110 2 1 1 0 010-2z"/></svg>400 </div>401 <div class="label">Bus 7 <small>towards KSU 03</small></div>402 </div>403 <div class="time">13:44 Al Batha 201</div>404 </div>405 406 <!-- Final walk -->407 <div class="node">408 <div class="walk-dot"></div>409 <div class="minor">3 min</div>410 <div class="time">13:47 Al-Muraba 610</div>411 </div>412 </div>413 </div>414 415 <div class="home-indicator"></div>416</div>417</body>418</html>