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 :root{9 --brand-blue: #0A4CBF;10 --accent-blue: #2A6EE1;11 --text-dark: #111;12 --muted: #6B6B6B;13 --gold: #E8A61C;14 --border: #E0E0E0;15 }16 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }17 #render-target{18 width:1080px; height:2400px;19 position:relative; overflow:hidden;20 background:#ffffff;21 color:#111;22 }23 24 /* Header */25 .header{26 width:100%;27 background:var(--brand-blue);28 color:#fff;29 padding:32px 40px 170px;30 box-sizing:border-box;31 position:relative;32 }33 .status-bar{34 display:flex; align-items:center; justify-content:space-between;35 opacity:.95; font-weight:600; font-size:38px;36 }37 .status-right{ display:flex; align-items:center; gap:22px; }38 .brand-row{39 display:flex; align-items:center; justify-content:space-between;40 margin-top:34px;41 }42 .brand-title{43 font-weight:800; font-size:64px; letter-spacing:0.5px;44 margin:0 auto; color:#fff;45 }46 .icon-btn{ width:78px; height:78px; display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.7); border-radius:50%; }47 .tabs{48 margin-top:44px; display:flex; align-items:center; gap:36px; flex-wrap:nowrap;49 }50 .tab{51 display:flex; align-items:center; gap:18px; color:#fff; opacity:.9;52 font-weight:600; font-size:38px;53 }54 .tab .svg{ width:50px; height:50px; }55 .tab.selected{56 border:3px solid #fff;57 padding:18px 28px; border-radius:40px;58 background:rgba(255,255,255,0.08);59 }60 61 /* Search card */62 .search-card{63 position:absolute; left:40px; right:40px; top:460px;64 background:#fff; border:8px solid var(--gold); border-radius:28px;65 box-shadow:0 16px 30px rgba(0,0,0,0.18);66 overflow:hidden;67 }68 .search-row{69 display:flex; align-items:center; gap:24px;70 padding:34px 36px;71 font-size:42px; color:#333;72 }73 .search-row + .search-row{ border-top:6px solid var(--gold); }74 .search-icon{ width:60px; height:60px; }75 .search-btn{76 background:var(--accent-blue); color:#fff; font-weight:700; text-align:center;77 padding:40px 20px; font-size:48px;78 }79 80 /* Content */81 .content{82 padding:720px 40px 260px; /* leave room for overlapping card and bottom nav */83 box-sizing:border-box;84 }85 .section-title{86 font-size:60px; font-weight:800; margin:16px 0 36px;87 }88 .cards-row{89 display:flex; gap:28px;90 }91 .card-blue{92 flex:1; background:var(--brand-blue); color:#fff; border-radius:28px; padding:36px;93 min-height:240px; box-sizing:border-box;94 }95 .card-outline{96 flex:1; background:#fff; border:6px solid var(--accent-blue); color:#1E1E1E; border-radius:28px; padding:36px; min-height:240px; box-sizing:border-box;97 }98 .card-title{ font-size:46px; font-weight:800; margin:6px 0 10px; }99 .card-sub{ font-size:38px; line-height:1.3; opacity:.92; }100 101 .sub-section-title{102 font-size:56px; font-weight:800; margin:56px 0 24px;103 }104 .list-card{105 background:#fff; border-radius:28px; padding:26px; display:flex; align-items:center; gap:28px;106 box-shadow:0 8px 20px rgba(0,0,0,0.12);107 }108 .thumb{109 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:18px;110 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center;111 }112 .list-title{ font-size:46px; font-weight:700; margin-bottom:8px; }113 .list-sub{ font-size:36px; color:var(--muted); }114 115 /* Bottom navigation */116 .bottom-nav{117 position:absolute; left:0; right:0; bottom:40px;118 background:#fff; border-top:1px solid #E5E5E5;119 height:180px; display:flex; align-items:center; justify-content:space-around;120 }121 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; font-size:32px; color:#3B3B3B; }122 .nav-item .svg{ width:64px; height:64px; }123 .nav-item.active{ color:var(--accent-blue); font-weight:700; }124 .profile-dot{125 width:64px; height:64px; border-radius:50%; border:4px solid #0AA3E8; display:flex; align-items:center; justify-content:center; font-weight:800; color:#0AA3E8;126 background:#E9F7FF;127 }128 .home-indicator{129 position:absolute; left:50%; transform:translateX(-50%);130 bottom:8px; width:360px; height:12px; background:#000; opacity:.15; border-radius:8px;131 }132 .muted{ color:rgba(255,255,255,0.9); font-weight:700; }133</style>134</head>135<body>136<div id="render-target">137 138 <div class="header">139 <div class="status-bar">140 <div>1:40</div>141 <div class="status-right">142 <svg class="svg" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="white" stroke-width="2"><path d="M4 12h16M7 9l-3 3 3 3"/></svg>143 <svg class="svg" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M2 12a10 10 0 0 1 20 0"/></svg>144 <svg class="svg" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="white" stroke-width="2"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="20" y="10" width="1.8" height="4" fill="white"/></svg>145 </div>146 </div>147 148 <div class="brand-row">149 <div style="width:78px;"></div>150 <div class="brand-title">Booking.com</div>151 <div style="display:flex; gap:18px;">152 <div class="icon-btn">153 <svg class="svg" viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#fff" stroke-width="2">154 <path d="M8 10h8a4 4 0 0 1 4 4v3H4v-3a4 4 0 0 1 4-4z"/>155 <path d="M7 7h10v3H7z"/>156 </svg>157 </div>158 <div class="icon-btn">159 <svg class="svg" viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#fff" stroke-width="2">160 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>161 <path d="M18 14V9a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/>162 </svg>163 </div>164 </div>165 </div>166 167 <div class="tabs">168 <div class="tab selected">169 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">170 <rect x="3" y="10" width="18" height="7" rx="2"></rect>171 <path d="M7 10V8a2 2 0 0 1 2-2h2v4"></path>172 </svg>173 <div>Stays</div>174 </div>175 <div class="tab">176 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">177 <path d="M2 16l20-6-7 6 3 6-6-4-6 4 3-6-7-6z"/>178 </svg>179 <div>Flights</div>180 </div>181 <div class="tab">182 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">183 <rect x="3" y="9" width="18" height="6" rx="2"/>184 <circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/>185 <path d="M7 9V7h10v2"/>186 </svg>187 <div>Car rental</div>188 </div>189 <div class="tab">190 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">191 <rect x="4" y="8" width="16" height="8" rx="2"/>192 <path d="M6 8V6h4v2M18 8V6h-4v2"/>193 </svg>194 <div>Taxi</div>195 </div>196 </div>197 </div>198 199 <!-- Search card -->200 <div class="search-card">201 <div class="search-row">202 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">203 <circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/>204 </svg>205 <div>Amsterdam</div>206 </div>207 <div class="search-row">208 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">209 <rect x="3" y="5" width="18" height="14" rx="2"/>210 <path d="M8 5v-2M16 5v-2M3 9h18"/>211 </svg>212 <div>Sun, Dec 17 - Thu, Dec 21</div>213 </div>214 <div class="search-row">215 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">216 <circle cx="12" cy="8" r="3"/>217 <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>218 </svg>219 <div>1 room · 1 adult · 0 children</div>220 </div>221 <div class="search-btn">Search</div>222 </div>223 224 <div class="content">225 <div class="section-title">Travel more, spend less</div>226 <div class="cards-row">227 <div class="card-blue">228 <div style="display:flex; align-items:center; gap:14px;">229 <div style="width:14px; height:14px; border-radius:50%; background:#FFDF2B;"></div>230 <div style="font-size:42px; font-weight:800;">Genius</div>231 </div>232 <div class="card-sub" style="margin-top:16px;">233 Larson, you're at <span style="font-weight:800;">Genius Level 1</span><br>234 in our loyalty program235 </div>236 </div>237 <div class="card-outline">238 <div class="card-title">15% discounts on stays</div>239 <div class="card-sub">Enjoy discounts at participating properties worldwide</div>240 </div>241 </div>242 243 <div class="sub-section-title">Continue your search</div>244 <div class="list-card">245 <div class="thumb">[IMG: Berlin Landmark]</div>246 <div>247 <div class="list-title">Berlin</div>248 <div class="list-sub">15 - 16 Dec, 1 adult</div>249 </div>250 </div>251 </div>252 253 <!-- Bottom navigation -->254 <div class="bottom-nav">255 <div class="nav-item active">256 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">257 <circle cx="10" cy="10" r="6"/><path d="M15 15l5 5"/>258 </svg>259 <div>Search</div>260 </div>261 <div class="nav-item">262 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">263 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/>264 </svg>265 <div>Saved</div>266 </div>267 <div class="nav-item">268 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">269 <rect x="5" y="7" width="14" height="12" rx="2"/>270 <path d="M9 7V5h6v2"/>271 </svg>272 <div>Bookings</div>273 </div>274 <div class="nav-item">275 <div class="profile-dot">N</div>276 <div>Profile</div>277 </div>278 </div>279 <div class="home-indicator"></div>280 281</div>282</body>283</html>