GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Booking Detail UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0b1218; /* overall device background */12    color: #fff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0; left: 0; right: 0;19    height: 90px;20    padding: 0 40px;21    display: flex; align-items: center; justify-content: space-between;22    z-index: 5;23    color: #e6e6e6;24    font-weight: 600;25    font-size: 36px;26    pointer-events: none;27  }28  .status-right { display: flex; gap: 28px; align-items: center; }29  .status-icon { width: 32px; height: 32px; border-radius: 6px; background: #1e2830; opacity: .8; }30  /* simple wifi/battery icons */31  svg.icon { width: 42px; height: 42px; fill: none; stroke: #e6e6e6; stroke-width: 4px; }32 33  /* Hero image */34  .hero {35    position: absolute; top: 60px; left: 0;36    width: 1080px; height: 780px;37    border-bottom-left-radius: 0; border-bottom-right-radius: 0;38    overflow: hidden;39  }40  .hero .img {41    width: 100%; height: 100%;42    background: #E0E0E0;43    border: 1px solid #BDBDBD;44    display: flex; align-items: center; justify-content: center;45    color: #757575; font-size: 34px; font-weight: 600;46  }47  /* Top overlay controls on image */48  .top-controls {49    position: absolute; top: 110px; left: 30px; right: 30px;50    display: flex; justify-content: space-between; align-items: center;51    z-index: 6;52  }53  .circle-btn {54    width: 84px; height: 84px; border-radius: 42px;55    background: rgba(14,24,33,0.65);56    display: flex; align-items: center; justify-content: center;57    backdrop-filter: blur(2px);58    border: 1px solid rgba(255,255,255,0.3);59  }60  .right-actions { display: flex; gap: 22px; }61  .top-controls svg { stroke: #fff; fill: none; stroke-width: 4px; }62 63  /* Carousel dots & count */64  .carousel {65    position: absolute; bottom: 40px; left: 0; right: 0;66    display: flex; align-items: center; justify-content: center;67    gap: 16px;68  }69  .dot { width: 18px; height: 18px; background: rgba(255,255,255,0.8); border-radius: 50%; }70  .dot.dim { opacity: .4; }71  .count {72    position: absolute; right: 32px; bottom: 30px;73    color: #fff; font-size: 34px; letter-spacing: 1px;74  }75 76  /* Content section after image */77  .content {78    position: absolute; top: 840px; left: 0;79    width: 100%; height: 1560px;80    background: #0d171f;81    border-top-left-radius: 28px; border-top-right-radius: 28px;82    padding: 40px;83  }84 85  .title-row { display: flex; align-items: center; gap: 18px; }86  .title { font-size: 64px; font-weight: 800; }87  .star {88    width: 34px; height: 34px; background: #ff5a4f; border-radius: 8px;89    display: inline-block;90  }91 92  .subline {93    margin-top: 18px; color: #9bd6e2; font-size: 30px; font-weight: 600;94    display: flex; align-items: center; gap: 18px;95  }96  .pill-pencil {97    width: 34px; height: 34px; border-radius: 10px; background: #1b2b34;98    display: inline-flex; align-items: center; justify-content: center;99  }100  .pill-pencil svg { width: 26px; height: 26px; stroke: #9bd6e2; }101 102  .rating-row {103    margin-top: 40px; display: flex; align-items: center; gap: 26px;104    font-size: 42px; font-weight: 700;105  }106  .trip-row { display: flex; align-items: center; gap: 12px; }107  .trip-dot {108    width: 22px; height: 22px; border-radius: 50%; background: #4fd087;109  }110  .green { color: #4fd087; font-size: 42px; }111  .chevron {112    margin-left: auto; width: 38px; height: 38px; border: 2px solid #44525c;113    border-radius: 10px; display: flex; align-items: center; justify-content: center;114  }115  .chevron svg { stroke: #8ba2b2; width: 28px; height: 28px; }116 117  .location-pill {118    margin-top: 34px; display: inline-flex; align-items: center; gap: 16px;119    background: #14323a; color: #aee7f2;120    padding: 18px 26px; border-radius: 16px; font-size: 32px; font-weight: 700;121  }122  .thumb { width: 34px; height: 34px; background: #4fd087; border-radius: 8px; }123 124  .address {125    margin-top: 36px; display: flex; align-items: center; justify-content: space-between;126    color: #cbd4da; font-size: 32px; border-bottom: 1px solid #23313a; padding-bottom: 28px;127  }128  .address .left { display: flex; align-items: center; gap: 20px; max-width: 820px; }129  .map-pin {130    width: 34px; height: 34px; border-radius: 8px; background: #2f3f49;131    display: inline-flex; align-items: center; justify-content: center;132  }133  .map-pin svg { stroke: #9bb3c3; width: 26px; height: 26px; }134  .address .right svg { stroke: #9bb3c3; width: 30px; height: 30px; }135 136  .section-title {137    margin-top: 50px;138    color: #dde3e7; font-size: 42px; font-weight: 800;139  }140 141  .deal-card {142    margin-top: 32px;143    background: #0b1b22; border: 1px solid #1f313b;144    border-radius: 24px; padding: 40px;145    display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px;146  }147 148  .logo-box {149    width: 300px; height: 170px;150    background: #E0E0E0; border: 1px solid #BDBDBD;151    color: #757575; display: flex; align-items: center; justify-content: center;152    font-size: 44px; font-weight: 700; border-radius: 20px;153  }154 155  .deal-right { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }156  .save-row { display: flex; gap: 20px; align-items: center; }157  .pill {158    background: #1c313a; color: #bfeaf3; padding: 18px 26px; border-radius: 18px;159    font-size: 32px; font-weight: 700;160  }161  .pill.green { background: #153a2b; color: #78e1a9; }162 163  .price-row { display: flex; align-items: baseline; gap: 26px; margin-top: 10px; }164  .old-price { color: #96a1a9; font-size: 42px; text-decoration: line-through; }165  .new-price { color: #ffffff; font-size: 86px; font-weight: 800; }166 167  .fine-print { color: #98a6af; font-size: 34px; }168  .free { color: #cfe9ff; font-size: 36px; font-weight: 700; }169 170  .cta {171    margin-top: 28px; width: 100%;172    display: flex; justify-content: center;173  }174  .cta button {175    width: 940px; height: 112px; border-radius: 22px;176    background: #2f8c8d; color: #fff; font-size: 44px; font-weight: 800;177    border: none; letter-spacing: 1px; box-shadow: 0 8px 20px rgba(0,0,0,0.35);178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">3:17</div>187    <div class="status-right">188      <div class="status-icon"></div>189      <div class="status-icon"></div>190      <svg class="icon" viewBox="0 0 24 24"><path d="M2 16c3-4 7-6 10-6s7 2 10 6"/><path d="M8 16c2-2 4-3 6-3s4 1 6 3"/><circle cx="18" cy="16" r="1.5" /></svg>191      <svg class="icon" viewBox="0 0 24 24"><path d="M2 9h18l2 5-2 5H2z"/><path d="M4 12h14" /></svg>192    </div>193  </div>194 195  <!-- Hero Image -->196  <div class="hero">197    <div class="img">[IMG: Senso-ji Temple Night Shot]</div>198 199    <!-- Overlay controls -->200    <div class="top-controls">201      <div class="circle-btn">202        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>203      </div>204      <div class="right-actions">205        <div class="circle-btn">206          <svg viewBox="0 0 24 24"><path d="M12 21l-7-7a5 5 0 117-7 5 5 0 117 7l-7 7z"/></svg>207        </div>208        <div class="circle-btn">209          <svg viewBox="0 0 24 24"><path d="M18 8l4 4-4 4"/><path d="M2 12h20"/></svg>210        </div>211      </div>212    </div>213 214    <!-- Carousel dots -->215    <div class="carousel">216      <div class="dot"></div>217      <div class="dot dim"></div>218      <div class="dot dim"></div>219      <div class="dot dim"></div>220      <div class="dot dim"></div>221    </div>222    <div class="count">1/99</div>223  </div>224 225  <!-- Content Area -->226  <div class="content">227 228    <div class="title-row">229      <div class="title">Obi Hostel</div>230      <div class="star"></div>231    </div>232 233    <div class="subline">234      AUG 5 – 10, 2023, 1 ADULT, 1 ROOM235      <span class="pill-pencil">236        <svg viewBox="0 0 24 24"><path d="M4 20l4-1 9-9-3-3-9 9-1 4z"/><path d="M14 4l3 3"/></svg>237      </span>238    </div>239 240    <div class="rating-row">241      <div>4.5</div>242      <div class="trip-row">243        <div class="trip-dot"></div>244        <div class="trip-dot"></div>245        <div class="trip-dot"></div>246        <div class="trip-dot"></div>247        <div class="trip-dot"></div>248      </div>249      <div class="green">(32)</div>250      <div class="chevron">251        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>252      </div>253    </div>254 255    <div class="location-pill">256      <div class="thumb"></div>257      Location 4.5/5258    </div>259 260    <div class="address">261      <div class="left">262        <div class="map-pin">263          <svg viewBox="0 0 24 24"><path d="M12 21s-7-7-7-11a7 7 0 1114 0c0 4-7 11-7 11z"/><circle cx="12" cy="10" r="3"/></svg>264        </div>265        <div>Chuo-ku Nihonbashi Yokoyamacho 3–14, Chuo, 103...</div>266      </div>267      <div class="right">268        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>269      </div>270    </div>271 272    <div class="section-title">Lowest price for 1 night</div>273 274    <div class="deal-card">275      <div class="logo-box">[IMG: Agoda Logo]</div>276 277      <div class="deal-right">278        <div class="save-row">279          <div class="pill">Great saving</div>280          <div class="pill green">Save 31%</div>281        </div>282 283        <div class="price-row">284          <div class="old-price">$31</div>285          <div class="new-price">$21</div>286          <div style="color:#98a6af; font-size:36px;">a night</div>287        </div>288 289        <div class="fine-print">Taxes and fees not included.</div>290        <div class="free">Free cancellation</div>291 292        <div class="cta">293          <button>GO TO SITE</button>294        </div>295      </div>296    </div>297 298  </div>299 300</div>301</body>302</html>