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>Golden Gate Bridge - Maps UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #cfe7f7; /* map water tone */15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 60px;24    padding: 12px 20px;25    color: #1f1f1f;26    font-size: 28px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    opacity: 0.9;31  }32  .status-icons { display: flex; gap: 16px; }33 34  /* Map section */35  .map-section {36    position: absolute;37    top: 60px;38    left: 0;39    width: 1080px;40    height: 1250px;41  }42  .map-image {43    position: absolute;44    left: 0;45    top: 0;46    width: 1080px;47    height: 1250px;48    background: #E0E0E0;49    border: 1px solid #BDBDBD;50    display: flex;51    align-items: center;52    justify-content: center;53    color: #757575;54    font-size: 30px;55  }56 57  /* Search bar */58  .search-bar {59    position: absolute;60    top: 95px;61    left: 60px;62    width: 960px;63    height: 110px;64    background: #ffffff;65    border-radius: 55px;66    box-shadow: 0 6px 14px rgba(0,0,0,0.15);67    display: flex;68    align-items: center;69    padding: 0 26px;70    gap: 22px;71  }72  .search-text {73    flex: 1;74    font-size: 34px;75    color: #1f1f1f;76    white-space: nowrap;77    overflow: hidden;78    text-overflow: ellipsis;79  }80  .chip {81    position: absolute;82    top: 230px;83    left: 260px;84    width: 560px;85    height: 90px;86    background: #ffffff;87    border-radius: 45px;88    box-shadow: 0 6px 14px rgba(0,0,0,0.18);89    display: flex;90    align-items: center;91    justify-content: center;92    font-size: 32px;93    color: #333;94  }95 96  /* Map overlays */97  .red-pin {98    position: absolute;99    top: 530px;100    left: 420px;101    width: 60px;102    height: 90px;103  }104  .pin-head {105    position: absolute;106    top: 0;107    left: 12px;108    width: 36px;109    height: 36px;110    background: #d63d3d;111    border-radius: 50%;112  }113  .pin-tail {114    position: absolute;115    top: 28px;116    left: 24px;117    width: 12px;118    height: 62px;119    background: #d63d3d;120    border-radius: 6px;121  }122  .sf-label {123    position: absolute;124    top: 720px;125    left: 360px;126    font-size: 68px;127    color: rgba(0,0,0,0.5);128    font-weight: 600;129  }130  .preview-card {131    position: absolute;132    left: 40px;133    bottom: 40px;134    width: 320px;135    height: 200px;136    border-radius: 20px;137    overflow: hidden;138    box-shadow: 0 6px 16px rgba(0,0,0,0.25);139  }140  .preview-card .img {141    width: 100%;142    height: 100%;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #757575;149    font-size: 26px;150  }151 152  /* Bottom sheet */153  .bottom-sheet {154    position: absolute;155    top: 1220px;156    left: 0;157    width: 1080px;158    height: 1180px;159    background: #ffffff;160    border-top-left-radius: 36px;161    border-top-right-radius: 36px;162    box-shadow: 0 -6px 14px rgba(0,0,0,0.18);163  }164  .sheet-handle {165    position: absolute;166    top: 16px;167    left: 50%;168    transform: translateX(-50%);169    width: 140px;170    height: 12px;171    border-radius: 6px;172    background: #E0E0E0;173  }174  .sheet-content {175    position: absolute;176    top: 54px;177    left: 40px;178    right: 40px;179    bottom: 40px;180  }181  .place-title {182    font-size: 52px;183    font-weight: 700;184    color: #1f1f1f;185    margin-top: 14px;186  }187  .rating-row {188    display: flex;189    align-items: center;190    gap: 10px;191    margin-top: 12px;192    font-size: 30px;193    color: #555;194  }195  .stars { display: inline-flex; gap: 6px; }196  .category-row {197    margin-top: 8px;198    font-size: 30px;199    color: #777;200    display: flex;201    align-items: center;202    gap: 12px;203  }204 205  /* Action buttons */206  .actions {207    margin-top: 28px;208    display: flex;209    gap: 18px;210    flex-wrap: wrap;211  }212  .btn {213    display: flex;214    align-items: center;215    gap: 14px;216    padding: 22px 32px;217    border-radius: 40px;218    font-size: 32px;219    border: 1px solid #DADCE0;220    color: #1f1f1f;221    background: #ffffff;222  }223  .btn.primary {224    background: #1a73e8;225    color: #ffffff;226    border-color: #1a73e8;227  }228 229  /* Media grid */230  .media-grid {231    margin-top: 28px;232    display: grid;233    grid-template-columns: 1fr 0.76fr;234    gap: 24px;235    height: 720px;236  }237  .media-large, .media-small {238    position: relative;239    border-radius: 26px;240    overflow: hidden;241  }242  .media-large .img,243  .media-small .img {244    width: 100%;245    height: 100%;246    background: #E0E0E0;247    border: 1px solid #BDBDBD;248    display: flex;249    align-items: center;250    justify-content: center;251    color: #757575;252    font-size: 30px;253  }254  .media-small {255    display: grid;256    grid-template-rows: 1fr 1fr;257    gap: 24px;258  }259  .immersive-pill {260    position: absolute;261    top: 16px;262    left: 16px;263    padding: 14px 18px;264    background: rgba(33,33,33,0.85);265    color: #fff;266    font-size: 28px;267    border-radius: 14px;268    display: inline-flex;269    align-items: center;270    gap: 10px;271  }272 273  /* Simple icon size helpers */274  .icon-32 { width: 32px; height: 32px; }275  .icon-40 { width: 40px; height: 40px; }276  .icon-50 { width: 50px; height: 50px; }277  .yellow { fill: #FFC107; }278  .gray { fill: #666; }279  .blue { fill: #1a73e8; }280</style>281</head>282<body>283<div id="render-target">284 285  <!-- Status bar -->286  <div class="status-bar">287    <div>6:15</div>288    <div class="status-icons">289      <svg class="icon-32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#555"/></svg>290      <svg class="icon-32" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#555"/></svg>291      <svg class="icon-32" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#555" stroke-width="2"/></svg>292    </div>293  </div>294 295  <!-- Map section -->296  <div class="map-section">297    <div class="map-image">[IMG: Map of San Francisco Bay with location pin]</div>298 299    <!-- Search bar -->300    <div class="search-bar">301      <!-- Back arrow -->302      <svg class="icon-50 gray" viewBox="0 0 24 24">303        <path d="M15 6L9 12l6 6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>304      </svg>305      <div class="search-text">Golden Gate Bridge, Golden...</div>306      <!-- Clear X -->307      <svg class="icon-40 gray" viewBox="0 0 24 24">308        <path d="M6 6l12 12M18 6L6 18" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>309      </svg>310      <!-- Search icon -->311      <svg class="icon-40 gray" viewBox="0 0 24 24">312        <circle cx="10" cy="10" r="6" stroke="#5f6368" stroke-width="2" fill="none"/>313        <path d="M15 15l5 5" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>314      </svg>315      <!-- Mic icon -->316      <svg class="icon-40 gray" viewBox="0 0 24 24">317        <rect x="9" y="5" width="6" height="8" rx="3" fill="#5f6368"/>318        <path d="M12 13v5M8 18h8" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>319      </svg>320    </div>321 322    <!-- Attractions chip -->323    <div class="chip">See nearby attractions</div>324 325    <!-- Red pin marker -->326    <div class="red-pin">327      <div class="pin-head"></div>328      <div class="pin-tail"></div>329    </div>330 331    <!-- City label -->332    <div class="sf-label">San Francisco</div>333 334    <!-- Bottom-left preview -->335    <div class="preview-card">336      <div class="img">[IMG: Photo preview panorama]</div>337    </div>338  </div>339 340  <!-- Bottom sheet -->341  <div class="bottom-sheet">342    <div class="sheet-handle"></div>343    <div class="sheet-content">344      <div class="place-title">Golden Gate Bridge</div>345      <div class="rating-row">346        <div>4.8</div>347        <div class="stars">348          <svg class="icon-32 yellow" viewBox="0 0 20 20"><path d="M10 1l2.3 5.6h6L14 10.8l1.8 6.2L10 13.3 4.2 17l1.8-6.2L1.7 6.6h6z"/></svg>349          <svg class="icon-32 yellow" viewBox="0 0 20 20"><path d="M10 1l2.3 5.6h6L14 10.8l1.8 6.2L10 13.3 4.2 17l1.8-6.2L1.7 6.6h6z"/></svg>350          <svg class="icon-32 yellow" viewBox="0 0 20 20"><path d="M10 1l2.3 5.6h6L14 10.8l1.8 6.2L10 13.3 4.2 17l1.8-6.2L1.7 6.6h6z"/></svg>351          <svg class="icon-32 yellow" viewBox="0 0 20 20"><path d="M10 1l2.3 5.6h6L14 10.8l1.8 6.2L10 13.3 4.2 17l1.8-6.2L1.7 6.6h6z"/></svg>352          <svg class="icon-32 yellow" viewBox="0 0 20 20"><path d="M10 1l2.3 5.6h6L14 10.8l1.8 6.2L10 13.3 4.2 17l1.8-6.2L1.7 6.6h6z"/></svg>353        </div>354        <div>(70,366)</div>355      </div>356      <div class="category-row">357        <div>Bridge</div>358        <svg class="icon-32 gray" viewBox="0 0 24 24">359          <circle cx="8" cy="8" r="4" fill="#757575"/>360          <path d="M12 14l4 2-2 5M8 12l3 4" stroke="#757575" stroke-width="2" stroke-linecap="round"/>361        </svg>362      </div>363 364      <!-- Actions -->365      <div class="actions">366        <div class="btn primary">367          <svg class="icon-40" viewBox="0 0 24 24"><path d="M4 12l8-8 8 8-8 8-8-8z" fill="#fff"/></svg>368          <div>Directions</div>369        </div>370        <div class="btn">371          <svg class="icon-40 gray" viewBox="0 0 24 24">372            <path d="M6 4c4 8 8 10 12 12l-3 3c-5-2-9-6-12-12z" fill="#5f6368"/>373          </svg>374          <div>Call</div>375        </div>376        <div class="btn">377          <svg class="icon-40 gray" viewBox="0 0 24 24">378            <rect x="4" y="5" width="16" height="14" rx="2" fill="#5f6368"/>379            <rect x="7" y="8" width="10" height="2" fill="#fff"/>380            <rect x="7" y="12" width="10" height="2" fill="#fff"/>381          </svg>382          <div>Directory</div>383        </div>384        <div class="btn">385          <svg class="icon-40 gray" viewBox="0 0 24 24">386            <path d="M6 4h12v16l-6-4-6 4z" fill="#5f6368"/>387          </svg>388          <div>Save</div>389        </div>390      </div>391 392      <!-- Media grid -->393      <div class="media-grid">394        <div class="media-large">395          <div class="img">[IMG: Aerial view of Golden Gate Bridge over water]</div>396          <div class="immersive-pill">397            <svg class="icon-32" viewBox="0 0 24 24">398              <rect x="4" y="4" width="6" height="6" stroke="#fff" stroke-width="2" fill="none"/>399              <rect x="14" y="4" width="6" height="6" stroke="#fff" stroke-width="2" fill="none"/>400              <rect x="4" y="14" width="6" height="6" stroke="#fff" stroke-width="2" fill="none"/>401              <rect x="14" y="14" width="6" height="6" stroke="#fff" stroke-width="2" fill="none"/>402            </svg>403            <span>Immersive View</span>404          </div>405        </div>406        <div class="media-small">407          <div class="img">[IMG: Golden Gate Bridge close-up]</div>408          <div class="img">[IMG: Golden Gate Bridge from beach]</div>409        </div>410      </div>411    </div>412  </div>413 414</div>415</body>416</html>