GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Outbound Trip UI</title>6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#F3F4F6; border-radius:0; box-shadow:none;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 color:#1f2d2f;13 }14 /* Status bar */15 .status-bar {16 height:84px; background:#0F5E68; color:#fff; display:flex; align-items:center;17 padding:0 36px; font-size:34px; letter-spacing:0.5px;18 }19 .status-right { margin-left:auto; display:flex; gap:22px; align-items:center; }20 .header {21 height:172px; background:#0F5E68; color:#fff; display:flex; align-items:center;22 padding:0 36px; box-sizing:border-box;23 }24 .header-title { font-size:58px; font-weight:600; margin-left:20px; }25 .header-actions { margin-left:auto; font-size:40px; font-weight:600; opacity:0.95; }26 .tabs {27 background:#0F5E68; color:#d7eef2; padding:0 24px 20px 24px;28 display:flex; gap:36px; align-items:flex-end; box-sizing:border-box;29 }30 .tab { font-size:34px; text-transform:uppercase; padding:24px 8px; }31 .tab.active { color:#fff; border-bottom:6px solid #fff; }32 /* Cards list */33 .list { padding:20px 20px 120px 20px; }34 .card {35 background:#fff; border:1px solid #DADFE3; border-radius:24px;36 box-shadow: 0 2px 0 rgba(0,0,0,0.04);37 margin:18px 8px; padding:24px; box-sizing:border-box;38 }39 .tag-row { display:flex; gap:14px; margin-bottom:14px; }40 .tag {41 padding:16px 22px; border-radius:24px; font-size:32px; font-weight:600;42 }43 .tag.flix { background:#D9F5A7; color:#2d5c06; }44 .tag.grey { background:#CFE7F2; color:#235a66; }45 .detail-row { display:flex; align-items:flex-start; gap:18px; }46 .time-col { min-width:190px; }47 .time { font-size:52px; font-weight:700; color:#2a3c3f; }48 .ampm { font-size:28px; color:#6b7a7d; margin-left:6px; }49 .place { font-size:40px; color:#374a4d; }50 .minor { font-size:30px; color:#6b7a7d; }51 .route-icon { width:26px; height:100px; }52 .chev { margin-left:auto; opacity:0.6; }53 .divider { height:1px; background:#E7EAED; margin:18px 0; }54 .info-row { display:flex; align-items:center; justify-content:space-between; }55 .pill {56 display:inline-flex; align-items:center; gap:14px; padding:16px 22px;57 border:1px solid #DADFE3; border-radius:999px; font-size:32px; color:#3c4d50;58 background:#fff;59 }60 .icons { display:flex; gap:22px; align-items:center; color:#6b7a7d; font-size:30px; }61 .meta { margin-top:14px; display:flex; align-items:center; gap:26px; color:#6b7a7d; font-size:32px; }62 .price-area { display:flex; align-items:center; justify-content:flex-end; gap:20px; }63 .price { font-size:64px; color:#0F5E68; font-weight:800; }64 .price small { font-size:40px; vertical-align:top; }65 .per { font-size:28px; color:#7b8b8e; text-align:right; }66 .badge { font-size:30px; color:#0F7A85; font-weight:700; margin-top:2px; text-align:right; }67 .alert { font-size:30px; color:#B45A1F; font-weight:700; text-align:right; }68 .circle-btn {69 width:120px; height:120px; background:#0F5E68; border-radius:50%;70 display:flex; align-items:center; justify-content:center;71 }72 /* Simple bottom gesture bar */73 .gesture {74 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);75 width:420px; height:14px; background:#C9CDD1; border-radius:14px;76 }77 /* SVG helpers */78 .svg { display:inline-block; }79</style>80</head>81<body>82<div id="render-target">83 84 <!-- Status bar -->85 <div class="status-bar">86 <div>10:24</div>87 <div class="status-right">88 <!-- placeholders for status icons -->89 <svg class="svg" width="42" height="42"><circle cx="21" cy="21" r="8" fill="#fff" opacity="0.9"/></svg>90 <svg class="svg" width="42" height="42"><rect x="6" y="12" width="30" height="18" rx="3" fill="#fff" opacity="0.9"/></svg>91 <svg class="svg" width="42" height="42"><path d="M6 30 L36 12" stroke="#fff" stroke-width="4"/></svg>92 <svg class="svg" width="42" height="42"><circle cx="21" cy="21" r="3" fill="#fff"/></svg>93 <svg class="svg" width="42" height="42"><path d="M6 18 H30" stroke="#fff" stroke-width="4"/></svg>94 <svg class="svg" width="42" height="42"><rect x="8" y="10" width="24" height="20" rx="3" fill="none" stroke="#fff" stroke-width="4"/><rect x="32" y="16" width="4" height="8" fill="#fff"/></svg>95 </div>96 </div>97 98 <!-- Header -->99 <div class="header">100 <svg class="svg" width="64" height="64" viewBox="0 0 48 48">101 <path d="M28 10 L12 24 L28 38" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>102 </svg>103 <div class="header-title">Outbound trip</div>104 <div class="header-actions">FILTER</div>105 </div>106 107 <!-- Tabs -->108 <div class="tabs">109 <div class="tab">Wed, Oct 25</div>110 <div class="tab active">Thu, Oct 26</div>111 <div class="tab">Fri, Oct 27</div>112 <div class="tab">Sat, Oct 28</div>113 </div>114 115 <!-- List -->116 <div class="list">117 <!-- Card 1 -->118 <div class="card">119 <div class="tag-row">120 <div class="tag flix">FlixBus</div>121 <div class="tag grey">Greyhound</div>122 </div>123 124 <div class="detail-row">125 <div class="time-col">126 <div class="time">10:55<span class="ampm">AM</span></div>127 <div class="time">10:45<span class="ampm">AM +1</span></div>128 </div>129 <svg class="route-icon" viewBox="0 0 6 100">130 <circle cx="3" cy="20" r="3" fill="#8D9AA0"/>131 <rect x="2.5" y="20" width="1" height="60" fill="#BFC7CC"/>132 <circle cx="3" cy="80" r="3" fill="#8D9AA0"/>133 </svg>134 <div style="flex:1">135 <div class="place">Hamilton (McMaster)</div>136 <div class="place">Richmond Bus Station</div>137 </div>138 <svg class="chev" width="44" height="44" viewBox="0 0 24 24">139 <path d="M6 9 L12 15 L18 9" stroke="#6b7a7d" stroke-width="2.5" fill="none" stroke-linecap="round"/>140 </svg>141 </div>142 143 <div class="divider"></div>144 145 <div class="info-row">146 <div class="pill">147 <svg width="30" height="30" viewBox="0 0 24 24">148 <path d="M5 20 L8 13 L11 20" stroke="#3c4d50" stroke-width="2" fill="none" stroke-linecap="round"/>149 <circle cx="8" cy="9" r="3" fill="#3c4d50"/>150 </svg>151 <span>2 transfers</span>152 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L18 9" stroke="#3c4d50" stroke-width="2"/><path d="M6 15 L18 15" stroke="#3c4d50" stroke-width="2"/></svg>153 </div>154 <div class="price-area">155 <div>156 <div class="price">$161<small>.40</small></div>157 <div class="per">per person</div>158 </div>159 <div class="circle-btn">160 <svg width="50" height="50" viewBox="0 0 24 24">161 <path d="M9 6 L15 12 L9 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>162 </svg>163 </div>164 </div>165 </div>166 167 <div class="meta">168 <span>23:50 Hrs.</span>169 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 8 H21 V16 H3 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><circle cx="6" cy="12" r="1.5" fill="#6b7a7d"/></svg>170 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6 H18 V12 H6 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><path d="M10 12 V18" stroke="#6b7a7d" stroke-width="2"/></svg>171 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M5 19 L19 5" stroke="#6b7a7d" stroke-width="2"/></svg>172 </div>173 </div>174 175 <!-- Card 2 -->176 <div class="card">177 <div class="tag-row">178 <div class="tag flix">FlixBus</div>179 <div class="tag grey">Greyhound</div>180 </div>181 182 <div class="detail-row">183 <div class="time-col">184 <div class="time">10:55<span class="ampm">AM</span></div>185 <div class="time">11:05<span class="ampm">AM +1</span></div>186 </div>187 <svg class="route-icon" viewBox="0 0 6 100">188 <circle cx="3" cy="20" r="3" fill="#8D9AA0"/>189 <rect x="2.5" y="20" width="1" height="60" fill="#BFC7CC"/>190 <circle cx="3" cy="80" r="3" fill="#8D9AA0"/>191 </svg>192 <div style="flex:1">193 <div class="place">Hamilton (McMaster)</div>194 <div class="place">Richmond (W Leigh St)</div>195 </div>196 <svg class="chev" width="44" height="44" viewBox="0 0 24 24">197 <path d="M6 9 L12 15 L18 9" stroke="#6b7a7d" stroke-width="2.5" fill="none" stroke-linecap="round"/>198 </svg>199 </div>200 201 <div class="divider"></div>202 203 <div class="info-row">204 <div class="pill">205 <svg width="30" height="30" viewBox="0 0 24 24">206 <path d="M5 20 L8 13 L11 20" stroke="#3c4d50" stroke-width="2" fill="none" stroke-linecap="round"/>207 <circle cx="8" cy="9" r="3" fill="#3c4d50"/>208 </svg>209 <span>3 transfers</span>210 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L18 9" stroke="#3c4d50" stroke-width="2"/><path d="M6 15 L18 15" stroke="#3c4d50" stroke-width="2"/></svg>211 </div>212 <div class="price-area">213 <div>214 <div class="price">$154<small>.12</small></div>215 <div class="per">per person</div>216 <div class="badge">LOWEST PRICE</div>217 </div>218 <div class="circle-btn">219 <svg width="50" height="50" viewBox="0 0 24 24">220 <path d="M9 6 L15 12 L9 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 </div>224 </div>225 226 <div class="meta">227 <span>24:10 Hrs.</span>228 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 8 H21 V16 H3 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><circle cx="6" cy="12" r="1.5" fill="#6b7a7d"/></svg>229 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 6 V18" stroke="#6b7a7d" stroke-width="2"/><path d="M6 10 H18" stroke="#6b7a7d" stroke-width="2"/></svg>230 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 17 L18 7" stroke="#6b7a7d" stroke-width="2"/></svg>231 </div>232 </div>233 234 <!-- Card 3 -->235 <div class="card">236 <div class="tag-row">237 <div class="tag flix">FlixBus</div>238 <div class="tag grey">Greyhound</div>239 </div>240 241 <div class="detail-row">242 <div class="time-col">243 <div class="time">5:55<span class="ampm">PM</span></div>244 <div class="time">8:10<span class="ampm">AM +2</span></div>245 </div>246 <svg class="route-icon" viewBox="0 0 6 100">247 <circle cx="3" cy="20" r="3" fill="#8D9AA0"/>248 <rect x="2.5" y="20" width="1" height="60" fill="#BFC7CC"/>249 <circle cx="3" cy="80" r="3" fill="#8D9AA0"/>250 </svg>251 <div style="flex:1">252 <div class="place">Hamilton (McMaster)</div>253 <div class="place">Henrico</div>254 </div>255 <svg class="chev" width="44" height="44" viewBox="0 0 24 24">256 <path d="M6 9 L12 15 L18 9" stroke="#6b7a7d" stroke-width="2.5" fill="none" stroke-linecap="round"/>257 </svg>258 </div>259 260 <div class="divider"></div>261 262 <div class="info-row">263 <div class="pill">264 <svg width="30" height="30" viewBox="0 0 24 24">265 <path d="M5 20 L8 13 L11 20" stroke="#3c4d50" stroke-width="2" fill="none" stroke-linecap="round"/>266 <circle cx="8" cy="9" r="3" fill="#3c4d50"/>267 </svg>268 <span>4 transfers</span>269 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L18 9" stroke="#3c4d50" stroke-width="2"/><path d="M6 15 L18 15" stroke="#3c4d50" stroke-width="2"/></svg>270 </div>271 <div class="price-area">272 <div>273 <div class="alert">Almost full</div>274 <div class="price">$223<small>.02</small></div>275 <div class="per">per person</div>276 </div>277 <div class="circle-btn">278 <svg width="50" height="50" viewBox="0 0 24 24">279 <path d="M9 6 L15 12 L9 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 </div>284 285 <div class="meta">286 <span>38:15 Hrs.</span>287 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M5 18 H19" stroke="#6b7a7d" stroke-width="2"/><circle cx="8" cy="12" r="2" fill="#6b7a7d"/><circle cx="12" cy="12" r="2" fill="#6b7a7d"/><circle cx="16" cy="12" r="2" fill="#6b7a7d"/></svg>288 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 6 H16 V14 H8 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><path d="M10 18 H14" stroke="#6b7a7d" stroke-width="2"/></svg>289 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 17 L18 7" stroke="#6b7a7d" stroke-width="2"/></svg>290 </div>291 </div>292 293 <!-- Card 4 -->294 <div class="card">295 <div class="tag-row">296 <div class="tag flix">FlixBus</div>297 <div class="tag grey">Greyhound</div>298 </div>299 300 <div class="detail-row">301 <div class="time-col">302 <div class="time">8:50<span class="ampm">PM</span></div>303 <div class="time">7:45<span class="ampm">PM +1</span></div>304 </div>305 <svg class="route-icon" viewBox="0 0 6 100">306 <circle cx="3" cy="20" r="3" fill="#8D9AA0"/>307 <rect x="2.5" y="20" width="1" height="60" fill="#BFC7CC"/>308 <circle cx="3" cy="80" r="3" fill="#8D9AA0"/>309 </svg>310 <div style="flex:1">311 <div class="place">Hamilton (McMaster)</div>312 <div class="place">Richmond Bus Station</div>313 </div>314 <svg class="chev" width="44" height="44" viewBox="0 0 24 24">315 <path d="M6 9 L12 15 L18 9" stroke="#6b7a7d" stroke-width="2.5" fill="none" stroke-linecap="round"/>316 </svg>317 </div>318 319 <div class="divider"></div>320 321 <div class="info-row">322 <div class="pill">323 <svg width="30" height="30" viewBox="0 0 24 24">324 <path d="M5 20 L8 13 L11 20" stroke="#3c4d50" stroke-width="2" fill="none" stroke-linecap="round"/>325 <circle cx="8" cy="9" r="3" fill="#3c4d50"/>326 </svg>327 <span>3 transfers</span>328 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L18 9" stroke="#3c4d50" stroke-width="2"/><path d="M6 15 L18 15" stroke="#3c4d50" stroke-width="2"/></svg>329 </div>330 <div class="price-area">331 <div>332 <div class="alert">Only 4 seats available!</div>333 <div class="price">$214<small>.10</small></div>334 <div class="per">per person</div>335 </div>336 <div class="circle-btn">337 <svg width="50" height="50" viewBox="0 0 24 24">338 <path d="M9 6 L15 12 L9 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>339 </svg>340 </div>341 </div>342 </div>343 344 <div class="meta">345 <span>22:55 Hrs.</span>346 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 8 H21 V16 H3 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><circle cx="6" cy="12" r="1.5" fill="#6b7a7d"/></svg>347 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6 H18 V12 H6 Z" fill="none" stroke="#6b7a7d" stroke-width="2"/><path d="M10 12 V18" stroke="#6b7a7d" stroke-width="2"/></svg>348 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M5 19 L19 5" stroke="#6b7a7d" stroke-width="2"/></svg>349 </div>350 </div>351 </div>352 353 <div class="gesture"></div>354</div>355</body>356</html>