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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #fafafa;14    color: #212121;15  }16 17  /* Top App Bar */18  .appbar {19    position: relative;20    height: 180px;21    background: #2f63c8;22    color: #fff;23    box-sizing: border-box;24    padding: 28px 28px 24px 24px;25  }26  .appbar .title {27    position: absolute;28    left: 96px;29    right: 170px;30    top: 58px;31    font-size: 44px;32    line-height: 52px;33    font-weight: 600;34    white-space: nowrap;35    overflow: hidden;36    text-overflow: ellipsis;37  }38  .icon-btn {39    width: 64px;40    height: 64px;41    display: flex;42    align-items: center;43    justify-content: center;44  }45  .back {46    position: absolute;47    left: 18px;48    top: 58px;49  }50  .share {51    position: absolute;52    right: 120px;53    top: 58px;54  }55  .heart {56    position: absolute;57    right: 24px;58    top: 58px;59  }60  .appbar svg { fill: #ffffff; }61 62  /* Map Placeholder */63  .map {64    width: 100%;65    height: 300px;66    background: #E0E0E0;67    border-top: 1px solid #BDBDBD;68    border-bottom: 1px solid #BDBDBD;69    display: flex;70    align-items: center;71    justify-content: center;72    color: #616161;73    font-size: 34px;74    letter-spacing: 0.2px;75  }76 77  /* Content */78  .content {79    padding: 28px 36px 0 36px;80    box-sizing: border-box;81  }82  .street {83    font-size: 50px;84    font-weight: 700;85    margin: 6px 0 8px 0;86  }87  .city, .country {88    font-size: 36px;89    color: #666;90    margin: 2px 0;91  }92  .section-title {93    margin-top: 36px;94    font-size: 44px;95    font-weight: 800;96  }97  .poi-list {98    list-style: none;99    padding: 0;100    margin: 18px 0 24px 0;101  }102  .poi-list li {103    font-size: 36px;104    color: #6d6d6d;105    line-height: 56px;106  }107 108  /* Selection Rows */109  .select-row {110    display: flex;111    align-items: center;112    padding: 30px 36px;113    background: #fff;114    border-top: 1px solid #e5e5e5;115  }116  .select-row .cal-icn {117    width: 80px;118    height: 80px;119    margin-right: 26px;120  }121  .select-row .select-text {122    color: #e86e00;123    font-size: 38px;124  }125 126  .guests-row {127    display: flex;128    align-items: center;129    justify-content: space-between;130    padding: 26px 48px;131    background: #fff;132    border-top: 1px solid #eaeaea;133  }134  .counter-btn {135    width: 84px;136    height: 84px;137    border: 2px solid #bdbdbd;138    border-radius: 12px;139    color: #616161;140    font-size: 54px;141    line-height: 84px;142    text-align: center;143    user-select: none;144  }145  .guest-count {146    font-size: 44px;147    font-weight: 600;148    color: #212121;149  }150 151  .price-box {152    text-align: center;153    background: #fff;154    border-top: 1px solid #ececec;155    padding: 34px 24px 30px;156  }157  .price-box .main {158    font-size: 50px;159    font-weight: 700;160  }161  .price-box .sub {162    margin-top: 8px;163    font-size: 32px;164    color: #8a8a8a;165  }166 167  /* Bottom bar with actions */168  .bottom-bar {169    position: absolute;170    left: 0;171    right: 0;172    bottom: 0;173    background: #ffffff;174    border-top: 1px solid #e0e0e0;175    padding: 18px 24px 26px;176    box-sizing: border-box;177    display: flex;178    gap: 24px;179  }180  .btn {181    flex: 1;182    height: 112px;183    background: #f47a20;184    color: #fff;185    font-size: 40px;186    font-weight: 700;187    border: none;188    border-radius: 10px;189    letter-spacing: 0.5px;190  }191 192  /* Keep page content above buttons */193  .space-bottom {194    height: 160px;195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Top App Bar -->202  <div class="appbar">203    <div class="icon-btn back">204      <svg width="56" height="56" viewBox="0 0 24 24">205        <path d="M15.5 3.5L7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/>206      </svg>207    </div>208    <div class="title">Apartment for 2-4 people only 500 meters from the b...</div>209    <div class="icon-btn share">210      <svg width="56" height="56" viewBox="0 0 24 24">211        <path d="M18 16a3 3 0 0 0-2.4 1.2L8.9 13a3.2 3.2 0 0 0 0-2l6.6-4.2A3 3 0 1 0 15 5a3 3 0 0 0 .1.7L8.6 9.9a3 3 0 1 0 0 4.2l6.5 4.2c-.1.3-.1.5-.1.7a3 3 0 1 0 3-3z"/>212      </svg>213    </div>214    <div class="icon-btn heart">215      <svg width="56" height="56" viewBox="0 0 24 24">216        <path d="M12 21s-7.2-4.7-9.6-8C.4 10.3 1.2 6.5 4.9 5.6c2.1-.5 4 .4 5.1 2 1.1-1.6 3-2.5 5.1-2 3.7.9 4.5 4.7 2.5 7.4C19.2 16.3 12 21 12 21z"/>217      </svg>218    </div>219  </div>220 221  <!-- Map -->222  <div class="map">[IMG: Google Map of Ladispoli, Rome]</div>223 224  <!-- Main Content -->225  <div class="content">226    <div class="street">via trieste 47</div>227    <div class="city">Ladispoli 00055</div>228    <div class="country">Rome</div>229 230    <div class="section-title">Places of Interest</div>231    <ul class="poi-list">232      <li>40 km from a golf resort</li>233      <li>4 km from a horse riding center</li>234      <li>100 m to the bus station</li>235      <li>13 km to the hospital</li>236      <li>25 km to a hiking route</li>237      <li>10 m to the city center</li>238      <li>20 km from a sports harbour</li>239      <li>33 km to the airport</li>240      <li>10 m to supermarket</li>241      <li>2 km from a diving center</li>242      <li>400 m to the train station</li>243      <li>400 m to the beach</li>244      <li>37 km to a river or lake</li>245    </ul>246 247    <div class="select-row">248      <svg class="cal-icn" viewBox="0 0 24 24">249        <path fill="#f47a20" d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 5h16a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 5v10h16V10H4z"/>250      </svg>251      <div class="select-text">Choose check-in and check-out dates</div>252    </div>253 254    <div class="guests-row">255      <div class="counter-btn">−</div>256      <div class="guest-count">4 guests</div>257      <div class="counter-btn">+</div>258    </div>259 260    <div class="price-box">261      <div class="main">from 43 €/night</div>262      <div class="sub">Minimum price possible.</div>263      <div class="sub">Enter dates to view a more exact price.</div>264    </div>265 266    <div class="space-bottom"></div>267  </div>268 269  <!-- Bottom Action Buttons -->270  <div class="bottom-bar">271    <button class="btn">EMAIL</button>272    <button class="btn">BOOK</button>273  </div>274 275</div>276</body>277</html>