GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Pete's Kitchen - Map UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #f5f6f7;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 88px;24    padding: 0 24px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #111;30    font-size: 34px;31    letter-spacing: 0.5px;32    background: transparent;33    z-index: 5;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 22px;39    color: #444;40    font-size: 28px;41  }42  /* Map */43  .map-area {44    position: absolute;45    top: 0;46    left: 0;47    width: 1080px;48    height: 1320px;49    background: #e0e0e0;50    border-bottom: 1px solid #cfcfcf;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #6a6a6a;55    font-size: 32px;56  }57  .map-label {58    position: absolute;59    left: 330px;60    top: 570px;61    color: #d44;62    font-weight: bold;63    font-size: 40px;64    text-shadow: 0 2px 0 #fff;65  }66  .map-pin {67    position: absolute;68    left: 510px;69    top: 545px;70    width: 38px;71    height: 56px;72  }73  /* Search bar */74  .search-bar {75    position: absolute;76    top: 120px;77    left: 24px;78    right: 24px;79    height: 96px;80    border-radius: 48px;81    background: #ffffff;82    box-shadow: 0 2px 8px rgba(0,0,0,0.15);83    display: flex;84    align-items: center;85    padding: 0 20px;86    box-sizing: border-box;87    z-index: 6;88    gap: 18px;89  }90  .search-input {91    flex: 1;92    color: #222;93    font-size: 34px;94    white-space: nowrap;95    overflow: hidden;96    text-overflow: ellipsis;97  }98  .chip {99    position: absolute;100    top: 238px;101    left: 240px;102    height: 84px;103    padding: 0 26px;104    border-radius: 42px;105    background: #ffffff;106    color: #2f2f2f;107    font-size: 32px;108    display: inline-flex;109    align-items: center;110    gap: 12px;111    box-shadow: 0 2px 8px rgba(0,0,0,0.18);112    z-index: 4;113  }114  /* Street view thumbnail */115  .street-thumb {116    position: absolute;117    left: 24px;118    bottom: 970px;119    width: 320px;120    height: 180px;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    color: #757575;124    display: flex;125    align-items: center;126    justify-content: center;127    z-index: 4;128    border-radius: 14px;129  }130 131  /* Bottom sheet */132  .sheet {133    position: absolute;134    left: 0;135    right: 0;136    bottom: 0;137    height: 1180px;138    background: #fff;139    border-top-left-radius: 28px;140    border-top-right-radius: 28px;141    box-shadow: 0 -8px 20px rgba(0,0,0,0.25);142    padding: 24px 24px 40px;143    box-sizing: border-box;144    z-index: 7;145  }146  .sheet .handle {147    width: 140px;148    height: 10px;149    background: #d2d2d2;150    border-radius: 5px;151    margin: 8px auto 18px auto;152  }153  .place-title {154    font-size: 54px;155    font-weight: 700;156    color: #1b1b1b;157    margin: 8px 0;158  }159  .rating-row {160    display: flex;161    align-items: center;162    gap: 12px;163    color: #444;164    font-size: 32px;165    margin: 8px 0 10px 0;166  }167  .stars svg {168    width: 30px;169    height: 30px;170    fill: #f7b500;171  }172  .sub-info {173    color: #5d5d5d;174    font-size: 32px;175    margin: 8px 0 12px 0;176  }177  .open-status {178    color: #0a944a;179    font-size: 36px;180    margin: 8px 0 24px 0;181  }182  .actions {183    display: flex;184    align-items: center;185    gap: 22px;186    margin: 10px 0 26px 0;187  }188  .btn {189    height: 110px;190    padding: 0 36px;191    border-radius: 60px;192    display: inline-flex;193    align-items: center;194    gap: 16px;195    font-size: 36px;196    border: 1px solid #cfd8dc;197    color: #1b1b1b;198    background: #fff;199  }200  .btn.primary {201    background: #1a73e8;202    color: #fff;203    border: none;204  }205  .btn svg {206    width: 36px;207    height: 36px;208    fill: currentColor;209  }210 211  .photo-grid {212    display: grid;213    grid-template-columns: 1.2fr 0.9fr;214    gap: 22px;215    margin-top: 8px;216  }217  .img-box {218    width: 100%;219    height: 520px;220    background: #E0E0E0;221    border: 1px solid #BDBDBD;222    color: #6c6c6c;223    display: flex;224    align-items: center;225    justify-content: center;226    border-radius: 16px;227    font-size: 32px;228    text-align: center;229    padding: 10px;230    box-sizing: border-box;231  }232 233  /* Small helpers */234  .icon-btn {235    width: 60px;236    height: 60px;237    border-radius: 50%;238    background: #f0f0f0;239    display: inline-flex;240    align-items: center;241    justify-content: center;242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status bar -->249  <div class="status-bar">250    <div style="font-weight:600;">10:57</div>251    <div class="status-icons">252      <span>🔋</span>253      <span>📶</span>254      <span>📳</span>255    </div>256  </div>257 258  <!-- Map area -->259  <div class="map-area">260    [IMG: Google Map around East Colfax, Denver]261  </div>262 263  <!-- Map pin and label -->264  <svg class="map-pin" viewBox="0 0 24 24">265    <path fill="#d32f2f" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>266  </svg>267  <div class="map-label">Pete's Kitchen</div>268 269  <!-- Search bar -->270  <div class="search-bar">271    <div class="icon-btn" title="Back">272      <svg viewBox="0 0 24 24">273        <path d="M15.5 4.5 7 12l8.5 7.5" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>274      </svg>275    </div>276    <div class="search-input">Pete's Kitchen, East Colfax Ave</div>277    <div class="icon-btn" title="Clear">278      <svg viewBox="0 0 24 24">279        <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round"/>280      </svg>281    </div>282    <div class="icon-btn" title="Voice">283      <svg viewBox="0 0 24 24">284        <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-6 8a6 6 0 0 0 12 0M12 17v4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>285      </svg>286    </div>287  </div>288 289  <!-- Chip -->290  <div class="chip">291    <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#616161;">292      <path d="M3 10h18v2H3zm2 4h14v2H5zM6 6h12v2H6z"/>293    </svg>294    See nearby restaurants295  </div>296 297  <!-- Street view thumbnail -->298  <div class="street-thumb">[IMG: Street View Thumbnail]</div>299 300  <!-- Bottom sheet with place details -->301  <div class="sheet">302    <div class="handle"></div>303 304    <div class="place-title">Pete's Kitchen</div>305 306    <div class="rating-row">307      <div class="stars">308        <svg viewBox="0 0 24 24"><path d="M12 2l2.7 5.6 6.3.9-4.6 4.5 1.1 6.3L12 16.7 6.5 19.3l1.1-6.3L3 8.5l6.3-.9z"/></svg>309        <svg viewBox="0 0 24 24"><path d="M12 2l2.7 5.6 6.3.9-4.6 4.5 1.1 6.3L12 16.7 6.5 19.3l1.1-6.3L3 8.5l6.3-.9z"/></svg>310        <svg viewBox="0 0 24 24"><path d="M12 2l2.7 5.6 6.3.9-4.6 4.5 1.1 6.3L12 16.7 6.5 19.3l1.1-6.3L3 8.5l6.3-.9z"/></svg>311        <svg viewBox="0 0 24 24"><path d="M12 2l2.7 5.6 6.3.9-4.6 4.5 1.1 6.3L12 16.7 6.5 19.3l1.1-6.3L3 8.5l6.3-.9z"/></svg>312        <svg viewBox="0 0 24 24"><path d="M12 2l2.7 5.6 6.3.9-4.6 4.5 1.1 6.3L12 16.7 6.5 19.3l1.1-6.3L3 8.5l6.3-.9z"/></svg>313      </div>314      <div>4.5 (5,033)</div>315    </div>316 317    <div class="sub-info">Diner · $10–20</div>318    <div class="open-status">Open 24 hours</div>319 320    <div class="actions">321      <div class="btn primary">322        <svg viewBox="0 0 24 24">323          <path d="M12 2l3.5 6h-7L12 2zm0 20l-3.5-6h7L12 22zM2 12l6-3.5v7L2 12zm20 0l-6 3.5v-7L22 12z"/>324        </svg>325        Directions326      </div>327      <div class="btn">328        <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.7 3 3.6 4.9 6.6 6.6l2.2-2.2c.3-.3.9-.4 1.3-.2 1 .4 2.1.7 3.3.8.5 0 .9.4.9.9V21c0 .5-.4.9-.9.9C9.8 21.9 2.1 14.2 2.1 4.9c0-.5.4-.9.9-.9H6c .5 0 .9.4 .9 .9 .1 1.2 .4 2.3 .8 3.3 .1 .4 0 1-.3 1.3l-1.8 1.3z" /></svg>329        Call330      </div>331      <div class="btn">332        <svg viewBox="0 0 24 24"><path d="M6 4h12v16H6zM9 2h6v4H9z"/></svg>333        Save334      </div>335      <div class="btn">336        <svg viewBox="0 0 24 24"><path d="M18 8l-6-6-6 6h4v6h4V8h4zm-14 9h16v3H4z"/></svg>337        Share338      </div>339    </div>340 341    <div class="photo-grid">342      <div class="img-box">[IMG: Exterior photo of Pete's Kitchen with neon sign]</div>343      <div class="img-box">[IMG: Interior diner seating and counter]</div>344    </div>345  </div>346 347</div>348</body>349</html>