GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Booking Search UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top header / status */16 .top-bar {17 position: relative;18 background: #0E3A8C;19 height: 230px;20 color: #fff;21 }22 .status-icons {23 display: flex;24 align-items: center;25 gap: 18px;26 padding: 26px 30px 0 30px;27 font-size: 40px;28 color: #e8f0ff;29 }30 .status-right {31 position: absolute;32 right: 26px;33 top: 26px;34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .search-pill {39 position: absolute;40 left: 40px;41 right: 40px;42 top: 140px;43 background: #fff;44 border: 6px solid #F5C246;45 border-radius: 28px;46 height: 100px;47 display: flex;48 align-items: center;49 padding: 0 30px;50 color: #2b2b2b;51 box-shadow: 0 6px 10px rgba(0,0,0,0.1);52 }53 .search-pill .label {54 font-size: 42px;55 font-weight: 600;56 letter-spacing: 0.2px;57 margin-left: 20px;58 }59 .icon {60 width: 48px; height: 48px;61 }62 63 /* Toolbar */64 .toolbar {65 background: #fff;66 display: flex;67 padding: 22px 30px;68 border-bottom: 1px solid #eee;69 margin-top: 230px;70 }71 .tool {72 flex: 1;73 display: flex;74 align-items: center;75 gap: 16px;76 color: #222;77 font-size: 40px;78 }79 .tool + .tool { justify-content: center; }80 .tool:last-child { justify-content: flex-end; }81 82 /* List area */83 .content {84 padding: 10px 30px 120px 30px;85 }86 87 /* Cards */88 .card {89 background: #fff;90 border-radius: 16px;91 margin: 26px 0;92 }93 .card-row {94 display: flex;95 gap: 26px;96 }97 .thumb {98 width: 320px;99 height: 360px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 border-radius: 12px;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 font-size: 32px;108 text-align: center;109 overflow: hidden;110 }111 .thumb.tall { height: 520px; }112 .card-body {113 flex: 1;114 padding-top: 8px;115 }116 .price-right {117 text-align: right;118 }119 .h1 {120 font-size: 46px;121 font-weight: 700;122 color: #222;123 }124 .sub {125 font-size: 36px;126 color: #6a6a6a;127 margin-top: 6px;128 }129 .muted { color: #8a8a8a; }130 .green { color: #138A32; }131 .red { color: #C4392E; }132 .strike { text-decoration: line-through; color: #C4392E; }133 134 /* badges */135 .badge {136 display: inline-block;137 padding: 8px 16px;138 border-radius: 8px;139 font-size: 32px;140 margin-right: 8px;141 font-weight: 700;142 }143 .badge-yellow { background: #FFD54F; color: #000; }144 .badge-blue { background: #1E63D9; color: #fff; }145 .pill-green {146 display: inline-block;147 background: #2E7D32;148 color: #fff;149 padding: 10px 18px;150 border-radius: 10px;151 font-size: 34px;152 margin: 14px 0;153 }154 .cta-green {155 display: inline-block;156 background: #2E7D32;157 color: #fff;158 padding: 14px 18px;159 border-radius: 10px;160 font-size: 34px;161 margin-top: 10px;162 }163 164 .rating-box {165 background: #0A4BD7;166 color: #fff;167 border-radius: 10px;168 padding: 8px 14px;169 font-size: 34px;170 font-weight: 700;171 display: inline-block;172 margin-right: 12px;173 }174 175 /* Info banner */176 .info-banner {177 border: 1px solid #e3e3e3;178 border-radius: 18px;179 padding: 26px;180 display: flex;181 gap: 24px;182 align-items: center;183 background: #fff;184 margin-top: 30px;185 }186 .banner-text .title {187 font-size: 44px; font-weight: 700; color: #222;188 }189 .banner-text .desc {190 margin-top: 12px; font-size: 36px; color: #555;191 }192 .banner-text .link {193 margin-top: 22px; font-size: 40px; color: #1E63D9; font-weight: 700;194 }195 .banner-close {196 margin-left: auto;197 width: 64px; height: 64px;198 display: flex; align-items: center; justify-content: center;199 border-radius: 50%;200 color: #666;201 }202 203 /* Small icons inline */204 .inline {205 display: inline-flex; align-items: center; gap: 12px;206 font-size: 36px; color: #555;207 }208 209 /* heart */210 .heart {211 position: absolute;212 right: 20px; top: 8px;213 width: 60px; height: 60px;214 }215 216 /* bottom home indicator */217 .home-indicator {218 position: absolute;219 bottom: 22px; left: 50%;220 transform: translateX(-50%);221 width: 320px; height: 12px;222 background: #000;223 border-radius: 6px;224 opacity: 0.2;225 }226</style>227</head>228<body>229<div id="render-target">230 231 <!-- Header / Status -->232 <div class="top-bar">233 <div class="status-icons">234 <div>3:03</div>235 <div style="font-size:32px; background:#fff; color:#0E3A8C; border-radius:6px; padding:6px 10px;">oyo</div>236 <div style="font-size:32px; background:#fff; color:#0E3A8C; border-radius:6px; padding:6px 10px;">ebay</div>237 <div style="font-size:36px;">▶︎</div>238 <div style="font-size:50px;">•</div>239 </div>240 <div class="status-right">241 <!-- simple wifi and battery icons -->242 <svg class="icon" viewBox="0 0 24 24" fill="#fff">243 <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/>244 </svg>245 <svg class="icon" viewBox="0 0 24 24" fill="#fff">246 <path d="M2 7h18a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2V7zm19-2v4h1V5h-1z"/>247 </svg>248 </div>249 250 <!-- Search pill -->251 <div class="search-pill">252 <svg class="icon" viewBox="0 0 24 24" fill="#0E3A8C">253 <path d="M15 18l-6-6 6-6v12z"/>254 </svg>255 <div class="label">Budapest · Aug 2 - Aug 6</div>256 </div>257 </div>258 259 <!-- Toolbar -->260 <div class="toolbar">261 <div class="tool">262 <svg class="icon" viewBox="0 0 24 24" fill="#222">263 <path d="M6 4h12v2H6V4zm-2 7h16v2H4v-2zm4 7h8v2H8v-2z"/>264 </svg>265 <span>Sort</span>266 </div>267 <div class="tool">268 <svg class="icon" viewBox="0 0 24 24" fill="#222">269 <path d="M4 6h10v2H4V6zm0 10h16v2H4v-2zm0-5h13v2H4v-2z"/>270 </svg>271 <span>Filter</span>272 </div>273 <div class="tool">274 <svg class="icon" viewBox="0 0 24 24" fill="#222">275 <path d="M12 2l7 7-7 7-7-7 7-7zm0 3.5L7.5 10 12 14.5 16.5 10 12 5.5z"/>276 </svg>277 <span>Map</span>278 </div>279 </div>280 281 <div class="content">282 283 <!-- First price summary row -->284 <div class="card card-row">285 <div class="thumb" style="width: 330px; height: 330px;">[IMG: Hotel exterior at night]</div>286 <div class="card-body price-right">287 <div class="sub">2 hotel rooms: 2 beds</div>288 <div class="h1">Price for 4 nights, 4 adults</div>289 <div style="font-size:72px; font-weight:800; margin:16px 0;">€ 3,286</div>290 <div class="sub">+€ 125 taxes and charges</div>291 <div class="sub green" style="margin-top: 8px;">292 <svg class="icon" viewBox="0 0 24 24" fill="#138A32" style="width:40px; height:40px; vertical-align:middle;">293 <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>294 </svg>295 Free cancellation296 </div>297 </div>298 </div>299 300 <!-- HOMES BUDAPEST listing -->301 <div class="card" style="position: relative;">302 <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2">303 <path d="M12 21s-7-4.35-9.5-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 7c-2.5 3.65-9.5 8-9.5 8z"/>304 </svg>305 <div class="card-row">306 <div class="thumb tall">[IMG: Bright living room apartment]</div>307 <div class="card-body">308 <div class="h1" style="margin-bottom: 12px;">HOMES BUDAPEST</div>309 <div>310 <span class="badge badge-yellow">⬜</span>311 <span class="badge badge-yellow">⬜</span>312 <span class="badge badge-yellow">⬜</span>313 <span class="badge badge-yellow">⬜</span>314 <span class="badge badge-yellow">＋</span>315 <span class="badge badge-blue">Genius</span>316 </div>317 <div style="margin-top: 16px;">318 <span class="rating-box">8.9</span>319 <span style="font-size:40px; font-weight:700;">Excellent</span>320 <span class="sub">· 203 reviews</span>321 </div>322 323 <div class="sub" style="margin-top: 18px;">324 <span class="inline">325 <svg class="icon" viewBox="0 0 24 24" fill="#777" style="width:40px; height:40px;">326 <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>327 </svg>328 07. Erzsébetváros · 2,000 feet from center329 </span>330 </div>331 332 <div class="sub" style="margin-top: 10px;">333 <span class="inline">334 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" style="width:40px; height:40px;">335 <path d="M12 2c5 4 5 10 0 18M6 6c3 2 3 6 0 11"/>336 </svg>337 Travel Sustainable338 </span>339 </div>340 341 <div class="pill-green">Getaway Deal</div>342 343 <div class="sub" style="margin-top: 16px;">344 Entire apartment – 592 ft²: 2 beds · 1 bedroom · 1 living room · 1 bathroom345 </div>346 347 <div class="h1" style="margin-top: 16px;">Price for 4 nights, 4 adults</div>348 <div style="margin-top: 8px;">349 <span class="strike" style="font-size:48px; margin-right: 16px;">€ 1,100</span>350 <span style="font-size:60px; font-weight:800;">€ 842</span>351 </div>352 <div class="sub muted" style="margin-top: 8px;">+€ 59 taxes and charges</div>353 <div class="cta-green">Earn € 63 Credits</div>354 <div class="sub green" style="margin-top: 10px;">355 <svg class="icon" viewBox="0 0 24 24" fill="#138A32" style="width:40px; height:40px; vertical-align:middle;">356 <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>357 </svg>358 Free cancellation359 </div>360 </div>361 </div>362 </div>363 364 <!-- Genius banner -->365 <div class="info-banner">366 <div class="thumb" style="width:160px; height:160px;">[IMG: Genius gift box]</div>367 <div class="banner-text">368 <div class="title">Level up your trip</div>369 <div class="desc">You save 10% at Genius properties because you’re at Level 1 in our loyalty program</div>370 <div class="link">Show Genius properties</div>371 </div>372 <div class="banner-close">373 <svg viewBox="0 0 24 24" width="40" height="40" fill="#666">374 <path d="M19 6L6 19M6 6l13 13" stroke="#666" stroke-width="2"/>375 </svg>376 </div>377 </div>378 379 <!-- Next listing preview -->380 <div class="card" style="position: relative; padding: 22px;">381 <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" style="top:22px;">382 <path d="M12 21s-7-4.35-9.5-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 7c-2.5 3.65-9.5 8-9.5 8z"/>383 </svg>384 <div class="card-row">385 <div class="thumb" style="width: 330px; height: 260px;">[IMG: Florin Apart Hotel room]</div>386 <div class="card-body">387 <div class="h1">Florin Apart Hotel</div>388 <div style="margin-top: 6px;">389 <span style="color:#FFC107; font-size:44px;">★ ★ ★ ★ ★</span>390 <span class="badge badge-blue" style="margin-left:12px;">Genius</span>391 </div>392 <div style="margin-top: 12px;">393 <span class="rating-box">9.2</span>394 <span style="font-size:40px; font-weight:700;">Wonderful</span>395 <span class="sub">· 72 reviews</span>396 </div>397 </div>398 </div>399 </div>400 401 </div>402 403 <div class="home-indicator"></div>404</div>405</body>406</html>