GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Obi Hostel - UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0f1217; /* app dark background */13    color: #e7edf4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    box-sizing: border-box;28    color: #cfd8e3;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon {38    width: 40px;39    height: 40px;40    fill: none;41    stroke: #cfd8e3;42    stroke-width: 4;43  }44 45  /* Header */46  .header {47    position: absolute;48    top: 96px;49    left: 0;50    width: 1080px;51    height: 120px;52    display: flex;53    align-items: center;54    padding: 0 32px;55    box-sizing: border-box;56    border-bottom: 1px solid rgba(255,255,255,0.05);57  }58  .header .title {59    flex: 1;60    text-align: center;61    font-weight: 700;62    font-size: 44px;63    color: #eaf2fb;64  }65  .header .left, .header .right {66    width: 200px;67    display: flex;68    align-items: center;69    gap: 30px;70  }71  .header .left { justify-content: flex-start; }72  .header .right { justify-content: flex-end; }73  .icon-btn {74    width: 64px;75    height: 64px;76  }77  .icon-btn svg { width: 100%; height: 100%; stroke: #eaf2fb; }78 79  /* Address row */80  .address-row {81    position: absolute;82    top: 216px;83    left: 0;84    width: 1080px;85    padding: 22px 40px;86    box-sizing: border-box;87    display: flex;88    align-items: center;89    gap: 22px;90    color: #b6c5d6;91    font-size: 34px;92    border-bottom: 1px solid rgba(255,255,255,0.05);93  }94  .address-text {95    flex: 1;96    white-space: nowrap;97    overflow: hidden;98    text-overflow: ellipsis;99  }100  .chevron {101    width: 30px; height: 30px;102  }103  .chevron svg { width: 100%; height: 100%; stroke: #b6c5d6; }104 105  /* Section title */106  .section-title {107    position: absolute;108    top: 320px;109    left: 32px;110    font-size: 48px;111    font-weight: 700;112    color: #dce7f3;113  }114  .section-sub {115    font-weight: 500;116  }117 118  /* Main price card */119  .price-card {120    position: absolute;121    top: 400px;122    left: 32px;123    width: 1016px;124    background: #121720;125    border-radius: 24px;126    box-shadow: 0 6px 24px rgba(0,0,0,0.35);127    border: 1px solid rgba(255,255,255,0.06);128    padding: 40px;129    box-sizing: border-box;130  }131  .card-row {132    display: flex;133    align-items: center;134    gap: 40px;135  }136  .logo-box {137    width: 260px;138    height: 180px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    border-radius: 14px;142    display: flex;143    justify-content: center;144    align-items: center;145    color: #555;146    font-weight: 600;147  }148  .save-pill {149    background: #1b2430;150    color: #cfe3ff;151    border: 1px solid rgba(255,255,255,0.12);152    border-radius: 16px;153    padding: 12px 20px;154    font-size: 30px;155    display: inline-block;156  }157  .save-right {158    margin-left: auto;159    color: #cfe3ff;160    font-size: 34px;161  }162  .price-line {163    margin-top: 20px;164    display: flex;165    align-items: baseline;166    gap: 24px;167  }168  .price-old {169    color: #9aa8b7;170    text-decoration: line-through;171    font-size: 40px;172    font-weight: 700;173  }174  .price-now {175    color: #ffffff;176    font-size: 86px;177    font-weight: 800;178    letter-spacing: 1px;179  }180  .per-night {181    color: #9aa8b7;182    font-size: 36px;183  }184  .note {185    margin-top: 18px;186    color: #96a7bb;187    font-size: 32px;188  }189  .note strong { color: #b6e2ff; }190  .cta {191    margin-top: 32px;192    width: 100%;193    height: 110px;194    background: #2f8a87;195    border-radius: 16px;196    display: flex;197    align-items: center;198    justify-content: center;199    color: #eaffff;200    font-size: 42px;201    font-weight: 800;202    letter-spacing: 1px;203  }204 205  /* More choices */206  .more-title {207    position: absolute;208    top: 1070px;209    left: 32px;210    font-size: 40px;211    color: #d0dceb;212    display: flex;213    width: 1016px;214    justify-content: space-between;215    align-items: center;216  }217  .see-all {218    color: #74d1df;219    font-size: 38px;220    font-weight: 700;221  }222  .choice-row {223    position: absolute;224    top: 1140px;225    left: 32px;226    width: 1016px;227    display: flex;228    gap: 32px;229  }230  .choice-card {231    flex: 1;232    background: #131822;233    border: 1px solid rgba(255,255,255,0.06);234    border-radius: 18px;235    padding: 28px;236    box-sizing: border-box;237  }238  .choice-logo {239    width: 100%;240    height: 140px;241    background: #E0E0E0;242    border: 1px solid #BDBDBD;243    border-radius: 12px;244    display: flex;245    justify-content: center;246    align-items: center;247    color: #555;248    font-weight: 600;249  }250  .choice-price {251    margin-top: 24px;252    font-size: 44px;253    color: #cfe3ff;254    font-weight: 700;255  }256 257  /* Link */258  .info-link {259    position: absolute;260    top: 1400px;261    left: 32px;262    font-size: 38px;263    color: #7fd3e3;264  }265 266  /* Book on Skyscanner */267  .book-title {268    position: absolute;269    top: 1480px;270    left: 32px;271    font-size: 54px;272    font-weight: 800;273    color: #eaf2fb;274  }275 276  .listing-card {277    position: absolute;278    top: 1580px;279    left: 32px;280    width: 1016px;281    background: #121720;282    border: 1px solid rgba(255,255,255,0.06);283    border-radius: 24px;284    overflow: hidden;285    box-shadow: 0 6px 24px rgba(0,0,0,0.35);286  }287  .listing-header {288    display: flex;289    align-items: center;290    justify-content: space-between;291    padding: 32px;292    font-size: 48px;293    font-weight: 800;294    color: #dbe7f5;295  }296  .caret {297    width: 40px; height: 40px;298  }299  .from-badge {300    position: absolute;301    right: 32px;302    top: 190px;303    background: rgba(18, 23, 32, 0.7);304    border: 1px solid rgba(255,255,255,0.15);305    border-radius: 16px;306    padding: 14px 22px;307    color: #bfdcff;308    font-size: 34px;309  }310  .listing-image {311    width: 100%;312    height: 520px;313    background: #E0E0E0;314    border-top: 1px solid #BDBDBD;315    display: flex; align-items: center; justify-content: center;316    color: #555;317    font-weight: 600;318  }319</style>320</head>321<body>322<div id="render-target">323 324  <!-- Status Bar -->325  <div class="status-bar">326    <div class="time">3:18</div>327    <div class="status-right">328      <!-- WiFi -->329      <svg class="icon" viewBox="0 0 48 48">330        <path d="M6 18c9-9 27-9 36 0" />331        <path d="M12 24c6-6 18-6 24 0" />332        <path d="M18 30c3-3 9-3 12 0" />333        <circle cx="24" cy="36" r="3" fill="#cfd8e3" stroke="none"/>334      </svg>335      <!-- Battery -->336      <svg class="icon" viewBox="0 0 48 48">337        <rect x="6" y="12" width="32" height="24" rx="4"></rect>338        <rect x="40" y="18" width="4" height="12" rx="2"></rect>339        <rect x="10" y="16" width="24" height="16" rx="2" fill="#cfd8e3" stroke="none"></rect>340      </svg>341    </div>342  </div>343 344  <!-- Header -->345  <div class="header">346    <div class="left">347      <div class="icon-btn">348        <svg viewBox="0 0 48 48">349          <path d="M30 10 L14 24 L30 38" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>350        </svg>351      </div>352    </div>353    <div class="title">Obi Hostel</div>354    <div class="right">355      <!-- Heart outline -->356      <div class="icon-btn">357        <svg viewBox="0 0 48 48">358          <path d="M24 39s-12-8-16-15c-4-7 2-14 9-12 4 1 7 5 7 5s3-4 7-5c7-2 13 5 9 12-4 7-16 15-16 15z" stroke-width="3" fill="none" stroke-linejoin="round"></path>359        </svg>360      </div>361      <!-- Share icon -->362      <div class="icon-btn">363        <svg viewBox="0 0 48 48">364          <circle cx="12" cy="24" r="5"></circle>365          <circle cx="36" cy="12" r="5"></circle>366          <circle cx="36" cy="36" r="5"></circle>367          <path d="M17 22 L31 14 M17 26 L31 34" stroke-width="3" fill="none" stroke-linecap="round"></path>368        </svg>369      </div>370    </div>371  </div>372 373  <!-- Address Row -->374  <div class="address-row">375    <svg class="icon" viewBox="0 0 48 48" style="width:42px;height:42px;">376      <path d="M24 42c-10-14-14-18-14-24a14 14 0 1 1 28 0c0 6-4 10-14 24z" stroke-width="3" fill="none"></path>377      <circle cx="24" cy="18" r="5" fill="#cfd8e3" stroke="none"></circle>378    </svg>379    <div class="address-text">Chuo-ku Nihonbashi Yokoyamacho 3-14, Chuo, 103…</div>380    <div class="chevron">381      <svg viewBox="0 0 24 24">382        <path d="M8 4 L16 12 L8 20" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>383      </svg>384    </div>385  </div>386 387  <!-- Section Title -->388  <div class="section-title">389    <span>Lowest price</span> <span class="section-sub">for 1 night</span>390  </div>391 392  <!-- Price Card -->393  <div class="price-card">394    <div class="card-row">395      <div class="logo-box">[IMG: Agoda logo]</div>396      <div class="save-pill">Great saving</div>397      <div class="save-right">Save 31%</div>398    </div>399 400    <div class="price-line">401      <div class="price-old">$31</div>402      <div class="price-now">$21</div>403      <div class="per-night">a night</div>404    </div>405    <div class="note">Taxes and fees not included.</div>406    <div class="note"><strong>Free cancellation</strong></div>407 408    <div class="cta">GO TO SITE</div>409  </div>410 411  <!-- More popular choices -->412  <div class="more-title">413    <div>More popular choices</div>414    <div class="see-all">See all</div>415  </div>416 417  <div class="choice-row">418    <div class="choice-card">419      <div class="choice-logo">[IMG: Booking.com logo]</div>420      <div class="choice-price">$23</div>421    </div>422    <div class="choice-card">423      <div class="choice-logo">[IMG: Expedia logo]</div>424      <div class="choice-price">$26</div>425    </div>426    <div class="choice-card">427      <div class="choice-logo">[IMG: Hotels.com logo]</div>428      <div class="choice-price">$26</div>429    </div>430  </div>431 432  <div class="info-link">Learn more about price changes</div>433 434  <div class="book-title">Book on Skyscanner</div>435 436  <!-- Listing Card -->437  <div class="listing-card">438    <div class="listing-header">439      <div>Bed In Mix Dormitory</div>440      <div class="caret">441        <svg viewBox="0 0 24 24">442          <path d="M6 9 L12 15 L18 9" stroke="#cfe3ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>443        </svg>444      </div>445    </div>446    <div class="from-badge">From Easytrip</div>447    <div class="listing-image">[IMG: Hostel room photo]</div>448  </div>449 450</div>451</body>452</html>