GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Place Detail UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #202124;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #f5f5f5;21    border-radius: 0;22  }23 24  /* Map area */25  .map {26    position: absolute;27    top: 0;28    left: 0;29    width: 1080px;30    height: 1180px;31    background: #E0E0E0;32    border-bottom: 1px solid #BDBDBD;33    display: flex;34    align-items: center;35    justify-content: center;36    color: #757575;37    font-size: 34px;38  }39  /* Red pin on map */40  .pin {41    position: absolute;42    top: 550px;43    left: 680px;44    width: 38px;45    height: 56px;46    background: #e53935;47    border-radius: 20px 20px 20px 0;48    transform: rotate(45deg);49    box-shadow: 0 2px 4px rgba(0,0,0,0.25);50  }51  .pin::after {52    content: "";53    position: absolute;54    width: 18px;55    height: 18px;56    background: #fff;57    border-radius: 50%;58    top: 19px;59    left: 10px;60  }61 62  /* Search bar on top */63  .search-bar {64    position: absolute;65    top: 40px;66    left: 24px;67    right: 24px;68    height: 116px;69    background: #fff;70    border-radius: 58px;71    box-shadow: 0 6px 20px rgba(0,0,0,0.18);72    display: flex;73    align-items: center;74    padding: 0 26px;75    gap: 22px;76  }77  .icon-btn {78    width: 64px;79    height: 64px;80    border-radius: 50%;81    display: inline-flex;82    align-items: center;83    justify-content: center;84  }85  .search-text {86    flex: 1;87    font-size: 36px;88    color: #202124;89    white-space: nowrap;90    overflow: hidden;91    text-overflow: ellipsis;92  }93 94  /* Floating "See similar places" */95  .bubble {96    position: absolute;97    top: 420px;98    left: 260px;99    width: 560px;100    height: 90px;101    background: #fff;102    border-radius: 45px;103    box-shadow: 0 6px 18px rgba(0,0,0,0.18);104    display: flex;105    align-items: center;106    justify-content: center;107    font-size: 34px;108    color: #202124;109  }110 111  /* Street view thumb */112  .streetview {113    position: absolute;114    left: 30px;115    bottom: 120px;116    width: 280px;117    height: 170px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    border-radius: 16px;121    display: flex;122    align-items: center;123    justify-content: center;124    color: #757575;125    font-size: 28px;126    overflow: hidden;127  }128 129  /* Bottom sheet */130  .sheet {131    position: absolute;132    top: 1080px;133    left: 0;134    right: 0;135    height: 1320px;136    background: #fff;137    border-radius: 28px 28px 0 0;138    box-shadow: 0 -6px 18px rgba(0,0,0,0.18);139    padding: 14px 36px 160px;140  }141  .grabber {142    width: 130px;143    height: 12px;144    background: #E0E0E0;145    border-radius: 6px;146    margin: 8px auto 22px;147  }148  .place-title {149    font-size: 54px;150    font-weight: 700;151    margin: 8px 0 16px;152  }153  .rating-row {154    display: flex;155    align-items: center;156    gap: 14px;157    color: #5f6368;158    font-size: 32px;159    margin-bottom: 10px;160  }161  .stars {162    display: inline-flex;163    gap: 4px;164  }165  .meta {166    color: #5f6368;167    font-size: 32px;168    margin: 4px 0 8px;169  }170  .status {171    font-size: 32px;172    margin-bottom: 26px;173  }174  .status .closed {175    color: #d93025;176    font-weight: 600;177  }178 179  .actions {180    display: flex;181    gap: 22px;182    margin-bottom: 28px;183    flex-wrap: wrap;184  }185  .btn {186    height: 96px;187    padding: 0 32px;188    border-radius: 48px;189    border: 1px solid #E0E0E0;190    display: inline-flex;191    align-items: center;192    gap: 16px;193    font-size: 34px;194    color: #202124;195    background: #fff;196  }197  .btn-primary {198    background: #1a73e8;199    color: #fff;200    border-color: #1a73e8;201  }202 203  .photos {204    display: flex;205    gap: 24px;206    margin-top: 10px;207  }208  .photo-large {209    flex: 1;210    height: 640px;211    background: #E0E0E0;212    border: 1px solid #BDBDBD;213    border-radius: 22px;214    display: flex;215    align-items: center;216    justify-content: center;217    color: #757575;218    font-size: 34px;219    overflow: hidden;220  }221  .photo-side {222    width: 320px;223    height: 640px;224    background: #E0E0E0;225    border: 1px solid #BDBDBD;226    border-radius: 22px;227    display: flex;228    align-items: center;229    justify-content: center;230    color: #757575;231    font-size: 30px;232  }233 234  /* Snackbar */235  .snackbar {236    position: absolute;237    left: 24px;238    right: 24px;239    bottom: 190px;240    height: 120px;241    background: #212121;242    color: #fff;243    border-radius: 18px;244    display: flex;245    align-items: center;246    justify-content: space-between;247    padding: 0 32px;248    box-shadow: 0 8px 20px rgba(0,0,0,0.35);249    font-size: 34px;250  }251  .snackbar .action {252    color: #8ab4f8;253    font-weight: 600;254  }255 256  /* Gesture bar */257  .gesture {258    position: absolute;259    bottom: 28px;260    left: 50%;261    transform: translateX(-50%);262    width: 220px;263    height: 12px;264    background: #e0e0e0;265    border-radius: 8px;266  }267 268  /* Utility */269  .dot {270    width: 6px;271    height: 6px;272    border-radius: 50%;273    background: #9aa0a6;274    display: inline-block;275    margin: 0 12px;276  }277  .tiny-logo {278    width: 84px;279    height: 84px;280    border-radius: 10px;281    background: #E0E0E0;282    border: 1px solid #BDBDBD;283    display: flex;284    align-items: center;285    justify-content: center;286    color: #757575;287    font-size: 20px;288    margin-left: auto;289  }290  .nowrap {291    white-space: nowrap;292  }293</style>294</head>295<body>296<div id="render-target">297 298  <!-- Map placeholder -->299  <div class="map">[IMG: Map of neighborhood]</div>300  <div class="pin"></div>301 302  <!-- Top search/placename bar -->303  <div class="search-bar">304    <div class="icon-btn" aria-label="Back">305      <svg width="36" height="36" viewBox="0 0 24 24" fill="#5f6368">306        <path d="M15.5 19l-7-7 7-7" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307      </svg>308    </div>309    <div class="search-text">East Side Grocery, 1422 2nd Ave…</div>310    <div class="icon-btn" aria-label="Clear">311      <svg width="30" height="30" viewBox="0 0 24 24" stroke="#5f6368" fill="none" stroke-width="2">312        <path d="M6 6l12 12M6 18L18 6" stroke-linecap="round"/>313      </svg>314    </div>315    <div class="icon-btn" aria-label="Voice search">316      <svg width="28" height="28" viewBox="0 0 24 24" fill="#5f6368">317        <rect x="10" y="4" width="4" height="10" rx="2"></rect>318        <path d="M7 11a5 5 0 0 0 10 0" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>319        <path d="M12 16v3" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>320      </svg>321    </div>322  </div>323 324  <!-- Floating similar places bubble -->325  <div class="bubble">See similar places</div>326 327  <!-- Street view thumbnail -->328  <div class="streetview">[IMG: Street View]</div>329 330  <!-- Bottom sheet with details -->331  <div class="sheet">332    <div class="grabber"></div>333 334    <div style="display:flex; align-items:center; gap:16px;">335      <div class="place-title">East Side Grocery</div>336      <div class="tiny-logo">Logo</div>337    </div>338 339    <div class="rating-row">340      <span>4.6</span>341      <div class="stars" aria-hidden="true">342        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6.1L12 16l-5.5 3.2 1-6.1L3 8.9 9 8z"/></svg>343        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6.1L12 16l-5.5 3.2 1-6.1L3 8.9 9 8z"/></svg>344        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6.1L12 16l-5.5 3.2 1-6.1L3 8.9 9 8z"/></svg>345        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6.1L12 16l-5.5 3.2 1-6.1L3 8.9 9 8z"/></svg>346        <svg width="30" height="30" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6.1L12 16l-5.5 3.2 1-6.1L3 8.9 9 8z"/></svg>347      </div>348      <span>(32)</span>349    </div>350 351    <div class="meta">Grocery store <span class="dot"></span> <span class="nowrap">Accessibility</span></div>352    <div class="status"><span class="closed">Closed</span> · Opens 7 am</div>353 354    <div class="actions">355      <div class="btn btn-primary">356        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">357          <path d="M12 2l6 6-6 14-6-14 6-6z"/>358        </svg>359        Directions360      </div>361      <div class="btn">362        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a73e8">363          <path d="M6.6 2l10.8 20-3 .9L3.5 5.3 6.6 2z"/>364        </svg>365        Call366      </div>367      <div class="btn">368        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a73e8">369          <path d="M4 4h16v12H7l-3 4V4z"/>370        </svg>371        Chat372      </div>373      <div class="btn">374        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a73e8">375          <path d="M6 2h12v20l-6-4-6 4V2z"/>376        </svg>377        Saved378      </div>379    </div>380 381    <div class="photos">382      <div class="photo-large">[IMG: East Side Grocery storefront]</div>383      <div class="photo-side">[IMG: Product cans collage]</div>384    </div>385  </div>386 387  <!-- Snackbar -->388  <div class="snackbar">389    <div>Saved in Want to go</div>390    <div class="action">See list</div>391  </div>392 393  <!-- Gesture bar -->394  <div class="gesture"></div>395 396</div>397</body>398</html>