GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Booking UI Mock</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 }14 15 /* Header */16 .header {17 position: relative;18 width: 100%;19 height: 240px;20 background: #0a4ea3; /* deep booking blue */21 color: #fff;22 }23 .status-bar {24 height: 48px;25 font-size: 28px;26 line-height: 48px;27 padding: 0 32px;28 opacity: 0.95;29 display: flex;30 justify-content: space-between;31 }32 .search-pill {33 margin: 22px 40px 16px 40px;34 background: #fff;35 color: #111;36 border: 6px solid #ffca55;37 border-radius: 28px;38 height: 90px;39 display: flex;40 align-items: center;41 padding: 0 26px;42 box-sizing: border-box;43 font-size: 36px;44 font-weight: 600;45 }46 .search-pill .arrow {47 width: 48px;48 height: 48px;49 margin-right: 18px;50 }51 .quick-actions {52 display: flex;53 gap: 120px;54 padding: 0 40px;55 color: #fff;56 }57 .qa-item {58 display: flex;59 align-items: center;60 gap: 16px;61 font-size: 34px;62 font-weight: 600;63 }64 .qa-item svg { width: 40px; height: 40px; fill: #fff; }65 66 /* Content */67 .content {68 position: absolute;69 top: 240px;70 left: 0;71 right: 0;72 bottom: 0;73 overflow-y: auto;74 padding-bottom: 80px;75 }76 .section-title {77 font-size: 36px;78 color: #333;79 padding: 28px 32px 16px 32px;80 }81 82 /* Cards */83 .card {84 border-top: 1px solid #e6e6e6;85 padding: 24px 24px;86 }87 .card-row {88 display: flex;89 gap: 28px;90 }91 .img-placeholder {92 width: 280px;93 height: 370px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 display: flex;97 justify-content: center;98 align-items: center;99 color: #757575;100 font-size: 28px;101 text-align: center;102 border-radius: 8px;103 }104 .card-body {105 flex: 1;106 }107 .card-title-line {108 display: flex;109 justify-content: space-between;110 align-items: flex-start;111 }112 .card-title {113 font-size: 44px;114 font-weight: 800;115 color: #1a1a1a;116 line-height: 1.15;117 }118 .heart {119 font-size: 48px;120 color: #999;121 margin-right: 12px;122 }123 .location-line {124 margin-top: 18px;125 font-size: 32px;126 color: #444;127 display: flex;128 align-items: center;129 gap: 12px;130 }131 .loc-pin { width: 30px; height: 30px; fill: #444; }132 .new-badge {133 display: inline-block;134 margin-top: 18px;135 background: #f5f7ff;136 border: 1px solid #d8def7;137 color: #6e7bb5;138 font-weight: 700;139 padding: 10px 14px;140 border-radius: 14px;141 font-size: 30px;142 }143 .details {144 margin-top: 18px;145 font-size: 30px;146 color: #333;147 }148 .price-header {149 margin-top: 20px;150 font-size: 36px;151 font-weight: 800;152 color: #111;153 }154 .price-row {155 margin-top: 6px;156 display: flex;157 align-items: baseline;158 gap: 18px;159 font-size: 44px;160 font-weight: 900;161 color: #111;162 }163 .old-price {164 color: #d75a5a;165 text-decoration: line-through;166 font-weight: 800;167 font-size: 40px;168 }169 .tax-line {170 margin-top: 8px;171 font-size: 30px;172 color: #666;173 }174 .alert-red {175 margin-top: 18px;176 font-size: 30px;177 color: #d63a3a;178 font-weight: 700;179 }180 181 /* Rating & Meta */182 .stars {183 margin-top: 6px;184 font-size: 40px;185 color: #f6b800;186 }187 .ad-tag {188 display: inline-block;189 border: 1px solid #cfd6ea;190 background: #f7f9ff;191 color: #5b6aa8;192 font-size: 30px;193 border-radius: 10px;194 padding: 6px 12px;195 margin-left: 12px;196 }197 .rating-line {198 margin-top: 14px;199 display: flex;200 align-items: center;201 gap: 16px;202 font-size: 32px;203 color: #333;204 }205 .rating-badge {206 background: #1967D2;207 color: #fff;208 font-weight: 800;209 border-radius: 10px;210 padding: 8px 12px;211 font-size: 34px;212 }213 .sustainable {214 margin-top: 14px;215 font-size: 32px;216 color: #2a7a3b;217 display: flex;218 align-items: center;219 gap: 10px;220 }221 .leaf {222 width: 28px;223 height: 28px;224 }225 .meta {226 margin-top: 12px;227 font-size: 30px;228 color: #333;229 }230 .final-price {231 margin-top: 18px;232 font-size: 40px;233 font-weight: 900;234 color: #111;235 }236 .small-tax {237 margin-top: 10px;238 font-size: 30px;239 color: #666;240 }241</style>242</head>243<body>244<div id="render-target">245 246 <div class="header">247 <div class="status-bar">248 <div>2:46</div>249 <div>📶 🔔 ✉️ • 📍 🔋 100%</div>250 </div>251 252 <div class="search-pill">253 <svg class="arrow" viewBox="0 0 24 24">254 <path fill="#0a4ea3" d="M15.5 4l-8 8 8 8-2 2-10-10 10-10z"/>255 </svg>256 <div>Berlin · Jan 1 - Jan 5</div>257 </div>258 259 <div class="quick-actions">260 <div class="qa-item">261 <svg viewBox="0 0 24 24">262 <path d="M7 4h2v12H7V4zm8 4h2v8h-2V8zm-4 6h2v4h-2v-4z"></path>263 </svg>264 <span>Sort</span>265 </div>266 <div class="qa-item">267 <svg viewBox="0 0 24 24">268 <path d="M4 6h14v2H4V6zm4 5h12v2H8v-2zm-2 5h16v2H6v-2z"></path>269 </svg>270 <span>Filter</span>271 </div>272 <div class="qa-item">273 <svg viewBox="0 0 24 24">274 <path d="M3 6l6-2 6 2 6-2v12l-6 2-6-2-6 2V6zm6 0v10l6 2V8l-6-2z"></path>275 </svg>276 <span>Map</span>277 </div>278 </div>279 </div>280 281 <div class="content">282 <div class="section-title">820 properties</div>283 284 <!-- Card 1 -->285 <div class="card">286 <div class="card-row">287 <div class="img-placeholder">[IMG: Living room with Christmas tree]</div>288 <div class="card-body">289 <div class="card-title-line">290 <div class="card-title">bevo: Stilvolles Souterrain im<br>Bergmannkiez</div>291 <div class="heart">♡</div>292 </div>293 294 <div class="location-line">295 <svg class="loc-pin" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"></path></svg>296 <span>Friedrichshain-Kreuzberg • 1.7 miles from center</span>297 </div>298 299 <div class="new-badge">New to Booking.com</div>300 301 <div class="details">914.9 ft²: 2 beds • 1 bedroom • 1 living room • 1 bathroom</div>302 303 <div class="price-header">Price for 4 nights, 2 adults</div>304 <div class="price-row">305 <div class="old-price">€ 674</div>306 <div>€ 539</div>307 </div>308 <div class="tax-line">+€ 69 taxes and fees</div>309 <div class="alert-red">Only 1 left at this price on Booking.com</div>310 </div>311 </div>312 </div>313 314 <!-- Card 2 -->315 <div class="card">316 <div class="card-row">317 <div class="img-placeholder">[IMG: Hotel room]</div>318 <div class="card-body">319 <div class="card-title-line">320 <div class="card-title">Leonardo Hotel Berlin Mitte</div>321 <div class="heart">♡</div>322 </div>323 <div class="stars">★★★★★👍 <span class="ad-tag">Ad</span></div>324 325 <div class="rating-line">326 <span class="rating-badge">8.2</span>327 <span>Very Good • 12709 reviews</span>328 </div>329 330 <div class="location-line">331 <svg class="loc-pin" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"></path></svg>332 <span>Mitte • 2,950 feet from center</span>333 </div>334 335 <div class="sustainable">336 <svg class="leaf" viewBox="0 0 24 24"><path fill="#2a7a3b" d="M3 13c8-10 18-8 18-8s-2 10-12 12c-3 .6-5-1-6-4z"></path></svg>337 <svg class="leaf" viewBox="0 0 24 24"><path fill="#2a7a3b" d="M3 13c8-10 18-8 18-8s-2 10-12 12c-3 .6-5-1-6-4z"></path></svg>338 <svg class="leaf" viewBox="0 0 24 24"><path fill="#2a7a3b" d="M3 13c8-10 18-8 18-8s-2 10-12 12c-3 .6-5-1-6-4z"></path></svg>339 <span>Travel Sustainable</span>340 </div>341 342 <div class="meta">Hotel room: Beds: 1 double or 2 twins</div>343 344 <div class="price-header">Price for 4 nights, 2 adults</div>345 <div class="final-price">€ 411</div>346 <div class="small-tax">+€ 21 taxes and fees</div>347 </div>348 </div>349 </div>350 351 <!-- Card 3 -->352 <div class="card">353 <div class="card-row">354 <div class="img-placeholder">[IMG: Hotel entrance]</div>355 <div class="card-body">356 <div class="card-title-line">357 <div class="card-title">Hotel Alex Berlin</div>358 <div class="heart">♡</div>359 </div>360 361 <div class="rating-line">362 <span class="rating-badge">7.7</span>363 <span>Good • 709 reviews</span>364 </div>365 366 <div class="location-line">367 <svg class="loc-pin" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"></path></svg>368 <span>Prenzlauer Berg • 2.2 miles from center</span>369 </div>370 371 <div class="meta">Hotel room: 1 bed</div>372 373 <div class="price-header">Price for 4 nights, 2 adults</div>374 <div class="final-price">€ 415</div>375 </div>376 </div>377 </div>378 379 <!-- Spacer to mimic bottom safe area -->380 <div style="height: 60px;"></div>381 </div>382 383</div>384</body>385</html>