GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>UI Recreation</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 130px;20    background: #9E9E9E;21    padding: 0 40px;22    display: flex;23    align-items: center;24    color: #fff;25    font-size: 40px;26  }27 28  /* App header */29  .app-header {30    height: 160px;31    background: #fff;32    border-bottom: 1px solid #E0E0E0;33    display: flex;34    align-items: center;35    justify-content: space-between;36    padding: 0 36px;37  }38  .header-left, .header-right {39    display: flex;40    align-items: center;41    gap: 36px;42  }43  .icon-btn {44    width: 88px;45    height: 88px;46    border-radius: 44px;47    display: flex;48    align-items: center;49    justify-content: center;50    cursor: default;51  }52  .icon {53    width: 48px;54    height: 48px;55  }56 57  /* Content */58  .content {59    position: absolute;60    left: 0;61    right: 0;62    top: 290px; /* status + header */63    bottom: 220px; /* leave space for bottom bar */64    overflow-y: auto;65    padding: 0 48px 40px;66  }67 68  .rating-row {69    display: flex;70    align-items: center;71    gap: 24px;72    margin-top: 20px;73    margin-bottom: 30px;74  }75  .rating-text {76    font-weight: 700;77    font-size: 64px;78  }79 80  .reviews-scroll {81    display: flex;82    gap: 28px;83    overflow-x: auto;84    padding-bottom: 20px;85  }86  .review-card {87    min-width: 920px;88    border: 1px solid #DFDFDF;89    border-radius: 32px;90    padding: 32px;91    box-sizing: border-box;92    background: #fff;93  }94  .review-header {95    display: flex;96    align-items: center;97    gap: 24px;98    margin-bottom: 18px;99  }100  .avatar {101    width: 96px;102    height: 96px;103    border-radius: 50%;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    font-size: 24px;111  }112  .reviewer-name {113    font-size: 44px;114    font-weight: 700;115    line-height: 1.2;116  }117  .review-date {118    color: #808080;119    font-size: 34px;120    margin-top: 6px;121  }122  .review-text {123    font-size: 42px;124    line-height: 62px;125    margin-top: 10px;126  }127 128  .outline-btn {129    width: 920px;130    margin: 40px auto 20px;131    height: 120px;132    border-radius: 60px;133    border: 2px solid #222;134    display: flex;135    align-items: center;136    justify-content: center;137    font-size: 42px;138    font-weight: 600;139    background: #fff;140  }141 142  .section {143    margin-top: 36px;144    padding-top: 24px;145    border-top: 1px solid #E6E6E6;146  }147  .section-title {148    font-size: 58px;149    font-weight: 700;150    margin-bottom: 8px;151  }152  .section-sub {153    font-size: 36px;154    color: #7A7A7A;155    margin-bottom: 24px;156  }157 158  .dates-scroll {159    display: flex;160    gap: 24px;161    overflow-x: auto;162    padding-bottom: 30px;163  }164  .date-card {165    min-width: 460px;166    border: 1px solid #DFDFDF;167    border-radius: 32px;168    padding: 32px;169    box-sizing: border-box;170    background: #fff;171  }172  .date-title {173    font-size: 44px;174    font-weight: 700;175    margin-bottom: 12px;176  }177  .time-range, .link-text {178    font-size: 34px;179    color: #4A4A4A;180    margin-bottom: 10px;181  }182  .link-text {183    color: #000;184    text-decoration: underline;185  }186  .price-line {187    font-size: 44px;188    font-weight: 700;189    margin-top: 20px;190  }191  .per-person {192    font-weight: 500;193  }194 195  /* Bottom bar */196  .bottom-bar {197    position: absolute;198    left: 0;199    right: 0;200    bottom: 0;201    height: 210px;202    background: #fff;203    border-top: 1px solid #E0E0E0;204    display: flex;205    align-items: center;206    justify-content: space-between;207    padding: 0 48px;208    box-sizing: border-box;209  }210  .price-info {211    display: flex;212    flex-direction: column;213    gap: 10px;214  }215  .price-info .from {216    font-size: 44px;217    font-weight: 700;218  }219  .price-info .note {220    font-size: 36px;221    color: #7A7A7A;222    text-decoration: underline;223  }224  .cta-btn {225    height: 120px;226    padding: 0 48px;227    border-radius: 60px;228    background: #FF1A5B;229    color: #fff;230    font-size: 44px;231    font-weight: 700;232    display: flex;233    align-items: center;234    justify-content: center;235  }236</style>237</head>238<body>239<div id="render-target">240 241  <div class="status-bar">242    <!-- Simple status text representation -->243    12:53 • • •244  </div>245 246  <div class="app-header">247    <div class="header-left">248      <div class="icon-btn" aria-label="Back">249        <svg class="icon" viewBox="0 0 24 24">250          <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>251        </svg>252      </div>253    </div>254    <div class="header-right">255      <div class="icon-btn" aria-label="Share">256        <svg class="icon" viewBox="0 0 24 24">257          <path d="M12 7l5-3M12 7l-5-3M12 7v10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>258          <circle cx="5" cy="4" r="2" fill="#222"/>259          <circle cx="19" cy="4" r="2" fill="#222"/>260          <circle cx="12" cy="19" r="2" fill="#222"/>261        </svg>262      </div>263      <div class="icon-btn" aria-label="Favorite">264        <svg class="icon" viewBox="0 0 24 24">265          <path d="M12 21s-6.5-4.4-8.5-7.3C1.2 11.2 2.2 8 5 7c2-0.7 3.5 0.4 4.4 1.6C10.5 7.4 12 6.3 14 7c2.8 1 3.8 4.2 1.5 6.7C18.5 16.6 12 21 12 21z" fill="#FF385C"/>266        </svg>267      </div>268    </div>269  </div>270 271  <div class="content">272    <div class="rating-row">273      <svg class="icon" viewBox="0 0 24 24">274        <path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6 4 6 7 1-6 4.8 1.2 6.9z" fill="#000"/>275      </svg>276      <div class="rating-text">4.98 (298 reviews)</div>277    </div>278 279    <div class="reviews-scroll">280      <div class="review-card">281        <div class="review-header">282          <div class="avatar">[IMG: User Avatar]</div>283          <div>284            <div class="reviewer-name">Reem</div>285            <div class="review-date">4 days ago</div>286          </div>287        </div>288        <div class="review-text">289          This tour was so fun I highly recommend! The location is beautiful and the goats are adorable. The host was super nice and thoughtful, would recommend! 🥰290        </div>291      </div>292      <div class="review-card">293        <div class="review-header">294          <div class="avatar">[IMG: User Avatar]</div>295          <div>296            <div class="reviewer-name">Sam</div>297            <div class="review-date">1 week ago</div>298          </div>299        </div>300        <div class="review-text">301          So much fun. We loved our time with the host and the animals. Definitely a memorable experience.302        </div>303      </div>304    </div>305 306    <div class="outline-btn">Show all 298 reviews</div>307 308    <div class="section">309      <div class="section-title">Choose from available dates</div>310      <div class="section-sub">2 available for Dec 16 – 20</div>311 312      <div class="dates-scroll">313        <div class="date-card">314          <div class="date-title">Sat, Dec 16</div>315          <div class="time-range">10:00 AM–12:00 PM</div>316          <div class="link-text">Book for a private group</div>317          <div class="price-line">$41 <span class="per-person">/ person</span></div>318        </div>319 320        <div class="date-card">321          <div class="date-title">Tue, Dec 19</div>322          <div class="time-range">10:00 AM–12:00 PM</div>323          <div class="link-text">Book for a private group</div>324          <div class="price-line">$41 <span class="per-person">/ person</span></div>325        </div>326      </div>327    </div>328  </div>329 330  <div class="bottom-bar">331    <div class="price-info">332      <div class="from">From $41 / person</div>333      <div class="note">Show all prices</div>334    </div>335    <div class="cta-btn">Show dates</div>336  </div>337 338</div>339</body>340</html>