GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Moovit - Recent Journeys Mock</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #E0E0E0;17 }18 /* Status bar */19 .status-bar {20 height: 88px;21 padding: 0 24px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #fafafa;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.9; }30 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }31 /* App bar */32 .app-bar {33 height: 116px;34 display: flex;35 align-items: center;36 padding: 0 24px;37 background: #1A1A1A;38 border-bottom: 1px solid #242424;39 }40 .app-title {41 flex: 1;42 text-align: center;43 font-weight: 700;44 font-size: 44px;45 letter-spacing: 1px;46 color: #F5F5F5;47 }48 .icon-btn {49 width: 72px;50 height: 72px;51 display: flex;52 align-items: center;53 justify-content: center;54 color: #E0E0E0;55 }56 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #E0E0E0; stroke-width: 6; }57 /* Promo banner */58 .promo {59 background: #263238;60 display: flex;61 align-items: center;62 padding: 24px;63 height: 120px;64 border-bottom: 1px solid #1f1f1f;65 }66 .promo .pin {67 width: 72px;68 height: 72px;69 border-radius: 50%;70 background: #FF7043;71 display: flex;72 align-items: center;73 justify-content: center;74 color: #1A1A1A;75 font-weight: 700;76 margin-right: 24px;77 position: relative;78 }79 .promo-text { font-size: 38px; color: #EAEAEA; }80 .promo-cta {81 margin-left: auto;82 color: #64B5F6;83 font-weight: 600;84 font-size: 36px;85 }86 /* Section header */87 .section-header {88 padding: 26px 24px;89 color: #9AA0A6;90 font-size: 36px;91 letter-spacing: 0.2px;92 background: #171717;93 border-top: 1px solid #1f1f1f;94 border-bottom: 1px solid #1f1f1f;95 }96 /* Journey list */97 .list {98 padding-bottom: 0;99 }100 .item {101 padding: 30px 24px;102 display: flex;103 align-items: flex-start;104 gap: 24px;105 border-bottom: 1px solid #222;106 }107 .item .left-icon {108 width: 64px;109 height: 64px;110 border-radius: 50%;111 border: 2px solid #616161;112 display: flex;113 align-items: center;114 justify-content: center;115 margin-top: 6px;116 }117 .item .left-icon svg { width: 40px; height: 40px; stroke: #9E9E9E; }118 .item .content { flex: 1; }119 .item .subtitle {120 color: #9AA0A6;121 font-size: 30px;122 margin-bottom: 6px;123 }124 .item .title {125 color: #FFFFFF;126 font-size: 38px;127 font-weight: 700;128 line-height: 1.25;129 }130 .item .menu {131 width: 60px;132 display: flex;133 align-items: flex-start;134 justify-content: center;135 padding-top: 8px;136 }137 .kebab { fill: #9E9E9E; }138 /* Ad strip */139 .ad-strip {140 position: absolute;141 left: 0;142 right: 0;143 bottom: 220px;144 height: 180px;145 background: #FFFFFF;146 border-top: 1px solid #DADCE0;147 border-bottom: 1px solid #DADCE0;148 display: flex;149 align-items: center;150 padding: 0 18px;151 gap: 12px;152 overflow: hidden;153 }154 .ad-strip .thumb {155 width: 160px;156 height: 140px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 display: flex;160 align-items: center;161 justify-content: center;162 color: #757575;163 font-size: 24px;164 text-align: center;165 position: relative;166 }167 .ad-badge {168 position: absolute;169 top: 8px;170 left: 8px;171 background: #263238;172 color: #FFFFFF;173 font-size: 22px;174 padding: 6px 10px;175 border-radius: 8px;176 }177 .ad-close {178 width: 40px;179 height: 40px;180 color: #5F6368;181 display: flex;182 align-items: center;183 justify-content: center;184 border: 2px solid #DADCE0;185 border-radius: 8px;186 margin-right: 6px;187 }188 /* Bottom navigation */189 .bottom-nav {190 position: absolute;191 left: 0; right: 0; bottom: 60px;192 height: 160px;193 background: #1A1A1A;194 border-top: 1px solid #242424;195 display: flex;196 }197 .tab {198 flex: 1;199 display: flex;200 flex-direction: column;201 align-items: center;202 justify-content: center;203 gap: 14px;204 color: #9AA0A6;205 font-size: 30px;206 }207 .tab.active { color: #64B5F6; }208 .tab svg { width: 56px; height: 56px; }209 /* Gesture pill */210 .home-indicator {211 position: absolute;212 bottom: 18px;213 left: 50%;214 transform: translateX(-50%);215 width: 220px;216 height: 10px;217 border-radius: 8px;218 background: rgba(255,255,255,0.85);219 }220</style>221</head>222<body>223<div id="render-target">224 <!-- Status Bar -->225 <div class="status-bar">226 <div>4:16</div>227 <div class="status-icons">228 <span class="dot"></span>229 <span class="dot" style="opacity:0.6;"></span>230 <span class="dot" style="opacity:0.6;"></span>231 <svg width="38" height="38" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">232 <path d="M21 8l-4-4" />233 <circle cx="12" cy="12" r="7"></circle>234 </svg>235 <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff">236 <path d="M6 22h12l-1-7H7zM9 9a3 3 0 116 0v2H9z"></path>237 </svg>238 </div>239 </div>240 241 <!-- App Bar -->242 <div class="app-bar">243 <div class="icon-btn" aria-label="menu">244 <svg viewBox="0 0 24 24">245 <path d="M3 6h18M3 12h18M3 18h18"></path>246 </svg>247 </div>248 <div class="app-title">moovit</div>249 <div class="icon-btn" aria-label="search">250 <svg viewBox="0 0 24 24">251 <circle cx="11" cy="11" r="7"></circle>252 <path d="M20 20l-3-3"></path>253 </svg>254 </div>255 </div>256 257 <!-- Promo Banner -->258 <div class="promo">259 <div class="pin" aria-hidden="true">☺</div>260 <div class="promo-text">Help make public transport better</div>261 <div class="promo-cta">Join us</div>262 </div>263 264 <!-- Section -->265 <div class="section-header">Recent Journeys</div>266 267 <!-- List -->268 <div class="list">269 <div class="item">270 <div class="left-icon">271 <svg viewBox="0 0 24 24">272 <circle cx="12" cy="12" r="9"></circle>273 <path d="M12 7v6l4 2"></path>274 </svg>275 </div>276 <div class="content">277 <div class="subtitle">Anand Vihar ISBT Terminal</div>278 <div class="title">Hill Stations, Veer Savarkar Block, Block S1, Lalita Park, Laxmi Nagar, New Delhi, India</div>279 </div>280 <div class="menu">281 <svg class="kebab" width="26" height="40" viewBox="0 0 6 20">282 <circle cx="3" cy="3" r="2"></circle>283 <circle cx="3" cy="10" r="2"></circle>284 <circle cx="3" cy="17" r="2"></circle>285 </svg>286 </div>287 </div>288 289 <div class="item">290 <div class="left-icon">291 <svg viewBox="0 0 24 24">292 <circle cx="12" cy="12" r="9"></circle>293 <path d="M12 7v6l4 2"></path>294 </svg>295 </div>296 <div class="content">297 <div class="subtitle">Mystery Rooms - Pacific Mall, Tagore Garden, New Delhi, Delhi, India</div>298 <div class="title">Laxmi Nagar, Block S1, Nanakpura, Shakarpur, New Delhi, Delhi, India</div>299 </div>300 <div class="menu">301 <svg class="kebab" width="26" height="40" viewBox="0 0 6 20">302 <circle cx="3" cy="3" r="2"></circle>303 <circle cx="3" cy="10" r="2"></circle>304 <circle cx="3" cy="17" r="2"></circle>305 </svg>306 </div>307 </div>308 309 <div class="item">310 <div class="left-icon">311 <svg viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="9"></circle>313 <path d="M12 7v6l4 2"></path>314 </svg>315 </div>316 <div class="content">317 <div class="subtitle">Your current location</div>318 <div class="title">Anand Vihar I.S.B.T., Location</div>319 </div>320 <div class="menu">321 <svg class="kebab" width="26" height="40" viewBox="0 0 6 20">322 <circle cx="3" cy="3" r="2"></circle>323 <circle cx="3" cy="10" r="2"></circle>324 <circle cx="3" cy="17" r="2"></circle>325 </svg>326 </div>327 </div>328 329 <div class="item">330 <div class="left-icon">331 <svg viewBox="0 0 24 24">332 <circle cx="12" cy="12" r="9"></circle>333 <path d="M12 7v6l4 2"></path>334 </svg>335 </div>336 <div class="content">337 <div class="subtitle">Laxmi Nagar, Block S1, Nanakpura, Shakarpur, New Delhi, Delhi, India</div>338 <div class="title">Anand Vihar I.S.B.T., Location</div>339 </div>340 <div class="menu">341 <svg class="kebab" width="26" height="40" viewBox="0 0 6 20">342 <circle cx="3" cy="3" r="2"></circle>343 <circle cx="3" cy="10" r="2"></circle>344 <circle cx="3" cy="17" r="2"></circle>345 </svg>346 </div>347 </div>348 349 <div class="item">350 <div class="left-icon">351 <svg viewBox="0 0 24 24">352 <circle cx="12" cy="12" r="9"></circle>353 <path d="M12 7v6l4 2"></path>354 </svg>355 </div>356 <div class="content">357 <div class="subtitle">Laxmi Nagar, Block S1, Nanakpura, Shakarpur, New Delhi, Delhi, India</div>358 <div class="title">Anand Vihar I.S.B.T., Location</div>359 </div>360 <div class="menu">361 <svg class="kebab" width="26" height="40" viewBox="0 0 6 20">362 <circle cx="3" cy="3" r="2"></circle>363 <circle cx="3" cy="10" r="2"></circle>364 <circle cx="3" cy="17" r="2"></circle>365 </svg>366 </div>367 </div>368 </div>369 370 <!-- Ad Strip -->371 <div class="ad-strip">372 <div class="ad-close">✕</div>373 <div class="thumb">374 <span class="ad-badge">-30%</span>375 [IMG: Fashion item]376 </div>377 <div class="thumb">[IMG: Fashion item]</div>378 <div class="thumb">[IMG: Fashion item]</div>379 <div class="thumb">[IMG: Fashion item]</div>380 <div class="thumb">[IMG: Fashion item]</div>381 <div class="thumb">[IMG: Fashion item]</div>382 </div>383 384 <!-- Bottom Navigation -->385 <div class="bottom-nav">386 <div class="tab active">387 <svg viewBox="0 0 24 24" stroke="#64B5F6" fill="none" stroke-width="2">388 <circle cx="6" cy="12" r="2.5"></circle>389 <circle cx="18" cy="12" r="2.5"></circle>390 <path d="M8.5 12h7"></path>391 </svg>392 <div>Directions</div>393 </div>394 <div class="tab">395 <svg viewBox="0 0 24 24" fill="none" stroke="#9AA0A6" stroke-width="2">396 <path d="M12 2C8 2 6 5 6 8c0 4 6 12 6 12s6-8 6-12c0-3-2-6-6-6z"></path>397 <circle cx="12" cy="9" r="2"></circle>398 </svg>399 <div>Stops</div>400 </div>401 <div class="tab">402 <svg viewBox="0 0 24 24" fill="none" stroke="#9AA0A6" stroke-width="2">403 <circle cx="5" cy="12" r="2"></circle>404 <circle cx="12" cy="12" r="2"></circle>405 <circle cx="19" cy="12" r="2"></circle>406 <path d="M7 12h3M14 12h3"></path>407 </svg>408 <div>Lines</div>409 </div>410 </div>411 412 <!-- Home indicator -->413 <div class="home-indicator"></div>414</div>415</body>416</html>