GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Booking UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #0a49c0;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 40px;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.85; }37 38 /* Search bar / back chip */39 .search-chip {40 position: absolute;41 top: 140px;42 left: 36px;43 width: 1008px;44 height: 110px;45 border: 8px solid #d5a838; /* gold highlight */46 border-radius: 26px;47 background: #ffffff;48 display: flex;49 align-items: center;50 padding: 0 26px;51 box-sizing: border-box;52 color: #222;53 font-size: 40px;54 gap: 22px;55 }56 .search-chip .text { font-weight: 600; }57 .row-actions {58 position: absolute;59 top: 280px;60 left: 36px;61 width: 1008px;62 display: flex;63 align-items: center;64 justify-content: space-between;65 color: #222;66 font-size: 36px;67 }68 .row-actions .action {69 display: flex; align-items: center; gap: 16px;70 }71 .properties-count {72 position: absolute;73 top: 360px;74 left: 36px;75 font-size: 34px;76 color: #555;77 }78 79 /* Cards */80 .card {81 position: absolute;82 left: 36px;83 width: 1008px;84 background: #fff;85 border-radius: 18px;86 box-sizing: border-box;87 padding: 24px;88 }89 .card + .card { margin-top: 26px; }90 .card-content {91 display: flex;92 gap: 26px;93 }94 .thumb {95 width: 290px;96 height: 450px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 display: flex; justify-content: center; align-items: center;100 color: #757575; font-size: 30px; text-align: center;101 border-radius: 12px;102 }103 .details {104 flex: 1;105 }106 .title-row {107 display: flex; align-items: center; justify-content: space-between;108 }109 .title {110 font-size: 44px; font-weight: 700; color: #222; line-height: 1.2;111 }112 .heart {113 width: 54px; height: 54px; border: 2px solid #666; border-radius: 50%;114 display: flex; align-items: center; justify-content: center;115 }116 .subtext { color: #555; font-size: 34px; margin-top: 10px; }117 .badge {118 display: inline-block; background: #f3f1d1; color: #7b6f34; font-weight: 700;119 padding: 10px 16px; border-radius: 12px; font-size: 30px; margin: 16px 0;120 }121 .bullets { font-size: 32px; color: #333; margin: 8px 0; }122 .price-line { margin-top: 24px; font-size: 40px; color: #000; font-weight: 700; }123 .price-large { font-size: 58px; font-weight: 800; }124 .strike { text-decoration: line-through; color: #b54b4b; margin-right: 14px; }125 .fees { font-size: 32px; color: #555; margin-top: 6px; }126 .alert { color: #c53a33; font-size: 34px; margin-top: 16px; }127 128 /* Second card specifics */129 .rating-badge {130 display: inline-block; background: #0a5bdc; color: #fff; border-radius: 12px;131 padding: 8px 14px; font-size: 32px; font-weight: 800; margin-right: 12px;132 }133 .stars { color: #f2b01d; font-size: 34px; letter-spacing: 2px; }134 .ad-tag { display: inline-block; border: 2px solid #999; color: #555; padding: 4px 10px; border-radius: 10px; font-size: 30px; margin-left: 8px; }135 .sustainable { color: #1f8a4c; font-size: 34px; display: flex; align-items: center; gap: 10px; margin: 10px 0; }136 .leaf { width: 26px; height: 26px; background: #1f8a4c; border-radius: 50%; display: inline-block; }137 138 /* Bottom sheet */139 .bottom-sheet {140 position: absolute;141 bottom: 0;142 left: 0;143 width: 1080px;144 height: 430px;145 background: #ffffff;146 border-top-left-radius: 26px;147 border-top-right-radius: 26px;148 box-shadow: 0 -8px 18px rgba(0,0,0,0.15);149 padding: 26px 36px;150 box-sizing: border-box;151 }152 .drag-handle {153 width: 180px; height: 10px; background: #bfbfbf; border-radius: 8px; margin: 0 auto 24px;154 }155 .sheet-title {156 font-size: 58px; font-weight: 800; color: #222; margin-bottom: 30px;157 }158 .new-list {159 display: inline-flex; align-items: center; gap: 28px;160 }161 .plus-tile {162 width: 200px; height: 200px; border-radius: 20px; background: #f7f7f7; border: 1px solid #ddd;163 display: flex; justify-content: center; align-items: center;164 }165 .plus {166 width: 84px; height: 84px; color: #2f6bed;167 }168 .new-list-text {169 font-size: 44px; color: #2f6bed; font-weight: 700;170 }171 172 /* Utility positioning of cards */173 #card1 { top: 420px; }174 #card2 { top: 1080px; }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Top status bar -->181 <div class="status-bar">182 <div>2:47</div>183 <div class="status-right">184 <div class="dot"></div>185 <div class="dot"></div>186 <div class="dot"></div>187 <div class="dot"></div>188 <div>100%</div>189 </div>190 </div>191 192 <!-- Search/back chip -->193 <div class="search-chip">194 <svg width="40" height="40" viewBox="0 0 24 24" fill="#222">195 <path d="M15 4 L7 12 L15 20" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196 </svg>197 <div class="text">Berlin · Jan 1 - Jan 5</div>198 </div>199 200 <!-- Actions row -->201 <div class="row-actions">202 <div class="action">203 <svg width="42" height="42" viewBox="0 0 24 24">204 <path d="M7 4 L7 16 M7 16 L4 13 M7 16 L10 13" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round"/>205 <path d="M17 20 L17 8 M17 8 L14 11 M17 8 L20 11" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round"/>206 </svg>207 <div>Sort</div>208 </div>209 <div class="action">210 <svg width="42" height="42" viewBox="0 0 24 24">211 <path d="M4 6 H20 M9 12 H20 M14 18 H20" stroke="#222" stroke-width="2.2" stroke-linecap="round"/>212 <circle cx="7" cy="6" r="2.4" fill="#222"/>213 <circle cx="12" cy="12" r="2.4" fill="#222"/>214 <circle cx="17" cy="18" r="2.4" fill="#222"/>215 </svg>216 <div>Filter</div>217 </div>218 <div class="action">219 <svg width="42" height="42" viewBox="0 0 24 24">220 <path d="M12 3 C8 3 5 6 5 9 C5 13 12 21 12 21 C12 21 19 13 19 9 C19 6 16 3 12 3 Z" stroke="#222" stroke-width="2.2" fill="none"/>221 <circle cx="12" cy="9" r="3" fill="#222"/>222 </svg>223 <div>Map</div>224 </div>225 </div>226 227 <div class="properties-count">820 properties</div>228 229 <!-- Card 1 -->230 <div class="card" id="card1">231 <div class="card-content">232 <div class="thumb">[IMG: Apartment Living Room]</div>233 <div class="details">234 <div class="title-row">235 <div class="title">bevo: Stilvolles Souterrain im<br>Bergmannkiez</div>236 <div class="heart">♡</div>237 </div>238 <div class="subtext">239 <svg width="32" height="32" viewBox="0 0 24 24" style="vertical-align: middle;">240 <path d="M12 3 C8 3 5 6 5 9 C5 13 12 21 12 21 C12 21 19 13 19 9 C19 6 16 3 12 3 Z" fill="#444"/>241 </svg>242 Friedrichshain-Kreuzberg · 1.7 miles from center243 </div>244 245 <div class="badge">New to Booking.com</div>246 247 <div class="bullets">914.9 ft² · 2 beds · 1 bedroom · 1 living room · 1 bathroom</div>248 249 <div class="price-line">Price for 4 nights, 2 adults</div>250 <div class="price-line">251 <span class="strike">€ 674</span>252 <span class="price-large">€ 539</span>253 </div>254 <div class="fees">+€ 69 taxes and fees</div>255 <div class="alert">Only 1 left at this price on Booking.com</div>256 </div>257 </div>258 </div>259 260 <!-- Card 2 -->261 <div class="card" id="card2">262 <div class="card-content">263 <div class="thumb">[IMG: Hotel Room]</div>264 <div class="details">265 <div class="title-row">266 <div class="title">Leonardo Hotel Berlin Mitte</div>267 <div class="heart">♡</div>268 </div>269 270 <div style="margin-top: 8px;">271 <span class="stars">★★★★★</span>272 <span class="ad-tag">Ad</span>273 </div>274 275 <div style="margin-top: 10px;">276 <span class="rating-badge">8.2</span>277 <span style="font-size: 36px; color:#222;">Very Good · 12709 reviews</span>278 </div>279 280 <div class="subtext" style="margin-top: 12px;">281 <svg width="32" height="32" viewBox="0 0 24 24" style="vertical-align: middle;">282 <path d="M12 3 C8 3 5 6 5 9 C5 13 12 21 12 21 C12 21 19 13 19 9 C19 6 16 3 12 3 Z" fill="#444"/>283 </svg>284 Mitte · 2,950 feet from center285 </div>286 287 <div class="sustainable">288 <span class="leaf"></span><span class="leaf"></span><span class="leaf"></span>289 Travel Sustainable290 </div>291 292 <div class="bullets">Hotel room: Beds: 1 double or 2 twins</div>293 294 <div class="price-line" style="margin-top: 20px;">Price for 4 nights, 2 adults</div>295 <div class="price-line">296 <span class="price-large">€ 411</span>297 </div>298 <div class="fees">+€ 21 taxes and fees</div>299 </div>300 </div>301 </div>302 303 <!-- Bottom sheet -->304 <div class="bottom-sheet">305 <div class="drag-handle"></div>306 <div class="sheet-title">Save to...</div>307 <div class="new-list">308 <div class="plus-tile">309 <svg class="plus" viewBox="0 0 24 24">310 <path d="M12 5 V19 M5 12 H19" stroke="#2f6bed" stroke-width="2.6" stroke-linecap="round"/>311 </svg>312 </div>313 <div class="new-list-text">New list</div>314 </div>315 </div>316 317</div>318</body>319</html>