GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Rome to Florence - Bus/Train Results</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#142137;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#F3F6FB;border-radius:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08);11 }12 /* Top status bar simulation */13 .status-bar{height:84px;background:#FFFFFF;display:flex;align-items:center;padding:0 28px;color:#333;font-weight:600;font-size:34px;border-bottom:1px solid #E6ECF5;}14 .status-icons{margin-left:auto;display:flex;gap:22px;align-items:center;}15 .dot{width:10px;height:10px;background:#999;border-radius:50%;}16 /* Header */17 .header{background:#FFFFFF;padding:24px 28px 18px 28px;}18 .nav-row{display:flex;align-items:center;gap:20px;}19 .back-btn{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;}20 .back-btn svg{width:36px;height:36px;fill:#1F2D3D;}21 .title-wrap{flex:1;}22 .title{font-size:48px;font-weight:700;letter-spacing:0.2px;}23 .title .arrow{color:#2E6CF6;margin:0 10px;}24 .edit-icon{display:inline-flex;vertical-align:middle;margin-left:10px;}25 .sub{margin-top:8px;color:#3B4C68;font-size:30px;}26 .filter-btn{margin-left:auto;background:#E7F2FF;color:#1E5AF4;border-radius:36px;padding:18px 28px;display:flex;align-items:center;gap:16px;font-weight:700;font-size:34px;}27 .filter-btn svg{width:32px;height:32px;fill:#1E5AF4;}28 /* Day chips */29 .day-tabs{display:flex;gap:22px;padding:18px 28px;background:#FFFFFF;border-top:1px solid #E6ECF5;border-bottom:1px solid #E6ECF5;}30 .chip{padding:22px 32px;border-radius:54px;background:#EEF2F7;color:#2B3D57;font-weight:700;font-size:34px;}31 .chip.active{background:#2E6CF6;color:#FFFFFF;}32 /* Mode row */33 .mode-row{display:flex;justify-content:space-between;padding:24px 28px;background:#FFFFFF;}34 .mode{display:flex;align-items:center;gap:18px;font-size:40px;font-weight:800;color:#233657;}35 .mode-icon{width:58px;height:58px;border-radius:12px;background:#EAF0FF;display:flex;align-items:center;justify-content:center;}36 .mode small{display:block;color:#5B6D86;font-weight:700;font-size:28px;margin-top:8px;}37 /* Cards */38 .list{padding:18px 20px;}39 .card{40 background:#FFFFFF;border-radius:28px;padding:24px;margin-bottom:26px;41 box-shadow:0 1px 0 rgba(0,0,0,0.06);42 }43 .badge{display:inline-flex;align-items:center;gap:12px;background:#E9F8E2;color:#2F9E44;border-radius:18px;padding:10px 16px;font-weight:800;font-size:28px;margin-bottom:18px;}44 .badge svg{width:24px;height:24px;fill:#2F9E44;}45 .card-main{display:flex;align-items:flex-start;gap:24px;position:relative;}46 .times{width:190px;}47 .time{font-size:52px;font-weight:800;color:#16233A;}48 .dur{color:#6B7C92;font-size:28px;margin-top:8px;}49 .endtime{margin-top:20px;font-size:52px;font-weight:800;color:#16233A;}50 .route{flex:1;position:relative;padding-left:40px;}51 .line{position:absolute;left:14px;top:8px;bottom:8px;width:8px;background:#CFE8D4;border-radius:8px;}52 .dot-start,.dot-end{position:absolute;left:7px;width:22px;height:22px;border-radius:50%;}53 .dot-start{top:8px;background:#3DBE57;}54 .dot-end{bottom:8px;background:#F6A43B;}55 .place{font-size:38px;font-weight:700;color:#233657;margin-bottom:16px;}56 .direct{margin-top:4px;color:#5E738E;font-size:30px;font-weight:700;}57 .price-area{width:180px;text-align:right;}58 .price{font-size:52px;font-weight:900;color:#142137;}59 .euro{font-weight:900;}60 .person{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;width:78px;height:54px;border-radius:26px;background:#EEF2F7;color:#27405E;font-weight:700;}61 /* Footer line inside card */62 .card-foot{display:flex;align-items:center;gap:16px;margin-top:16px;}63 .rating{display:inline-flex;align-items:center;gap:10px;background:#F4F7FF;color:#1E3B8F;border-radius:24px;padding:10px 16px;font-weight:900;}64 .rating svg{width:26px;height:26px;fill:#FFD54F;}65 .operator{font-size:34px;font-weight:800;color:#1E2F4C;}66 /* Partner + second badge row */67 .partner-row{display:flex;align-items:center;gap:18px;margin-bottom:10px;}68 .partner{display:inline-flex;align-items:center;gap:12px;background:#FFF4D8;color:#7A5300;border-radius:18px;padding:10px 16px;font-weight:800;font-size:28px;}69 .partner svg{width:24px;height:24px;fill:#C28C00;}70 /* Helper icons */71 .small-person{72 width:46px;height:46px;border-radius:18px;background:#EEF2F7;display:flex;align-items:center;justify-content:center;margin-left:auto;73 }74 /* Minor tweaks to mimic app spacing */75 .subtitle-line{height:2px;background:#E6ECF5;margin-top:8px;}76</style>77</head>78<body>79<div id="render-target">80 81 <!-- Simulated status bar -->82 <div class="status-bar">83 3:3284 <div class="status-icons">85 <div class="dot"></div><div class="dot"></div><div class="dot"></div>86 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M20 6h-16v12h16v-12zm-18 14v-16h20v16h-20zm6-10h8v2h-8v-2z" fill="#666"/></svg>87 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 4l6 6h-4v6h-4v-6h-4l6-6z" fill="#666"/></svg>88 </div>89 </div>90 91 <!-- App header -->92 <div class="header">93 <div class="nav-row">94 <div class="back-btn">95 <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>96 </div>97 <div class="title-wrap">98 <div class="title">Rome <span class="arrow">→</span> Florence99 <span class="edit-icon">100 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94 14.06 6.19 3 17.25zm18.37-11.21a1 1 0 0 0 0-1.41l-2-2a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.49-1.96z"/></svg>101 </span>102 </div>103 <div class="sub">Found 83 results</div>104 </div>105 <div class="filter-btn">106 <svg viewBox="0 0 24 24"><path d="M3 5h18v2h-18zm4 6h10v2h-10zm2 6h6v2h-6z"/></svg>107 Departure108 </div>109 </div>110 </div>111 112 <!-- Day tabs -->113 <div class="day-tabs">114 <div class="chip active">Wed 15, Nov</div>115 <div class="chip">Thu 16, Nov</div>116 <div class="chip">Fri 17, Nov</div>117 <div class="chip">Sat 18</div>118 </div>119 120 <!-- Mode row -->121 <div class="mode-row">122 <div class="mode">123 <div class="mode-icon">124 <svg viewBox="0 0 24 24"><path d="M4 6h16v8h-16zm2 10h-2v2h2v-2zm14 0h-2v2h2v-2z"/></svg>125 </div>126 Bus127 <small>X 26</small>128 </div>129 <div class="mode">130 <div class="mode-icon">131 <svg viewBox="0 0 24 24"><path d="M4 3h16v12h-16zm3 16l-2 2h2l2-2h6l2 2h2l-2-2h-10z"/></svg>132 </div>133 Train134 <small>X 57</small>135 </div>136 </div>137 138 <!-- Results list -->139 <div class="list">140 141 <!-- Card 1 -->142 <div class="card">143 <div class="badge">144 <svg viewBox="0 0 24 24"><path d="M15 7h-6v10h6v-10zm-8 12v-14h10v14h-10z"/></svg>145 M-ticket146 </div>147 148 <div class="card-main">149 <div class="times">150 <div class="time">05:35</div>151 <div class="dur">4h 5min</div>152 <div class="endtime">09:40</div>153 </div>154 155 <div class="route">156 <div class="line"></div>157 <div class="dot-start"></div>158 <div class="dot-end"></div>159 <div class="place">Rome, Tiburtina Bus terminal</div>160 <div class="direct">DIRECT</div>161 <div class="place" style="margin-top:18px;">Florence, Villa Costanza Bus terminal</div>162 </div>163 164 <div class="price-area">165 <div class="price">12 <span class="euro">€</span></div>166 <div class="person">👤 1</div>167 </div>168 </div>169 170 <div class="card-foot">171 <div class="rating">172 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.7 1.64-7.03-5.46-4.73 7.19-.62 2.81-6.62 2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>173 7.7174 </div>175 <div class="operator">Marino Autolinee</div>176 </div>177 </div>178 179 <!-- Card 2 -->180 <div class="card">181 <div class="badge">182 <svg viewBox="0 0 24 24"><path d="M15 7h-6v10h6v-10zm-8 12v-14h10v14h-10z"/></svg>183 M-ticket184 </div>185 186 <div class="card-main">187 <div class="times">188 <div class="time">06:00</div>189 <div class="dur">3h</div>190 <div class="endtime">09:00</div>191 </div>192 193 <div class="route">194 <div class="line"></div>195 <div class="dot-start"></div>196 <div class="dot-end"></div>197 <div class="place">Rome, Tiburtina Bus terminal</div>198 <div class="direct">DIRECT</div>199 <div class="place" style="margin-top:18px;">Florence, Villa Costanza Bus terminal</div>200 </div>201 202 <div class="price-area">203 <div class="price">26 <span class="euro">€</span></div>204 <div class="person">👤 1</div>205 </div>206 </div>207 208 <div class="card-foot">209 <div class="rating">210 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.7 1.64-7.03-5.46-4.73 7.19-.62 2.81-6.62 2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>211 8.1212 </div>213 <div class="operator">Autoservizi Salemi</div>214 </div>215 </div>216 217 <!-- Card 3 (Partner + M-ticket) -->218 <div class="card">219 <div class="partner-row">220 <div class="partner">221 <svg viewBox="0 0 24 24"><path d="M4 6h16v12h-16z"/></svg>222 Buy from partner223 </div>224 <div class="badge" style="margin:0;">225 <svg viewBox="0 0 24 24"><path d="M15 7h-6v10h6v-10zm-8 12v-14h10v14h-10z"/></svg>226 M-ticket227 </div>228 </div>229 230 <div class="card-main">231 <div class="times">232 <div class="time">07:30</div>233 <div class="dur">4h 10min</div>234 <div class="endtime">11:40</div>235 </div>236 237 <div class="route">238 <div class="line"></div>239 <div class="dot-start"></div>240 <div class="dot-end"></div>241 <div class="place">Rome</div>242 <div class="direct">DIRECT</div>243 <div class="place" style="margin-top:18px;">Florence</div>244 </div>245 246 <div class="price-area">247 <div class="price">1.99 <span class="euro">€</span></div>248 <div class="person">👤 1</div>249 </div>250 </div>251 252 <div class="card-foot">253 <div class="rating">254 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.7 1.64-7.03-5.46-4.73 7.19-.62 2.81-6.62 2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>255 6.6256 </div>257 <div class="operator">FlixBus</div>258 </div>259 </div>260 261 <!-- Card 4 -->262 <div class="card">263 <div class="badge">264 <svg viewBox="0 0 24 24"><path d="M15 7h-6v10h6v-10zm-8 12v-14h10v14h-10z"/></svg>265 M-ticket266 </div>267 268 <div class="card-main">269 <div class="times">270 <div class="time">07:35</div>271 <div class="dur">3h 15min</div>272 <div class="endtime">10:50</div>273 </div>274 275 <div class="route">276 <div class="line"></div>277 <div class="dot-start"></div>278 <div class="dot-end"></div>279 <div class="place">Rome, Tiburtina Bus terminal</div>280 <div class="direct">DIRECT</div>281 <div class="place" style="margin-top:18px;">Florence, Villa Costanza Bus terminal</div>282 </div>283 284 <div class="price-area">285 <div class="price">1.99 <span class="euro">€</span></div>286 <div class="person">👤 1</div>287 </div>288 </div>289 290 <div class="card-foot">291 <div class="rating">292 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.7 1.64-7.03-5.46-4.73 7.19-.62 2.81-6.62 2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z"/></svg>293 7.6294 </div>295 <div class="operator">Itabus</div>296 </div>297 </div>298 299 <!-- Spacer to emulate bottom content cutoff -->300 <div style="height:200px;"></div>301 </div>302 303</div>304</body>305</html>