GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Apartment Listing UI</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: #ffffff;13    box-shadow: 0 6px 30px rgba(0,0,0,0.15);14    border-radius: 0px;15  }16 17  /* Top App Bar */18  .app-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #2E5BD0;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 22px;35    font-weight: 600;36    font-size: 36px;37  }38  .status-icons {39    margin-left: auto;40    display: flex;41    gap: 28px;42    align-items: center;43  }44  .dot {45    width: 12px; height: 12px; background: #fff; border-radius: 50%;46  }47  .icon-rect { width: 36px; height: 24px; border: 2px solid #fff; border-radius: 4px; }48  .icon-signal {49    width: 40px; height: 28px; position: relative;50  }51  .icon-signal span {52    position: absolute; bottom: 0; width: 6px; background: #fff; left: 2px;53  }54  .icon-signal span:nth-child(1){ height: 8px; left: 2px; }55  .icon-signal span:nth-child(2){ height: 14px; left: 12px; }56  .icon-signal span:nth-child(3){ height: 20px; left: 22px; }57  .icon-signal span:nth-child(4){ height: 26px; left: 32px; }58 59  /* Header Image */60  .header-image {61    position: absolute;62    top: 120px;63    left: 0;64    width: 1080px;65    height: 680px;66    background: #E0E0E0;67    border-bottom: 1px solid #BDBDBD;68    display: flex;69    align-items: flex-end;70    justify-content: center;71    color: #757575;72    font-size: 32px;73    letter-spacing: 0.2px;74  }75 76  /* Overlay controls on image */77  .back-btn, .share-btn, .heart-btn {78    position: absolute;79    top: 160px;80    width: 84px; height: 84px;81    background: rgba(255,255,255,0.9);82    border-radius: 42px;83    display: flex; align-items: center; justify-content: center;84    box-shadow: 0 4px 10px rgba(0,0,0,0.15);85  }86  .back-btn { left: 28px; }87  .share-btn { right: 160px; }88  .heart-btn { right: 48px; }89 90  .tag-online {91    position: absolute;92    top: 710px;93    left: 0;94    background: #EA7A2A;95    color: #fff;96    font-weight: 700;97    font-size: 36px;98    padding: 22px 28px;99    border-top-right-radius: 10px;100    border-bottom-right-radius: 10px;101  }102  .price-pill {103    position: absolute;104    top: 786px;105    left: 28px;106    background: #111;107    color: #fff;108    font-weight: 800;109    font-size: 42px;110    padding: 22px 28px;111    border-radius: 18px;112    display: inline-flex;113    align-items: center;114    gap: 18px;115  }116  .shield {117    width: 40px; height: 40px;118    background: #222;119    border-radius: 8px;120    position: relative;121    overflow: hidden;122  }123  .shield:before {124    content: "";125    position: absolute;126    left: 8px; top: 6px;127    width: 24px; height: 28px;128    background: #fff;129    clip-path: polygon(50% 0, 100% 20%, 100% 70%, 50% 100%, 0 70%, 0 20%);130  }131 132  /* Content area */133  .content {134    position: absolute;135    top: 860px;136    left: 0;137    width: 100%;138    padding: 24px 32px 180px 32px;139    box-sizing: border-box;140  }141  .title {142    font-size: 52px;143    font-weight: 800;144    color: #333;145    line-height: 1.2;146    margin-bottom: 20px;147  }148  .subtitle {149    font-size: 36px;150    color: #666;151    margin-bottom: 10px;152  }153  .location {154    font-size: 34px;155    color: #888;156    margin-bottom: 24px;157  }158  .rating-row {159    display: flex; align-items: center; gap: 20px;160    color: #BDBDBD;161    font-size: 40px;162    margin-bottom: 26px;163  }164  .rating-row .reviews {165    color: #6e6e6e;166    font-size: 34px;167  }168 169  /* Features row */170  .features {171    display: flex;172    justify-content: space-around;173    padding: 36px 0;174    border-top: 1px solid #eee;175    border-bottom: 1px solid #eee;176    margin-bottom: 24px;177  }178  .feature {179    display: flex; flex-direction: column; align-items: center; gap: 16px;180  }181  .feature .circle {182    width: 128px; height: 128px; background: #3A69B1; color: #fff; border-radius: 64px;183    display: flex; align-items: center; justify-content: center;184  }185  .feature label {186    font-size: 34px; color: #3c3c3c;187  }188 189  /* Description */190  .desc {191    font-size: 34px;192    color: #555;193    line-height: 1.6;194  }195 196  /* Floating plus circle */197  .plus-circle {198    position: absolute;199    left: 510px;200    top: 1470px;201    width: 100px; height: 100px;202    border-radius: 50%;203    background: #fff;204    border: 2px solid #CFCFCF;205    display: flex; align-items: center; justify-content: center;206    box-shadow: 0 6px 18px rgba(0,0,0,0.08);207    font-size: 54px; color: #6e6e6e;208  }209 210  /* Bottom action bar */211  .bottom-actions {212    position: absolute;213    bottom: 160px;214    left: 0;215    width: 100%;216    display: flex;217    gap: 24px;218    padding: 0 24px;219    box-sizing: border-box;220  }221  .btn {222    flex: 1;223    height: 120px;224    background: #EA7A2A;225    color: #fff;226    font-size: 44px;227    font-weight: 800;228    border-radius: 12px;229    display: flex; align-items: center; justify-content: center;230    box-shadow: 0 6px 18px rgba(0,0,0,0.2);231  }232  .btn.secondary {233    background: #F08A3A;234  }235  .section-title {236    position: absolute;237    bottom: 300px;238    left: 0;239    width: 100%;240    text-align: center;241    font-size: 46px;242    font-weight: 800;243    color: #3c3c3c;244  }245 246  /* Simple inline-svg helpers */247  svg { display: block; }248</style>249</head>250<body>251<div id="render-target">252 253  <!-- Top bar -->254  <div class="app-bar">255    <div class="status-left">256      <div>3:36</div>257      <div class="dot"></div>258      <div class="dot"></div>259      <div class="dot"></div>260      <div class="dot"></div>261    </div>262    <div class="status-icons">263      <div class="icon-signal">264        <span></span><span></span><span></span><span></span>265      </div>266      <div class="icon-rect"></div>267      <div style="width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff;"></div>268    </div>269  </div>270 271  <!-- Image header -->272  <div class="header-image">[IMG: Dining room with table, chairs and window]</div>273 274  <!-- Overlay navigation icons -->275  <div class="back-btn">276    <svg width="40" height="40" viewBox="0 0 24 24">277      <polyline points="14,5 7,12 14,19" fill="none" stroke="#2E5BD0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>278    </svg>279  </div>280  <div class="share-btn">281    <svg width="40" height="40" viewBox="0 0 24 24">282      <circle cx="6" cy="12" r="3" fill="#2E5BD0"></circle>283      <circle cx="18" cy="6" r="3" fill="#2E5BD0"></circle>284      <circle cx="18" cy="18" r="3" fill="#2E5BD0"></circle>285      <path d="M9 12 L15 7 M9 12 L15 17" stroke="#2E5BD0" stroke-width="3" fill="none"></path>286    </svg>287  </div>288  <div class="heart-btn">289    <svg width="40" height="40" viewBox="0 0 24 24">290      <path d="M12 21 C12 21 4 14 4 9 C4 6.5 6 5 8 5 C9.5 5 11 5.8 12 7 C13 5.8 14.5 5 16 5 C18 5 20 6.5 20 9 C20 14 12 21 12 21 Z"291            fill="#E24D4D"></path>292    </svg>293  </div>294 295  <!-- Ribbon and price -->296  <div class="tag-online">Online Booking</div>297  <div class="price-pill">298    <span>from 43 €/night</span>299    <div class="shield"></div>300  </div>301 302  <!-- Content block -->303  <div class="content">304    <div class="title">Apartment for 2-4 people only 500 meters from the beach</div>305    <div class="subtitle">Apt. for 4 guests</div>306    <div class="location">Ladispoli, Rome</div>307 308    <div class="rating-row">309      <span>☆ ☆ ☆ ☆ ☆</span>310      <span class="reviews">Without opinions</span>311    </div>312 313    <div class="features">314      <div class="feature">315        <div class="circle">316          <svg width="64" height="64" viewBox="0 0 24 24">317            <rect x="3" y="11" width="18" height="5" rx="2" fill="#fff"></rect>318            <rect x="5" y="7" width="10" height="4" rx="2" fill="#fff"></rect>319            <rect x="17" y="8" width="4" height="3" rx="1" fill="#fff"></rect>320          </svg>321        </div>322        <label>3 beds</label>323      </div>324      <div class="feature">325        <div class="circle">326          <svg width="64" height="64" viewBox="0 0 24 24">327            <rect x="7" y="4" width="10" height="16" rx="2" fill="#fff"></rect>328            <circle cx="12" cy="12" r="2" fill="#3A69B1"></circle>329          </svg>330        </div>331        <label>1 room</label>332      </div>333      <div class="feature">334        <div class="circle">335          <svg width="64" height="64" viewBox="0 0 24 24">336            <circle cx="12" cy="7" r="3" fill="#fff"></circle>337            <path d="M6 20 C6 16 9 14 12 14 C15 14 18 16 18 20" fill="#fff"></path>338          </svg>339        </div>340        <label>4 guests</label>341      </div>342    </div>343 344    <div class="desc">345      Apartment of about 65 meters on the ground floor with a terrace equipped with table and chairs, small paved garden, private parking space.<br><br>346      It consists of a double bedroom with a third bed, a living room with a sofa bed and a half, kitchen, bathroom with shower.<br><br>347      Located in a central position, parallel to Viale Italia, the shopping street. It is 500 meters from the free and equipped beach, and 500 meters from the train station.348    </div>349  </div>350 351  <div class="plus-circle">+</div>352 353  <div class="section-title">Characteristics</div>354 355  <!-- Bottom action buttons -->356  <div class="bottom-actions">357    <div class="btn secondary">EMAIL</div>358    <div class="btn">BOOK</div>359  </div>360 361</div>362</body>363</html>