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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 13 /* Top header */14 .header {15 background: #003580;16 color: #fff;17 padding-top: 32px;18 }19 .status-bar {20 height: 60px; display: flex; align-items: center; justify-content: space-between;21 padding: 0 32px; font-size: 30px; opacity: 0.9;22 }23 .app-title {24 text-align: center; font-weight: 700; font-size: 60px; padding: 18px 0 24px 0;25 }26 .top-actions {27 position: absolute; right: 32px; top: 140px; display: flex; gap: 28px; align-items: center;28 }29 .action-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }30 .badge {31 position: absolute; right: -6px; top: -6px; background: #ff3b30; color: #fff;32 width: 40px; height: 40px; border-radius: 20px; font-size: 26px; display: flex; align-items: center; justify-content: center;33 border: 2px solid #fff;34 }35 36 /* Category nav */37 .category-nav {38 display: flex; align-items: center; gap: 36px; padding: 22px 32px 28px;39 border-top: 1px solid rgba(255,255,255,0.2);40 }41 .cat-item {42 display: flex; align-items: center; gap: 18px; color: #d7e3ff; font-size: 34px;43 }44 .cat-item svg { width: 48px; height: 48px; color: #d7e3ff; }45 .cat-item.active {46 color: #fff;47 background: rgba(255,255,255,0.15);48 border: 2px solid #e0ecff;49 border-radius: 48px;50 padding: 18px 30px;51 }52 .cat-item.active svg { color: #fff; }53 54 /* Search card */55 .search-card {56 margin: 24px 32px;57 border: 8px solid #f4b400; border-radius: 22px; background: #fff;58 box-shadow: 0 8px 16px rgba(0,0,0,0.15);59 }60 .search-inner { padding: 26px 26px 0 26px; }61 .radio-row {62 display: flex; gap: 42px; align-items: center; margin-bottom: 22px;63 }64 .radio-opt {65 display: inline-flex; align-items: center; gap: 16px; font-size: 34px; color: #333;66 }67 .radio {68 width: 46px; height: 46px; border: 3px solid #cfcfcf; border-radius: 50%; position: relative;69 }70 .radio.selected { border-color: #1e72ff; }71 .radio.selected::after {72 content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #1e72ff;73 }74 75 .segment { border-top: 1px solid #ececec; margin-top: 20px; padding-top: 22px; }76 .row { display: flex; align-items: center; gap: 22px; font-size: 38px; color: #222; padding-bottom: 20px; }77 .row strong { font-weight: 700; }78 .icon { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; color: #666; }79 .divider-vert {80 width: 1px; background: #e5e5e5; height: 70px; margin: 0 12px 0 74px;81 }82 .swap {83 margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #1e72ff;84 }85 .calendar-row, .pax-row { font-size: 36px; color: #333; }86 .search-btn {87 background: #0a66ff; color: #fff; text-align: center; font-weight: 700; font-size: 44px;88 padding: 28px 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;89 margin-top: 18px;90 }91 92 /* Toggle */93 .toggle-line {94 display: flex; align-items: center; justify-content: space-between;95 padding: 26px 32px; font-size: 38px; color: #333;96 }97 .toggle {98 width: 120px; height: 60px; background: #d0d0d0; border-radius: 30px; position: relative;99 }100 .toggle::after {101 content:""; position:absolute; left: 8px; top: 8px; width: 44px; height: 44px; background:#fff; border-radius:22px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);102 }103 104 /* Nearby section */105 .nearby {106 padding: 14px 32px 0;107 }108 .nearby h2 { font-size: 52px; margin: 28px 0; color: #111; }109 .cards { display: flex; gap: 24px; }110 .img-card {111 width: 480px; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;112 border-radius: 18px; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 34px;113 }114 115 /* Bottom nav */116 .bottom-nav {117 position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; background: #fff; border-top: 1px solid #eee;118 display: flex; align-items: center; justify-content: space-around;119 }120 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #666; font-size: 30px; }121 .nav-item.active { color: #0a66ff; }122 .nav-item svg { width: 60px; height: 60px; }123 .profile-dot {124 width: 64px; height: 64px; border-radius: 32px; background: #d26d00; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;125 }126 127 /* Utility */128 .muted { color: #777; }129</style>130</head>131<body>132<div id="render-target">133 134 <div class="header">135 <div class="status-bar">136 <div>3:19</div>137 <div class="muted">• • •</div>138 </div>139 140 <div class="app-title">Booking.com</div>141 142 <div class="top-actions">143 <div class="action-btn">144 <!-- chat bubble -->145 <svg viewBox="0 0 24 24">146 <path d="M3 4h18v12H9l-5 4V4z" fill="none" stroke="white" stroke-width="2"/>147 </svg>148 </div>149 <div class="action-btn" style="position:relative;">150 <!-- bell -->151 <svg viewBox="0 0 24 24">152 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5zM10 20h4" fill="none" stroke="white" stroke-width="2"/>153 </svg>154 <div class="badge">1</div>155 </div>156 </div>157 158 <div class="category-nav">159 <div class="cat-item">160 <!-- bed -->161 <svg viewBox="0 0 24 24">162 <path d="M3 11h18v5H3zM3 7h8v4H3z" fill="none" stroke="currentColor" stroke-width="2"/>163 </svg>164 <span>Stays</span>165 </div>166 <div class="cat-item active">167 <!-- plane -->168 <svg viewBox="0 0 24 24">169 <path d="M2 12l8 2 3 7 2-1-1-6 8-2-1-2-8 1-4-6-2 1 3 6-8 0z" fill="none" stroke="currentColor" stroke-width="2"/>170 </svg>171 <span>Flights</span>172 </div>173 <div class="cat-item">174 <!-- car -->175 <svg viewBox="0 0 24 24">176 <path d="M4 14l2-5h12l2 5v3H4v-3z" fill="none" stroke="currentColor" stroke-width="2"/>177 <circle cx="7" cy="17" r="2" fill="currentColor"/>178 <circle cx="17" cy="17" r="2" fill="currentColor"/>179 </svg>180 <span>Car rental</span>181 </div>182 <div class="cat-item">183 <span style="font-weight:700; letter-spacing:2px;">TAXI</span>184 <span>Taxi</span>185 </div>186 </div>187 </div>188 189 <!-- Search Card -->190 <div class="search-card">191 <div class="search-inner">192 <div class="radio-row">193 <div class="radio-opt"><span class="radio selected"></span>Round-trip</div>194 <div class="radio-opt"><span class="radio"></span>One-way</div>195 <div class="radio-opt"><span class="radio"></span>Multi-city</div>196 </div>197 198 <div class="segment">199 <div class="row">200 <div class="icon">201 <!-- takeoff plane -->202 <svg viewBox="0 0 24 24">203 <path d="M2 14l9 2 8-3" fill="none" stroke="currentColor" stroke-width="2"/>204 <path d="M7 7l4 6" fill="none" stroke="currentColor" stroke-width="2"/>205 </svg>206 </div>207 <div><strong>DEL</strong> Delhi International Airport</div>208 </div>209 <div class="row" style="padding-top:0;">210 <div class="divider-vert"></div>211 <div style="flex:1; height:1px; background:#e5e5e5;"></div>212 <div class="swap">213 <svg viewBox="0 0 24 24" width="32" height="32">214 <path d="M12 5l4 4h-8l4-4zM12 19l-4-4h8l-4 4z" fill="#1e72ff"/>215 </svg>216 </div>217 </div>218 <div class="row" style="padding-top:0;">219 <div class="icon">220 <!-- landing plane -->221 <svg viewBox="0 0 24 24">222 <path d="M2 15l9 2 8-1" fill="none" stroke="currentColor" stroke-width="2"/>223 <path d="M9 6l3 6" fill="none" stroke="currentColor" stroke-width="2"/>224 </svg>225 </div>226 <div><strong>BVA</strong> Beauvais–Tillé Airport</div>227 </div>228 </div>229 230 <div class="segment calendar-row">231 <div class="row">232 <div class="icon">233 <!-- calendar -->234 <svg viewBox="0 0 24 24">235 <rect x="3" y="5" width="18" height="16" fill="none" stroke="currentColor" stroke-width="2"/>236 <path d="M7 3v4M17 3v4M3 10h18" fill="none" stroke="currentColor" stroke-width="2"/>237 </svg>238 </div>239 <div>Sat, Sep 30 - Sat, Oct 07</div>240 </div>241 </div>242 243 <div class="segment pax-row">244 <div class="row">245 <div class="icon">246 <!-- person -->247 <svg viewBox="0 0 24 24">248 <circle cx="12" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2"/>249 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="currentColor" stroke-width="2"/>250 </svg>251 </div>252 <div>1 adult, Economy</div>253 </div>254 </div>255 </div>256 257 <div class="search-btn">Search</div>258 </div>259 260 <!-- Toggle -->261 <div class="toggle-line">262 <div>Direct flights only</div>263 <div class="toggle"></div>264 </div>265 266 <!-- Nearby section -->267 <div class="nearby">268 <h2>Nearby options for tonight</h2>269 <div class="cards">270 <div class="img-card">[IMG: Hotel room photo]</div>271 <div class="img-card">[IMG: Hotel room photo]</div>272 </div>273 </div>274 275 <!-- Bottom navigation -->276 <div class="bottom-nav">277 <div class="nav-item active">278 <svg viewBox="0 0 24 24">279 <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2"/>280 <path d="M20 20l-4-4" fill="none" stroke="currentColor" stroke-width="2"/>281 </svg>282 <div>Search</div>283 </div>284 <div class="nav-item">285 <svg viewBox="0 0 24 24">286 <path d="M12 21l-8-6V5l8 6 8-6v10z" fill="none" stroke="currentColor" stroke-width="2"/>287 </svg>288 <div>Saved</div>289 </div>290 <div class="nav-item">291 <svg viewBox="0 0 24 24">292 <rect x="6" y="7" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"/>293 <path d="M9 7V5h6v2" fill="none" stroke="currentColor" stroke-width="2"/>294 </svg>295 <div>Trips</div>296 </div>297 <div class="nav-item">298 <div class="profile-dot">C</div>299 <div>Profile</div>300 </div>301 </div>302 303</div>304</body>305</html>