GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Apartment Listing UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    box-sizing: border-box;20  }21 22  /* Top app bar */23  .appbar {24    position: relative;25    width: 100%;26    height: 215px;27    background: #2f5fbf; /* blue header */28    color: #fff;29  }30  .statusbar {31    height: 70px;32    padding: 0 28px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-weight: 600;37    font-size: 32px;38    opacity: 0.95;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .status-icons svg {46    width: 36px;47    height: 36px;48    fill: #ffffff;49    opacity: 0.9;50  }51  .title-row {52    display: flex;53    align-items: center;54    justify-content: space-between;55    padding: 14px 24px 0 24px;56  }57  .left-controls {58    display: flex;59    align-items: center;60    gap: 18px;61  }62  .right-controls {63    display: flex;64    align-items: center;65    gap: 26px;66  }67  .icon-btn svg {68    width: 56px;69    height: 56px;70    fill: #ffffff;71  }72  .page-title {73    padding: 8px 24px 16px 92px; /* leave space for back icon */74    color: #ffffff;75  }76  .page-title h1 {77    margin: 0;78    font-size: 46px;79    line-height: 1.15;80    font-weight: 700;81  }82 83  /* Map placeholder */84  .map {85    width: 100%;86    height: 280px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #757575;93    font-size: 34px;94    letter-spacing: 0.2px;95  }96 97  /* Content */98  .content {99    padding: 36px 34px;100  }101  .address {102    margin-bottom: 24px;103    color: #333;104  }105  .address .line {106    font-size: 38px;107    font-weight: 700;108    margin-bottom: 6px;109  }110  .address .sub {111    font-size: 34px;112    color: #666;113    line-height: 1.35;114  }115 116  .section-title {117    font-size: 46px;118    font-weight: 800;119    margin: 44px 0 18px;120    color: #333;121  }122  .poi-list {123    color: #686868;124    font-size: 34px;125    line-height: 1.65;126  }127 128  /* Cards */129  .date-card {130    margin: 40px 0 18px;131    border-top: 1px solid #e3e3e3;132    border-bottom: 1px solid #e3e3e3;133    padding: 30px 20px;134    display: flex;135    align-items: center;136    gap: 22px;137  }138  .date-card .cal {139    width: 64px;140    height: 64px;141    background: #f28c38;142    border-radius: 10px;143    display: flex;144    align-items: center;145    justify-content: center;146  }147  .date-card .text {148    font-size: 40px;149    color: #e67a2b;150    font-weight: 700;151  }152 153  .guests-row {154    border-top: 1px solid #e3e3e3;155    border-bottom: 1px solid #e3e3e3;156    padding: 32px 18px;157    display: flex;158    align-items: center;159    justify-content: center;160    gap: 26px;161  }162  .step-btn {163    width: 70px;164    height: 70px;165    border-radius: 12px;166    background: #f1f1f1;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #444;171    font-size: 50px;172    font-weight: 700;173  }174  .guests-count {175    font-size: 42px;176    color: #222;177    font-weight: 700;178    letter-spacing: 0.5px;179  }180 181  /* Price info */182  .price-info {183    padding: 28px 20px;184    text-align: center;185    color: #6b6b6b;186  }187  .price-info .value {188    font-size: 44px;189    color: #333;190    font-weight: 800;191    margin-bottom: 10px;192  }193  .price-info .min {194    font-size: 34px;195    margin-bottom: 6px;196  }197  .price-info .note {198    font-size: 34px;199  }200 201  /* Host & actions */202  .host {203    text-align: center;204    font-size: 48px;205    font-weight: 800;206    color: #333;207    margin-top: 10px;208    margin-bottom: 18px;209  }210 211  .actions {212    position: absolute;213    bottom: 110px;214    left: 24px;215    right: 24px;216    display: flex;217    gap: 24px;218  }219  .btn {220    flex: 1;221    background: #ef7c35;222    color: #ffffff;223    font-size: 40px;224    font-weight: 800;225    letter-spacing: 1px;226    border-radius: 12px;227    text-align: center;228    padding: 30px 0;229  }230 231  /* Small bottom gesture bar */232  .gesture-bar {233    position: absolute;234    bottom: 40px;235    left: 50%;236    transform: translateX(-50%);237    width: 300px;238    height: 12px;239    background: #d4d4d4;240    border-radius: 8px;241  }242 243  /* Utility SVG style */244  svg { display: block; }245</style>246</head>247<body>248<div id="render-target">249 250  <!-- App Bar -->251  <div class="appbar">252    <div class="statusbar">253      <div>3:37</div>254      <div class="status-icons">255        <!-- simple icons representing status -->256        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect></svg>257        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle></svg>258        <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2" fill="none"/></svg>259        <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" /></svg>260      </div>261    </div>262 263    <div class="title-row">264      <div class="left-controls">265        <!-- Back arrow -->266        <div class="icon-btn">267          <svg viewBox="0 0 24 24">268            <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>269          </svg>270        </div>271      </div>272      <div class="right-controls">273        <!-- Share -->274        <div class="icon-btn">275          <svg viewBox="0 0 24 24">276            <circle cx="6" cy="12" r="2.5"></circle>277            <circle cx="18" cy="6" r="2.5"></circle>278            <circle cx="18" cy="18" r="2.5"></circle>279            <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>280          </svg>281        </div>282        <!-- Heart -->283        <div class="icon-btn">284          <svg viewBox="0 0 24 24">285            <path d="M12 21s-7-4.7-9-8.4C1.3 10 2.9 6.8 6.2 6.4c2-.2 3.3.7 3.8 1.3.5-.6 1.8-1.5 3.8-1.3 3.3.4 4.9 3.6 3.2 6.2-2 3.7-9 8.4-9 8.4z" fill="#fff"/>286          </svg>287        </div>288      </div>289    </div>290 291    <div class="page-title">292      <h1>Apartment for 2-4 people<br>only 500 meters from the b...</h1>293    </div>294  </div>295 296  <!-- Map -->297  <div class="map">[IMG: Google Map snippet with pin and labels]</div>298 299  <!-- Content -->300  <div class="content">301    <div class="address">302      <div class="line">via trieste 47</div>303      <div class="sub">Ladispoli 00055<br>Rome</div>304    </div>305 306    <div class="section-title">Places of Interest</div>307    <div class="poi-list">308      40 km from a golf resort<br>309      4 km from a horse riding center<br>310      100 m to the bus station<br>311      13 km to the hospital<br>312      25 km to a hiking route<br>313      10 m to the city center<br>314      20 km from a sports harbour<br>315      33 km to the airport<br>316      10 m to supermarket<br>317      2 km from a diving center<br>318      400 m to the train station<br>319      400 m to the beach<br>320      37 km to a river or lake321    </div>322 323    <div class="date-card">324      <div class="cal">325        <!-- calendar icon -->326        <svg viewBox="0 0 24 24">327          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#fff"/>328          <path d="M3 9h18" stroke="#f28c38" stroke-width="2"/>329          <path d="M7 3v4M17 3v4" stroke="#f28c38" stroke-width="2" stroke-linecap="round"/>330        </svg>331      </div>332      <div class="text">Choose check-in and check-out dates</div>333    </div>334 335    <div class="guests-row">336      <div class="step-btn">−</div>337      <div class="guests-count">4 guests</div>338      <div class="step-btn">＋</div>339    </div>340 341    <div class="price-info">342      <div class="value">from 43 €/night</div>343      <div class="min">Minimum price possible.</div>344      <div class="note">Enter dates to view a more exact price.</div>345    </div>346 347    <div class="host">Francesca</div>348  </div>349 350  <!-- Action buttons -->351  <div class="actions">352    <div class="btn">EMAIL</div>353    <div class="btn">BOOK</div>354  </div>355 356  <div class="gesture-bar"></div>357</div>358</body>359</html>