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>Homes Budapest Listing</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 color: #222;16 }17 18 /* Header / App bar */19 .appbar {20 background: #143E8A;21 color: #fff;22 width: 100%;23 padding-bottom: 10px;24 box-sizing: border-box;25 }26 .statusbar {27 height: 70px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 28px;32 font-size: 30px;33 opacity: 0.95;34 }35 .status-left { display: flex; align-items: center; gap: 18px; }36 .status-icon {37 width: 50px; height: 32px; border-radius: 6px; background: rgba(255,255,255,0.25);38 display: inline-flex; align-items: center; justify-content: center; font-size: 20px;39 }40 .status-right { display: flex; align-items: center; gap: 18px; }41 .titlebar {42 display: flex;43 align-items: center;44 padding: 18px 24px 24px 24px;45 gap: 18px;46 }47 .title-text {48 display: flex;49 flex-direction: column;50 gap: 6px;51 }52 .main-title {53 font-size: 44px;54 font-weight: 700;55 letter-spacing: 0.5px;56 }57 .subtitle {58 font-size: 28px;59 opacity: 0.9;60 }61 .title-actions {62 margin-left: auto;63 display: flex;64 align-items: center;65 gap: 28px;66 }67 .icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }68 .divider {69 height: 8px; background: #E7E7E7;70 border-top: 1px solid #ddd;71 border-bottom: 1px solid #ddd;72 }73 74 /* Image collage */75 .content { padding: 22px; }76 .collage-top {77 display: grid;78 grid-template-columns: 2fr 1fr;79 gap: 12px;80 margin-bottom: 12px;81 }82 .img-box {83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 color: #757575;86 display: flex; align-items: center; justify-content: center;87 font-size: 28px;88 }89 .img-big { height: 460px; }90 .img-small { height: 224px; }91 .collage-bottom {92 display: grid;93 grid-template-columns: 1fr 1fr 1fr;94 gap: 12px;95 }96 .img-bottom { height: 300px; position: relative; }97 .overlay-count {98 position: absolute; right: 18px; bottom: 18px;99 background: rgba(0,0,0,0.55);100 color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 36px; font-weight: 700;101 }102 103 /* Title and rating */104 .listing-header {105 display: flex; align-items: flex-start; margin-top: 24px;106 }107 .listing-title { font-size: 52px; font-weight: 800; letter-spacing: 0.3px; }108 .rating-badge {109 margin-left: auto;110 background: #1C4EA3; color: #fff; font-weight: 700;111 padding: 16px 22px; border-radius: 14px; font-size: 32px;112 }113 114 /* badges row */115 .badges { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }116 .square-badge {117 width: 44px; height: 44px; border-radius: 6px; background: #F8C84A;118 border: 1px solid #E0B53D;119 }120 .thumb-badge {121 background: #FFD966; border: 1px solid #EAC65A; width: auto; height: 44px;122 padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; color: #333; font-weight: 600;123 }124 .genius {125 background: #1B66D2; color: #fff; padding: 8px 16px; border-radius: 12px; font-weight: 700; font-size: 28px;126 }127 128 /* Travel Sustainable */129 .sustainable {130 margin-top: 24px;131 display: inline-flex; align-items: center; gap: 12px;132 background: #E9F6E9; color: #2E7D32;133 padding: 16px 18px; border-radius: 10px; border: 1px solid #D0E6D0; font-size: 28px; font-weight: 600;134 }135 .leaf {136 width: 28px; height: 28px; display: inline-block;137 }138 139 /* Price card */140 .price-card {141 margin-top: 24px;142 border-top: 1px solid #e5e5e5;143 border-bottom: 1px solid #e5e5e5;144 padding: 26px 18px;145 }146 .deal-tags { display: flex; gap: 12px; margin-bottom: 16px; }147 .deal-pill {148 background: #2E7D32; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 26px;149 }150 .price-line { font-size: 30px; margin: 8px 0 12px 0; color: #333; }151 .old-price { color: #D32F2F; text-decoration: line-through; margin-right: 16px; }152 .new-price { font-size: 48px; font-weight: 800; color: #222; }153 .taxes { color: #7A7A7A; font-size: 26px; margin-top: 8px; }154 .earn-pill { display: inline-block; margin-top: 16px; background: #2E7D32; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 28px; font-weight: 700; }155 .chevron {156 float: right; margin-top: -90px; margin-right: 12px; color: #777; font-size: 44px;157 }158 159 /* Check-in/out section */160 .details {161 padding: 22px 18px;162 border-top: 1px solid #eeeeee;163 border-bottom: 1px solid #eeeeee;164 margin-top: 10px;165 }166 .detail-grid {167 display: grid;168 grid-template-columns: 1fr 1fr;169 gap: 12px;170 }171 .detail-item { padding: 8px 6px; }172 .label { color: #6E6E6E; font-size: 28px; margin-bottom: 8px; }173 .link { color: #1B66D2; font-size: 32px; font-weight: 700; }174 .rooms { margin-top: 18px; }175 .room-link { color: #1B66D2; font-weight: 700; font-size: 30px; }176 177 /* CTA Button */178 .cta-area { position: absolute; left: 0; right: 0; bottom: 70px; padding: 0 18px; }179 .cta-btn {180 width: 100%; height: 120px; border-radius: 14px; background: #1B66D2; color: #fff;181 font-size: 40px; font-weight: 700; border: none;182 }183 .gesture-bar {184 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);185 width: 320px; height: 10px; background: #DADADA; border-radius: 6px;186 }187 188 /* Simple icons (SVG) */189 .svg { fill: none; stroke: #fff; stroke-width: 3; }190 .svg-solid { fill: #fff; }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- App bar -->197 <div class="appbar">198 <div class="statusbar">199 <div class="status-left">200 <div>3:05</div>201 <div class="status-icon">oyo</div>202 <div class="status-icon">ebay</div>203 <div class="status-icon">▶</div>204 <div>•</div>205 </div>206 <div class="status-right">207 <div>◓</div>208 <div>🔋</div>209 </div>210 </div>211 <div class="titlebar">212 <div class="icon-btn">213 <svg width="36" height="36" viewBox="0 0 24 24"><path class="svg" d="M15 6l-6 6 6 6"/></svg>214 </div>215 <div class="title-text">216 <div class="main-title">HOMES BUDAPEST</div>217 <div class="subtitle">Aug 2 - Aug 6</div>218 </div>219 <div class="title-actions">220 <div class="icon-btn">221 <svg width="36" height="36" viewBox="0 0 24 24"><path class="svg" d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10"/></svg>222 </div>223 <div class="icon-btn">224 <svg width="36" height="36" viewBox="0 0 24 24">225 <path class="svg" d="M4 12h9"></path>226 <path class="svg" d="M12 5l7 7-7 7"></path>227 </svg>228 </div>229 <div class="icon-btn">230 <svg width="36" height="36" viewBox="0 0 24 24"><circle class="svg-solid" cx="4" cy="5" r="2"/><circle class="svg-solid" cx="4" cy="12" r="2"/><circle class="svg-solid" cx="4" cy="19" r="2"/></svg>231 </div>232 </div>233 </div>234 </div>235 <div class="divider"></div>236 237 <!-- Content area -->238 <div class="content">239 240 <!-- Image collage -->241 <div class="collage-top">242 <div class="img-box img-big">[IMG: Living room & dining area]</div>243 <div style="display:flex; flex-direction:column; gap:12px;">244 <div class="img-box img-small">[IMG: Table with flowers]</div>245 <div class="img-box img-small">[IMG: Bedroom door open]</div>246 </div>247 </div>248 <div class="collage-bottom">249 <div class="img-box img-bottom">[IMG: Bedroom with rug]</div>250 <div class="img-box img-bottom">[IMG: Twin bed room]</div>251 <div class="img-box img-bottom">252 [IMG: Grey bedroom]253 <div class="overlay-count">+71</div>254 </div>255 </div>256 257 <!-- Listing header -->258 <div class="listing-header">259 <div class="listing-title">HOMES BUDAPEST</div>260 <div class="rating-badge">8.9</div>261 </div>262 263 <!-- Badges row -->264 <div class="badges">265 <div class="square-badge"></div>266 <div class="square-badge"></div>267 <div class="square-badge"></div>268 <div class="square-badge"></div>269 <div class="thumb-badge">👍 +</div>270 <div class="genius">Genius</div>271 </div>272 273 <!-- Sustainable badge -->274 <div class="sustainable">275 <svg class="leaf" viewBox="0 0 24 24">276 <path fill="#2E7D32" d="M12 3c6 2 9 6 9 12-4-3-8-3-11 1-3-3-3-8 2-13z"></path>277 </svg>278 <span>Travel Sustainable</span>279 </div>280 281 <!-- Price card -->282 <div class="price-card">283 <div class="deal-tags">284 <div class="deal-pill">24% off</div>285 <div class="deal-pill">Getaway Deal</div>286 </div>287 <div class="price-line">Price for 4 nights, 4 adults</div>288 <div>289 <span class="old-price">€ 1,100</span>290 <span class="new-price">€ 842</span>291 </div>292 <div class="taxes">+ € 59 taxes and charges</div>293 <div class="earn-pill">Earn € 63 Credits</div>294 <div class="chevron">›</div>295 </div>296 297 <!-- Details -->298 <div class="details">299 <div class="detail-grid">300 <div class="detail-item">301 <div class="label">Check-in</div>302 <div class="link">Wed, Aug 02</div>303 </div>304 <div class="detail-item">305 <div class="label">Check-out</div>306 <div class="link">Sun, Aug 06</div>307 </div>308 </div>309 <div class="rooms">310 <div class="label">Rooms and guests</div>311 <div class="room-link">2 rooms, 4 adults, 0 children</div>312 </div>313 </div>314 315 </div>316 317 <!-- CTA -->318 <div class="cta-area">319 <button class="cta-btn">See availability</button>320 </div>321 <div class="gesture-bar"></div>322 323</div>324</body>325</html>