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: system-ui, -apple-system, 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 }16 17 /* Top blue header */18 .top {19 width: 100%;20 height: 560px;21 background: #0D47A1;22 color: #fff;23 position: relative;24 border-bottom-left-radius: 28px;25 border-bottom-right-radius: 28px;26 }27 .status-bar {28 height: 64px;29 padding: 20px 28px 0;30 font-size: 34px;31 opacity: 0.95;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 18px;40 }41 .brand {42 text-align: center;43 font-weight: 800;44 font-size: 54px;45 letter-spacing: 0.2px;46 margin-top: 40px;47 }48 .actions {49 position: absolute;50 top: 150px;51 right: 30px;52 display: flex;53 gap: 28px;54 }55 .actions .icon-circle {56 width: 60px; height: 60px; border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;57 }58 .tabs {59 position: absolute;60 bottom: 24px;61 left: 0; right: 0;62 padding: 10px 28px 24px;63 display: flex;64 justify-content: space-around;65 align-items: center;66 }67 .tab {68 color: #ffffff;69 opacity: 0.95;70 font-size: 34px;71 display: flex;72 align-items: center;73 gap: 14px;74 padding: 18px 24px;75 border-radius: 40px;76 }77 .tab.active {78 border: 2px solid rgba(255,255,255,0.9);79 padding: 18px 28px;80 }81 82 /* Main content */83 .content {84 position: absolute;85 top: 560px;86 left: 0;87 right: 0;88 padding: 20px 0 120px;89 }90 .search-card {91 width: 1000px;92 margin-left: 40px;93 margin-top: -70px;94 background: #ffffff;95 border: 6px solid #ECA82E;96 border-radius: 24px;97 box-shadow: 0 8px 28px rgba(0,0,0,0.15);98 overflow: hidden;99 }100 .search-row {101 display: flex;102 align-items: center;103 gap: 26px;104 padding: 30px 28px;105 border-top: 4px solid #ECA82E;106 }107 .search-row:first-child {108 border-top: none;109 }110 .search-row span {111 font-size: 36px;112 color: #1d1d1f;113 }114 .search-btn {115 width: 100%;116 background: #2962FF;117 color: #fff;118 font-weight: 700;119 border: none;120 padding: 34px 0;121 font-size: 40px;122 cursor: pointer;123 }124 .section-title {125 font-size: 52px;126 font-weight: 800;127 color: #111;128 margin: 56px 40px 18px;129 }130 131 .promo-row {132 display: flex;133 gap: 28px;134 padding: 0 40px;135 margin-top: 10px;136 }137 .promo-card {138 flex: 1;139 min-height: 240px;140 border-radius: 28px;141 padding: 28px;142 box-sizing: border-box;143 }144 .promo-card.blue {145 background: #0D47A1;146 color: #fff;147 box-shadow: 0 8px 20px rgba(0,0,0,0.12);148 }149 .promo-card.outline {150 background: #fff;151 color: #0D47A1;152 border: 4px solid #0D47A1;153 }154 .promo-card .promo-title {155 font-size: 36px;156 font-weight: 800;157 margin-bottom: 8px;158 }159 .promo-card .promo-text {160 font-size: 32px;161 line-height: 1.3;162 color: inherit;163 }164 .badge-dot {165 width: 12px; height: 12px; border-radius: 50%; background: #FFCF33; display: inline-block; margin-right: 10px; vertical-align: middle;166 }167 168 .recent-card {169 margin: 26px 40px 0;170 background: #fff;171 border-radius: 24px;172 box-shadow: 0 8px 24px rgba(0,0,0,0.1);173 display: flex;174 align-items: center;175 gap: 26px;176 padding: 24px;177 }178 .recent-card .img {179 width: 120px;180 height: 120px;181 background: #E0E0E0;182 border: 1px solid #BDBDBD;183 color: #757575;184 display: flex; align-items: center; justify-content: center;185 border-radius: 14px;186 font-size: 22px;187 text-align: center;188 padding: 8px;189 }190 .rc-text .title {191 font-size: 40px;192 font-weight: 700;193 color: #1a1a1a;194 margin-bottom: 8px;195 }196 .rc-text .subtitle {197 font-size: 32px;198 color: #555;199 }200 201 /* Bottom navigation */202 .bottom-nav {203 position: absolute;204 bottom: 40px;205 left: 0; right: 0;206 height: 160px;207 background: #ffffff;208 border-top: 1px solid #e6e6e6;209 display: flex;210 justify-content: space-around;211 align-items: center;212 padding: 0 20px;213 }214 .bn-item {215 display: flex;216 flex-direction: column;217 align-items: center;218 gap: 10px;219 color: #222;220 font-size: 28px;221 }222 .bn-item.active { color: #2962FF; }223 .profile-badge {224 width: 56px; height: 56px; border-radius: 50%; background: #E0F0FF; border: 2px solid #2E7DFF; color: #0D47A1; display:flex; align-items:center; justify-content:center; font-weight:800;225 }226 227 .home-indicator {228 position: absolute;229 bottom: 8px;230 left: 50%;231 transform: translateX(-50%);232 width: 360px;233 height: 10px;234 border-radius: 10px;235 background: #000;236 opacity: 0.18;237 }238 239 /* Utility icon sizing */240 .i24 { width: 48px; height: 48px; }241 .i32 { width: 42px; height: 42px; }242</style>243</head>244<body>245<div id="render-target">246 <div class="top">247 <div class="status-bar">248 <div>1:36</div>249 <div class="status-right">250 <svg class="i24" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>251 <svg class="i24" viewBox="0 0 24 24" fill="#fff"><path d="M3 8h18v12H3z"/><path d="M7 4h10v2H7z" fill="#fff"/></svg>252 <svg class="i24" viewBox="0 0 24 24" fill="#fff"><path d="M12 3l1.2 2.6 2.8.4-2 1.9.5 2.8-2.5-1.3-2.5 1.3.5-2.8-2-1.9 2.8-.4L12 3z"/></svg>253 </div>254 </div>255 <div class="brand">Booking.com</div>256 <div class="actions">257 <div class="icon-circle">258 <svg class="i24" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">259 <circle cx="10" cy="10" r="6"/>260 <path d="M15 15l6 6"/>261 </svg>262 </div>263 <div class="icon-circle">264 <svg class="i24" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">265 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>266 <path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>267 </svg>268 </div>269 </div>270 <div class="tabs">271 <div class="tab active">272 <svg class="i32" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">273 <rect x="3" y="11" width="18" height="6" rx="1" />274 <path d="M7 11V9a2 2 0 0 1 2-2h2v4"/>275 </svg>276 <div>Stays</div>277 </div>278 <div class="tab">279 <svg class="i32" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">280 <path d="M2 16l20-6-7 7v5l-3-3-3 3v-5z"/>281 </svg>282 <div>Flights</div>283 </div>284 <div class="tab">285 <svg class="i32" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">286 <rect x="3" y="10" width="18" height="6" rx="2"/>287 <circle cx="7" cy="18" r="2" fill="#fff"/>288 <circle cx="17" cy="18" r="2" fill="#fff"/>289 </svg>290 <div>Car rental</div>291 </div>292 <div class="tab">293 <svg class="i32" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">294 <rect x="4" y="8" width="16" height="8" rx="2"/>295 <path d="M6 16h12"/>296 </svg>297 <div>Taxi</div>298 </div>299 </div>300 </div>301 302 <div class="content">303 <div class="search-card">304 <div class="search-row">305 <svg class="i24" viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2">306 <circle cx="10" cy="10" r="7"/>307 <path d="M15 15l7 7"/>308 </svg>309 <span>Amadi Panorama Hotel</span>310 </div>311 <div class="search-row">312 <svg class="i24" viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2">313 <rect x="3" y="5" width="18" height="16" rx="2"/>314 <path d="M8 3v4M16 3v4M3 10h18"/>315 </svg>316 <span>Sun, Dec 17 - Sun, Dec 24</span>317 </div>318 <div class="search-row">319 <svg class="i24" viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2">320 <circle cx="12" cy="8" r="3"/>321 <path d="M4 20c1.5-4 14.5-4 16 0"/>322 </svg>323 <span>1 room · 1 adult · 0 children</span>324 </div>325 <button class="search-btn">Search</button>326 </div>327 328 <div class="section-title">Travel more, spend less</div>329 <div class="promo-row">330 <div class="promo-card blue">331 <div class="promo-title"><span class="badge-dot"></span>Genius</div>332 <div class="promo-text">Larson, you're at <b>Genius Level 1</b> in our loyalty program</div>333 </div>334 <div class="promo-card outline">335 <div class="promo-title">15% discounts on stays</div>336 <div class="promo-text">Enjoy discounts at participating properties worldwide</div>337 </div>338 </div>339 340 <div class="section-title" style="margin-top: 40px;">Continue your search</div>341 <div class="recent-card">342 <div class="img">[IMG: Berlin landmark]</div>343 <div class="rc-text">344 <div class="title">Berlin</div>345 <div class="subtitle">15 - 16 Dec, 1 adult</div>346 </div>347 </div>348 </div>349 350 <div class="bottom-nav">351 <div class="bn-item active">352 <svg class="i24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">353 <circle cx="10" cy="10" r="7"/>354 <path d="M15 15l7 7"/>355 </svg>356 <div>Search</div>357 </div>358 <div class="bn-item">359 <svg class="i24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">360 <path d="M12 21s-8-4.5-8-10a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5.5-8 10-8 10z"/>361 </svg>362 <div>Saved</div>363 </div>364 <div class="bn-item">365 <svg class="i24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">366 <rect x="3" y="7" width="18" height="12" rx="2"/>367 <path d="M8 7V5h8v2"/>368 </svg>369 <div>Bookings</div>370 </div>371 <div class="bn-item">372 <div class="profile-badge">N</div>373 <div>Profile</div>374 </div>375 </div>376 377 <div class="home-indicator"></div>378</div>379</body>380</html>