GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Obi Hostel - Track Price Changes</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: #0c1118; /* dark app background */13    color: #e6eaef;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #e6eaef;24    font-weight: 600;25    font-size: 36px;26  }27  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }28  .icon-dot {29    width: 32px; height: 32px; border-radius: 50%; background: #e6eaef; opacity: 0.8;30  }31 32  /* Header */33  .header {34    height: 120px;35    padding: 0 36px;36    display: flex;37    align-items: center;38    justify-content: space-between;39  }40  .header-left { display: flex; align-items: center; gap: 24px; }41  .header-title { font-size: 48px; font-weight: 700; }42  .header-actions { display: flex; align-items: center; gap: 40px; }43  .icon-btn svg { width: 46px; height: 46px; fill: none; stroke: #e6eaef; stroke-width: 6px; }44 45  /* Tabs */46  .tabs {47    display: flex;48    gap: 56px;49    padding: 24px 36px 18px 36px;50    font-size: 36px;51    border-bottom: 2px solid #1b2430;52  }53  .tab {54    color: #9fb3c8;55    letter-spacing: 1px;56  }57  .tab.active {58    color: #cfe7ff;59    position: relative;60    font-weight: 700;61  }62  .tab.active::after {63    content: "";64    position: absolute;65    left: 0; right: 0; bottom: -18px;66    height: 6px; background: #2e89ff; border-radius: 4px;67  }68 69  /* Deal card */70  .deal-card {71    margin: 24px 36px;72    background: #101822;73    border-radius: 16px;74    padding: 24px;75    display: flex;76    align-items: center;77    gap: 24px;78  }79  .dealer-chip {80    width: 220px; height: 120px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center;84    color: #757575; font-weight: 700;85    border-radius: 12px;86  }87  .price-row {88    display: flex; align-items: center; gap: 18px;89    flex-wrap: wrap;90  }91  .price-row .was { color: #8393a8; text-decoration: line-through; font-size: 36px; }92  .price-row .now { color: #ffffff; font-size: 64px; font-weight: 800; }93  .price-row .per { color: #9fb3c8; font-size: 36px; }94  .info-dot {95    width: 36px; height: 36px; border-radius: 50%; background: #223042; color: #cde6f5;96    display: inline-flex; align-items: center; justify-content: center; font-size: 24px;97  }98  .select-btn {99    margin-left: auto;100    background: #2aa7a5;101    color: #062424;102    font-weight: 800;103    border: none;104    padding: 26px 40px;105    border-radius: 24px;106    font-size: 36px;107    cursor: pointer;108  }109  .view-more {110    margin: 6px 36px 0 36px;111    color: #78c2e8;112    font-size: 40px;113    font-weight: 700;114    display: flex; align-items: center; gap: 12px;115  }116 117  /* Alerts Section */118  .alerts-section {119    margin-top: 24px;120    padding: 36px;121  }122  .section-title {123    font-size: 72px; font-weight: 800;124    margin-bottom: 36px;125  }126  .illustration {127    width: 100%; height: 480px;128    background: #E0E0E0; border: 1px solid #BDBDBD;129    display: flex; align-items: center; justify-content: center;130    color: #757575; font-weight: 700; border-radius: 16px;131  }132 133  /* Form */134  .form-group { margin-top: 48px; }135  .label { color: #9fb3c8; font-size: 34px; margin-bottom: 8px; }136  .input-display {137    font-size: 56px; font-weight: 700; color: #ffffff;138    padding: 18px 0;139    border-bottom: 2px solid #203043;140    width: 100%;141  }142  .help-text { color: #9fb3c8; font-size: 34px; margin-top: 18px; }143 144  .desc-block {145    margin-top: 54px;146    color: #d1d9e2;147    font-size: 40px;148    line-height: 1.5;149  }150 151  /* Alerts row and toggle */152  .alerts-row {153    margin-top: 36px;154    display: flex; align-items: center; justify-content: space-between;155  }156  .alerts-left { display: flex; align-items: center; gap: 18px; font-size: 44px; font-weight: 700; }157  .bell-icon {158    width: 56px; height: 56px;159  }160  .switch {161    width: 180px; height: 92px; border-radius: 46px;162    background: #6dd5f4;163    padding: 10px;164    position: relative;165    box-shadow: inset 0 0 0 4px #55c0ea;166  }167  .switch .knob {168    width: 72px; height: 72px; border-radius: 50%;169    background: #0c1118;170    position: absolute; right: 10px; top: 10px;171    box-shadow: 0 4px 10px rgba(0,0,0,0.5);172  }173 174  /* CTA button */175  .cta {176    position: absolute;177    left: 36px; right: 36px;178    bottom: 160px;179  }180  .cta button {181    width: 100%;182    padding: 36px 20px;183    background: #2d66c3;184    color: #ffffff;185    font-size: 44px; font-weight: 800;186    border: none; border-radius: 22px;187    cursor: pointer;188  }189 190  /* Home indicator */191  .home-indicator {192    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);193    width: 300px; height: 12px; background: #4b5b6f; border-radius: 6px; opacity: 0.6;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status Bar -->201  <div class="status-bar">202    <div class="status-left">203      <div>3:20</div>204      <div class="icon-dot" title="Silent"></div>205      <div class="icon-dot" title="Cloud"></div>206    </div>207    <div class="status-right">208      <div class="icon-dot" title="Wi‑Fi"></div>209      <div class="icon-dot" title="Battery"></div>210    </div>211  </div>212 213  <!-- Header -->214  <div class="header">215    <div class="header-left">216      <div class="icon-btn" aria-label="Back">217        <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/></svg>218      </div>219      <div class="header-title">Obi Hostel</div>220    </div>221    <div class="header-actions">222      <div class="icon-btn" aria-label="Favorite">223        <svg viewBox="0 0 24 24"><path d="M12 20 C8 16,4 13,4 9 C4 6,6 4,8.5 4 C10 4,11 5,12 6 C13 5,14 4,15.5 4 C18 4,20 6,20 9 C20 13,16 16,12 20 Z" stroke-linejoin="round"/></svg>224      </div>225      <div class="icon-btn" aria-label="Share">226        <svg viewBox="0 0 24 24"><path d="M6 12 L14 8 M6 12 L14 16" stroke-linecap="round"/><circle cx="6" cy="12" r="2" stroke="none" fill="#e6eaef"/><circle cx="18" cy="6" r="2" stroke="none" fill="#e6eaef"/><circle cx="18" cy="18" r="2" stroke="none" fill="#e6eaef"/></svg>227      </div>228    </div>229  </div>230 231  <!-- Tabs -->232  <div class="tabs">233    <div class="tab active">DEALS</div>234    <div class="tab">REVIEWS</div>235    <div class="tab">DETAILS</div>236  </div>237 238  <!-- Deal card -->239  <div class="deal-card">240    <div class="dealer-chip">[IMG: Easytrip Logo]</div>241    <div class="price-row">242      <div class="was">$28</div>243      <div class="now">$25</div>244      <div class="per">a night</div>245      <div class="info-dot">i</div>246    </div>247    <button class="select-btn">SELECT</button>248  </div>249 250  <div class="view-more">VIEW MORE ($25) <span style="font-size:44px;">›</span></div>251 252  <!-- Alerts Section -->253  <div class="alerts-section">254    <div class="section-title">Track price changes</div>255    <div class="illustration">[IMG: Price Graph Illustration with person using phone]</div>256 257    <div class="form-group">258      <div class="label">Trip name</div>259      <div class="input-display">Tokyo</div>260      <div class="help-text">Give your trip a meaningful name</div>261    </div>262 263    <div class="desc-block">264      Want to know when the price of your Trip changes? Turn on Trip Alerts and we’ll let you know when the price goes up or down.265    </div>266 267    <div class="alerts-row">268      <div class="alerts-left">269        <svg class="bell-icon" viewBox="0 0 24 24">270          <path d="M12 20 C13.5 20 14 19 14 18 H10 C10 19 10.5 20 12 20 Z" fill="#e6eaef"/>271          <path d="M6 16 H18 L17 14 V10 C17 7 15 5 12 5 C9 5 7 7 7 10 V14 L6 16 Z" fill="none" stroke="#e6eaef" stroke-width="2"/>272        </svg>273        Trip Alerts274      </div>275      <div class="switch">276        <div class="knob"></div>277      </div>278    </div>279  </div>280 281  <!-- CTA -->282  <div class="cta">283    <button>Create with Alerts</button>284  </div>285 286  <!-- Home indicator -->287  <div class="home-indicator"></div>288 289</div>290</body>291</html>