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>Booking UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 18 /* Header / App bar */19 .appbar {20 position: relative;21 width: 100%;22 height: 620px;23 background: #003580; /* Booking blue */24 color: #fff;25 }26 .status-row {27 height: 70px;28 display: flex;29 align-items: center;30 padding: 0 40px;31 font-size: 32px;32 opacity: 0.95;33 }34 .status-left { display: flex; align-items: center; gap: 24px; }35 .status-icons {36 display: flex;37 gap: 14px;38 margin-left: 18px;39 }40 .status-icon {41 width: 36px; height: 36px; background: rgba(255,255,255,0.9);42 border-radius: 6px;43 }44 .status-right {45 margin-left: auto;46 display: flex; gap: 18px; align-items: center;47 }48 .top-actions { position: absolute; right: 40px; top: 120px; display: flex; gap: 32px; }49 .action-icon { width: 56px; height: 56px; border: 2px solid rgba(255,255,255,0.8); border-radius: 28px; display: flex; align-items: center; justify-content: center; }50 .notif {51 position: relative;52 }53 .badge {54 position: absolute; right: -4px; top: -6px;55 background: #DB2C2C; color: #fff; font-size: 26px; line-height: 30px;56 width: 42px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; border: 3px solid #003580;57 }58 59 .title {60 text-align: center;61 font-weight: 700;62 font-size: 68px;63 margin-top: 110px;64 letter-spacing: 0.5px;65 }66 67 /* Tabs */68 .tabs {69 margin-top: 60px;70 display: flex;71 gap: 36px;72 justify-content: center;73 align-items: center;74 color: #fff;75 }76 .tab {77 display: flex; align-items: center; gap: 18px;78 padding: 22px 34px;79 border-radius: 48px;80 font-size: 34px;81 opacity: 0.95;82 }83 .tab.active {84 border: 3px solid #ffffff;85 }86 .tab svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }87 88 /* Search card */89 .search-card {90 position: absolute;91 left: 40px;92 right: 40px;93 top: 500px;94 background: #fff;95 border: 5px solid #F3B43A;96 border-radius: 26px;97 box-shadow: 0 10px 20px rgba(0,0,0,0.15);98 overflow: hidden;99 }100 .search-row {101 display: flex; align-items: center;102 gap: 24px;103 padding: 32px;104 font-size: 36px;105 color: #222;106 border-top: 5px solid #F3B43A;107 }108 .search-row:first-child { border-top: none; }109 .search-row svg { width: 46px; height: 46px; stroke: #222; stroke-width: 4; fill: none; }110 .search-btn {111 background: #2A64D8;112 color: #fff;113 text-align: center;114 font-weight: 700;115 font-size: 40px;116 padding: 32px 0;117 }118 119 /* Sections */120 .content {121 position: relative;122 margin-top: 360px; /* creates space below the overlay card */123 padding: 0 40px;124 }125 .section-title {126 font-size: 56px;127 font-weight: 800;128 margin: 40px 0 26px 0;129 }130 .benefits {131 display: flex; gap: 36px;132 }133 .card {134 flex: 1;135 min-height: 260px;136 border-radius: 28px;137 padding: 40px;138 box-shadow: 0 6px 16px rgba(0,0,0,0.08);139 }140 .card.blue {141 background: #0D3FA0;142 color: #fff;143 box-shadow: none;144 }145 .card.outline {146 background: #fff;147 color: #111;148 border: 3px solid #4070E1;149 }150 .card .kicker { font-size: 44px; font-weight: 800; margin-bottom: 18px; }151 .card .desc { font-size: 34px; line-height: 1.35; }152 153 .search-continue {154 margin-top: 40px;155 }156 .result-card {157 display: flex; align-items: center; gap: 28px;158 background: #fff;159 border-radius: 28px;160 padding: 28px;161 box-shadow: 0 8px 20px rgba(0,0,0,0.12);162 width: 1000px;163 }164 .img-ph {165 width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;166 border-radius: 16px;167 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;168 }169 .result-title { font-size: 40px; font-weight: 800; }170 .result-sub { font-size: 32px; color: #666; margin-top: 8px; }171 172 /* Bottom nav */173 .bottom-nav {174 position: absolute;175 left: 0; right: 0; bottom: 0;176 height: 180px;177 background: #fff;178 box-shadow: 0 -6px 16px rgba(0,0,0,0.1);179 display: flex; justify-content: space-around; align-items: center;180 }181 .nav-item { width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #333; }182 .nav-item svg { width: 52px; height: 52px; stroke: #333; stroke-width: 4; fill: none; }183 .nav-item.active { color: #2A64D8; }184 .nav-item.active svg { stroke: #2A64D8; }185 .nav-label { font-size: 28px; }186 187 /* iOS home indicator mimic */188 .home-indicator {189 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);190 width: 240px; height: 10px; background: #000; border-radius: 6px; opacity: 0.2;191 }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Top blue header -->198 <div class="appbar">199 <div class="status-row">200 <div class="status-left">201 <div>2:59</div>202 <div class="status-icons">203 <div class="status-icon"></div>204 <div class="status-icon"></div>205 <div class="status-icon"></div>206 </div>207 </div>208 <div class="status-right">209 <div style="width:36px;height:24px;border:2px solid #fff;border-radius:4px;"></div>210 <div style="width:18px;height:36px;border:2px solid #fff;border-radius:3px;"></div>211 </div>212 </div>213 214 <div class="title">Booking.com</div>215 216 <div class="top-actions">217 <div class="action-icon">218 <!-- chat bubble -->219 <svg viewBox="0 0 24 24">220 <path d="M3 4h18v11H9l-5 5v-5H3z" stroke="#fff" fill="none" stroke-width="2"></path>221 </svg>222 </div>223 <div class="action-icon notif">224 <!-- bell -->225 <svg viewBox="0 0 24 24">226 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5zM10 20h4" stroke="#fff" stroke-width="2" fill="none"></path>227 </svg>228 <div class="badge">2</div>229 </div>230 </div>231 232 <div class="tabs">233 <div class="tab active">234 <!-- bed icon -->235 <svg viewBox="0 0 24 24">236 <rect x="2" y="10" width="20" height="6" rx="1"></rect>237 <rect x="3" y="7" width="6" height="3" rx="1"></rect>238 <path d="M2 16v3M22 16v3" stroke-linecap="round"></path>239 </svg>240 <div>Stays</div>241 </div>242 <div class="tab">243 <!-- plane icon -->244 <svg viewBox="0 0 24 24">245 <path d="M2 12l9 2 11-6-11 10-3 5-2-6-4-3z" stroke-linejoin="round"></path>246 </svg>247 <div>Flights</div>248 </div>249 <div class="tab">250 <!-- car icon -->251 <svg viewBox="0 0 24 24">252 <rect x="4" y="9" width="16" height="6" rx="2"></rect>253 <circle cx="7" cy="17" r="2"></circle>254 <circle cx="17" cy="17" r="2"></circle>255 </svg>256 <div>Car rental</div>257 </div>258 <div class="tab">259 <!-- taxi word as icon -->260 <div style="font-weight:700; font-size:34px; letter-spacing:1px;">TAXI</div>261 </div>262 </div>263 </div>264 265 <!-- Search card overlay -->266 <div class="search-card">267 <div class="search-row">268 <!-- search icon -->269 <svg viewBox="0 0 24 24">270 <circle cx="10" cy="10" r="6"></circle>271 <path d="M15 15l6 6" stroke-linecap="round"></path>272 </svg>273 <div>Budapest</div>274 </div>275 <div class="search-row">276 <!-- calendar icon -->277 <svg viewBox="0 0 24 24">278 <rect x="3" y="5" width="18" height="16" rx="2"></rect>279 <path d="M7 3v4M17 3v4M3 10h18"></path>280 </svg>281 <div>Wed, Aug 02 - Sun, Aug 06</div>282 </div>283 <div class="search-row">284 <!-- users/rooms icon -->285 <svg viewBox="0 0 24 24">286 <circle cx="8" cy="8" r="3"></circle>287 <path d="M2 20c2-5 10-5 12 0"></path>288 <circle cx="17" cy="8" r="2"></circle>289 <path d="M13 18c1-3 5-3 7 0"></path>290 </svg>291 <div>2 rooms · 4 adults · 0 children</div>292 </div>293 <div class="search-btn">Search</div>294 </div>295 296 <!-- Main content -->297 <div class="content">298 <div class="section-title">Travel more, spend less</div>299 <div class="benefits">300 <div class="card blue">301 <div class="kicker">Genius</div>302 <div class="desc">Research, you're at Genius Level 1 in our loyalty program</div>303 </div>304 <div class="card outline">305 <div class="kicker">10% discounts</div>306 <div class="desc">Enjoy discounts at participating properties worldwide</div>307 </div>308 </div>309 310 <div class="section-title search-continue">Continue your search</div>311 <div class="result-card">312 <div class="img-ph">[IMG: Budapest]</div>313 <div>314 <div class="result-title">Budapest</div>315 <div class="result-sub">2 - 6 Aug, 4 adults</div>316 </div>317 </div>318 </div>319 320 <!-- Bottom navigation -->321 <div class="bottom-nav">322 <div class="nav-item active">323 <svg viewBox="0 0 24 24">324 <circle cx="10" cy="10" r="6"></circle>325 <path d="M15 15l6 6" stroke-linecap="round"></path>326 </svg>327 <div class="nav-label">Search</div>328 </div>329 <div class="nav-item">330 <svg viewBox="0 0 24 24">331 <path d="M12 21s-7-4-7-10a7 7 0 0114 0c0 6-7 10-7 10z"></path>332 </svg>333 <div class="nav-label">Saved</div>334 </div>335 <div class="nav-item">336 <svg viewBox="0 0 24 24">337 <rect x="5" y="7" width="14" height="12" rx="2"></rect>338 <path d="M8 7V5h8v2"></path>339 </svg>340 <div class="nav-label">Bookings</div>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24">344 <circle cx="12" cy="8" r="3"></circle>345 <path d="M4 21c2-6 14-6 16 0"></path>346 </svg>347 <div class="nav-label">Profile</div>348 </div>349 <div class="home-indicator"></div>350 </div>351 352</div>353</body>354</html>