GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Property Surroundings - Mobile 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  /* Header */15  .top-bar {16    background: #0b3b82;17    color: #fff;18    width: 100%;19    height: 220px;20    box-sizing: border-box;21    padding: 20px 30px 0 30px;22  }23  .status-row {24    height: 60px;25    display: flex;26    align-items: center;27    justify-content: flex-end;28    gap: 18px;29    font-size: 30px;30    opacity: 0.9;31  }32  .title-row {33    margin-top: 20px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #fff;38  }39  .title-left {40    display: flex;41    align-items: center;42    gap: 20px;43  }44  .back-btn svg { fill: none; stroke: #ffffff; stroke-width: 6; }45  .page-title {46    font-size: 44px;47    font-weight: 700;48    white-space: nowrap;49    overflow: hidden;50    text-overflow: ellipsis;51    max-width: 760px;52  }53  .title-actions {54    display: flex;55    align-items: center;56    gap: 28px;57  }58  .title-actions svg { stroke: #fff; fill: none; stroke-width: 5; }59  /* Content */60  .content {61    position: absolute;62    top: 220px;63    left: 0;64    right: 0;65    bottom: 0;66    overflow-y: auto;67    padding-bottom: 180px;68  }69  .section {70    padding: 36px 40px;71    border-bottom: 1px solid #eee;72  }73  .section h2 {74    margin: 0;75    font-size: 46px;76    font-weight: 800;77    color: #222;78    display: flex;79    align-items: center;80    justify-content: space-between;81  }82  .section h2 .icon {83    width: 64px;84    height: 64px;85  }86  .subheading {87    font-size: 36px;88    color: #333;89    margin: 26px 0 16px 0;90    font-weight: 700;91  }92  .poi-list .row {93    display: flex;94    justify-content: space-between;95    padding: 18px 0;96    font-size: 36px;97    color: #222;98    border-bottom: 1px solid #f1f1f1;99  }100  .poi-list .row:last-child { border-bottom: none; }101  .distance {102    color: #333;103  }104  .transport {105    display: flex;106    align-items: center;107    justify-content: space-between;108    font-size: 38px;109    color: #222;110    padding: 24px 0 6px 0;111  }112  .around-title {113    display: flex;114    align-items: center;115    justify-content: space-between;116  }117  .label {118    font-size: 34px;119    color: #555;120    margin-top: 12px;121  }122  .restaurant-row {123    display: flex;124    align-items: center;125    justify-content: space-between;126    font-size: 36px;127    color: #222;128    padding: 14px 0;129  }130  .footnote {131    font-size: 30px;132    color: #666;133    margin-top: 20px;134  }135  /* CTA button */136  .cta-bar {137    position: absolute;138    bottom: 24px;139    left: 24px;140    right: 24px;141    height: 128px;142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .cta-button {147    width: 100%;148    height: 128px;149    background: #2d6cdf;150    color: #fff;151    font-size: 44px;152    font-weight: 800;153    border-radius: 14px;154    display: flex;155    align-items: center;156    justify-content: center;157    box-shadow: 0 8px 16px rgba(45,108,223,0.35);158  }159  /* Simple icons */160  .icon svg { stroke: #222; fill: none; stroke-width: 5; }161  .icon.blue svg { stroke: #2d6cdf; }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Header -->168  <div class="top-bar">169    <div class="status-row">170      <span>8:59</span>171      <span>◦</span>172      <span>🔔</span>173      <span>📶</span>174      <span>🔋</span>175    </div>176    <div class="title-row">177      <div class="title-left">178        <div class="back-btn">179          <svg width="54" height="54" viewBox="0 0 54 54">180            <path d="M34 10 L18 27 L34 44"></path>181          </svg>182        </div>183        <div class="page-title">Courtyard New York Manhatta...</div>184      </div>185      <div class="title-actions">186        <svg width="48" height="48" viewBox="0 0 48 48">187          <path d="M24 40 L10 26 C5 21 6 12 13 9 C18 7 22 9 24 12 C26 9 30 7 35 9 C42 12 43 21 38 26 L24 40"></path>188        </svg>189        <svg width="48" height="48" viewBox="0 0 48 48">190          <circle cx="12" cy="24" r="5"></circle>191          <circle cx="36" cy="12" r="5"></circle>192          <circle cx="36" cy="36" r="5"></circle>193          <path d="M16 24 L30 17 M16 24 L30 31" stroke-linecap="round"></path>194        </svg>195      </div>196    </div>197  </div>198 199  <!-- Content -->200  <div class="content">201    <div class="section">202      <h2>203        <span>Property surroundings</span>204        <span class="icon">205          <svg width="64" height="64" viewBox="0 0 64 64">206            <path d="M10 28 L32 14 L54 28 Z"></path>207            <rect x="12" y="28" width="40" height="24"></rect>208            <path d="M20 28 L20 52 M28 28 L28 52 M36 28 L36 52 M44 28 L44 52"></path>209          </svg>210        </span>211      </h2>212 213      <div class="subheading">Places of Interest Nearby *</div>214      <div class="poi-list">215        <div class="row"><div>Carl Schurz Park</div><div class="distance">2000 ft</div></div>216        <div class="row"><div>92nd Street Y</div><div class="distance">2050 ft</div></div>217        <div class="row"><div>96th Street IRT Lexington Avenue Line</div><div class="distance">2400 ft</div></div>218        <div class="row"><div>86th Street Lexington Avenue Line</div><div class="distance">2500 ft</div></div>219        <div class="row"><div>Cherry Tree Park</div><div class="distance">2800 ft</div></div>220        <div class="row"><div>Central Park</div><div class="distance">1.7 mi</div></div>221        <div class="row"><div>Rockefeller Center</div><div class="distance">2.2 mi</div></div>222        <div class="row"><div>Grand Central Station</div><div class="distance">2.5 mi</div></div>223        <div class="row"><div>Times Square</div><div class="distance">2.6 mi</div></div>224        <div class="row"><div>Yankee Stadium</div><div class="distance">3.6 mi</div></div>225      </div>226    </div>227 228    <div class="section">229      <h2>230        <span>Transport Information *</span>231        <span class="icon blue">232          <svg width="64" height="64" viewBox="0 0 64 64">233            <circle cx="32" cy="32" r="24"></circle>234            <path d="M26 42 L26 22 L36 22 C40 22 43 25 43 29 C43 33 40 36 36 36 L26 36" stroke-linecap="round"></path>235          </svg>236        </span>237      </h2>238      <div class="transport">239        <div>Parking available</div>240        <div></div>241      </div>242    </div>243 244    <div class="section">245      <h2 class="around-title">246        <span>Around the Property *</span>247        <span class="icon">248          <svg width="80" height="64" viewBox="0 0 80 64">249            <path d="M18 12 L34 12 L28 26 L28 42 L24 42 L24 26 Z"></path>250            <path d="M46 12 L62 12 L56 26 L56 42 L52 42 L52 26 Z"></path>251          </svg>252        </span>253      </h2>254      <div class="label">Restaurant</div>255      <div class="restaurant-row">256        <div>Drunken Monkey</div>257        <div class="distance">450 ft</div>258      </div>259      <div class="footnote">260        * All distances are measured in straight lines. Actual travel distances may vary.261      </div>262    </div>263  </div>264 265  <!-- CTA -->266  <div class="cta-bar">267    <div class="cta-button">Select rooms</div>268  </div>269 270</div>271</body>272</html>