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>Travel Listing UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff;12 }13 /* Utility */14 .row{ display:flex; align-items:center; }15 .space-between{ display:flex; align-items:center; justify-content:space-between; }16 .muted{ color:#6f7c8a; }17 .tiny{ font-size:24px; }18 .small{ font-size:28px; }19 .medium{ font-size:32px; }20 .bold{ font-weight:700; }21 .pill{22 padding:18px 26px; border-radius:16px; border:1px solid #d9dee5; background:#fff; color:#2c3a48;23 display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:30px;24 box-shadow: 0 2px 0 rgba(0,0,0,0.02);25 }26 .pill svg{ width:28px; height:28px; }27 .pill.teal{ background:#33c3c8; color:#fff; border-color:#33c3c8; }28 .screen-padding{ padding:36px; }29 30 /* Status bar */31 .status-bar{ height:88px; padding:18px 28px; font-size:30px; color:#2c3a48; }32 .status-left{ gap:26px; }33 .circle-icon{ width:34px; height:34px; border-radius:50%; background:#e9edf3; display:inline-flex; align-items:center; justify-content:center; font-size:20px; color:#5a6575; }34 .dot{ width:8px; height:8px; border-radius:50%; background:#7a8597; display:inline-block; margin-left:12px; }35 .status-right{ gap:22px; }36 .battery{ width:44px; height:22px; border:2px solid #7a8597; border-radius:5px; position:relative; }37 .battery::after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#7a8597; border-radius:2px; }38 .battery .level{ position:absolute; left:3px; top:3px; height:14px; width:26px; background:#7a8597; border-radius:2px; }39 40 /* App bar */41 .app-bar{ padding:16px 24px 8px 24px; }42 .back{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; }43 .back svg{ width:36px; height:36px; }44 .app-actions{ gap:20px; }45 .action-icon{ width:40px; height:40px; border-radius:12px; background:#f0f3f7; display:flex; align-items:center; justify-content:center; }46 47 /* Title */48 .title-wrap{ text-align:center; margin-top:12px; }49 .title{ font-size:56px; font-weight:800; color:#202a36; }50 .subtitle{ margin-top:10px; font-size:30px; color:#6f7c8a; }51 52 /* Filters */53 .filters{ margin-top:26px; display:flex; gap:22px; justify-content:flex-start; padding:0 24px; }54 .chip{ padding:26px 30px; border-radius:24px; border:1px solid #d9dee5; background:#fff; color:#2c3a48; font-size:34px; font-weight:800; display:flex; align-items:center; gap:18px; }55 .chip.teal{ background:#37c4c8; color:#fff; border-color:#37c4c8; }56 .chip .sub{ font-size:28px; font-weight:700; color:#8ea5b5; }57 .chip.teal .sub{ color:#e8ffff; }58 59 /* Cards */60 .card{61 margin:26px 24px;62 padding:28px;63 border-radius:26px;64 border:1px solid #e3e6eb;65 box-shadow: 0 8px 24px rgba(0,0,0,0.06);66 background:#fff;67 }68 .brand-row{ display:flex; align-items:center; justify-content:space-between; }69 .brand-left{ display:flex; align-items:center; gap:18px; }70 .brand-name{ font-size:36px; font-weight:800; letter-spacing:0.2px; color:#273241; }71 .rating{ display:flex; align-items:center; gap:10px; color:#5b6b7f; font-weight:700; font-size:30px; }72 .price{ font-size:40px; font-weight:900; color:#1f7a88; }73 74 .time-row{ margin-top:22px; display:flex; align-items:center; gap:18px; }75 .time-big{ font-size:52px; font-weight:900; color:#1d2633; }76 .duration{ font-size:30px; color:#7a8597; }77 .arrow{ width:40px; height:2px; background:#c6ccd6; position:relative; margin:0 6px; }78 .arrow::after{ content:""; position:absolute; right:-6px; top:-6px; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid #c6ccd6; }79 80 .loc-row{ margin-top:18px; display:flex; justify-content:space-between; color:#334050; font-size:32px; }81 .chips-row{ margin-top:24px; display:flex; gap:16px; }82 83 .badge{ padding:18px 26px; border-radius:18px; font-size:30px; font-weight:800; }84 .badge.gray{ background:#eef1f5; color:#2c3a48; }85 .badge.green{ background:#dff7ea; color:#137f61; }86 87 /* Ad card special */88 .ad-title{ font-size:40px; font-weight:900; color:#1f2c3a; }89 .ad-sub{ margin-top:12px; font-size:30px; color:#677488; }90 91 /* Simple icons */92 .icon-train, .icon-bus, .icon-car{ width:34px; height:34px; }93 .star{ width:28px; height:28px; }94</style>95</head>96<body>97<div id="render-target">98 99 <!-- Status bar -->100 <div class="status-bar space-between">101 <div class="row status-left">102 <div class="medium bold">7:37</div>103 <div class="circle-icon">👻</div>104 <div class="medium">28°</div>105 <div class="circle-icon">⦿</div>106 <div class="circle-icon">✉️</div>107 <span class="dot"></span>108 </div>109 <div class="row status-right">110 <div class="circle-icon">📶</div>111 <div class="battery"><div class="level"></div></div>112 </div>113 </div>114 115 <!-- App Bar -->116 <div class="app-bar space-between">117 <div class="back">118 <svg viewBox="0 0 24 24">119 <path d="M15 18l-6-6 6-6" fill="none" stroke="#2c3a48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>120 </svg>121 </div>122 <div class="app-actions row">123 <div class="action-icon">124 <svg viewBox="0 0 24 24">125 <circle cx="12" cy="12" r="9" fill="#dfe6ee"/>126 </svg>127 </div>128 <div class="action-icon">129 <svg viewBox="0 0 24 24">130 <rect x="5" y="5" width="14" height="14" fill="#dfe6ee"/>131 </svg>132 </div>133 </div>134 </div>135 136 <!-- Title -->137 <div class="title-wrap">138 <div class="title">Los Angeles to San Diego</div>139 <div class="subtitle">Departure on Tuesday, 9/12</div>140 </div>141 142 <!-- Filters -->143 <div class="filters">144 <div class="chip">145 <svg viewBox="0 0 24 24">146 <path d="M3 6h18M6 12h12M9 18h6" stroke="#7a8597" stroke-width="2" stroke-linecap="round"/>147 </svg>148 <span>FILTERS</span>149 </div>150 <div class="chip teal">151 <span>WANDERLIST</span>152 <span class="sub">91 trips</span>153 </div>154 <div class="chip">155 <span>CHEAPEST</span>156 <span class="sub">$19.99</span>157 </div>158 <div class="chip">159 <span>EARLIEST</span>160 <span class="sub">7:10a</span>161 </div>162 </div>163 164 <!-- Card 1: Amtrak -->165 <div class="card">166 <div class="brand-row">167 <div class="brand-left">168 <svg class="icon-train" viewBox="0 0 24 24">169 <rect x="5" y="8" width="14" height="8" rx="2" fill="#8aa3b5"/>170 <circle cx="9" cy="18" r="2" fill="#8aa3b5"/>171 <circle cx="15" cy="18" r="2" fill="#8aa3b5"/>172 </svg>173 <div class="brand-name">AMTRAK</div>174 <div class="rating">175 <svg class="star" viewBox="0 0 24 24">176 <path d="M12 3l3 6 6 .8-4.5 4.2 1.1 6-5.6-3-5.6 3 1.1-6L3 9.8 9 9z" fill="#37c4c8"/>177 </svg>178 <span>4.4</span>179 </div>180 </div>181 <div class="price">$36.00</div>182 </div>183 184 <div class="time-row">185 <div class="time-big">10:10 AM</div>186 <div class="arrow"></div>187 <div class="time-big">1:07 PM</div>188 <div class="duration">2h 57m</div>189 </div>190 191 <div class="loc-row">192 <div>Union Station</div>193 <div>Santa Fe Depot - 1050 K...</div>194 </div>195 196 <div class="chips-row">197 <div class="pill">198 Details199 <svg viewBox="0 0 24 24">200 <path d="M6 9l6 6 6-6" fill="none" stroke="#6f7c8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 </div>203 <div class="badge gray">0 transfers</div>204 <div class="badge green">E-ticket</div>205 </div>206 </div>207 208 <!-- Card 2: FlixBus -->209 <div class="card">210 <div class="brand-row">211 <div class="brand-left">212 <svg class="icon-bus" viewBox="0 0 24 24">213 <rect x="4" y="7" width="16" height="9" rx="2" fill="#8aa3b5"/>214 <circle cx="8" cy="18" r="2" fill="#8aa3b5"/>215 <circle cx="16" cy="18" r="2" fill="#8aa3b5"/>216 </svg>217 <div class="brand-name">FLIXBUS US</div>218 </div>219 <div class="price">$19.99</div>220 </div>221 222 <div class="time-row">223 <div class="time-big">7:15 AM</div>224 <div class="arrow"></div>225 <div class="time-big">9:25 AM</div>226 <div class="duration">2h 10m</div>227 </div>228 229 <div class="loc-row">230 <div>Downtown - Vignes Lot</div>231 <div>La Jolla - UC San Diego</div>232 </div>233 234 <div class="chips-row">235 <div class="pill">236 Details237 <svg viewBox="0 0 24 24">238 <path d="M6 9l6 6 6-6" fill="none" stroke="#6f7c8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="badge gray">0 transfers</div>242 <div class="badge green">E-ticket</div>243 </div>244 </div>245 246 <!-- Card 3: Rental Cars Ad -->247 <div class="card">248 <div class="brand-row">249 <div class="brand-left">250 <svg class="icon-car" viewBox="0 0 24 24">251 <path d="M4 14h16l-2-5H6z" fill="#8aa3b5"/>252 <circle cx="8" cy="17" r="2" fill="#8aa3b5"/>253 <circle cx="16" cy="17" r="2" fill="#8aa3b5"/>254 </svg>255 <div class="brand-name">RENTALCARS.COM</div>256 </div>257 <div class="price">From $30.00</div>258 </div>259 <div class="ad-title">Find cheap rental cars</div>260 <div class="ad-sub">Find great deals on cheap cars in the area.</div>261 </div>262 263 <!-- Card 4: Tufesa Internacional -->264 <div class="card">265 <div class="brand-row">266 <div class="brand-left">267 <svg class="icon-bus" viewBox="0 0 24 24">268 <rect x="4" y="7" width="16" height="9" rx="2" fill="#8aa3b5"/>269 <circle cx="8" cy="18" r="2" fill="#8aa3b5"/>270 <circle cx="16" cy="18" r="2" fill="#8aa3b5"/>271 </svg>272 <div class="brand-name">TUFESA INTERNACIONAL</div>273 <div class="rating">274 <svg class="star" viewBox="0 0 24 24">275 <path d="M12 3l3 6 6 .8-4.5 4.2 1.1 6-5.6-3-5.6 3 1.1-6L3 9.8 9 9z" fill="#37c4c8"/>276 </svg>277 <span>4.2</span>278 </div>279 </div>280 <div class="price">$37.00</div>281 </div>282 283 <div class="time-row">284 <div class="time-big">2:15 PM</div>285 <div class="arrow"></div>286 <div class="time-big">5:00 PM</div>287 <div class="duration">2h 45m</div>288 </div>289 290 <div class="loc-row">291 <div>611 Maple Ave</div>292 <div>San Ysidro CA</div>293 </div>294 295 <div class="chips-row">296 <div class="pill">297 Details298 <svg viewBox="0 0 24 24">299 <path d="M6 9l6 6 6-6" fill="none" stroke="#6f7c8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>300 </svg>301 </div>302 <div class="badge gray">0 transfers</div>303 </div>304 </div>305 306 <!-- Partial last card to mimic screenshot cutoff -->307 <div class="card" style="margin-bottom:0;">308 <div class="brand-row">309 <div class="brand-left">310 <svg class="icon-train" viewBox="0 0 24 24">311 <rect x="5" y="8" width="14" height="8" rx="2" fill="#8aa3b5"/>312 <circle cx="9" cy="18" r="2" fill="#8aa3b5"/>313 <circle cx="15" cy="18" r="2" fill="#8aa3b5"/>314 </svg>315 <div class="brand-name">AMTRAK PACIFIC SURFLI...</div>316 <div class="rating">317 <svg class="star" viewBox="0 0 24 24">318 <path d="M12 3l3 6 6 .8-4.5 4.2 1.1 6-5.6-3-5.6 3 1.1-6L3 9.8 9 9z" fill="#37c4c8"/>319 </svg>320 <span>4.5</span>321 </div>322 </div>323 <div class="price">$36.00</div>324 </div>325 </div>326 327</div>328</body>329</html>