GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Choose Your Stay - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F4F6FA;13 box-shadow: 0 0 0 1px rgba(0,0,0,0.08);14 }15 16 /* Top bars */17 .header {18 position: relative;19 background: #1E4E9A;20 color: #fff;21 width: 100%;22 height: 220px;23 }24 .status-bar {25 height: 90px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-size: 32px;31 opacity: 0.95;32 }33 .status-icons { display: flex; gap: 22px; align-items: center; }34 .app-bar {35 height: 130px;36 padding: 0 36px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 }41 .title-wrap { display: flex; align-items: flex-start; gap: 24px; }42 .app-title {43 font-size: 48px;44 font-weight: 700;45 line-height: 1.1;46 }47 .subtitle { font-size: 32px; opacity: 0.9; margin-top: 6px; }48 49 /* Content area */50 .content {51 position: absolute;52 top: 220px;53 left: 0;54 right: 0;55 bottom: 0;56 padding: 24px 24px 220px;57 overflow-y: auto;58 }59 60 .card {61 background: #fff;62 border-radius: 14px;63 box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.06);64 border: 1px solid #DFE3EA;65 padding: 32px;66 margin-bottom: 28px;67 }68 .card-header {69 display: flex;70 align-items: center;71 justify-content: space-between;72 }73 .card-title {74 font-size: 44px;75 font-weight: 700;76 color: #2D4E87;77 }78 .info-icon {79 width: 60px; height: 60px;80 border-radius: 50%;81 border: 2px solid #B7C5E5;82 display: flex; align-items: center; justify-content: center;83 color: #2D4E87;84 font-weight: 700;85 }86 .row { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: #1F2533; }87 .muted { color: #6B778C; }88 .bed { display: inline-flex; align-items: center; gap: 10px; color: #1F2533; }89 .tiny { font-size: 28px; }90 .ftsup { font-size: 24px; vertical-align: super; }91 .green {92 color: #138A2E;93 margin-top: 16px;94 }95 .check {96 width: 30px; height: 30px; border-radius: 50%; background: #17A24A;97 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;98 }99 .feature-row { display: flex; flex-wrap: wrap; gap: 26px; color: #2E3642; margin-top: 18px; }100 .feature { display: inline-flex; align-items: center; gap: 10px; color: #3A4353; }101 .feature svg { width: 30px; height: 30px; }102 .tip {103 margin-top: 20px;104 color: #2E3642;105 font-size: 30px;106 }107 .orange-dot {108 display: inline-block;109 width: 18px; height: 18px; border-radius: 50%; background: #F5A623;110 margin-right: 10px;111 }112 .notice { margin-top: 16px; font-size: 30px; color: #3B4253; }113 .genius {114 margin-top: 22px;115 background: #FFF8E6;116 border: 1px solid #F0D58A;117 border-radius: 12px;118 padding: 20px 22px;119 color: #3B3E44;120 font-size: 30px;121 }122 .genius .yellow-check {123 width: 30px; height: 30px; border-radius: 50%;124 background: #FFCC33; color: #fff; display: inline-flex; align-items: center; justify-content: center;125 margin-right: 10px; font-weight: 700;126 }127 .chip-row { display: flex; gap: 16px; margin: 22px 0 8px; }128 .chip {129 background: #1A8E3E;130 color: #fff;131 padding: 12px 16px;132 border-radius: 8px;133 font-size: 28px;134 font-weight: 700;135 }136 .chip.secondary { background: #2E7D32; }137 .price-block { margin-top: 8px; }138 .price-title { font-size: 34px; color: #2E3642; margin-bottom: 6px; }139 .strike {140 text-decoration: line-through;141 color: #D16666;142 font-size: 40px;143 margin-right: 16px;144 }145 .final-price {146 font-size: 56px;147 font-weight: 800;148 color: #0E1F3E;149 }150 .info-mini {151 display: inline-flex; width: 40px; height: 40px; border-radius: 50%;152 border: 2px solid #B7C5E5; color: #2D4E87; align-items: center; justify-content: center; margin-left: 10px; font-weight: 700;153 }154 .tax-note { color: #6B778C; font-size: 30px; margin-top: 8px; }155 156 .select-bar {157 margin-top: 26px;158 border: 2px solid #BFD0E6;159 border-radius: 12px;160 display: flex;161 align-items: center;162 justify-content: space-between;163 height: 110px;164 overflow: hidden;165 }166 .select-left {167 padding: 0 26px;168 font-size: 38px;169 color: #1E3A64;170 font-weight: 700;171 display: flex; align-items: center; gap: 18px;172 }173 .select-left .arrow {174 width: 26px; height: 26px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #2D4E87; transform: rotate(0deg);175 }176 .select-right {177 width: 130px; background: #EAF2FF; border-left: 2px solid #BFD0E6;178 display: flex; align-items: center; justify-content: center;179 }180 .select-right .x {181 width: 40px; height: 40px; position: relative;182 }183 .select-right .x:before, .select-right .x:after {184 content: ""; position: absolute; left: 19px; top: 6px; width: 4px; height: 28px; background: #2D4E87;185 transform: rotate(45deg);186 }187 .select-right .x:after { transform: rotate(-45deg); }188 189 .mini-card-title { font-size: 44px; font-weight: 700; color: #2D4E87; }190 .divider { height: 14px; }191 192 /* Bottom action bar */193 .bottom-bar {194 position: absolute;195 bottom: 0;196 left: 0; right: 0;197 height: 180px;198 background: #FFFFFF;199 border-top: 1px solid #DFE3EA;200 display: flex;201 align-items: center;202 justify-content: space-between;203 padding: 0 36px;204 }205 .summary {206 font-size: 40px;207 font-weight: 800;208 color: #0E1F3E;209 }210 .summary small { display: block; font-weight: 500; font-size: 28px; color: #6B778C; }211 212 .reserve-btn {213 width: 420px; height: 110px; background: #2D67C7; color: #fff;214 border-radius: 12px; display: flex; align-items: center; justify-content: center;215 font-size: 44px; font-weight: 800;216 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.15);217 }218 219 .tooltip {220 position: absolute;221 bottom: 160px;222 right: 420px;223 background: #FFC845;224 color: #2E2E2E;225 padding: 16px 26px;226 border-radius: 28px;227 font-size: 32px;228 font-weight: 700;229 box-shadow: 0 4px 10px rgba(0,0,0,0.12);230 }231 .tooltip:after {232 content: "";233 position: absolute;234 bottom: -18px;235 left: 50%;236 transform: translateX(-50%);237 border-left: 18px solid transparent;238 border-right: 18px solid transparent;239 border-top: 18px solid #FFC845;240 }241 242 /* Simple icons */243 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }244 .back svg, .share svg { fill: none; stroke: #fff; stroke-width: 8; }245 .small-icon { width: 36px; height: 36px; }246</style>247</head>248<body>249<div id="render-target">250 <div class="header">251 <div class="status-bar">252 <div>9:06</div>253 <div class="status-icons">254 <div style="width:28px;height:28px;border-radius:50%;background:#fff;opacity:0.85;"></div>255 <div style="width:28px;height:28px;border-radius:50%;background:#fff;opacity:0.85;"></div>256 <div style="width:28px;height:28px;border-radius:50%;background:#fff;opacity:0.85;"></div>257 </div>258 </div>259 <div class="app-bar">260 <div class="title-wrap">261 <div class="icon-btn back">262 <svg viewBox="0 0 48 48">263 <path d="M30 8 L14 24 L30 40" />264 </svg>265 </div>266 <div>267 <div class="app-title">Choose Your Stay</div>268 <div class="subtitle">Oct 18 - Oct 22</div>269 </div>270 </div>271 <div class="icon-btn share">272 <svg viewBox="0 0 48 48">273 <circle cx="12" cy="24" r="6"></circle>274 <circle cx="36" cy="10" r="6"></circle>275 <circle cx="36" cy="38" r="6"></circle>276 <path d="M18 24 L30 14 M18 24 L30 34"></path>277 </svg>278 </div>279 </div>280 </div>281 282 <div class="content">283 <!-- Main Room Card -->284 <div class="card">285 <div class="card-header">286 <div class="card-title">Twin Room with Courtyard View</div>287 <div class="info-icon">i</div>288 </div>289 <div class="row tiny">Price for: 290 <svg class="small-icon" viewBox="0 0 48 48">291 <circle cx="16" cy="16" r="8" fill="#6B86B8"></circle>292 <circle cx="32" cy="16" r="8" fill="#6B86B8"></circle>293 </svg>294 </div>295 296 <div class="row bed">297 <svg class="small-icon" viewBox="0 0 60 40">298 <rect x="6" y="18" width="48" height="12" fill="#778FBF"></rect>299 <rect x="6" y="10" width="18" height="8" fill="#B7C5E5"></rect>300 <rect x="36" y="10" width="18" height="8" fill="#B7C5E5"></rect>301 </svg>302 <span>2 twin beds</span>303 </div>304 305 <div class="row tiny muted">Size: 215 ft<span class="ftsup">2</span></div>306 307 <div class="row green"><span class="check">✓</span> Free cancellation before October 17</div>308 <div class="row green"><span class="check">✓</span> No prepayment needed – pay at the property</div>309 <div class="row">310 <svg class="small-icon" viewBox="0 0 48 48">311 <rect x="8" y="26" width="28" height="10" fill="#8B6427"></rect>312 <path d="M12 26 C12 20, 32 20, 32 26" stroke="#8B6427" stroke-width="3" fill="none"></path>313 </svg>314 <span>Breakfast available, pay at the property (€ 16)</span>315 </div>316 317 <div class="feature-row">318 <div class="feature">319 <svg viewBox="0 0 48 48">320 <path d="M10 30 C18 18, 30 18, 38 30" stroke="#586A8A" stroke-width="3" fill="none"></path>321 <circle cx="24" cy="20" r="3" fill="#586A8A"></circle>322 </svg>323 <span>Free WiFi</span>324 </div>325 <div class="feature">326 <svg viewBox="0 0 48 48">327 <rect x="6" y="10" width="36" height="24" stroke="#586A8A" stroke-width="3" fill="none"></rect>328 <rect x="12" y="16" width="24" height="12" fill="#A9B9D8"></rect>329 </svg>330 <span>Garden view</span>331 </div>332 <div class="feature">333 <svg viewBox="0 0 48 48">334 <rect x="6" y="10" width="36" height="24" stroke="#586A8A" stroke-width="3" fill="none"></rect>335 <circle cx="24" cy="22" r="6" fill="#A9B9D8"></circle>336 </svg>337 <span>Inner courtyard view</span>338 </div>339 <div class="feature">340 <svg viewBox="0 0 48 48">341 <rect x="6" y="12" width="36" height="12" fill="#B7C5E5"></rect>342 <rect x="10" y="26" width="28" height="8" fill="#586A8A"></rect>343 </svg>344 <span>Air conditioning</span>345 </div>346 <div class="feature">347 <svg viewBox="0 0 48 48">348 <rect x="8" y="14" width="32" height="20" stroke="#586A8A" stroke-width="3" fill="none"></rect>349 <rect x="12" y="18" width="12" height="12" fill="#A9B9D8"></rect>350 <rect x="26" y="18" width="12" height="12" fill="#A9B9D8"></rect>351 </svg>352 <span>Attached bathroom</span>353 </div>354 <div class="feature">355 <svg viewBox="0 0 48 48">356 <rect x="6" y="18" width="36" height="14" fill="#586A8A"></rect>357 </svg>358 <span>Flat-screen TV</span>359 </div>360 <div class="feature">361 <svg viewBox="0 0 48 48">362 <rect x="16" y="20" width="20" height="10" fill="#8B6427"></rect>363 <rect x="22" y="14" width="8" height="6" fill="#8B6427"></rect>364 </svg>365 <span>Coffee machine</span>366 </div>367 </div>368 369 <div class="tip"><span class="orange-dot"></span>Tip: This room is bigger than most in Berlin</div>370 371 <div class="notice">Only 5 rooms left on Booking.com</div>372 373 <div class="genius">374 <span class="yellow-check">✓</span> 10% Genius discount375 <div class="muted" style="margin-top:10px;">Applied to the price before taxes and fees</div>376 </div>377 378 <div class="chip-row">379 <span class="chip">19% off</span>380 <span class="chip secondary">Mobile-only price</span>381 </div>382 383 <div class="price-block">384 <div class="price-title">Price for 4 nights</div>385 <div>386 <span class="strike">€ 716</span>387 <span class="final-price">€ 580</span>388 <span class="info-mini">i</span>389 </div>390 <div class="tax-note">+ € 29 taxes and charges</div>391 </div>392 393 <div class="select-bar">394 <div class="select-left">395 <span>1 room selected</span>396 <div class="arrow"></div>397 </div>398 <div class="select-right"><div class="x"></div></div>399 </div>400 </div>401 402 <!-- Second card preview -->403 <div class="card" style="padding-bottom: 24px;">404 <div class="card-header">405 <div class="mini-card-title">Twin Room with Courtyard View</div>406 <div class="info-icon">i</div>407 </div>408 <div class="row tiny">Price for:409 <svg class="small-icon" viewBox="0 0 48 48">410 <circle cx="16" cy="16" r="8" fill="#6B86B8"></circle>411 </svg>412 </div>413 <div class="row bed">414 <svg class="small-icon" viewBox="0 0 60 40">415 <rect x="6" y="18" width="48" height="12" fill="#778FBF"></rect>416 <rect x="6" y="10" width="18" height="8" fill="#B7C5E5"></rect>417 <rect x="36" y="10" width="18" height="8" fill="#B7C5E5"></rect>418 </svg>419 <span>2 twin beds</span>420 </div>421 <div class="divider"></div>422 </div>423 </div>424 425 <div class="tooltip">It only takes 2 minutes</div>426 427 <div class="bottom-bar">428 <div>429 <div class="summary">€ 580 · 1 room</div>430 <small>+ € 29 taxes and charges</small>431 </div>432 <div class="reserve-btn">Reserve</div>433 </div>434</div>435</body>436</html>