GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hotel Listings - Mexico City</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #111;14 }15 16 /* Header */17 .header {18 background: #0b3d91;19 height: 220px;20 padding: 28px 36px;21 box-sizing: border-box;22 color: #fff;23 }24 .status-bar {25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 font-size: 34px;30 margin-bottom: 18px;31 }32 .brand-icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .searchbar {43 background: #fff;44 border: 4px solid #f4b23e;45 border-radius: 28px;46 height: 110px;47 display: flex;48 align-items: center;49 padding: 0 26px;50 box-sizing: border-box;51 color: #222;52 font-size: 40px;53 font-weight: 600;54 }55 .searchbar svg { margin-right: 20px; }56 57 /* Action row */58 .action-row {59 display: flex;60 justify-content: space-between;61 padding: 24px 36px;62 font-size: 32px;63 color: #222;64 }65 .action {66 display: flex;67 align-items: center;68 gap: 16px;69 }70 .action svg { width: 36px; height: 36px; }71 72 .divider { height: 1px; background: #e6e6e6; margin: 0 36px; }73 74 .properties-count {75 padding: 22px 36px;76 font-size: 36px;77 color: #333;78 font-weight: 600;79 }80 81 /* Cards */82 .card {83 display: flex;84 gap: 26px;85 padding: 20px 36px;86 box-sizing: border-box;87 }88 .card + .card { padding-top: 0; }89 .left-img {90 width: 260px;91 height: 260px;92 background: #E0E0E0;93 border: 1px solid #BDBDBD;94 border-radius: 12px;95 display: flex;96 align-items: center;97 justify-content: center;98 color: #757575;99 font-size: 26px;100 text-align: center;101 }102 .card-body {103 flex: 1;104 position: relative;105 }106 .heart {107 position: absolute;108 right: 0;109 top: 6px;110 font-size: 46px;111 color: #777;112 }113 .title {114 font-size: 44px;115 font-weight: 800;116 color: #222;117 margin-bottom: 6px;118 }119 .stars { color: #FFC107; font-size: 40px; margin-bottom: 10px; }120 .rating-row {121 display: flex;122 align-items: center;123 gap: 18px;124 margin: 8px 0 10px;125 }126 .rating-pill {127 background: #1a73e8;128 color: #fff;129 font-weight: 800;130 border-radius: 12px;131 padding: 10px 16px;132 font-size: 34px;133 }134 .reviews {135 font-size: 32px;136 color: #444;137 }138 .location-row {139 display: flex;140 align-items: center;141 gap: 12px;142 font-size: 32px;143 color: #555;144 margin: 8px 0 14px;145 }146 .badge-green {147 display: inline-block;148 background: #2e7d32;149 color: #fff;150 padding: 10px 18px;151 border-radius: 16px;152 font-size: 30px;153 font-weight: 700;154 margin-bottom: 14px;155 }156 .subtext { font-size: 32px; color: #555; margin: 8px 0; }157 .price-title { font-size: 36px; font-weight: 800; color: #111; margin-top: 10px; }158 .strike { text-decoration: line-through; color: #c44; margin-right: 12px; }159 .price-primary { font-size: 46px; font-weight: 900; color: #111; }160 .taxes { font-size: 30px; color: #666; margin-top: 6px; }161 .red-note { color: #d32f2f; font-size: 30px; margin-top: 10px; }162 .green-note { color: #2e7d32; font-size: 34px; font-weight: 800; margin-top: 10px; display: flex; align-items: center; gap: 10px; }163 .check {164 width: 28px; height: 28px; background: #2e7d32; border-radius: 50%;165 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;166 }167 168 .section-divider { height: 1px; background: #e6e6e6; margin: 18px 36px; }169 170 /* Second card tweaks */171 .ad-badge {172 display: inline-block;173 border: 2px solid #c7c7c7;174 color: #555;175 padding: 6px 12px;176 border-radius: 10px;177 font-size: 26px;178 margin-left: 8px;179 }180 .sustainable-icons {181 display: flex;182 align-items: center;183 gap: 10px;184 margin: 12px 0;185 }186 .leaf {187 width: 34px; height: 22px; background: #1b5e20; border-radius: 18px 18px 0 18px;188 transform: rotate(-20deg);189 }190 191 /* Third card preview */192 .thumb-wide {193 width: 260px;194 height: 160px;195 background: #E0E0E0;196 border: 1px solid #BDBDBD;197 border-radius: 12px;198 display: flex; align-items: center; justify-content: center;199 color: #757575; font-size: 24px;200 }201 202 /* Small icons */203 .icon { width: 34px; height: 34px; }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Blue Header -->210 <div class="header">211 <div class="status-bar">212 <div class="brand-icons">213 <div>7:14</div>214 <div title="Messages">✉️</div>215 <div style="font-weight:900;">B.</div>216 </div>217 <div class="status-icons">218 <!-- Simple wifi + battery placeholders -->219 <div>📶</div>220 <div>🔋</div>221 </div>222 </div>223 224 <div class="searchbar">225 <!-- Back Arrow -->226 <svg class="icon" viewBox="0 0 24 24" fill="#333">227 <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-7z"/>228 </svg>229 <div>Mexico City · Oct 27 - Oct 28</div>230 </div>231 </div>232 233 <!-- Action row -->234 <div class="action-row">235 <div class="action">236 <svg viewBox="0 0 24 24" fill="#111">237 <path d="M7 3h2v10H7V3zm8 4h2v6h-2V7zM3 13h2v8H3v-8zm16-2h2v10h-2V11z"/>238 </svg>239 <div>Sort</div>240 </div>241 <div class="action">242 <svg viewBox="0 0 24 24" fill="#111">243 <path d="M4 6h10v2H4V6zm0 5h16v2H4v-2zm0 5h8v2H4v-2z"/>244 </svg>245 <div>Filter</div>246 </div>247 <div class="action">248 <svg viewBox="0 0 24 24" fill="#111">249 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>250 </svg>251 <div>Map</div>252 </div>253 </div>254 255 <div class="divider"></div>256 257 <div class="properties-count">600 properties</div>258 259 <!-- Card 1 -->260 <div class="card">261 <div class="left-img">[IMG: Hotel Palace México facade]</div>262 <div class="card-body">263 <div class="heart">♡</div>264 <div class="title">Hotel Palace México</div>265 <div class="stars">★ ★ ★ ☆</div>266 267 <div class="rating-row">268 <div class="rating-pill">7.8</div>269 <div class="reviews">Good • 542 reviews</div>270 </div>271 272 <div class="location-row">273 <svg class="icon" viewBox="0 0 24 24" fill="#555"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>274 <div>Tabacalera • 1.4 miles from center</div>275 </div>276 277 <div class="badge-green">Limited-time Deal</div>278 279 <div class="subtext">Double Room with Two Double Beds</div>280 <div class="subtext">Hotel room: 2 beds</div>281 282 <div class="price-title">Price for 1 night, 2 adults</div>283 <div style="display:flex; align-items:flex-end; gap:12px; margin-top:6px;">284 <div class="strike">MXN 2,500</div>285 <div class="price-primary">MXN 1,750</div>286 </div>287 <div class="taxes">+ MXN 341 taxes and charges</div>288 <div class="red-note">Only 3 left at this price on Booking.com</div>289 290 <div class="green-note">291 <span class="check">✓</span> Free cancellation292 </div>293 </div>294 </div>295 296 <div class="section-divider"></div>297 298 <!-- Card 2 -->299 <div class="card">300 <div class="left-img" style="height:330px;">[IMG: Live Aqua tall building]</div>301 <div class="card-body">302 <div class="heart">♡</div>303 <div class="title">Live Aqua Urban Resort Mexico</div>304 <div class="stars">★ ★ ★ ★ ★ <span style="font-size:32px; color:#1a73e8;" class="ad-badge">Ad</span></div>305 306 <div class="rating-row">307 <div class="rating-pill">9.5</div>308 <div class="reviews">Exceptional • 534 reviews</div>309 </div>310 311 <div class="location-row">312 <svg class="icon" viewBox="0 0 24 24" fill="#555"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>313 <div>Santa Fe • 8 miles from center</div>314 </div>315 316 <div class="sustainable-icons">317 <div class="leaf"></div>318 <div class="leaf"></div>319 <div class="leaf"></div>320 <div style="font-size:30px; color:#333;">+ Travel Sustainable</div>321 </div>322 323 <div class="subtext">Deluxe King Room</div>324 <div class="subtext">Hotel room: 1 bed</div>325 326 <div class="price-title">Price for 1 night, 2 adults</div>327 <div class="price-primary">US$326</div>328 <div class="taxes">+ US$64 taxes and charges</div>329 </div>330 </div>331 332 <div class="section-divider"></div>333 334 <!-- Card 3 (partial at bottom) -->335 <div class="card">336 <div class="thumb-wide">[IMG: UTOPIC Polanco by ULIV]</div>337 <div class="card-body">338 <div class="heart">♡</div>339 <div class="title">UTOPIC Polanco by ULIV</div>340 <div style="margin:6px 0; color:#FFC107; font-size:36px;">★★★★★</div>341 <div class="rating-row">342 <div class="rating-pill">8.9</div>343 <div class="reviews">Excellent • 266 reviews</div>344 </div>345 <div class="location-row">346 <svg class="icon" viewBox="0 0 24 24" fill="#555"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>347 <div>Polanco • 3.1 miles from center</div>348 </div>349 </div>350 </div>351 352</div>353</body>354</html>