GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Apartment Listing</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    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    background: #2f59b7;20    color: #eaf1ff;21    display: flex;22    align-items: center;23    justify-content: space-between;24    padding: 0 32px;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    gap: 18px;31    align-items: center;32  }33  .dot { width: 10px; height: 10px; background: #eaf1ff; border-radius: 50%; display: inline-block; }34 35  /* App bar */36  .app-bar {37    height: 220px;38    background: #2f59b7;39    color: #ffffff;40    position: relative;41    padding: 20px 24px 24px 24px;42  }43  .app-bar-content {44    display: flex;45    align-items: flex-start;46    gap: 18px;47  }48  .back-btn {49    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;50  }51  .app-title {52    flex: 1;53    font-size: 48px;54    line-height: 1.1;55    font-weight: 700;56  }57  .app-actions {58    display: flex; gap: 28px; align-items: center;59  }60  .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }61  .icon svg { width: 40px; height: 40px; fill: #ffffff; }62 63  /* Content area */64  .content {65    padding: 24px;66  }67  .desc {68    color: #8a8a8a;69    font-size: 34px;70    line-height: 48px;71    margin-bottom: 20px;72  }73 74  /* Characteristics section */75  .section-title {76    text-align: center;77    font-size: 46px;78    font-weight: 700;79    color: #5b5b5b;80    margin: 20px 0 30px;81  }82  .features {83    display: grid;84    grid-template-columns: repeat(3, 1fr);85    gap: 36px 24px;86    padding: 10px 14px 0;87  }88  .feature {89    text-align: center;90  }91  .circle {92    width: 120px;93    height: 120px;94    background: #4f6fa8;95    border-radius: 50%;96    margin: 0 auto 20px;97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .circle svg { width: 70px; height: 70px; fill: #ffffff; }102  .feature-label {103    font-size: 34px;104    color: #5b5b5b;105    line-height: 42px;106  }107 108  .plus-fab {109    width: 120px; height: 120px; border-radius: 60px; border: 2px solid #cfcfcf; color: #7b7b7b;110    display: flex; align-items: center; justify-content: center; margin: 40px auto;111    font-size: 72px; background: #f6f6f6;112  }113 114  /* Map placeholder */115  .map {116    width: 100%;117    height: 620px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    display: flex; align-items: center; justify-content: center;121    color: #757575; font-size: 40px; margin-top: 10px;122  }123 124  /* Address */125  .address {126    padding: 34px 24px 0;127  }128  .addr-title {129    font-size: 58px; font-weight: 800; color: #3f3f3f; margin-bottom: 10px;130  }131  .addr-sub {132    font-size: 40px; color: #7a7a7a; margin: 6px 0;133  }134 135  /* Buttons */136  .action-bar {137    display: flex; gap: 24px; padding: 24px;138  }139  .btn {140    flex: 1;141    height: 120px;142    background: #ea7b3a;143    border-radius: 14px;144    color: #ffffff;145    font-size: 46px;146    font-weight: 700;147    display: flex; align-items: center; justify-content: center;148    box-shadow: 0 4px 0 rgba(0,0,0,0.15);149  }150 151  /* bottom home indicator */152  .home-indicator {153    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);154    width: 420px; height: 16px; background: #000; opacity: 0.25; border-radius: 8px;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <div class="status-bar">162    <div>3:37</div>163    <div class="status-icons">164      <span class="dot"></span>165      <span class="dot"></span>166      <span class="dot"></span>167    </div>168  </div>169 170  <div class="app-bar">171    <div class="app-bar-content">172      <div class="back-btn icon">173        <svg viewBox="0 0 24 24"><path d="M15.5 5l-8 7 8 7v-3.5L10 12l5.5-3.5z"/></svg>174      </div>175      <div class="app-title">176        Apartment for 2-4 people<br>only 500 meters from the b...177      </div>178      <div class="app-actions">179        <div class="icon-btn icon">180          <svg viewBox="0 0 24 24"><path d="M18 8l-6 4-6-4V6l6 4 6-4v2zM6 10v8h12v-8l-6 4-6-4z"/></svg>181        </div>182        <div class="icon-btn icon">183          <svg viewBox="0 0 24 24"><path d="M12 21s-6.4-4.4-8.6-8A5 5 0 017.8 3a5.6 5.6 0 014.2 2 5.6 5.6 0 014.2-2A5 5 0 0120.6 13c-2.2 3.6-8.6 8-8.6 8z"/></svg>184        </div>185      </div>186    </div>187  </div>188 189  <div class="content">190    <div class="desc">191      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. A few meters all services, Bars, restaurants, Pharmacies...192    </div>193 194    <div class="section-title">Characteristics</div>195 196    <div class="features">197      <div class="feature">198        <div class="circle">199          <svg viewBox="0 0 24 24">200            <path d="M4 14h9v2H4v-2zm12-6h4v2h-4V8zM3 5h12v2H3V5z" opacity="0.8"></path>201            <path d="M3 3l18 18" stroke="#fff" stroke-width="2" fill="none"></path>202          </svg>203        </div>204        <div class="feature-label">Non smokers<br>preferred</div>205      </div>206      <div class="feature">207        <div class="circle">208          <svg viewBox="0 0 24 24">209            <rect x="4" y="6" width="16" height="10" rx="2" ry="2"></rect>210            <rect x="9" y="17" width="6" height="2"></rect>211          </svg>212        </div>213        <div class="feature-label">TV</div>214      </div>215      <div class="feature">216        <div class="circle">217          <svg viewBox="0 0 24 24">218            <path d="M12 5c1.8 0 3 1.6 3 3.5S13.8 12 12 12s-3-1.6-3-3.5S10.2 5 12 5z"></path>219            <path d="M5 19c2-4 5-4 7-4s5 0 7 4H5z"></path>220          </svg>221        </div>222        <div class="feature-label">Garden</div>223      </div>224 225      <div class="feature">226        <div class="circle">227          <svg viewBox="0 0 24 24">228            <rect x="5" y="5" width="6" height="6"></rect>229            <rect x="13" y="5" width="6" height="6"></rect>230            <rect x="5" y="13" width="6" height="6"></rect>231            <rect x="13" y="13" width="6" height="6"></rect>232          </svg>233        </div>234        <div class="feature-label">Terrace</div>235      </div>236      <div class="feature">237        <div class="circle">238          <svg viewBox="0 0 24 24">239            <rect x="5" y="6" width="14" height="6" rx="2"></rect>240            <path d="M7 16c2 1 4 1 6 0" stroke="#fff" stroke-width="2" fill="none"></path>241          </svg>242        </div>243        <div class="feature-label">Air Conditioning</div>244      </div>245      <div class="feature">246        <div class="circle">247          <svg viewBox="0 0 24 24">248            <circle cx="8" cy="10" r="2"></circle>249            <circle cx="16" cy="10" r="2"></circle>250            <circle cx="10" cy="16" r="2"></circle>251            <circle cx="14" cy="16" r="2"></circle>252            <circle cx="12" cy="12" r="2"></circle>253          </svg>254        </div>255        <div class="feature-label">Pet friendly</div>256      </div>257    </div>258 259    <div class="plus-fab">+</div>260 261    <div class="map">[IMG: Google Map]</div>262 263    <div class="address">264      <div class="addr-title">via trieste 47</div>265      <div class="addr-sub">Ladispoli 00055</div>266      <div class="addr-sub">Rome</div>267    </div>268 269    <div class="action-bar">270      <div class="btn">EMAIL</div>271      <div class="btn">BOOK</div>272    </div>273  </div>274 275  <div class="home-indicator"></div>276</div>277</body>278</html>