GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Transit Results - Dark UI</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: #121316;13 color: #EDEEEF;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #DADDE3;24 font-weight: 600;25 font-size: 36px;26 }27 .sb-right {28 display: flex;29 align-items: center;30 gap: 22px;31 font-size: 30px;32 }33 .icon-battery {34 width: 54px; height: 28px; border: 3px solid #DADDE3; border-radius: 6px; position: relative; display: inline-block;35 }36 .icon-battery::after {37 content: ""; position: absolute; width: 8px; height: 12px; right: -12px; top: 6px; background: #DADDE3; border-radius: 2px;38 }39 .icon-battery .level {40 position: absolute; left: 3px; top: 3px; height: 20px; width: 38px; background: #86E07E; border-radius: 3px;41 }42 43 /* Top header / search section */44 .header {45 padding: 10px 24px 0 24px;46 }47 .top-row {48 display: flex;49 align-items: center;50 gap: 24px;51 padding: 12px 0 18px 0;52 }53 .back-btn {54 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;55 }56 .search-field {57 background: #1C1F24;58 border-radius: 18px;59 height: 120px;60 margin-bottom: 18px;61 display: flex;62 align-items: center;63 padding: 0 26px;64 position: relative;65 }66 .search-dot {67 width: 26px; height: 26px; border-radius: 50%;68 border: 4px solid #C7CBD3;69 margin-right: 22px;70 }71 .search-dot.red { background: #E24C5A; border-color: #E24C5A; }72 .field-text {73 font-size: 40px;74 letter-spacing: 0.2px;75 color: #EDEEEF;76 }77 .swap-icon {78 position: absolute; right: 26px; top: 50%; transform: translateY(-50%);79 width: 64px; height: 64px; background: #20252B; border-radius: 14px; display: flex; align-items: center; justify-content: center;80 }81 82 /* Depart and filter row */83 .options-row {84 display: flex; align-items: center; justify-content: space-between;85 padding: 22px 6px 6px 6px;86 }87 .depart-now {88 display: flex; align-items: center; gap: 18px; color: #AAB1BC; font-size: 34px;89 }90 .filter-btn {91 display: inline-flex; align-items: center; gap: 18px;92 background: #1C1F24; border-radius: 20px; padding: 18px 28px; font-size: 36px; position: relative;93 }94 .badge {95 position: absolute; right: -14px; top: -14px; width: 60px; height: 60px; background: #4CC3B7;96 color: #0F1518; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 32px;97 box-shadow: 0 0 0 4px #121316;98 }99 100 /* Time stepper */101 .time-stepper {102 display: flex; align-items: center; justify-content: space-between;103 padding: 28px 24px;104 color: #C9CFD7; font-size: 40px;105 }106 .soft { color: #8E97A3; }107 .center-time { color: #EDEEEF; font-weight: 700; }108 109 /* Suggested routes title */110 .section-title {111 font-size: 44px;112 font-weight: 700;113 padding: 24px;114 }115 116 /* Routes list */117 .route {118 padding: 0 24px 24px 24px;119 }120 .route-head {121 display: flex; align-items: baseline; justify-content: space-between; gap: 16px;122 font-size: 42px; color: #EDEEEF;123 }124 .duration { color: #AAB1BC; font-size: 36px; }125 .price-pill {126 background: #30343A; color: #DDE3EA; border-radius: 18px; padding: 18px 26px; font-size: 40px;127 }128 .route-card {129 background: #1C1F24; border-radius: 16px; padding: 22px 24px; margin-top: 22px;130 }131 .icons-row {132 display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; color: #C9CFD7; font-size: 36px;133 }134 .sep { color: #8E97A3; font-size: 46px; }135 .info-dot {136 width: 40px; height: 40px; border-radius: 50%; background: #F4B54A; color: #1C1F24; display: inline-flex; align-items: center; justify-content: center; font-weight: 900;137 }138 139 /* Small icon helpers */140 .inline-icon { display: inline-flex; align-items: center; justify-content: center; }141 .icon-label { color: #C9CFD7; font-size: 34px; margin-left: 8px; }142 143 /* Bottom spacer to match screenshot emptiness */144 .spacer { height: 1000px; }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status Bar -->151 <div class="status-bar">152 <div>8:26</div>153 <div class="sb-right">154 <div class="inline-icon" title="Location">📍</div>155 <div class="inline-icon" title="Wi‑Fi">📶</div>156 <div class="icon-battery"><div class="level"></div></div>157 <div>94%</div>158 </div>159 </div>160 161 <!-- Header / Search -->162 <div class="header">163 <div class="top-row">164 <div class="back-btn">165 <svg width="60" height="60" viewBox="0 0 24 24" fill="#EDEEEF">166 <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/>167 </svg>168 </div>169 </div>170 171 <div class="search-field">172 <div class="search-dot"></div>173 <div class="field-text">Groningen, Netherlands</div>174 <div class="swap-icon">175 <!-- Swap up/down arrows -->176 <svg width="40" height="40" viewBox="0 0 24 24" fill="#C9CFD7">177 <path d="M7 4l-3 3h2v10h2V7h2L7 4zm10 16l3-3h-2V7h-2v10h-2l3 3z"/>178 </svg>179 </div>180 </div>181 182 <div class="search-field">183 <div class="search-dot red"></div>184 <div class="field-text">Amsterdam Centraal</div>185 </div>186 187 <div class="options-row">188 <div class="depart-now">189 <svg width="42" height="42" viewBox="0 0 24 24" fill="#AAB1BC">190 <path d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1 11.2V6h-2v7h6v-2h-4z"/>191 </svg>192 <div>Depart now</div>193 <svg width="28" height="28" viewBox="0 0 24 24" fill="#AAB1BC">194 <path d="M7 10l5 5 5-5z"/>195 </svg>196 </div>197 198 <div class="filter-btn">199 <svg width="42" height="42" viewBox="0 0 24 24" fill="#EDEEEF">200 <path d="M3 5h18l-6 7v5l-6 2v-7L3 5z"/>201 </svg>202 <div>Filter</div>203 <div class="badge">9</div>204 </div>205 </div>206 207 <div class="time-stepper">208 <div class="soft">209 <svg width="30" height="30" viewBox="0 0 24 24" fill="#8E97A3">210 <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/>211 </svg>212 <span> - 5 min</span>213 </div>214 <div class="center-time">8:26 AM</div>215 <div class="soft">216 <span>+ 5 min </span>217 <svg width="30" height="30" viewBox="0 0 24 24" fill="#8E97A3">218 <path d="M8.5 5l7 7-7 7-1.5-1.5L13 12 7 6.5 8.5 5z"/>219 </svg>220 </div>221 </div>222 </div>223 224 <!-- Suggested Routes -->225 <div class="section-title">Suggested Routes</div>226 227 <!-- Route 1 -->228 <div class="route">229 <div class="route-head">230 <div>231 <span>5:23 AM - 9:55 AM</span>232 <span class="duration"> → 4 hr 32 min</span>233 </div>234 <div class="price-pill">€45.13</div>235 </div>236 <div class="route-card">237 <div class="icons-row">238 <!-- Walk icon -->239 <svg width="48" height="48" viewBox="0 0 24 24" fill="#C9CFD7">240 <path d="M13 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 21l1.5-4.5L7 14l2-2 3 2 1 3.5 3 3.5h-2.5l-2.3-2.7-1 2.7H8z"/>241 </svg>242 <span class="icon-label">15</span>243 <span class="sep">›</span>244 245 <!-- Bus icons with info markers -->246 <div class="inline-icon">247 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">248 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>249 </svg>250 </div>251 <div class="info-dot">i</div>252 <span class="sep">›</span>253 254 <div class="inline-icon">255 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">256 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>257 </svg>258 </div>259 <span class="sep">›</span>260 261 <div class="inline-icon">262 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">263 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>264 </svg>265 </div>266 <span class="sep">›</span>267 268 <div class="inline-icon">269 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">270 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>271 </svg>272 </div>273 <div class="info-dot">i</div>274 </div>275 </div>276 </div>277 278 <!-- Route 2 -->279 <div class="route">280 <div class="route-head">281 <div>282 <span>5:23 AM - 10:23 AM</span>283 <span class="duration"> → 5 hr</span>284 </div>285 <div class="price-pill">€41.82</div>286 </div>287 <div class="route-card">288 <div class="icons-row">289 <!-- Walk -->290 <svg width="48" height="48" viewBox="0 0 24 24" fill="#C9CFD7">291 <path d="M13 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 21l1.5-4.5L7 14l2-2 3 2 1 3.5 3 3.5h-2.5l-2.3-2.7-1 2.7H8z"/>292 </svg>293 <span class="icon-label">15</span>294 <span class="sep">›</span>295 296 <!-- Bus icons with info markers -->297 <div class="inline-icon">298 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">299 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>300 </svg>301 </div>302 <div class="info-dot">i</div>303 <span class="sep">›</span>304 305 <div class="inline-icon">306 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">307 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>308 </svg>309 </div>310 <span class="sep">›</span>311 312 <div class="inline-icon">313 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">314 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>315 </svg>316 </div>317 <span class="sep">›</span>318 319 <div class="inline-icon">320 <svg width="72" height="42" viewBox="0 0 24 24" fill="#DDE3EA">321 <path d="M3 6c0-2 2-3 9-3s9 1 9 3v8c0 1-1 2-2 2h-1l1 2v1h-2l-1-2H8l-1 2H5v-1l1-2H5c-1 0-2-1-2-2V6zm3 1h12v5H6V7zm1 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>322 </svg>323 </div>324 <div class="info-dot">i</div>325 </div>326 </div>327 </div>328 329 <div class="spacer"></div>330</div>331</body>332</html>