GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Map UI - Lenox Hill</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: #f4f4f4;13  }14 15  /* Map placeholder fills the screen */16  .map-area {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 2400px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex;26    align-items: center;27    justify-content: center;28    letter-spacing: 0.5px;29    font-size: 28px;30    text-transform: uppercase;31  }32 33  /* Android status bar */34  .status-bar {35    position: absolute;36    top: 0;37    left: 0;38    width: 1080px;39    height: 88px;40    padding: 0 28px;41    box-sizing: border-box;42    display: flex;43    align-items: center;44    justify-content: space-between;45    color: #222;46    font-size: 30px;47    background: rgba(255, 255, 255, 0.0);48  }49  .status-icons {50    display: flex;51    align-items: center;52    gap: 16px;53  }54  .icon-battery, .icon-signal, .icon-wifi {55    width: 36px; height: 24px;56  }57 58  /* Search pill */59  .search-bar {60    position: absolute;61    top: 110px;62    left: 36px;63    width: 1008px;64    height: 110px;65    background: #ffffff;66    border-radius: 56px;67    box-shadow: 0 6px 22px rgba(0,0,0,0.18);68    display: flex;69    align-items: center;70    padding: 0 26px;71    box-sizing: border-box;72    gap: 20px;73  }74  .search-icon-wrap {75    width: 64px; height: 64px;76    display: flex; align-items: center; justify-content: center;77    background: #F2F2F2;78    border-radius: 50%;79  }80  .search-text {81    flex: 1;82    font-size: 34px;83    color: #2b2b2b;84    white-space: nowrap;85    overflow: hidden;86    text-overflow: ellipsis;87  }88  .search-actions {89    display: flex;90    align-items: center;91    gap: 18px;92  }93  .icon-btn {94    width: 56px; height: 56px;95    display: flex; align-items: center; justify-content: center;96    border-radius: 50%;97    background: #F6F6F6;98  }99 100  /* Bottom place sheet */101  .bottom-sheet {102    position: absolute;103    left: 0;104    bottom: 0;105    width: 1080px;106    height: 560px;107    background: #ffffff;108    border-top-left-radius: 28px;109    border-top-right-radius: 28px;110    box-shadow: 0 -6px 18px rgba(0,0,0,0.2);111    padding: 22px 36px;112    box-sizing: border-box;113  }114  .sheet-handle {115    width: 120px; height: 10px;116    background: #e0e0e0;117    border-radius: 8px;118    margin: 6px auto 18px;119  }120  .place-title {121    font-size: 50px;122    color: #111;123    margin: 6px 0 8px;124    font-weight: 700;125  }126  .place-sub {127    font-size: 30px;128    color: #666;129    margin-bottom: 26px;130  }131 132  .actions-row {133    display: flex;134    gap: 22px;135    flex-wrap: nowrap;136  }137  .pill-btn {138    flex: 0 0 auto;139    display: flex;140    align-items: center;141    gap: 16px;142    padding: 22px 28px;143    border-radius: 60px;144    border: 1px solid #e0e0e0;145    color: #1a73e8;146    background: #e8f0fe;147    font-size: 30px;148    font-weight: 600;149  }150  .pill-btn.secondary {151    background: #fff;152    color: #333;153  }154 155  /* Street view thumbnail */156  .thumb {157    position: absolute;158    left: 36px;159    bottom: 570px;160    width: 320px;161    height: 190px;162    background: #E0E0E0;163    border: 1px solid #BDBDBD;164    color: #757575;165    display: flex;166    align-items: center;167    justify-content: center;168    font-size: 24px;169    border-radius: 10px;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Map visual -->177  <div class="map-area">[IMG: Google Map]</div>178 179  <!-- Status bar -->180  <div class="status-bar">181    <div class="time">8:45</div>182    <div class="status-icons">183      <!-- Simple signal icon -->184      <svg class="icon-signal" viewBox="0 0 24 24" fill="#333">185        <rect x="2" y="14" width="3" height="8"></rect>186        <rect x="7" y="11" width="3" height="11"></rect>187        <rect x="12" y="7" width="3" height="15"></rect>188        <rect x="17" y="3" width="3" height="19"></rect>189      </svg>190      <!-- WiFi -->191      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#333">192        <path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20z"></path>193        <path d="M2 9c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 9z"></path>194        <path d="M5 13c4-3 10-3 14 0l-2 2c-2.8-2-7.2-2-10 0l-2-2z"></path>195      </svg>196      <!-- Battery -->197      <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">198        <rect x="1" y="6" width="18" height="12" rx="2"></rect>199        <rect x="3" y="8" width="14" height="8" fill="#333"></rect>200        <rect x="20" y="10" width="3" height="6" fill="#333"></rect>201      </svg>202    </div>203  </div>204 205  <!-- Search bar -->206  <div class="search-bar">207    <div class="search-icon-wrap">208      <svg width="28" height="28" viewBox="0 0 24 24" fill="#333">209        <path d="M15 18l-6-6 6-6v12z"></path>210      </svg>211    </div>212    <div class="search-text">Lenox Hill, New York, NY 10021...</div>213    <div class="search-actions">214      <div class="icon-btn">215        <svg width="22" height="22" viewBox="0 0 24 24" fill="#333">216          <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.29-6.3 1.42 1.42z"/>217        </svg>218      </div>219      <div class="icon-btn">220        <svg width="22" height="22" viewBox="0 0 24 24" fill="#333">221          <path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 3 3.87V20a1 1 0 1 0 2 0v-4.13A4 4 0 0 0 16 12V7a4 4 0 0 0-4-4z"/>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- Street view image thumbnail -->228  <div class="thumb">[IMG: Street View]</div>229 230  <!-- Bottom details sheet -->231  <div class="bottom-sheet">232    <div class="sheet-handle"></div>233    <div class="place-title">Lenox Hill</div>234    <div class="place-sub">New York, NY 10021, USA</div>235 236    <div class="actions-row">237      <div class="pill-btn">238        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a73e8">239          <path d="M12 2l4 8-8 0 4-8zm0 20l-4-8 8 0-4 8z"/>240        </svg>241        <span>Directions</span>242      </div>243      <div class="pill-btn secondary">244        <svg width="28" height="28" viewBox="0 0 24 24" fill="#5f6368">245          <path d="M6 4h12v2H6zM6 9h12v2H6zM6 14h12v2H6z"/>246        </svg>247        <span>Save</span>248      </div>249      <div class="pill-btn secondary">250        <svg width="28" height="28" viewBox="0 0 24 24" fill="#5f6368">251          <path d="M18 8a3 3 0 0 0-2.82 2H8.82A3 3 0 0 0 6 8 3 3 0 1 0 8.82 6h6.36A3 3 0 1 0 18 8zM6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm12 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>252        </svg>253        <span>Share</span>254      </div>255      <div class="pill-btn secondary">256        <svg width="28" height="28" viewBox="0 0 24 24" fill="#5f6368">257          <path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z"/>258        </svg>259        <span>Add</span>260      </div>261    </div>262  </div>263 264</div>265</body>266</html>