GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hotel List - Barcelona</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Top blue status area */15 .topbar {16 position: absolute; top: 0; left: 0; width: 1080px; height: 260px;17 background: #123E8B;18 color: #fff;19 }20 .status-row {21 position: absolute; top: 24px; left: 32px; right: 32px;22 display: flex; align-items: center; justify-content: space-between;23 font-size: 36px; opacity: 0.95;24 }25 .status-icons { letter-spacing: 10px; font-weight: 600; }26 .search-pill {27 position: absolute; left: 54px; right: 54px; bottom: -56px;28 height: 120px; background: #fff;29 border: 8px solid #F0B33A; border-radius: 30px;30 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;31 color: #333; font-size: 40px; font-weight: 600;32 box-shadow: 0 2px 0 rgba(0,0,0,0.06);33 }34 .search-pill svg { margin-right: 24px; }35 .subheader {36 position: absolute; top: 226px; left: 0; width: 1080px; height: 150px;37 background: #fff; border-bottom: 1px solid #e5e5e5;38 display: flex; align-items: center; justify-content: space-around;39 font-size: 36px; color: #333;40 }41 .tool {42 display: flex; align-items: center; gap: 16px;43 color: #333; font-weight: 600;44 }45 .tool svg { width: 44px; height: 44px; }46 47 /* Content area */48 .content {49 position: absolute; top: 376px; left: 0; right: 0; bottom: 0;50 overflow-y: auto; padding: 0 32px 120px 32px; box-sizing: border-box;51 }52 .list-meta {53 font-size: 36px; color: #333; margin: 14px 8px 20px;54 }55 56 .card {57 display: grid; grid-template-columns: 320px 1fr; column-gap: 28px;58 padding: 28px 10px 30px; border-top: 1px solid #e9e9e9;59 position: relative;60 }61 .card:first-of-type { border-top: none; }62 .hotel-img {63 width: 320px; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;64 border-radius: 28px; display: flex; align-items: center; justify-content: center;65 color: #757575; font-size: 30px; text-align: center; padding: 12px; box-sizing: border-box;66 }67 .card-title {68 font-size: 44px; font-weight: 700; color: #222; margin-bottom: 12px;69 }70 .fav-btn {71 position: absolute; right: 30px; top: 34px; width: 56px; height: 56px;72 display: flex; align-items: center; justify-content: center;73 }74 .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }75 .stars svg { width: 34px; height: 34px; }76 .badge-blue {77 background: #1F64D8; color: #fff; border-radius: 12px; padding: 6px 14px;78 font-size: 30px; font-weight: 700;79 }80 .rating-pill {81 background: #1F64D8; color: #fff; border-radius: 10px; padding: 4px 12px;82 font-size: 32px; font-weight: 800; margin-right: 8px;83 }84 .subtext { font-size: 32px; color: #333; }85 .light { color: #666; }86 .grey { color: #616161; }87 .location-row { display: flex; align-items: center; gap: 12px; font-size: 32px; color: #333; }88 .small-icon { width: 30px; height: 30px; }89 .meta { font-size: 30px; color: #666; margin-top: 12px; }90 .price-title { font-size: 36px; color: #222; font-weight: 700; margin-top: 16px; }91 .price-row { display: flex; align-items: baseline; gap: 16px; margin: 10px 0 4px; }92 .old-price { font-size: 34px; color: #D32F2F; text-decoration: line-through; }93 .new-price { font-size: 56px; font-weight: 800; color: #111; }94 .tax { font-size: 28px; color: #7a7a7a; margin-top: 4px; }95 .ok { color: #1E8E3E; font-size: 32px; margin-top: 8px; }96 .danger { color: #D12929; font-size: 30px; margin-top: 6px; }97 98 .chip-green {99 background: #2E7D32; color: #fff; border-radius: 12px; padding: 6px 12px;100 font-size: 28px; font-weight: 700; display: inline-block;101 }102 .leaf-row { display: inline-flex; align-items: center; gap: 6px; }103 .gesture-bar {104 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);105 width: 340px; height: 16px; background: #000; border-radius: 10px; opacity: 0.85;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Top bar -->113 <div class="topbar">114 <div class="status-row">115 <div>8:43</div>116 <div class="status-icons">•••••• •</div>117 </div>118 119 <div class="search-pill">120 <svg viewBox="0 0 24 24" width="50" height="50" fill="#333">121 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122 </svg>123 <span>Barcelona · Nov 1 - Nov 5</span>124 </div>125 </div>126 127 <!-- Tools row -->128 <div class="subheader">129 <div class="tool">130 <svg viewBox="0 0 24 24">131 <path d="M7 4v12M7 4l-3 3M7 4l3 3M17 20V8M17 20l-3-3M17 20l3-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>132 </svg>133 <div>Sort</div>134 </div>135 <div class="tool">136 <svg viewBox="0 0 24 24">137 <path d="M4 6h16M9 6v-2M15 12v-2M4 12h16M7 18v-2M4 18h16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>138 </svg>139 <div>Filter</div>140 </div>141 <div class="tool">142 <svg viewBox="0 0 24 24">143 <path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/>144 <circle cx="12" cy="11" r="2.5" fill="#333"/>145 </svg>146 <div>Map</div>147 </div>148 </div>149 150 <!-- Content -->151 <div class="content">152 <div class="list-meta">690 properties</div>153 154 <!-- Card 1 -->155 <div class="card">156 <div class="hotel-img">[IMG: Hotel Pool Waterfall]</div>157 <div>158 <div class="fav-btn">159 <svg viewBox="0 0 24 24" width="50" height="50">160 <path d="M12 21s-7-4.3-7-10a5 5 0 019-3 5 5 0 019 3c0 5.7-7 10-7 10z" fill="none" stroke="#555" stroke-width="2"/>161 </svg>162 </div>163 <div class="card-title">Sallés Hotel Pere IV</div>164 165 <div class="row">166 <div class="stars">167 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>168 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>169 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>170 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>171 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>172 </div>173 <div class="badge-blue">Genius</div>174 </div>175 176 <div class="row" style="margin-top: 10px;">177 <div class="rating-pill">8.1</div>178 <div class="subtext"><b>Very Good</b> · <span class="light">7665 reviews</span></div>179 </div>180 181 <div class="location-row" style="margin-top: 12px;">182 <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="#333"/></svg>183 <div>Sant Martí · 1.3 miles from center</div>184 </div>185 <div class="location-row" style="margin-top: 6px;">186 <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="#333"/></svg>187 <div>3,450 feet from beach</div>188 </div>189 190 <div class="meta">Hotel room: 2 beds</div>191 192 <div class="price-title">Price for 4 nights, 2 adults</div>193 <div class="price-row">194 <div class="old-price">€ 734</div>195 <div class="new-price">€ 661</div>196 </div>197 <div class="tax">+€ 39 taxes and charges</div>198 <div class="ok">✓ Free cancellation</div>199 <div class="ok">✓ No prepayment needed</div>200 </div>201 </div>202 203 <!-- Card 2 -->204 <div class="card">205 <div class="hotel-img">[IMG: Cozy Bedroom]</div>206 <div>207 <div class="fav-btn">208 <svg viewBox="0 0 24 24" width="50" height="50">209 <path d="M12 21s-7-4.3-7-10a5 5 0 019-3 5 5 0 019 3c0 5.7-7 10-7 10z" fill="none" stroke="#555" stroke-width="2"/>210 </svg>211 </div>212 <div class="card-title">Sonder Casa Luz</div>213 214 <div class="row">215 <div class="stars">216 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>217 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>218 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>219 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>220 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>221 </div>222 <div class="badge-blue" style="background:#0F8EEA;">Ad</div>223 </div>224 225 <div class="row" style="margin-top: 10px;">226 <div class="rating-pill">8.4</div>227 <div class="subtext"><b>Very Good</b> · <span class="light">2431 reviews</span></div>228 </div>229 230 <div class="location-row" style="margin-top: 12px;">231 <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="#333"/></svg>232 <div>Eixample · 1,450 feet from center</div>233 </div>234 <div class="location-row" style="margin-top: 6px;">235 <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="#333"/></svg>236 <div>1.5 miles from beach</div>237 </div>238 239 <div class="row" style="margin-top: 8px; gap: 6px;">240 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 21c3-3 5-7 5-11-2 0-3 1-5 2-2-1-3-2-5-2 0 4 2 8 5 11z" fill="#2E7D32"/></svg>241 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 21c3-3 5-7 5-11-2 0-3 1-5 2-2-1-3-2-5-2 0 4 2 8 5 11z" fill="#2E7D32"/></svg>242 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 21c3-3 5-7 5-11-2 0-3 1-5 2-2-1-3-2-5-2 0 4 2 8 5 11z" fill="#2E7D32"/></svg>243 <div class="grey">+ Travel Sustainable</div>244 </div>245 246 <div style="margin-top: 12px;">247 <span class="chip-green">Mobile-only price</span>248 </div>249 250 <div class="meta">Hotel room: 1 bed</div>251 252 <div class="price-title">Price for 4 nights, 2 adults</div>253 <div class="price-row">254 <div class="old-price">€ 863</div>255 <div class="new-price">€ 777</div>256 </div>257 <div class="tax">+€ 30 taxes and charges</div>258 <div class="danger">Only 1 left at this price on Booking.com</div>259 <div class="ok">✓ Free cancellation</div>260 </div>261 </div>262 263 <!-- Card 3 -->264 <div class="card">265 <div class="hotel-img">[IMG: Modern Hotel Exterior]</div>266 <div>267 <div class="fav-btn">268 <svg viewBox="0 0 24 24" width="50" height="50">269 <path d="M12 21s-7-4.3-7-10a5 5 0 019-3 5 5 0 019 3c0 5.7-7 10-7 10z" fill="none" stroke="#555" stroke-width="2"/>270 </svg>271 </div>272 <div class="card-title">Hilton Diagonal Mar Barcelona</div>273 274 <div class="row">275 <div class="stars">276 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>277 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>278 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>279 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.9 6.9-1z" fill="#FFC107"/></svg>280 </div>281 </div>282 283 <div class="row" style="margin-top: 10px;">284 <div class="rating-pill" style="background:#1E64D8;">7.7</div>285 <div class="subtext"><b>Good</b> · <span class="light">1849 reviews</span></div>286 </div>287 288 <div class="location-row" style="margin-top: 12px;">289 <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 21s-6-5.1-6-10a6 6 0 1112 0c0 4.9-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="#333"/></svg>290 <div>Near Diagonal Mar · 0.9 miles from center</div>291 </div>292 293 <div class="meta">Hotel room: 1 bed</div>294 <div class="price-title">Price for 4 nights, 2 adults</div>295 <div class="price-row">296 <div class="old-price">€ 825</div>297 <div class="new-price">€ 699</div>298 </div>299 <div class="tax">+€ 35 taxes and charges</div>300 <div class="ok">✓ Free cancellation</div>301 </div>302 </div>303 304 </div>305 306 <div class="gesture-bar"></div>307</div>308</body>309</html>