GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Obi Hostel UI</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: #0f1a22;13    color: #e8edf1;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #e8edf1;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .icon-battery, .icon-wifi, .icon-cloud {38    width: 44px; height: 44px;39  }40 41  /* Header */42  .header {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    height: 140px;48    padding: 0 36px;49    box-sizing: border-box;50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .left-actions {55    display: flex;56    align-items: center;57    gap: 28px;58  }59  .back-btn {60    width: 68px; height: 68px; border-radius: 34px;61    display: flex; align-items: center; justify-content: center;62  }63  .header-title {64    font-size: 56px; font-weight: 700;65  }66  .right-actions {67    display: flex; align-items: center; gap: 34px;68  }69  .icon-btn { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }70 71  /* Tabs */72  .tabs {73    position: absolute;74    top: 230px;75    left: 0;76    width: 1080px;77    height: 90px;78    padding: 0 36px;79    box-sizing: border-box;80    display: flex;81    align-items: center;82    gap: 56px;83    font-size: 40px;84    letter-spacing: 0.4px;85  }86  .tab {87    position: relative;88    color: #a6b6bf;89  }90  .tab.active { color: #aee5ea; }91  .tab.active::after {92    content: "";93    position: absolute;94    left: 0;95    bottom: -20px;96    width: 120%;97    height: 6px;98    background: #4db1b6;99    border-radius: 3px;100  }101 102  /* Deals card */103  .deals-card {104    position: absolute;105    top: 330px;106    left: 36px;107    width: 1008px;108    background: #14232c;109    border-radius: 24px;110    padding: 28px;111    box-sizing: border-box;112  }113  .deal-row {114    display: flex;115    align-items: center;116    justify-content: space-between;117  }118  .vendor {119    width: 220px; height: 120px;120    background: #E0E0E0; border: 1px solid #BDBDBD;121    display: flex; align-items: center; justify-content: center;122    color: #757575; border-radius: 16px;123    font-size: 34px; font-weight: 600;124  }125  .price-area {126    display: flex; align-items: center; gap: 16px; font-size: 44px;127  }128  .strike { color: #7a8a94; text-decoration: line-through; font-size: 32px; margin-right: 8px; }129  .price { font-weight: 800; font-size: 64px; }130  .per-night { font-size: 36px; color: #b7c6cf; }131  .info-dot {132    width: 36px; height: 36px; border-radius: 18px; border: 2px solid #8fbfc2;133    display: inline-flex; align-items: center; justify-content: center; color: #8fbfc2; font-size: 22px; margin-left: 12px;134  }135  .select-btn {136    background: #3a9aa1;137    color: white;138    padding: 24px 32px;139    border-radius: 26px;140    font-size: 40px; font-weight: 700;141    letter-spacing: 0.3px;142  }143  .view-more {144    margin-top: 30px;145    display: flex; align-items: center; justify-content: flex-start;146    gap: 14px; color: #86d0d6; font-size: 40px; font-weight: 600;147  }148  .view-more svg { width: 32px; height: 32px; }149 150  .divider {151    position: absolute;152    left: 36px;153    top: 750px;154    width: 1008px;155    height: 1px;156    background: #26343f;157  }158 159  /* Hotel rating */160  .section-title {161    position: absolute;162    left: 36px;163    top: 800px;164    font-size: 54px; font-weight: 800;165  }166  .rating-top {167    position: absolute;168    left: 36px;169    top: 900px;170    display: flex;171    align-items: center;172    gap: 22px;173    font-size: 48px;174  }175  .green-dot {176    width: 22px; height: 22px; background: #59c69b; border-radius: 11px; display: inline-block; margin-right: 8px;177  }178  .rating-count { font-size: 42px; color: #c1ced6; }179 180  .metric {181    position: absolute;182    left: 36px;183    width: 1008px;184    height: 120px;185    display: flex;186    align-items: center;187    gap: 22px;188    font-size: 42px;189    color: #cfe0e6;190  }191  .metric .label { width: 220px; color: #cfe0e6; }192  .bar {193    flex: 1; height: 14px; background: #1f2d36; border-radius: 10px; overflow: hidden;194  }195  .bar .fill { height: 100%; background: #57b9c0; }196 197  /* Second divider */198  .divider-2 {199    position: absolute;200    left: 36px; top: 1380px; width: 1008px; height: 1px; background: #26343f;201  }202 203  /* Travelers section */204  .section-title.small {205    top: 1430px; font-size: 52px;206  }207  .big-card {208    position: absolute;209    left: 36px; top: 1500px;210    width: 1008px; background: #16252f; border-radius: 28px;211    padding: 26px; box-sizing: border-box;212  }213  .card-header {214    display: flex; align-items: center; gap: 24px;215  }216  .avatar {217    width: 72px; height: 72px; border-radius: 36px; background: #223642;218    display: flex; align-items: center; justify-content: center; color: #9db1bb; font-size: 34px;219  }220 221  .pill {222    margin-top: 20px;223    width: 100%;224    background: #192c36;225    border-radius: 28px;226    padding: 24px;227    display: flex; align-items: center; gap: 26px; box-sizing: border-box;228  }229  .city-thumb {230    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;231    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 18px; font-size: 28px;232  }233  .pill-texts { display: flex; flex-direction: column; }234  .pill-title { font-size: 46px; font-weight: 800; }235  .pill-date { font-size: 36px; color: #b8c8d1; margin-top: 8px; }236  .arrow-right { margin-left: auto; width: 40px; height: 40px; }237 238  .review {239    margin-top: 28px;240    font-size: 40px; line-height: 1.5; color: #d5e3ea;241  }242 243  /* Helper positions for rating metrics */244  .m1 { top: 980px; }245  .m2 { top: 1100px; }246  .m3 { top: 1220px; }247  .m4 { top: 1340px; }248</style>249</head>250<body>251<div id="render-target">252 253  <!-- Status bar -->254  <div class="status-bar">255    <div>3:21</div>256    <div class="status-icons">257      <!-- simple check icon -->258      <svg class="icon-cloud" viewBox="0 0 24 24">259        <path fill="#cfe0e6" d="M6 14a4 4 0 1 1 0-8c1.5-2.5 5.5-2.5 7 0a4 4 0 1 1 1 8H6z"/>260      </svg>261      <svg class="icon-wifi" viewBox="0 0 24 24">262        <path fill="#cfe0e6" d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/>263      </svg>264      <svg class="icon-battery" viewBox="0 0 24 24">265        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#cfe0e6" fill="none" stroke-width="2"/>266        <rect x="4" y="8" width="12" height="8" fill="#cfe0e6"/>267        <rect x="20" y="10" width="2" height="6" fill="#cfe0e6"/>268      </svg>269    </div>270  </div>271 272  <!-- Header -->273  <div class="header">274    <div class="left-actions">275      <div class="back-btn">276        <svg width="44" height="44" viewBox="0 0 24 24">277          <path fill="#cfe0e6" d="M15 18l-6-6 6-6v12z"/>278        </svg>279      </div>280      <div class="header-title">Obi Hostel</div>281    </div>282    <div class="right-actions">283      <div class="icon-btn">284        <svg width="44" height="44" viewBox="0 0 24 24">285          <path fill="#f46d84" d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/>286        </svg>287      </div>288      <div class="icon-btn">289        <svg width="44" height="44" viewBox="0 0 24 24">290          <path fill="#cfe0e6" d="M18 8l-1.5-1.5-6 6V14h1.5l6-6zM5 19h14v2H5z"/>291        </svg>292      </div>293    </div>294  </div>295 296  <!-- Tabs -->297  <div class="tabs">298    <div class="tab active">DEALS</div>299    <div class="tab">REVIEWS</div>300    <div class="tab">DETAILS</div>301  </div>302 303  <!-- Deals Card -->304  <div class="deals-card">305    <div class="deal-row">306      <div class="vendor">[IMG: Easytrip Logo]</div>307      <div style="flex:1"></div>308      <div class="price-area">309        <span class="strike">$28</span>310        <span class="price">$25</span>311        <span class="per-night">a night</span>312        <span class="info-dot">i</span>313      </div>314      <div class="select-btn">SELECT</div>315    </div>316    <div class="view-more">317      <div>VIEW MORE ($25)</div>318      <svg viewBox="0 0 24 24"><path fill="#86d0d6" d="M8 5l8 7-8 7V5z"/></svg>319    </div>320  </div>321 322  <div class="divider"></div>323 324  <!-- Hotel rating -->325  <div class="section-title">Hotel rating</div>326 327  <div class="rating-top">328    <div style="font-weight:800;">4.5</div>329    <div>330      <span class="green-dot"></span>331      <span class="green-dot"></span>332      <span class="green-dot"></span>333      <span class="green-dot"></span>334      <span class="green-dot" style="opacity:0.85"></span>335    </div>336    <div class="rating-count">(32)</div>337  </div>338 339  <div class="metric m1">340    <div style="width:80px; color:#cfe0e6; font-weight:700;">4.0</div>341    <div class="label">Cleanliness</div>342    <div class="bar"><div class="fill" style="width:72%;"></div></div>343  </div>344 345  <div class="metric m2">346    <div style="width:80px; color:#cfe0e6; font-weight:700;">4.5</div>347    <div class="label">Location</div>348    <div class="bar"><div class="fill" style="width:86%;"></div></div>349  </div>350 351  <div class="metric m3">352    <div style="width:80px; color:#cfe0e6; font-weight:700;">4.5</div>353    <div class="label">Service</div>354    <div class="bar"><div class="fill" style="width:86%;"></div></div>355  </div>356 357  <div class="metric m4">358    <div style="width:80px; color:#cfe0e6; font-weight:700;">4.0</div>359    <div class="label">Rooms</div>360    <div class="bar"><div class="fill" style="width:72%;"></div></div>361  </div>362 363  <div class="divider-2"></div>364 365  <!-- Travelers section -->366  <div class="section-title small">What travelers are saying</div>367 368  <div class="big-card">369    <div class="card-header">370      <div class="avatar">👤</div>371      <div style="color:#cfe0e6; font-size:40px;">Selected review</div>372    </div>373 374    <div class="pill">375      <div class="city-thumb">[IMG: Tokyo City]</div>376      <div class="pill-texts">377        <div class="pill-title">‘Tokyo’ trip created</div>378        <div class="pill-date">5 Sat - Thu, Aug 10, 23</div>379      </div>380      <svg class="arrow-right" viewBox="0 0 24 24"><path fill="#a6dbe0" d="M8 5l8 7-8 7V5z"/></svg>381    </div>382 383    <div class="review">384      <div style="font-weight:800; margin-bottom:10px;">Obi Hostel</div>385      My 3 night stay was very pleasant. Staff are friendly and place is clean and lockers in sleeping areas. The beds where joined together side by side by steel and...386    </div>387  </div>388 389  <!-- Home indicator imitation -->390  <div style="position:absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 600px; height: 16px; background:#20343f; border-radius: 8px;"></div>391 392</div>393</body>394</html>