GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Booking UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;14  }15 16  /* Top app bar / status */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 180px;23    background: #2F6FCF;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-left, .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .status-row {36    width: 100%;37    display: flex;38    justify-content: space-between;39    align-items: center;40  }41  .status-time { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }42 43  .icon {44    width: 42px; height: 42px; display: inline-block;45  }46  .status-right .battery { font-size: 36px; margin-left: 6px; }47 48  /* Promo + price area */49  .promo-area {50    position: absolute;51    top: 180px;52    left: 0;53    width: 1080px;54    padding: 24px 36px;55    box-sizing: border-box;56    border-bottom: 1px solid #E0E0E0;57    display: flex;58    align-items: flex-start;59    justify-content: space-between;60  }61  .pills {62    display: flex;63    gap: 20px;64  }65  .pill {66    display: inline-flex;67    align-items: center;68    gap: 16px;69    padding: 14px 22px;70    background: #E53935;71    color: #fff;72    border-radius: 12px;73    font-weight: 700;74    font-size: 34px;75  }76  .price-block {77    text-align: right;78  }79  .price {80    font-size: 46px;81    font-weight: 700;82  }83  .subtext {84    font-size: 30px; color: #757575;85  }86 87  /* Content sections */88  .content { position: absolute; top: 300px; left: 0; width: 100%; }89  .section { padding: 36px; box-sizing: border-box; }90  .title { font-size: 38px; color: #666; margin-bottom: 24px; }91 92  .pref-title {93    font-size: 42px;94    font-weight: 700;95    color: #555;96    margin: 10px 0 28px;97  }98 99  .option {100    display: flex; align-items: center; gap: 24px; margin: 28px 0;101    font-size: 38px; color: #444;102  }103  .radio {104    width: 64px; height: 64px; border-radius: 50%; border: 3px solid #BDBDBD; position: relative; box-sizing: border-box;105  }106  .radio.selected { border-color: #3D8BFF; }107  .radio.selected::after {108    content: ""; position: absolute; top: 50%; left: 50%;109    width: 34px; height: 34px; background: #FFFFFF; border: 8px solid #3D8BFF; border-radius: 50%;110    transform: translate(-50%, -50%);111  }112 113  .icon-smoke { width: 60px; height: 36px; }114  .icon-nosmoke { width: 60px; height: 60px; }115 116  .requests-row {117    margin-top: 24px;118    padding: 34px 36px;119    background: #F7F7F7;120    border-top: 1px solid #E0E0E0;121    border-bottom: 1px solid #E0E0E0;122    display: flex; align-items: center; justify-content: space-between;123    font-size: 36px; color: #666;124  }125 126  .secure-row {127    display: flex; align-items: center; gap: 22px;128    font-size: 40px; font-weight: 700; color: #3D8BFF;129    padding: 32px 36px; border-top: 1px solid #E0E0E0;130  }131  .info-circle {132    width: 36px; height: 36px; border: 2px solid #8AB4F8; border-radius: 50%; color: #8AB4F8; font-size: 26px; display: inline-flex; align-items: center; justify-content: center;133  }134 135  .notice {136    margin: 18px 36px;137    background: #DFF3D8;138    color: #2E7D32;139    padding: 28px 30px;140    border-radius: 8px;141    font-size: 36px;142    position: relative;143  }144  .notice .notch {145    position: absolute; left: 140px; bottom: -16px;146    width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid #DFF3D8;147  }148 149  .row-between { display: flex; align-items: center; justify-content: space-between; padding: 24px 36px; font-size: 36px; color: #444; }150 151  .logos { display: flex; gap: 26px; padding: 10px 36px 30px; }152  .img-ph {153    width: 160px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD;154    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;155    border-radius: 8px;156  }157 158  .input {159    margin: 20px 36px 24px;160    font-size: 42px; color: #9E9E9E;161    padding-bottom: 18px;162    border-bottom: 3px solid #CFCFCF;163  }164 165  .consent {166    margin-top: 24px;167    background: #F0F0F0;168    padding: 40px 36px;169    color: #666;170    font-size: 36px;171    border-top: 1px solid #E0E0E0;172    border-bottom: 1px solid #E0E0E0;173  }174  .consent .row { display: flex; align-items: flex-start; gap: 20px; }175  .checkbox {176    width: 56px; height: 56px; border-radius: 50%; border: 3px solid #3D8BFF; position: relative; margin-top: 6px;177  }178  .checkbox::after {179    content: ""; position: absolute; width: 22px; height: 22px; background: #3D8BFF; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);180  }181  .links { margin-top: 28px; color: #666; }182  .links a { color: #2E7D32; text-decoration: underline; }183 184  .slider-wrap {185    position: absolute; left: 0; bottom: 120px; width: 100%;186    padding: 24px 36px; box-sizing: border-box;187  }188  .slider {189    width: 100%;190    background: #1E88E5;191    color: #CFE4FF;192    height: 140px;193    border-radius: 16px;194    display: flex; align-items: center; gap: 26px; padding: 0 26px; box-sizing: border-box;195  }196  .slider .thumb {197    width: 110px; height: 110px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center;198  }199  .slider .label { font-size: 48px; font-weight: 600; letter-spacing: 0.5px; }200 201  .gesture {202    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);203    width: 260px; height: 14px; background: #C7C7C7; border-radius: 10px;204  }205 206  /* Simple chevron */207  .chev {208    width: 28px; height: 28px;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div class="status-row">218      <div class="status-left">219        <div class="status-time">11:04</div>220        <!-- simple icons -->221        <svg class="icon" viewBox="0 0 24 24">222          <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>223          <line x1="12" y1="12" x2="17" y2="12" stroke="#fff" stroke-width="2"></line>224          <line x1="12" y1="12" x2="12" y2="7" stroke="#fff" stroke-width="2"></line>225        </svg>226        <svg class="icon" viewBox="0 0 24 24">227          <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>228          <circle cx="8" cy="12" r="2" fill="#fff"></circle>229          <circle cx="16" cy="12" r="2" fill="#fff"></circle>230        </svg>231        <svg class="icon" viewBox="0 0 24 24">232          <path d="M4 10h16M4 14h16" stroke="#fff" stroke-width="2" fill="none"></path>233        </svg>234        <svg class="icon" viewBox="0 0 24 24">235          <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2" opacity="0.8"></circle>236        </svg>237        <svg class="icon" viewBox="0 0 24 24">238          <circle cx="12" cy="12" r="2" fill="#fff"></circle>239        </svg>240      </div>241      <div class="status-right">242        <svg class="icon" viewBox="0 0 24 24">243          <path d="M2 18l20-12-8 12-4-3-8 3z" fill="#fff" opacity="0.9"></path>244        </svg>245        <svg class="icon" viewBox="0 0 24 24">246          <rect x="3" y="4" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>247          <rect x="21" y="7" width="1.8" height="5.5" fill="#fff"></rect>248        </svg>249        <div class="battery">100%</div>250      </div>251    </div>252  </div>253 254  <!-- Promo and price -->255  <div class="promo-area">256    <div class="pills">257      <div class="pill">258        <svg class="icon" viewBox="0 0 24 24">259          <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>260          <line x1="12" y1="12" x2="18" y2="12" stroke="#fff" stroke-width="2"></line>261          <line x1="12" y1="12" x2="12" y2="8" stroke="#fff" stroke-width="2"></line>262        </svg>263        <span>00:19:49</span>264      </div>265      <div class="pill">-41% TODAY</div>266    </div>267    <div class="price-block">268      <div class="price">₹ 36,492.89</div>269      <div class="subtext">with taxes & fees</div>270    </div>271  </div>272 273  <!-- Main content -->274  <div class="content">275 276    <div class="section">277      <div class="title">Total price</div>278 279      <div class="pref-title">Do you have a smoking preference?</div>280 281      <div class="option">282        <div class="radio selected"></div>283        <svg class="icon-nosmoke" viewBox="0 0 24 24">284          <circle cx="12" cy="12" r="10" stroke="#757575" stroke-width="2" fill="none"></circle>285          <line x1="6" y1="18" x2="18" y2="6" stroke="#757575" stroke-width="2"></line>286        </svg>287        <div>Non-smoking room</div>288      </div>289 290      <div class="option">291        <div class="radio"></div>292        <svg class="icon-smoke" viewBox="0 0 24 24">293          <rect x="3" y="12" width="14" height="3" fill="#757575"></rect>294          <path d="M19 12c2 0 2 3 0 3" stroke="#757575" stroke-width="2" fill="none"></path>295          <path d="M21 11c2 0 2 4 0 4" stroke="#757575" stroke-width="2" fill="none"></path>296        </svg>297        <div>Smoking room</div>298      </div>299    </div>300 301    <div class="requests-row">302      <div>Tap here for other requests</div>303      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>304    </div>305 306    <div class="secure-row">307      <svg class="icon" viewBox="0 0 24 24">308        <rect x="6" y="10" width="12" height="10" rx="2" ry="2" fill="none" stroke="#3D8BFF" stroke-width="2"></rect>309        <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#3D8BFF" stroke-width="2" fill="none"></path>310      </svg>311      <div>Secure payment <span class="info-circle">i</span></div>312    </div>313 314    <div class="notice">315      Payment will be made directly to the property. <span class="info-circle" style="margin-left:8px">i</span>316      <span class="notch"></span>317    </div>318 319    <div class="row-between">320      <div>Enter credit/debit card details</div>321      <div style="color:#3D8BFF;">Change payment</div>322    </div>323 324    <div class="section" style="padding-top:0;">325      <div style="font-size:34px; color:#757575; margin-bottom:16px;">We accept:</div>326      <div class="logos">327        <div class="img-ph">[IMG: VISA logo]</div>328        <div class="img-ph">[IMG: Mastercard logo]</div>329        <div class="img-ph">[IMG: American Express logo]</div>330      </div>331    </div>332 333    <div class="input">Card number</div>334 335    <div class="consent">336      <div class="row">337        <div class="checkbox"></div>338        <div>Email me exclusive Agoda promotions. I can opt out later as stated in the Privacy Policy.</div>339      </div>340      <div class="links">By proceeding, I agree to Agoda’s <a href="#">terms of use</a> and acknowledge their <a href="#">privacy policy</a>.</div>341    </div>342 343  </div>344 345  <!-- Slider to book -->346  <div class="slider-wrap">347    <div class="slider">348      <div class="thumb">349        <svg width="54" height="54" viewBox="0 0 24 24">350          <path d="M8 5l8 7-8 7" stroke="#1E88E5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>351        </svg>352      </div>353      <div class="label">Slide to book</div>354    </div>355  </div>356 357  <div class="gesture"></div>358</div>359</body>360</html>