GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Booking UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #0B1B3F;15 }16 17 /* Top blue header area */18 .header {19 position: relative;20 width: 100%;21 height: 980px;22 background: #003580;23 color: #fff;24 }25 26 .status-bar {27 height: 70px;28 padding: 20px 36px 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-size: 28px;33 color: #e6eefc;34 }35 .status-left { display: flex; gap: 18px; align-items: center; }36 .status-right { display: flex; gap: 16px; align-items: center; }37 .dot { width: 12px; height: 12px; background: #e6eefc; border-radius: 50%; display: inline-block; }38 39 .top-bar {40 padding: 22px 36px 0 36px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .logo {46 font-weight: 800;47 font-size: 56px;48 letter-spacing: 0.5px;49 }50 .logo span { color: #87b6ff; }51 52 .icon-btns { display: flex; gap: 28px; align-items: center; position: relative; }53 .icon {54 width: 50px; height: 50px;55 display: inline-flex; align-items: center; justify-content: center;56 }57 .badge {58 position: absolute;59 right: 0;60 top: -4px;61 background: #e53935;62 color: #fff;63 border-radius: 18px;64 padding: 2px 10px;65 font-size: 22px;66 font-weight: 700;67 }68 69 .nav-row {70 margin: 32px 36px 0 36px;71 display: flex;72 gap: 34px;73 align-items: center;74 }75 .chip {76 display: flex; align-items: center; gap: 16px;77 padding: 18px 28px;78 border-radius: 60px;79 color: #d5e6ff;80 font-size: 34px;81 border: 2px solid transparent;82 }83 .chip svg { fill: #d5e6ff; }84 .chip.active {85 background: rgba(255,255,255,0.1);86 border-color: rgba(255,255,255,0.25);87 }88 89 /* Search Card */90 .search-card {91 margin: 36px;92 background: transparent;93 }94 .search-box {95 border: 6px solid #f5b73b;96 border-radius: 20px;97 overflow: hidden;98 background: #ffffff;99 }100 .field {101 display: flex;102 align-items: center;103 gap: 26px;104 padding: 34px 28px;105 border-bottom: 2px solid #efefef;106 color: #222;107 font-size: 40px;108 }109 .field:last-child { border-bottom: none; }110 .field svg { width: 48px; height: 48px; fill: #003580; }111 .search-btn {112 margin-top: 22px;113 width: 100%;114 background: #2a6bf6;115 color: #fff;116 padding: 32px 0;117 border-radius: 14px;118 text-align: center;119 font-size: 44px;120 font-weight: 700;121 box-shadow: 0 6px 0 rgba(0,0,0,0.1) inset;122 }123 124 /* White content area */125 .content {126 position: absolute;127 left: 0; right: 0;128 top: 980px;129 bottom: 0;130 background: #ffffff;131 border-top-left-radius: 26px;132 border-top-right-radius: 26px;133 padding: 36px;134 }135 136 .section-title {137 font-size: 64px;138 line-height: 1.1;139 font-weight: 800;140 color: #222;141 margin-top: 8px;142 margin-bottom: 36px;143 }144 145 .cards {146 display: grid;147 grid-template-columns: 1fr 1fr;148 gap: 28px;149 }150 .card {151 border-radius: 22px;152 padding: 30px;153 border: 2px solid #e6e6e6;154 background: #fff;155 }156 .card.blue {157 background: #0c3ca6;158 color: #fff;159 border-color: #0c3ca6;160 }161 .card .title { font-size: 48px; font-weight: 800; margin-bottom: 10px; }162 .card .sub { font-size: 36px; color: #e6e6e6; }163 .card.blue .title { color: #fff; }164 .card.blue .sub { color: #cfe0ff; }165 .card .body { font-size: 34px; color: #333; margin-top: 12px; line-height: 1.3; }166 .card.blue .body { color: #e6efff; }167 168 .continue {169 margin-top: 44px;170 font-size: 56px;171 font-weight: 800;172 color: #222;173 }174 175 .recent {176 margin-top: 22px;177 border-radius: 26px;178 background: #fff;179 border: 2px solid #e6e6e6;180 display: flex;181 align-items: center;182 padding: 24px;183 gap: 26px;184 }185 .thumb {186 width: 150px; height: 150px;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 border-radius: 12px;190 display: flex; align-items: center; justify-content: center;191 color: #757575; font-size: 28px; text-align: center;192 }193 .recent .r-title { font-size: 48px; font-weight: 800; color: #111; }194 .recent .r-sub { font-size: 36px; color: #555; margin-top: 6px; }195 196 /* Bottom tab bar */197 .tabbar {198 position: absolute;199 left: 0; right: 0; bottom: 0;200 height: 150px;201 border-top: 2px solid #e5e5e5;202 background: #ffffff;203 display: flex; align-items: center; justify-content: space-around;204 }205 .tab {206 display: flex; flex-direction: column; align-items: center; gap: 8px;207 font-size: 30px; color: #555;208 }209 .tab.active { color: #2a6bf6; }210 .tab svg { width: 54px; height: 54px; }211</style>212</head>213<body>214<div id="render-target">215 216 <div class="header">217 <!-- Status bar -->218 <div class="status-bar">219 <div class="status-left">220 <span style="font-weight:700;">9:06</span>221 <span class="dot"></span>222 <span class="dot"></span>223 </div>224 <div class="status-right">225 <span class="dot"></span>226 <span class="dot"></span>227 <span class="dot"></span>228 </div>229 </div>230 231 <!-- Top bar with logo and actions -->232 <div class="top-bar">233 <div class="logo"><span>Booking.com</span></div>234 <div class="icon-btns">235 <div class="icon" aria-label="chat">236 <svg viewBox="0 0 24 24">237 <path fill="#ffffff" d="M4 4h16v11H7l-3 3V4z"/>238 </svg>239 </div>240 <div class="icon" aria-label="bell" style="position:relative;">241 <svg viewBox="0 0 24 24">242 <path fill="#ffffff" d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>243 </svg>244 <div class="badge">2</div>245 </div>246 </div>247 </div>248 249 <!-- Navigation chips -->250 <div class="nav-row">251 <div class="chip active">252 <svg viewBox="0 0 24 24">253 <path d="M4 10l8-6 8 6v8H4v-8zm5 8v-6h6v6H9z"/>254 </svg>255 <div>Stays</div>256 </div>257 <div class="chip">258 <svg viewBox="0 0 24 24">259 <path d="M2 16l20-6-6 6-6 2-2 2-1-4-5 0z"/>260 </svg>261 <div>Flights</div>262 </div>263 <div class="chip">264 <svg viewBox="0 0 24 24">265 <path d="M5 11h14l-2-4h-3l-1-2H9l-1 2H5l-2 4h2zm-1 2a2 2 0 1 0 0 4h1v-2h12v2h1a2 2 0 1 0 0-4H4z"/>266 </svg>267 <div>Car rental</div>268 </div>269 <div class="chip">270 <svg viewBox="0 0 24 24">271 <path d="M3 15h18v2H3zM4 11h16v3H4zM7 7h10v3H7z"/>272 </svg>273 <div>TAXI</div>274 </div>275 </div>276 277 <!-- Search Card -->278 <div class="search-card">279 <div class="search-box">280 <div class="field">281 <svg viewBox="0 0 24 24">282 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21.5 21.5 20l-6-6zM6.5 11a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0z"/>283 </svg>284 <div>Berlin</div>285 </div>286 <div class="field">287 <svg viewBox="0 0 24 24">288 <path d="M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 14H5V8h14v10zM7 2h2v3H7V2zm8 0h2v3h-2V2z"/>289 </svg>290 <div>Wed, Oct 18 - Sun, Oct 22</div>291 </div>292 <div class="field">293 <svg viewBox="0 0 24 24">294 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm-8 9a8 8 0 1 1 16 0H4z"/>295 </svg>296 <div>1 room · 1 adult · 0 children</div>297 </div>298 </div>299 <div class="search-btn">Search</div>300 </div>301 </div>302 303 <!-- White content area below header -->304 <div class="content">305 <div class="section-title">Travel more, spend less</div>306 307 <div class="cards">308 <div class="card blue">309 <div class="title">Genius</div>310 <div class="body">Larson, you're at Genius Level 1 in our loyalty program</div>311 </div>312 <div class="card">313 <div class="title">15% discounts on stays</div>314 <div class="body">Enjoy discounts at participating properties worldwide</div>315 </div>316 </div>317 318 <div class="continue">Continue your search</div>319 <div class="recent">320 <div class="thumb">[IMG: Berlin Street]</div>321 <div>322 <div class="r-title">Berlin</div>323 <div class="r-sub">18 - 22 Oct, 1 adult</div>324 </div>325 </div>326 </div>327 328 <!-- Bottom navigation bar -->329 <div class="tabbar">330 <div class="tab active">331 <svg viewBox="0 0 24 24">332 <path fill="#2a6bf6" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21.5 21.5 20l-6-6zM6.5 11a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0z"/>333 </svg>334 <div>Search</div>335 </div>336 <div class="tab">337 <svg viewBox="0 0 24 24">338 <path fill="#777" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6.01 6.01 0 0 1 18 4a4.5 4.5 0 0 1 4.5 4.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>339 </svg>340 <div>Saved</div>341 </div>342 <div class="tab">343 <svg viewBox="0 0 24 24">344 <path fill="#777" d="M6 7h12l2 5v8H4v-8l2-5zm3 0V5h6v2H9z"/>345 </svg>346 <div>Bookings</div>347 </div>348 <div class="tab">349 <svg viewBox="0 0 24 24">350 <circle cx="12" cy="8" r="4" fill="#777"></circle>351 <path d="M4 20a8 8 0 0 1 16 0" fill="#777"></path>352 </svg>353 <div>Profile</div>354 </div>355 </div>356 357</div>358</body>359</html>