GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Hotel List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Header */18 .header {19 position: relative;20 width: 1080px;21 height: 300px;22 background: #143d8f; /* deep blue */23 color: #fff;24 }25 .status-row {26 position: absolute;27 top: 24px;28 left: 36px;29 right: 36px;30 display: flex;31 justify-content: space-between;32 align-items: center;33 font-size: 40px;34 letter-spacing: 0.5px;35 }36 .status-icons {37 display: flex;38 gap: 28px;39 align-items: center;40 }41 .status-icons .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }42 .battery {43 width: 44px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;44 }45 .battery:after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }46 .battery .level { position: absolute; left: 3px; top: 3px; right: 10px; bottom: 3px; background: #fff; }47 48 /* Search pill */49 .search-pill {50 position: absolute;51 left: 48px;52 right: 48px;53 top: 140px;54 height: 110px;55 background: #ffffff;56 border: 12px solid #f6c45f;57 border-radius: 28px;58 box-sizing: border-box;59 display: flex;60 align-items: center;61 padding: 0 32px;62 color: #1a1a1a;63 font-size: 42px;64 gap: 24px;65 }66 .search-pill .back {67 width: 48px; height: 48px;68 }69 70 /* Filter bar */71 .filter-bar {72 position: relative;73 top: 0;74 width: 1080px;75 background: #ffffff;76 border-bottom: 1px solid #e6e6e6;77 display: flex;78 justify-content: space-around;79 align-items: center;80 height: 120px;81 color: #222;82 font-size: 38px;83 }84 .filter-item { display: flex; align-items: center; gap: 18px; color: #222; }85 .filter-item svg { width: 40px; height: 40px; }86 87 /* Content */88 .content { position: relative; padding-top: 20px; }89 .count {90 font-size: 34px;91 color: #555;92 padding: 24px 40px;93 }94 95 .card {96 position: relative;97 margin: 0 24px 24px 24px;98 padding: 32px 24px;99 border-top: 1px solid #eeeeee;100 background: #ffffff;101 display: flex;102 gap: 28px;103 }104 .card:first-of-type { border-top: none; }105 .hotel-img {106 width: 320px; height: 420px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 26px;110 display: flex; justify-content: center; align-items: center;111 color: #757575; font-size: 32px; text-align: center; padding: 20px;112 }113 .card-right { flex: 1; position: relative; }114 .favorite {115 position: absolute; right: 18px; top: 4px;116 width: 52px; height: 52px;117 }118 119 .title-row { display: flex; align-items: center; gap: 16px; }120 .title { font-size: 46px; font-weight: 700; color: #222; }121 .stars { display: inline-flex; gap: 6px; }122 .stars svg { width: 34px; height: 34px; }123 124 .badge {125 display: inline-flex; align-items: center; justify-content: center;126 background: #1e5bc6;127 color: #fff;128 font-weight: 700;129 font-size: 32px;130 border-radius: 10px;131 padding: 10px 14px;132 margin-right: 10px;133 }134 .rating-text { font-size: 34px; color: #333; }135 .muted { color: #666; }136 137 .row { display: flex; align-items: center; gap: 14px; margin: 12px 0; font-size: 32px; color: #444; }138 .row .tag {139 background: #2e7d32; color: #fff; font-weight: 700;140 padding: 8px 16px; border-radius: 12px; font-size: 30px;141 }142 .sustainable { color: #2e7d32; font-weight: 600; }143 .leafs { display: inline-flex; gap: 6px; }144 .leafs svg { width: 28px; height: 28px; fill: #2e7d32; }145 146 .price-block { margin-top: 16px; }147 .price-title { font-size: 38px; font-weight: 700; color: #222; }148 .price-line { display: flex; align-items: baseline; gap: 20px; margin-top: 6px; }149 .old-price { color: #d9534f; text-decoration: line-through; font-size: 36px; }150 .new-price { color: #000; font-size: 48px; font-weight: 800; }151 .fees { color: #777; font-size: 30px; margin-top: 4px; }152 153 .warning { color: #d9534f; font-size: 32px; margin-top: 16px; }154 155 /* Bottom home indicator */156 .home-indicator {157 position: absolute; bottom: 28px; left: 50%;158 transform: translateX(-50%);159 width: 360px; height: 14px; background: #000; border-radius: 14px; opacity: 0.9;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Blue header with status icons -->167 <div class="header">168 <div class="status-row">169 <div>1:41</div>170 <div class="status-icons">171 <div class="dot"></div>172 <div class="dot"></div>173 <div class="dot"></div>174 <div class="dot"></div>175 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M20 6l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6 6-6z"/></svg>176 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 110 12A6 6 0 0112 6zm0 1a5 5 0 100 10 5 5 0 000-10zm0 3v4h3a1 1 0 000-2h-2V10a1 1 0 10-2 0z"/></svg>177 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M19 8l-7 7-4-4 1.5-1.5L12 12l5.5-5.5z"/></svg>178 <div class="battery"><div class="level"></div></div>179 </div>180 </div>181 182 <!-- Search pill -->183 <div class="search-pill">184 <svg class="back" viewBox="0 0 24 24" fill="#333"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/></svg>185 <div>Amsterdam · Dec 17 - Dec 21</div>186 </div>187 </div>188 189 <!-- Filter bar -->190 <div class="filter-bar">191 <div class="filter-item">192 <svg viewBox="0 0 24 24" fill="#333"><path d="M7 14l-2 2 4 4 2-2-4-4zm10-12l-6 6 2 2 6-6-2-2zM3 7h8v2H3V7zm10 10h8v2h-8v-2z"/></svg>193 <span>Sort</span>194 </div>195 <div class="filter-item">196 <svg viewBox="0 0 24 24" fill="#333"><path d="M4 6h16v2H4V6zm3 5h10v2H7v-2zm4 5h2v2h-2v-2z"/></svg>197 <span>Filter</span>198 </div>199 <div class="filter-item">200 <svg viewBox="0 0 24 24" fill="#333"><path d="M12 2C8.1 2 5 5.1 5 9c0 6 7 13 7 13s7-7 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>201 <span>Map</span>202 </div>203 </div>204 205 <div class="content">206 <div class="count">610 properties</div>207 208 <!-- Card 1 -->209 <div class="card">210 <div class="hotel-img">[IMG: Tall canal houses under trees]</div>211 <div class="card-right">212 <svg class="favorite" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M12 21s-6.5-4.35-9.5-7.35A5.5 5.5 0 116.5 4.5L12 9l5.5-4.5a5.5 5.5 0 118 7.2C18.5 16.65 12 21 12 21z"/></svg>213 214 <div class="title-row">215 <div class="title">ITC Hotel</div>216 <div class="stars">217 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>218 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>219 </div>220 </div>221 222 <div class="row">223 <div class="badge">6.3</div>224 <div class="rating-text">Pleasant · <span class="muted">1412 reviews</span></div>225 </div>226 227 <div class="row">228 <svg viewBox="0 0 24 24" fill="#666"><path d="M12 2C8.1 2 5 5.1 5 9c0 6 7 13 7 13s7-7 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>229 <span>In city center</span>230 </div>231 232 <div class="row">233 <div class="leafs">234 <svg viewBox="0 0 24 24"><path d="M18 4c-5 1-8 4-9 9 5-1 8-4 9-9zM6 8c-3 2-4 5-3 8 3-2 4-5 3-8zM10 10c-2 2-3 4-2 6 2-1 3-3 2-6z"/></svg>235 <svg viewBox="0 0 24 24"><path d="M18 4c-5 1-8 4-9 9 5-1 8-4 9-9zM6 8c-3 2-4 5-3 8 3-2 4-5 3-8zM10 10c-2 2-3 4-2 6 2-1 3-3 2-6z"/></svg>236 <svg viewBox="0 0 24 24"><path d="M18 4c-5 1-8 4-9 9 5-1 8-4 9-9zM6 8c-3 2-4 5-3 8 3-2 4-5 3-8zM10 10c-2 2-3 4-2 6 2-1 3-3 2-6z"/></svg>237 </div>238 <span class="sustainable">Travel Sustainable</span>239 </div>240 241 <div class="row">242 <span class="tag">Mobile-only price</span>243 </div>244 245 <div class="row muted" style="font-size:32px;">Room with shared bathroom: 1 bed</div>246 247 <div class="price-block">248 <div class="price-title">Price for 4 nights, 1 adult</div>249 <div class="price-line">250 <div class="old-price">€ 213</div>251 <div class="new-price">€ 192</div>252 </div>253 <div class="fees">+€ 24 taxes and fees</div>254 </div>255 </div>256 </div>257 258 <!-- Card 2 -->259 <div class="card">260 <div class="hotel-img">[IMG: Bright living room with sofas and plants]</div>261 <div class="card-right">262 <svg class="favorite" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M12 21s-6.5-4.35-9.5-7.35A5.5 5.5 0 116.5 4.5L12 9l5.5-4.5a5.5 5.5 0 118 7.2C18.5 16.65 12 21 12 21z"/></svg>263 264 <div class="title-row">265 <div class="title">Sonder Park House</div>266 <div class="stars">267 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>268 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>269 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>270 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>271 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 2.7 1.1-6.5L3 8.9 9 8l3-6z"/></svg>272 <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M3 12h18v3H3z"/></svg>273 </div>274 <div style="border:1px solid #bbb; color:#666; font-size:28px; padding:6px 10px; border-radius:8px; margin-left:10px;">Ad</div>275 </div>276 277 <div class="row">278 <div class="badge">7.5</div>279 <div class="rating-text">Good · <span class="muted">3079 reviews</span></div>280 </div>281 282 <div class="row">283 <svg viewBox="0 0 24 24" fill="#666"><path d="M12 2C8.1 2 5 5.1 5 9c0 6 7 13 7 13s7-7 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>284 <span>Oud Zuid · 1.1 miles from center</span>285 </div>286 287 <div class="row">288 <span class="tag">Mobile-only price</span>289 </div>290 291 <div class="row muted" style="justify-content:flex-end; font-size:32px;">2 beds</div>292 293 <div class="price-block">294 <div class="price-title">Price for 4 nights, 1 adult</div>295 <div class="price-line">296 <div class="old-price">€ 336</div>297 <div class="new-price">€ 302</div>298 </div>299 <div class="fees">+€ 33 taxes and fees</div>300 <div class="warning">Only 1 left at this price on Booking.com</div>301 </div>302 </div>303 </div>304 305 <!-- Card 3 -->306 <div class="card">307 <div class="hotel-img">[IMG: Cozy room with chandelier]</div>308 <div class="card-right">309 <svg class="favorite" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M12 21s-6.5-4.35-9.5-7.35A5.5 5.5 0 116.5 4.5L12 9l5.5-4.5a5.5 5.5 0 118 7.2C18.5 16.65 12 21 12 21z"/></svg>310 311 <div class="title-row">312 <div class="title">Mi BnB Amsterdam</div>313 <div style="display:flex; gap:6px; margin-left:12px;">314 <div style="width:34px; height:34px; background:#FFD54F; border-radius:6px;"></div>315 <div style="width:34px; height:34px; background:#FFD54F; border-radius:6px;"></div>316 <div style="width:34px; height:34px; background:#FFD54F; border-radius:6px;"></div>317 <div style="width:34px; height:34px; background:#FFD54F; border-radius:6px;"></div>318 </div>319 <div style="margin-left:12px; background:#1e5bc6; color:#fff; font-weight:800; font-size:32px; padding:8px 14px; border-radius:12px;">Genius</div>320 </div>321 322 <div class="row">323 <div class="badge">7.5</div>324 <div class="rating-text">Good · <span class="muted">227 reviews</span></div>325 </div>326 327 <div class="row">328 <svg viewBox="0 0 24 24" fill="#666"><path d="M12 2C8.1 2 5 5.1 5 9c0 6 7 13 7 13s7-7 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>329 <span>Geuzenveld-Slotermeer · 2.9 miles from center</span>330 </div>331 332 <div class="row">333 <div class="leafs">334 <svg viewBox="0 0 24 24"><path d="M18 4c-5 1-8 4-9 9 5-1 8-4 9-9zM6 8c-3 2-4 5-3 8 3-2 4-5 3-8zM10 10c-2 2-3 4-2 6 2-1 3-3 2-6z"/></svg>335 <svg viewBox="0 0 24 24"><path d="M18 4c-5 1-8 4-9 9 5-1 8-4 9-9zM6 8c-3 2-4 5-3 8 3-2 4-5 3-8zM10 10c-2 2-3 4-2 6 2-1 3-3 2-6z"/></svg>336 </div>337 <span class="sustainable">Travel Sustainable</span>338 </div>339 340 <div class="price-block">341 <div class="price-title">Price for 4 nights, 1 adult</div>342 <div class="price-line">343 <div class="old-price">€ 320</div>344 <div class="new-price">€ 289</div>345 </div>346 <div class="fees">+€ 28 taxes and fees</div>347 </div>348 </div>349 </div>350 </div>351 352 <div class="home-indicator"></div>353</div>354</body>355</html>