GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Outbound Buses UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F6F8FB;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #143057;14 }15 16 /* Header */17 .header {18 background: #162E6B;19 color: #fff;20 padding: 28px 40px 40px 40px;21 }22 .status-row {23 display: flex; align-items: center; justify-content: space-between;24 font-weight: 600; font-size: 30px; opacity: 0.95;25 margin-bottom: 26px;26 }27 .status-icons { display: flex; gap: 22px; align-items: center; }28 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }29 .wifi { width: 28px; height: 22px; border: 2px solid #fff; border-radius: 16px; position: relative; }30 .wifi::after { content:""; position:absolute; left:6px; top:6px; width:12px; height:8px; border-top:2px solid #fff; border-left:2px solid #fff; border-right:2px solid transparent; border-bottom:2px solid transparent; border-radius:6px; transform: rotate(45deg); opacity:0.9; }31 .battery { width: 34px; height: 18px; border:2px solid #fff; border-radius:4px; position: relative; }32 .battery::after { content:""; position:absolute; right:-6px; top:5px; width:6px; height:8px; background:#fff; border-radius:2px; }33 .title-row { display:flex; align-items:center; justify-content: space-between; }34 .route-title {35 font-size: 44px; font-weight: 800; letter-spacing: 0.2px;36 }37 .subtitle { margin-top: 6px; font-size: 26px; opacity: 0.85; }38 39 .icon-btn { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; }40 .icon-btn svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3.5; }41 42 /* Tabs */43 .tabs {44 background:#fff; display:flex; justify-content: space-around; align-items:center;45 padding: 28px 0; border-bottom: 1px solid #E5E8EF;46 }47 .tab { width: 33.33%; text-align:center; }48 .tab svg { width: 60px; height: 60px; stroke:#7A8CA8; fill:none; margin-bottom: 6px; }49 .tab .price { font-size: 34px; font-weight: 700; color:#16325E; }50 .tab .dur { font-size: 26px; color: #7A8CA8; }51 .tab.selected { border-bottom: 8px solid #FF6E6E; }52 53 /* Content */54 .content { padding: 36px 40px; }55 .section-title { font-size: 48px; font-weight: 800; }56 .section-title .accent { color:#FF7F7F; }57 .info-banner {58 margin-top: 24px; background:#DDF7E6; border:2px solid #6FD39E; color:#206B45;59 border-radius:24px; padding: 22px 24px; display:flex; align-items:center; gap:18px; font-size: 28px;60 }61 .info-banner .qr { width: 46px; height: 46px; border:2px solid #2CBF7E; border-radius:8px; position:relative; }62 .info-banner .qr::before, .info-banner .qr::after {63 content:""; position:absolute; width:12px; height:12px; border:2px solid #2CBF7E; border-radius:3px;64 }65 .info-banner .qr::before { left:6px; top:6px; }66 .info-banner .qr::after { right:6px; bottom:6px; }67 68 .filters { display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; }69 .pill {70 background:#fff; border:1px solid #E6E8EE; color:#233B69;71 border-radius:40px; padding:18px 26px; font-size:28px; display:flex; gap:14px; align-items:center;72 box-shadow: 0 2px 0 rgba(0,0,0,0.02);73 }74 .pill svg { width:32px; height:32px; stroke:#7A8CA8; }75 76 /* Cards */77 .card {78 background:#fff; border-radius:26px; box-shadow: 0 8px 18px rgba(20,48,87,0.12);79 padding: 28px; margin-top: 24px; position: relative;80 }81 .badge { color:#19B26F; font-weight: 800; font-size: 28px; letter-spacing: 0.6px; margin-bottom: 10px; }82 .card-top { display:flex; align-items:center; justify-content: space-between; }83 .logo {84 width: 220px; height: 76px; background:#E0E0E0; border:1px solid #BDBDBD;85 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:10px;86 font-size: 24px; font-weight: 600;87 }88 .qr-small { width: 44px; height:44px; border:2px solid #2CBF7E; border-radius:10px; position:relative; }89 .qr-small:before, .qr-small:after {90 content:""; position:absolute; width:10px; height:10px; border:2px solid #2CBF7E; border-radius:3px;91 }92 .qr-small:before { left:6px; top:6px; }93 .qr-small:after { right:6px; bottom:6px; }94 95 .times { display:flex; align-items:center; gap:26px; margin-top: 18px; margin-bottom: 12px; }96 .time {97 font-size: 54px; font-weight: 800; color:#0F2B5F;98 }99 .ampm { font-size: 28px; font-weight: 800; margin-left: 6px; }100 .duration { color:#97A4B8; font-size: 28px; font-weight: 700; }101 .divider {102 flex:1; height: 2px; background:#E6E8EE;103 }104 .stations { display:flex; justify-content: space-between; color:#596A86; font-size: 28px; }105 .stations div { width: 48%; }106 107 .footer-row { display:flex; align-items:center; justify-content: space-between; margin-top: 22px; }108 .transfers {109 background:#E8F0FF; color:#4766A8; border-radius: 40px; padding: 18px 26px; font-size: 28px; display:flex; gap:14px; align-items:center;110 }111 .transfers svg { width: 28px; height: 28px; stroke:#4766A8; }112 .price-info { display:flex; align-items:center; gap: 16px; color:#143057; }113 .price { font-size: 36px; font-weight: 800; }114 .person { width: 32px; height: 32px; border-radius:50%; background:#143057; position:relative; }115 .person:before { content:""; position:absolute; top:6px; left:8px; width:16px; height:16px; background:#fff; border-radius:50%; }116 .person:after { content:""; position:absolute; bottom:6px; left:6px; width:20px; height:8px; background:#fff; border-radius:8px; }117 118 /* Bottom nav indicator */119 .bottom-bar {120 position:absolute; bottom:0; left:0; right:0; height: 110px; background:#102955;121 display:flex; align-items:center; justify-content:center;122 }123 .gesture-pill { width: 220px; height: 16px; background:#fff; opacity:0.85; border-radius: 10px; }124 125 /* Utility SVG icons */126 .back svg { stroke:#fff; }127 .share svg { stroke:#fff; }128</style>129</head>130<body>131<div id="render-target">132 133 <div class="header">134 <div class="status-row">135 <div>1:45</div>136 <div class="status-icons">137 <div class="dot"></div>138 <div class="dot"></div>139 <div class="dot"></div>140 <div class="wifi"></div>141 <div class="battery"></div>142 </div>143 </div>144 145 <div class="title-row">146 <div class="icon-btn back">147 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>148 </div>149 <div>150 <div class="route-title">Roma, Autostazion... <> Milan Centrale</div>151 <div class="subtitle">Fri, Nov 10 - Fri, Nov 10, 1 passenger</div>152 </div>153 <div class="icon-btn share">154 <svg viewBox="0 0 24 24">155 <path d="M7 12l10-6M7 12l10 6M7 12V6"/>156 </svg>157 </div>158 </div>159 </div>160 161 <div class="tabs">162 <div class="tab">163 <svg viewBox="0 0 48 48">164 <rect x="8" y="14" width="32" height="16" rx="6"></rect>165 <circle cx="16" cy="34" r="3"></circle>166 <circle cx="32" cy="34" r="3"></circle>167 </svg>168 <div class="price">€100</div>169 <div class="dur">3h05m</div>170 </div>171 <div class="tab selected">172 <svg viewBox="0 0 48 48">173 <rect x="7" y="14" width="34" height="16" rx="4"></rect>174 <rect x="10" y="22" width="10" height="4"></rect>175 <circle cx="16" cy="34" r="3"></circle>176 <circle cx="32" cy="34" r="3"></circle>177 </svg>178 <div class="price">€52</div>179 <div class="dur">8h25m</div>180 </div>181 <div class="tab">182 <svg viewBox="0 0 48 48">183 <path d="M4 30l16-6 4-10 4 10 16 6-12 2-8 6-8-6z"></path>184 </svg>185 <div class="price">€125</div>186 <div class="dur">1h10m</div>187 </div>188 </div>189 190 <div class="content">191 <div class="section-title">Outbound <span class="accent">Buses</span></div>192 193 <div class="info-banner">194 <div class="qr"></div>195 <div>This icon means you’ve found a mobile ticket</div>196 </div>197 198 <div class="filters">199 <div class="pill">200 <svg viewBox="0 0 24 24"><path d="M4 6h16M8 12h8M11 18h2"/></svg>201 <div>Departure time</div>202 </div>203 <div class="pill">204 <svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12"/></svg>205 <div>Stops</div>206 </div>207 <div class="pill">208 <svg viewBox="0 0 24 24"><path d="M4 12h12M10 6l-6 6 6 6"/></svg>209 <div>Departure</div>210 </div>211 <div class="pill">212 <svg viewBox="0 0 24 24"><path d="M8 12h12M14 6l6 6-6 6"/></svg>213 <div>Arrival</div>214 </div>215 </div>216 217 <!-- Card 1 -->218 <div class="card">219 <div class="badge">FASTEST</div>220 <div class="card-top">221 <div class="logo">[IMG: Salemi logo]</div>222 <div class="qr-small"></div>223 </div>224 225 <div class="times">226 <div class="time">6:00 <span class="ampm">AM</span></div>227 <div class="duration">7h10m</div>228 <div class="divider"></div>229 <div class="time">1:10 <span class="ampm">PM</span></div>230 </div>231 232 <div class="stations">233 <div>Roma, Autostazione Tiburtina</div>234 <div>Milano, San Donato M3</div>235 </div>236 237 <div class="footer-row">238 <div class="transfers">239 <div>0 Transfers</div>240 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>241 </div>242 <div class="price-info">243 <div class="person"></div>244 <div>1 • Round trip</div>245 <div class="price">€86</div>246 </div>247 </div>248 </div>249 250 <!-- Card 2 -->251 <div class="card">252 <div class="badge">2ND FASTEST</div>253 <div class="card-top">254 <div class="logo">[IMG: Salemi logo]</div>255 <div class="qr-small"></div>256 </div>257 258 <div class="times">259 <div class="time">6:00 <span class="ampm">AM</span></div>260 <div class="duration">7h50m</div>261 <div class="divider"></div>262 <div class="time">1:50 <span class="ampm">PM</span></div>263 </div>264 265 <div class="stations">266 <div>Roma, Autostazione Tiburtina</div>267 <div>Milano, Autostazione Lampugnano</div>268 </div>269 270 <div class="footer-row">271 <div class="transfers">272 <div>0 Transfers</div>273 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>274 </div>275 <div class="price-info">276 <div class="person"></div>277 <div>1 • Round trip</div>278 <div class="price">€86</div>279 </div>280 </div>281 </div>282 283 <!-- Card 3 (partial display as in screenshot) -->284 <div class="card">285 <div class="badge" style="color:#19B26F;">CHEAPEST</div>286 <div class="card-top">287 <div class="logo" style="width:260px;">[IMG: itabus logo]</div>288 <div class="qr-small"></div>289 </div>290 291 <div class="times">292 <div class="time">9:10 <span class="ampm">AM</span></div>293 <div class="duration">8h25m</div>294 <div class="divider"></div>295 <div class="time">5:35 <span class="ampm">PM</span></div>296 </div>297 </div>298 299 </div>300 301 <div class="bottom-bar"><div class="gesture-pill"></div></div>302</div>303</body>304</html>