GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Bus • Barcelona to Madrid</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #333; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height: 120px;17 background: #1f1f1f;18 color: #fff;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-size: 40px;23 justify-content: space-between;24 }25 .status-left { display: flex; align-items: center; gap: 20px; }26 .status-right { display: flex; align-items: center; gap: 24px; }27 .status-dot { width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; opacity: 0.8; }28 .battery {29 width: 52px; height: 28px; border: 3px solid #fff; border-radius: 4px; position: relative;30 }31 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }32 .battery-fill { position: absolute; left: 4px; top: 4px; height: 16px; width: 32px; background: #fff; }33 34 /* Header */35 .header {36 background: #2b2632;37 color: #fff;38 height: 320px;39 position: relative;40 padding-top: 40px;41 }42 .header-inner {43 display: flex; align-items: center; justify-content: space-between;44 padding: 40px 36px 0 36px;45 }46 .title {47 font-size: 56px;48 font-weight: 600;49 padding: 24px 36px 0 96px;50 }51 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }52 53 /* Subheader */54 .subheader {55 background: #ffffff;56 border-top: 1px solid #e5e5e5;57 border-bottom: 1px solid #e5e5e5;58 padding: 32px 36px;59 font-size: 40px;60 }61 .subheader .label { color: #707070; margin-right: 18px; }62 .subheader .value { color: #e91e63; font-weight: 600; }63 64 /* List sections */65 .divider { height: 2px; background: #eeeeee; }66 .date-pill {67 display: inline-block;68 margin: 24px 36px 12px 36px;69 background: #f4e9d2;70 color: #5a5242;71 padding: 14px 18px;72 border-radius: 12px;73 font-size: 36px;74 border: 1px solid #e7d4ac;75 }76 .result {77 display: flex;78 align-items: flex-start;79 justify-content: space-between;80 padding: 12px 36px 28px 36px;81 }82 .left {83 display: flex; align-items: flex-start; gap: 26px;84 }85 .img-placeholder {86 width: 88px; height: 88px;87 background: #E0E0E0; border: 1px solid #BDBDBD;88 display: flex; align-items: center; justify-content: center;89 color: #757575; font-size: 26px; border-radius: 8px;90 }91 .details { }92 .time {93 font-size: 52px; font-weight: 700; color: #333; margin-top: 8px;94 }95 .meta {96 display: flex; align-items: center; gap: 16px; margin-top: 16px;97 }98 .route {99 background: #69cf2b; color: #ffffff; font-weight: 700;100 padding: 8px 18px; border-radius: 10px; font-size: 34px;101 }102 .duration {103 font-size: 44px; color: #555; margin-top: 20px;104 }105 106 /* Show more */107 .show-more {108 text-align: center;109 padding: 40px 0;110 color: #e91e63;111 font-size: 44px;112 font-weight: 700;113 letter-spacing: 1px;114 }115 116 /* Operators card */117 .operators {118 border-top: 1px solid #eeeeee;119 padding: 24px 36px 12px 36px;120 }121 .operators .section-title {122 font-size: 52px; font-weight: 700; margin: 12px 0 24px 0;123 }124 .operator-row {125 display: flex; align-items: center; justify-content: space-between;126 padding: 14px 0 28px 0; border-bottom: 1px solid #eeeeee;127 }128 .op-left { display: flex; align-items: center; gap: 26px; }129 .logo { width: 120px; height: 48px; }130 .op-info { }131 .op-name { font-size: 46px; font-weight: 600; }132 .op-details { font-size: 36px; color: #777; margin-top: 8px; }133 .chev { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }134 135 /* CTA bar */136 .cta {137 position: absolute; left: 0; bottom: 96px;138 width: 1080px; height: 150px;139 background: #22b573;140 color: #fff; display: flex; align-items: center;141 padding: 0 36px; gap: 24px;142 }143 .cta-text { font-size: 44px; font-weight: 800; letter-spacing: 1px; }144 .cta-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 8px; }145 146 /* Home pill */147 .home-pill {148 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);149 width: 300px; height: 16px; background: #d7d7d7; border-radius: 12px;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <div class="status-bar">157 <div class="status-left">158 <div>3:59</div>159 <div class="status-dot"></div>160 </div>161 <div class="status-right">162 <div class="status-dot"></div>163 <div class="battery"><div class="battery-fill"></div></div>164 </div>165 </div>166 167 <div class="header">168 <div class="header-inner">169 <div class="icon-btn">170 <svg width="56" height="56" viewBox="0 0 56 56">171 <path d="M36 12 L18 28 L36 44" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 </div>174 <div class="icon-btn">175 <svg width="56" height="56" viewBox="0 0 56 56">176 <circle cx="14" cy="14" r="6" fill="none" stroke="#ffffff" stroke-width="4"/>177 <circle cx="42" cy="12" r="6" fill="none" stroke="#ffffff" stroke-width="4"/>178 <circle cx="42" cy="42" r="6" fill="none" stroke="#ffffff" stroke-width="4"/>179 <path d="M20 16 L36 14" stroke="#ffffff" stroke-width="4" />180 <path d="M18 18 L38 38" stroke="#ffffff" stroke-width="4" />181 </svg>182 </div>183 </div>184 <div class="title">Bus • Barcelona to Madrid</div>185 </div>186 187 <div class="subheader">188 <span class="label">Departs</span>189 <span class="value">Wednesday, Aug 16 12:28 PM</span>190 </div>191 192 <div class="divider"></div>193 <div class="date-pill">Departing Thursday, Aug 17</div>194 <div class="result">195 <div class="left">196 <div class="img-placeholder">[IMG: Transfer icon]</div>197 <div class="details">198 <div class="time">2:25 AM - 9:40 AM</div>199 <div class="meta">200 <svg width="48" height="40" viewBox="0 0 48 40">201 <rect x="6" y="8" width="36" height="18" rx="4" fill="#9e9e9e"></rect>202 <circle cx="16" cy="34" r="4" fill="#9e9e9e"></circle>203 <circle cx="32" cy="34" r="4" fill="#9e9e9e"></circle>204 </svg>205 <div class="route">N738</div>206 </div>207 </div>208 </div>209 <div class="duration">7 hr 15 min</div>210 </div>211 212 <div class="divider"></div>213 <div class="date-pill">Departing Friday, Aug 18</div>214 <div class="result">215 <div class="left">216 <div class="img-placeholder">[IMG: Transfer icon]</div>217 <div class="details">218 <div class="time">2:25 AM - 9:40 AM</div>219 <div class="meta">220 <svg width="48" height="40" viewBox="0 0 48 40">221 <rect x="6" y="8" width="36" height="18" rx="4" fill="#9e9e9e"></rect>222 <circle cx="16" cy="34" r="4" fill="#9e9e9e"></circle>223 <circle cx="32" cy="34" r="4" fill="#9e9e9e"></circle>224 </svg>225 <div class="route">N738</div>226 </div>227 </div>228 </div>229 <div class="duration">7 hr 15 min</div>230 </div>231 232 <div class="divider"></div>233 <div class="date-pill">Departing Saturday, Aug 19</div>234 <div class="result">235 <div class="left">236 <div class="img-placeholder">[IMG: Transfer icon]</div>237 <div class="details">238 <div class="time">2:25 AM - 9:40 AM</div>239 <div class="meta">240 <svg width="48" height="40" viewBox="0 0 48 40">241 <rect x="6" y="8" width="36" height="18" rx="4" fill="#9e9e9e"></rect>242 <circle cx="16" cy="34" r="4" fill="#9e9e9e"></circle>243 <circle cx="32" cy="34" r="4" fill="#9e9e9e"></circle>244 </svg>245 <div class="route">N738</div>246 </div>247 </div>248 </div>249 <div class="duration">7 hr 15 min</div>250 </div>251 252 <div class="divider"></div>253 <div class="date-pill">Departing Sunday, Aug 20</div>254 <div class="result">255 <div class="left">256 <div class="img-placeholder">[IMG: Transfer icon]</div>257 <div class="details">258 <div class="time">2:25 AM - 9:40 AM</div>259 <div class="meta">260 <svg width="48" height="40" viewBox="0 0 48 40">261 <rect x="6" y="8" width="36" height="18" rx="4" fill="#9e9e9e"></rect>262 <circle cx="16" cy="34" r="4" fill="#9e9e9e"></circle>263 <circle cx="32" cy="34" r="4" fill="#9e9e9e"></circle>264 </svg>265 <div class="route">N738</div>266 </div>267 </div>268 </div>269 <div class="duration">7 hr 15 min</div>270 </div>271 272 <div class="show-more">SHOW MORE</div>273 274 <div class="operators">275 <div class="section-title">Operators</div>276 <div class="operator-row">277 <div class="op-left">278 <div class="img-placeholder logo">[IMG: ALSA logo]</div>279 <div class="op-info">280 <div class="op-name">ALSA</div>281 <div class="op-details">7 hr 35 min • 3 times a day • Direct</div>282 </div>283 </div>284 <div class="chev">285 <svg width="44" height="44" viewBox="0 0 44 44">286 <path d="M16 10 L28 22 L16 34" stroke="#9e9e9e" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>287 </svg>288 </div>289 </div>290 </div>291 292 <div class="cta">293 <div class="cta-icon">294 <svg width="36" height="36" viewBox="0 0 36 36">295 <path d="M10 26 L26 10" stroke="#ffffff" stroke-width="3" fill="none"/>296 <path d="M14 10 H26 V22" stroke="#ffffff" stroke-width="3" fill="none"/>297 <rect x="6" y="6" width="24" height="24" rx="4" stroke="#ffffff" stroke-width="3" fill="none"/>298 </svg>299 </div>300 <div class="cta-text">FIND TICKETS NOW</div>301 </div>302 303 <div class="home-pill"></div>304</div>305</body>306</html>