GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Listing UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top bars */16  .status-bar {17    height: 84px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #333;23    font-size: 30px;24  }25  .status-icons {26    display: flex;27    align-items: center;28    gap: 24px;29  }30  .nav-bar {31    height: 92px;32    padding: 0 28px;33    display: flex;34    align-items: center;35    justify-content: space-between;36  }37  .left-icons, .right-icons {38    display: flex;39    align-items: center;40    gap: 24px;41  }42  .icon-btn {43    width: 64px;44    height: 64px;45    display: inline-flex;46    align-items: center;47    justify-content: center;48    border-radius: 32px;49  }50 51  /* Title & location */52  .content {53    padding: 0 36px;54  }55  .title {56    font-weight: 800;57    font-size: 60px;58    line-height: 74px;59    color: #2b2b2b;60    margin-top: 16px;61    letter-spacing: 0.2px;62  }63  .location {64    margin-top: 28px;65    color: #6C4CCF;66    font-size: 36px;67    font-weight: 600;68  }69 70  /* Image carousel placeholder */71  .image-card {72    margin-top: 28px;73    width: 1008px;74    height: 720px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    border-radius: 16px;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    font-size: 34px;83    text-align: center;84  }85 86  /* Bed/Bath badges */87  .badges {88    margin-top: 24px;89    padding: 0 12px;90    display: flex;91    gap: 32px;92  }93  .badge {94    display: flex;95    align-items: center;96    gap: 16px;97    color: #5a5a5a;98    font-size: 36px;99    padding: 16px 22px;100    border-radius: 12px;101  }102 103  .divider {104    width: 100%;105    height: 2px;106    background: #eee;107    margin: 28px 0;108  }109 110  /* Description */111  .section-title {112    font-size: 48px;113    font-weight: 800;114    color: #2b2b2b;115    margin-bottom: 18px;116  }117  .description {118    font-size: 36px;119    color: #3f3f3f;120    line-height: 1.5;121  }122  .fade-more {123    margin-top: 24px;124    width: 48px;125    height: 48px;126    display: flex;127    align-items: center;128    justify-content: center;129    color: #7a59e5;130  }131 132  /* Bottom bar */133  .bottom-bar {134    position: absolute;135    left: 0;136    right: 0;137    bottom: 0;138    height: 190px;139    border-top: 1px solid #e6e6e6;140    background: #fafafa;141    display: flex;142    align-items: center;143    justify-content: space-between;144    padding: 0 36px;145  }146  .price-wrap {147    display: flex;148    flex-direction: column;149    gap: 12px;150  }151  .price {152    font-size: 52px;153    font-weight: 800;154    color: #222;155  }156  .per-month {157    font-size: 36px;158    color: #444;159    margin-left: 12px;160    font-weight: 500;161  }162  .deposit {163    font-size: 34px;164    color: #6b6b6b;165  }166  .cta-btn {167    width: 520px;168    height: 120px;169    background: #F2A33B;170    color: #ffffff;171    font-size: 44px;172    font-weight: 800;173    border-radius: 24px;174    display: flex;175    align-items: center;176    justify-content: center;177    box-shadow: 0 6px 12px rgba(0,0,0,0.12);178  }179 180  /* Home indicator */181  .home-indicator {182    position: absolute;183    bottom: 12px;184    left: 50%;185    transform: translateX(-50%);186    width: 420px;187    height: 12px;188    background: #000000;189    border-radius: 6px;190    opacity: 0.7;191  }192 193  /* Small helper styles for icon colors */194  .purple { color: #7a59e5; }195  .gray { color: #666; }196  .heart-red { color: #E44D5E; }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status bar -->203  <div class="status-bar">204    <div>1:11</div>205    <div class="status-icons">206      <!-- Simple mail icon -->207      <svg width="40" height="40" viewBox="0 0 24 24">208        <rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>209        <path d="M3 6l9 6 9-6" fill="none" stroke="#666" stroke-width="2"></path>210      </svg>211      <!-- wifi icon -->212      <svg width="40" height="40" viewBox="0 0 24 24">213        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#666" stroke-width="2"></path>214        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#666" stroke-width="2"></path>215        <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#666" stroke-width="2"></path>216        <circle cx="12" cy="19" r="2" fill="#666"></circle>217      </svg>218      <!-- battery icon -->219      <svg width="40" height="40" viewBox="0 0 24 24">220        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>221        <rect x="4" y="8" width="12" height="8" fill="#666"></rect>222        <rect x="20" y="10" width="2" height="6" fill="#666"></rect>223      </svg>224    </div>225  </div>226 227  <!-- Navigation bar -->228  <div class="nav-bar">229    <div class="left-icons">230      <!-- Back arrow -->231      <div class="icon-btn">232        <svg width="40" height="40" viewBox="0 0 24 24">233          <path d="M15 18l-6-6 6-6" fill="none" stroke="#6C4CCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>234        </svg>235      </div>236    </div>237    <div class="right-icons">238      <!-- Heart -->239      <div class="icon-btn">240        <svg width="44" height="44" viewBox="0 0 24 24">241          <path d="M12 21s-7-4.5-9-8.5C1.5 9 3 6.5 6 6.5c2 0 3.5 1.2 4 2.5.5-1.3 2-2.5 4-2.5 3 0 4.5 2.5 3 6 0 0-2 3.5-9 8.5z" fill="#E44D5E"></path>242        </svg>243      </div>244      <!-- Kebab menu -->245      <div class="icon-btn">246        <svg width="36" height="36" viewBox="0 0 24 24">247          <circle cx="12" cy="5" r="2" fill="#6C4CCF"></circle>248          <circle cx="12" cy="12" r="2" fill="#6C4CCF"></circle>249          <circle cx="12" cy="19" r="2" fill="#6C4CCF"></circle>250        </svg>251      </div>252    </div>253  </div>254 255  <!-- Main content -->256  <div class="content">257    <div class="title">258      1 BED 1 BATH DUPLEX<br>WITH BALCONY &<br>LAUNDRY259    </div>260 261    <div class="location">New York, Murray Hill, NY, US</div>262 263    <div class="image-card">264      [IMG: Living room with spiral staircase]265    </div>266 267    <div class="badges">268      <div class="badge">269        <!-- bed icon -->270        <svg width="54" height="54" viewBox="0 0 24 24">271          <rect x="3" y="10" width="18" height="6" fill="none" stroke="#777" stroke-width="2"></rect>272          <rect x="5" y="7" width="6" height="4" fill="none" stroke="#777" stroke-width="2"></rect>273          <path d="M3 16v3M21 16v3" stroke="#777" stroke-width="2"></path>274        </svg>275        <span>1 Bed</span>276      </div>277      <div class="badge">278        <!-- bath icon -->279        <svg width="54" height="54" viewBox="0 0 24 24">280          <path d="M5 12h14v3a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4v-3z" fill="none" stroke="#777" stroke-width="2"></path>281          <path d="M8 6h4a2 2 0 0 1 2 2v4" fill="none" stroke="#777" stroke-width="2"></path>282        </svg>283        <span>1 Bath</span>284      </div>285    </div>286 287    <div class="divider"></div>288 289    <div class="section-title">Duplex Description</div>290    <div class="description">291      Beautiful 1 bedroom 1 bathroom duplex on the292      third floor of an elevator building with a private293      balcony on both floors! This home has large294      windows with sliding glass doors, renovated kitchen295      appliances, and a sleek spiral staircase...296    </div>297    <div class="fade-more">298      <!-- down chevron -->299      <svg width="40" height="40" viewBox="0 0 24 24">300        <path d="M6 9l6 6 6-6" fill="none" stroke="#6C4CCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>301      </svg>302    </div>303  </div>304 305  <!-- Bottom bar -->306  <div class="bottom-bar">307    <div class="price-wrap">308      <div>309        <span class="price">$3,995</span>310        <span class="per-month">/month</span>311      </div>312      <div class="deposit">$3,995 security deposit</div>313    </div>314    <div class="cta-btn">Contact Agent</div>315  </div>316 317  <div class="home-indicator"></div>318</div>319</body>320</html>