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  }14 15  /* Status bar */16  .statusbar {17    height: 60px;18    padding: 0 24px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #fff;23    font-size: 28px;24    background: #3F51B5;25  }26  .status-icons { display: flex; gap: 20px; align-items: center; }27  .status-dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.8; }28 29  /* App bar */30  .appbar {31    background: #3F51B5;32    color: #fff;33    padding: 16px 24px 24px 24px;34    box-sizing: border-box;35  }36  .appbar-row {37    display: flex;38    align-items: center;39    justify-content: space-between;40  }41  .title {42    font-size: 44px;43    line-height: 1.1;44    font-weight: 600;45    max-width: 800px;46  }47  .icon-btn {48    width: 72px;49    height: 72px;50    display: inline-flex;51    align-items: center;52    justify-content: center;53    border-radius: 36px;54  }55  .left-actions { display: flex; align-items: center; gap: 20px; }56  .right-actions { display: flex; align-items: center; gap: 22px; }57  .icon-white { fill: #ffffff; }58 59  /* Map placeholder */60  .map {61    width: 100%;62    height: 260px;63    background: #E0E0E0;64    border-top: 1px solid #BDBDBD;65    border-bottom: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    font-size: 30px;71  }72 73  /* Content */74  .content {75    padding: 28px;76    color: #222;77  }78  .address {79    font-size: 40px;80    font-weight: 700;81    margin-bottom: 6px;82  }83  .subaddr {84    font-size: 34px;85    color: #606060;86  }87 88  .section-title {89    margin-top: 40px;90    font-size: 46px;91    font-weight: 700;92  }93  .poi-list {94    margin-top: 20px;95    color: #6a6a6a;96    font-size: 34px;97    line-height: 1.6;98  }99 100  .card {101    margin-top: 36px;102    border-top: 1px solid #DDD;103    border-bottom: 1px solid #DDD;104    padding: 28px 20px;105    display: flex;106    align-items: center;107    gap: 22px;108  }109  .card .orange { color: #F57C00; font-size: 36px; }110 111  .guest-row {112    margin-top: 22px;113    padding: 26px 24px;114    display: flex;115    align-items: center;116    justify-content: space-between;117  }118  .guest-count {119    font-size: 46px;120    font-weight: 600;121  }122  .circle-btn {123    width: 72px;124    height: 72px;125    border-radius: 36px;126    border: 2px solid #C7C7C7;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #6a6a6a;131  }132 133  .price-block {134    text-align: center;135    padding: 16px 24px;136  }137  .price-main {138    font-size: 50px;139    font-weight: 700;140    color: #333;141  }142  .price-sub {143    margin-top: 10px;144    font-size: 32px;145    color: #8a8a8a;146  }147 148  .cta-bar {149    position: absolute;150    bottom: 110px;151    left: 0;152    width: 100%;153    padding: 0 20px;154    display: flex;155    gap: 24px;156    box-sizing: border-box;157  }158  .btn {159    flex: 1;160    height: 120px;161    background: #F57C00;162    color: #fff;163    font-size: 40px;164    font-weight: 700;165    border-radius: 8px;166    display: flex;167    align-items: center;168    justify-content: center;169  }170 171  /* Simple android navigation hint bar */172  .nav-hint {173    position: absolute;174    bottom: 30px;175    left: 50%;176    transform: translateX(-50%);177    width: 360px;178    height: 12px;179    background: #D0D0D0;180    border-radius: 6px;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="statusbar">189    <div>3:58</div>190    <div class="status-icons">191      <div class="status-dot"></div>192      <div class="status-dot"></div>193      <div class="status-dot"></div>194      <!-- Wi-Fi icon -->195      <svg width="34" height="34" viewBox="0 0 24 24">196        <path class="icon-white" d="M12 18l-2-2c1.1-1.1 2.9-1.1 4 0l-2 2zm5-5c-3.1-3.1-8.1-3.1-11.2 0l-1.4-1.4c3.9-3.9 10.1-3.9 14 0L17 13zm3.5-3.5C14.7 5.1 9.3 5.1 3.5 9.5L2.1 8c7.1-5.6 16.7-5.6 23.8 0L20.5 9.5z"/>197      </svg>198      <!-- Battery icon -->199      <svg width="40" height="34" viewBox="0 0 28 24">200        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#fff"></rect>201        <rect x="4" y="8" width="14" height="8" fill="#3F51B5"></rect>202        <rect x="22" y="9" width="4" height="6" fill="#fff"></rect>203      </svg>204    </div>205  </div>206 207  <!-- App bar -->208  <div class="appbar">209    <div class="appbar-row">210      <div class="left-actions">211        <!-- Back arrow -->212        <div class="icon-btn">213          <svg width="44" height="44" viewBox="0 0 24 24">214            <path class="icon-white" d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215          </svg>216        </div>217        <div class="title">Apartment for 2-4 people only 500 meters from the b…</div>218      </div>219      <div class="right-actions">220        <!-- Share icon -->221        <div class="icon-btn">222          <svg width="44" height="44" viewBox="0 0 24 24">223            <path class="icon-white" d="M18 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-12 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-12a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2.2 7.3l7.6-4.2M7.2 8.9l7.6-4.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>224          </svg>225        </div>226        <!-- Heart icon -->227        <div class="icon-btn">228          <svg width="44" height="44" viewBox="0 0 24 24">229            <path class="icon-white" d="M12 21s-6.5-4.3-8.5-7.1C1.4 11.4 2.3 8.5 4.7 7.4c2-1 4.3-.3 5.3 1.3 1-1.6 3.3-2.3 5.3-1.3 2.4 1.1 3.3 4 1.2 6.5C18.5 16.7 12 21 12 21z"/>230          </svg>231        </div>232      </div>233    </div>234  </div>235 236  <!-- Map -->237  <div class="map">[IMG: Google Map of Ladispoli neighborhood]</div>238 239  <!-- Content -->240  <div class="content">241    <div class="address">via trieste 47</div>242    <div class="subaddr">Ladispoli 00055<br/>Rome</div>243 244    <div class="section-title">Places of Interest</div>245    <div class="poi-list">246      40 km from a golf resort<br/>247      4 km from a horse riding center<br/>248      100 m to the bus station<br/>249      13 km to the hospital<br/>250      25 km to a hiking route<br/>251      10 m to the city center<br/>252      20 km from a sports harbour<br/>253      33 km to the airport<br/>254      10 m to supermarket<br/>255      2 km from a diving center<br/>256      400 m to the train station<br/>257      400 m to the beach<br/>258      37 km to a river or lake259    </div>260 261    <div class="card">262      <!-- Calendar icon -->263      <svg width="60" height="60" viewBox="0 0 24 24">264        <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="#F57C00"></rect>265        <rect x="3" y="7" width="18" height="13" fill="#fff"></rect>266        <rect x="6" y="11" width="4" height="3" fill="#F57C00"></rect>267        <rect x="12" y="11" width="4" height="3" fill="#F57C00"></rect>268      </svg>269      <div class="orange">Choose check-in and check-out dates</div>270    </div>271 272    <div class="guest-row">273      <div class="circle-btn">274        <!-- Minus -->275        <svg width="34" height="34" viewBox="0 0 24 24">276          <rect x="5" y="11" width="14" height="2" fill="#6a6a6a"></rect>277        </svg>278      </div>279      <div class="guest-count">4 guests</div>280      <div class="circle-btn">281        <!-- Plus -->282        <svg width="34" height="34" viewBox="0 0 24 24">283          <rect x="11" y="5" width="2" height="14" fill="#6a6a6a"></rect>284          <rect x="5" y="11" width="14" height="2" fill="#6a6a6a"></rect>285        </svg>286      </div>287    </div>288 289    <div class="price-block">290      <div class="price-main">from 43 €/night</div>291      <div class="price-sub">Minimum price possible.</div>292      <div class="price-sub">Enter dates to view a more exact price.</div>293    </div>294  </div>295 296  <!-- CTA buttons -->297  <div class="cta-bar">298    <div class="btn">EMAIL</div>299    <div class="btn">BOOK</div>300  </div>301 302  <div class="nav-hint"></div>303</div>304</body>305</html>