GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Train Search UI</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;}7 #render-target{8 width:1080px;height:2400px;position:relative;overflow:hidden;9 background:#ffffff;border-radius:0;10 }11 12 /* Header */13 .header{14 position:absolute;left:0;top:0;width:100%;height:540px;15 background:#2a0a78;color:#fff;16 }17 .status-bar{18 height:70px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:36px;19 }20 .status-left{display:flex;align-items:center;gap:20px;}21 .status-right{display:flex;align-items:center;gap:26px;}22 .icon-dot{width:20px;height:20px;background:#fff;border-radius:50%;opacity:.9;}23 .icon-signal{width:40px;height:26px;border:2px solid #fff;border-radius:6px;position:relative;}24 .icon-signal:before{content:"";position:absolute;left:6px;top:6px;width:24px;height:12px;background:#fff;border-radius:3px;}25 .top-nav{26 padding:20px 28px;display:flex;align-items:center;gap:28px;font-size:46px;font-weight:700;27 }28 .back-btn{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}29 .back-btn svg{width:46px;height:46px;fill:#fff;}30 .route{flex:1;line-height:1.3;}31 .chips{32 margin-top:26px;padding:0 24px;display:flex;gap:22px;flex-wrap:nowrap;33 }34 .chip{35 background:#30108a;border:2px solid rgba(255,255,255,0.25);color:#fff;border-radius:22px;36 padding:22px 28px;min-width:170px;text-align:center;37 }38 .chip .day{font-size:34px;font-weight:700;}39 .chip .price{font-size:34px;margin-top:10px;font-weight:800;}40 .chip.active{41 background:#f2edff;color:#2a0a78;border-color:#c6b9ff;42 }43 44 /* Content area */45 .content{46 position:absolute;left:0;top:540px;width:100%;height:1860px;background:#fff;border-top-left-radius:24px;border-top-right-radius:24px;47 }48 .section-title{49 display:flex;justify-content:space-between;align-items:center;50 padding:36px 28px;color:#222;font-size:42px;font-weight:700;border-bottom:1px solid #eee;51 }52 .collapsible{53 padding:22px 28px;display:flex;align-items:center;gap:16px;color:#333;font-size:40px;font-weight:700;border-bottom:1px solid #eee;54 }55 .collapsible svg{width:36px;height:36px;fill:#666;}56 .train-card{57 padding:34px 28px;border-bottom:1px solid #eee;58 }59 .row-top{60 display:flex;align-items:flex-start;justify-content:space-between;61 }62 .times{63 font-size:68px;font-weight:800;color:#111;display:flex;align-items:center;gap:28px;64 }65 .time-small{font-size:40px;font-weight:700;color:#111;margin-left:8px;}66 .arrow-mid svg{width:40px;height:40px;fill:#555;}67 .price{68 font-size:64px;font-weight:900;color:#111;display:flex;align-items:center;gap:16px;69 }70 .price .sub{font-size:34px;color:#666;display:block;margin-top:8px;}71 .note-row{72 margin-top:18px;display:flex;align-items:center;justify-content:space-between;font-size:38px;73 }74 .alert{color:#ff9c1a;font-weight:700;}75 .save{color:#1a60ff;font-weight:800;}76 .icons-mini{display:flex;align-items:center;gap:22px;}77 .mini-pill{width:54px;height:34px;border-radius:8px;background:#1a60ff;opacity:.9;}78 .mini-bike{width:42px;height:42px;border:3px solid #9aa8b6;border-radius:6px;}79 .mini-phone{width:44px;height:44px;border:3px solid #9aa8b6;border-radius:10px;}80 .dur-row{81 margin-top:24px;display:flex;align-items:center;gap:16px;color:#333;font-size:40px;82 }83 .circle{width:18px;height:18px;border:4px solid #666;border-radius:50%;}84 .view-stops{85 margin-top:26px;display:flex;justify-content:flex-end;align-items:center;color:#555;font-size:40px;gap:12px;86 }87 .view-stops svg{width:34px;height:34px;fill:#888;}88 89 /* Footer spacer representing device bar */90 .device-bar{91 position:absolute;bottom:22px;left:50%;transform:translateX(-50%);92 width:540px;height:16px;background:#d8d8d8;border-radius:10px;93 }94</style>95</head>96<body>97<div id="render-target">98 99 <div class="header">100 <div class="status-bar">101 <div class="status-left">102 <div>11:19</div>103 </div>104 <div class="status-right">105 <div class="icon-dot"></div>106 <div class="icon-dot" style="opacity:.7;"></div>107 <div class="icon-signal"></div>108 </div>109 </div>110 111 <div class="top-nav">112 <div class="back-btn">113 <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>114 </div>115 <div class="route">Bristol Parkway ➜ Edinburgh (Waverley)</div>116 </div>117 118 <div class="chips">119 <div class="chip">120 <div class="day">Tue 27</div>121 <div class="price">$108.79</div>122 </div>123 <div class="chip">124 <div class="day">Wed 28</div>125 <div class="price">$71.23</div>126 </div>127 <div class="chip active">128 <div class="day">Thu 29</div>129 <div class="price">$75.78</div>130 </div>131 <div class="chip">132 <div class="day">Fri 30</div>133 <div class="price">$170.67</div>134 </div>135 <div class="chip">136 <div class="day">Sat 1</div>137 <div class="price">$133.11</div>138 </div>139 </div>140 </div>141 142 <div class="content">143 <div class="section-title">144 <div>Thu, Jun 29, 2023</div>145 <div style="color:#666;font-weight:700;">Single from</div>146 </div>147 148 <div class="collapsible">149 <svg viewBox="0 0 24 24"><path d="M12 15l-5-5h10z"/></svg>150 <div>Earlier trains</div>151 </div>152 153 <!-- Train Card 1 -->154 <div class="train-card">155 <div class="row-top">156 <div class="times">157 <div>1:14<span class="time-small">PM</span></div>158 <div class="arrow-mid"><svg viewBox="0 0 24 24"><path d="M5 12h14l-4-4m4 4l-4 4" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>159 <div>7:31<span class="time-small">PM</span></div>160 </div>161 <div>162 <div class="price">163 <div>$193.52</div>164 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#0a7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>165 </div>166 <div class="sub">1st $420.86</div>167 </div>168 </div>169 170 <div class="note-row">171 <div class="alert">Hurry, only 1 ticket left at this price</div>172 <div class="save">Save $107.86</div>173 <div class="icons-mini">174 <div class="mini-pill"></div>175 <div class="mini-bike"></div>176 <div class="mini-phone"></div>177 </div>178 </div>179 180 <div class="dur-row">181 <div class="circle"></div>182 <div>6h 17m, Direct</div>183 </div>184 185 <div class="view-stops">186 <div>View stops</div>187 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>188 </div>189 </div>190 191 <!-- Train Card 2 -->192 <div class="train-card">193 <div class="row-top">194 <div class="times">195 <div>1:26<span class="time-small">PM</span></div>196 <div class="arrow-mid"><svg viewBox="0 0 24 24"><path d="M5 12h14l-4-4m4 4l-4 4" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>197 <div>7:54<span class="time-small">PM</span></div>198 </div>199 <div>200 <div class="price">201 <div>$193.39</div>202 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#0a7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>203 </div>204 <div class="sub">1st $408.03</div>205 </div>206 </div>207 208 <div class="note-row">209 <div style="color:#f0a640;font-weight:700;">Limited tickets left</div>210 <div class="save" style="font-weight:800;">Save $4.14</div>211 <div class="icons-mini">212 <div class="mini-pill"></div>213 </div>214 </div>215 216 <div class="dur-row">217 <div class="circle"></div>218 <div>6h 28m, 2 changes</div>219 </div>220 221 <div class="view-stops">222 <div>View stops</div>223 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>224 </div>225 </div>226 227 <!-- Train Card 3 -->228 <div class="train-card">229 <div class="row-top">230 <div class="times">231 <div>1:39<span class="time-small">PM</span></div>232 <div class="arrow-mid"><svg viewBox="0 0 24 24"><path d="M5 12h14l-4-4m4 4l-4 4" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>233 <div>8:07<span class="time-small">PM</span></div>234 </div>235 <div>236 <div class="price">237 <div>$211.70</div>238 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#0a7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>239 </div>240 </div>241 </div>242 243 <div class="note-row">244 <div style="color:#f0a640;font-weight:700;">Limited tickets left</div>245 <div class="save">Save $98.50</div>246 <div class="icons-mini">247 <div class="mini-pill"></div>248 <div class="mini-bike"></div>249 <div class="mini-phone"></div>250 </div>251 </div>252 253 <div class="dur-row">254 <div class="circle"></div>255 <div>6h 28m, 1 change</div>256 </div>257 258 <div class="view-stops">259 <div>View stops</div>260 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>261 </div>262 </div>263 264 <!-- Train Card 4 -->265 <div class="train-card">266 <div class="row-top">267 <div class="times">268 <div>2:14<span class="time-small">PM</span></div>269 <div class="arrow-mid"><svg viewBox="0 0 24 24"><path d="M5 12h14l-4-4m4 4l-4 4" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>270 <div>8:07<span class="time-small">PM</span></div>271 </div>272 <div>273 <div class="price">274 <div>$187.51</div>275 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#0a7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>276 </div>277 </div>278 </div>279 280 <div class="note-row">281 <div style="color:#f0a640;font-weight:700;">Limited tickets left</div>282 <div class="save">Save $3.07</div>283 <div class="icons-mini">284 <div class="mini-pill"></div>285 <div class="mini-bike"></div>286 <div class="mini-phone"></div>287 </div>288 </div>289 290 <div class="dur-row">291 <div class="circle"></div>292 <div>5h 53m, 2 changes</div>293 </div>294 295 <div class="view-stops">296 <div>View stops</div>297 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>298 </div>299 </div>300 </div>301 302 <div class="device-bar"></div>303</div>304</body>305</html>