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>Leisure Valley Park - Map UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Map layer */18  .map-area {19    position: absolute;20    inset: 0;21    background: #EEF2F4;22  }23  .map-area .map-placeholder {24    position: absolute;25    left: 24px;26    right: 24px;27    top: 120px;28    bottom: 520px;29    border: 1px solid #BDBDBD;30    background: #E0E0E0;31    color: #757575;32    display: flex;33    align-items: center;34    justify-content: center;35    border-radius: 8px;36    font-size: 28px;37    letter-spacing: .2px;38  }39 40  /* Status bar (simple mock) */41  .status-bar {42    position: absolute;43    top: 18px;44    left: 24px;45    right: 24px;46    height: 56px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    color: #1f1f1f;51    font-size: 28px;52    opacity: .9;53  }54  .status-icons {55    display: flex;56    align-items: center;57    gap: 16px;58  }59  .dot { width: 8px; height: 8px; background: #555; border-radius: 50%; display: inline-block; }60 61  /* Search pill */62  .search-pill {63    position: absolute;64    left: 24px;65    right: 24px;66    top: 84px;67    height: 120px;68    background: #ffffff;69    border-radius: 60px;70    box-shadow: 0 6px 16px rgba(0,0,0,0.15);71    display: flex;72    align-items: center;73    padding: 0 28px;74    gap: 22px;75  }76  .icon-btn {77    width: 64px;78    height: 64px;79    border-radius: 32px;80    display: grid;81    place-items: center;82    color: #1f1f1f;83  }84  .search-text {85    flex: 1;86    color: #222;87    font-size: 36px;88    white-space: nowrap;89    overflow: hidden;90    text-overflow: ellipsis;91  }92 93  /* Floating chip */94  .chip {95    position: absolute;96    top: 260px;97    left: 200px;98    background: #ffffff;99    color: #333;100    border-radius: 40px;101    box-shadow: 0 6px 14px rgba(0,0,0,0.15);102    padding: 22px 32px;103    font-size: 30px;104  }105 106  /* Map marker */107  .pin {108    position: absolute;109    left: 620px;110    top: 640px;111    width: 64px;112    height: 96px;113  }114 115  /* Small thumbnail on map */116  .map-thumb {117    position: absolute;118    left: 32px;119    bottom: 620px;120    width: 310px;121    height: 180px;122    border: 4px solid #ffffff;123    border-radius: 12px;124    box-shadow: 0 6px 14px rgba(0,0,0,0.25);125    overflow: hidden;126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;129  }130 131  /* Bottom sheet */132  .sheet {133    position: absolute;134    left: 0;135    right: 0;136    top: 1180px;137    height: 1220px;138    background: #ffffff;139    border-top-left-radius: 28px;140    border-top-right-radius: 28px;141    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);142  }143  .handle {144    width: 140px; height: 12px; border-radius: 6px; background: #D9D9D9;145    margin: 18px auto 10px auto;146  }147  .sheet-content {148    padding: 24px 32px 0 32px;149  }150  .place-title {151    font-size: 58px;152    font-weight: 700;153    color: #1f1f1f;154    margin: 12px 0 6px 0;155  }156  .subtitle {157    font-size: 30px;158    color: #666;159    margin-bottom: 12px;160  }161  .rating-row {162    display: flex;163    align-items: center;164    gap: 12px;165    flex-wrap: wrap;166    font-size: 30px;167    color: #333;168    margin-bottom: 12px;169  }170  .stars svg { width: 28px; height: 28px; }171  .muted { color: #777; }172  .green { color: #1B8E3E; }173 174  /* Action buttons */175  .actions {176    display: flex;177    gap: 20px;178    margin: 22px 0 28px 0;179  }180  .btn {181    height: 120px;182    padding: 0 34px;183    border-radius: 60px;184    border: 2px solid #D6D9FF;185    color: #3267E3;186    background: #F7F9FF;187    display: inline-flex;188    align-items: center;189    gap: 18px;190    font-size: 36px;191    font-weight: 600;192  }193  .btn.primary {194    background: #2B66F6;195    border-color: #2B66F6;196    color: #fff;197  }198  .btn svg { width: 40px; height: 40px; }199 200  /* Photo grid */201  .photos {202    display: grid;203    grid-template-columns: 1fr 0.48fr;204    gap: 20px;205  }206  .photo-large, .photo-small {207    background: #E0E0E0;208    border: 1px solid #BDBDBD;209    color: #757575;210    display: flex;211    justify-content: center;212    align-items: center;213    border-radius: 18px;214  }215  .photo-large {216    height: 540px;217    font-size: 32px;218  }219  .right-stack {220    display: grid;221    gap: 20px;222  }223  .photo-small {224    height: 260px;225    font-size: 28px;226  }227 228  /* Gesture bar */229  .gesture-bar {230    position: absolute;231    bottom: 18px;232    left: 50%;233    transform: translateX(-50%);234    width: 260px;235    height: 14px;236    background: #C9CCD1;237    border-radius: 8px;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Map Layer -->245  <div class="map-area">246    <div class="status-bar">247      <div>3:25</div>248      <div class="status-icons">249        <span class="dot"></span>250        <span class="dot"></span>251        <span class="dot"></span>252      </div>253    </div>254 255    <div class="search-pill">256      <div class="icon-btn">257        <svg viewBox="0 0 24 24" width="40" height="40" stroke="#333" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">258          <path d="M15 18l-6-6 6-6"></path>259        </svg>260      </div>261      <div class="search-text">Leisure Valley Park, 287, NH...</div>262      <div class="icon-btn">263        <svg viewBox="0 0 24 24" width="34" height="34" stroke="#666" fill="none" stroke-width="2" stroke-linecap="round">264          <path d="M6 6l12 12M18 6L6 18"></path>265        </svg>266      </div>267      <div class="icon-btn">268        <svg viewBox="0 0 24 24" width="34" height="34" fill="#555">269          <path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"></path>270          <path d="M5 12a7 7 0 0 0 14 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"></path>271          <rect x="11" y="19" width="2" height="2" fill="#555"></rect>272        </svg>273      </div>274    </div>275 276    <div class="chip">See nearby attractions</div>277 278    <div class="map-placeholder">[IMG: Map around Leisure Valley Park]</div>279 280    <svg class="pin" viewBox="0 0 24 36">281      <path d="M12 36c4-8 10-13 10-22A10 10 0 0 0 2 14c0 9 6 14 10 22z" fill="#E53935"></path>282      <circle cx="12" cy="14" r="4.2" fill="#fff"></circle>283    </svg>284 285    <div class="map-thumb">[IMG: Street View Thumbnail]</div>286  </div>287 288  <!-- Bottom Sheet -->289  <div class="sheet">290    <div class="handle"></div>291    <div class="sheet-content">292      <div class="place-title">Leisure Valley Park</div>293      <div class="subtitle">लिज़र वैली पार्क</div>294 295      <div class="rating-row">296        <span>4.3</span>297        <span class="stars">298          <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>299          <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>300          <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>301          <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>302          <svg viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>303        </span>304        <span class="muted">(15,418)</span>305      </div>306 307      <div class="rating-row">308        <span class="muted">Park · 🚶 · 🚴 26 min</span>309      </div>310      <div class="rating-row">311        <span class="green">Open</span>312        <span class="muted">· Closes 9 pm</span>313      </div>314 315      <div class="actions">316        <div class="btn primary">317          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">318            <path d="M12 2l4 9-9-4 4 15 1-8 8-1z"></path>319          </svg>320          <span>Directions</span>321        </div>322        <div class="btn">323          <svg viewBox="0 0 24 24" fill="#3267E3">324            <path d="M12 2l7 10-7 10L5 12 12 2z"></path>325          </svg>326          <span>Start</span>327        </div>328        <div class="btn">329          <svg viewBox="0 0 24 24" fill="none" stroke="#3267E3" stroke-width="2">330            <rect x="3" y="6" width="18" height="12" rx="2"></rect>331            <path d="M8 6v12M16 6v12"></path>332          </svg>333          <span>Tickets</span>334        </div>335        <div class="btn">336          <svg viewBox="0 0 24 24" fill="none" stroke="#3267E3" stroke-width="2" stroke-linecap="round">337            <path d="M4 12h16M4 6h12M4 18h12"></path>338          </svg>339          <span>More</span>340        </div>341      </div>342 343      <div class="photos">344        <div class="photo-large">[IMG: Park Photo Wide]</div>345        <div class="right-stack">346          <div class="photo-small">[IMG: Gazebo]</div>347          <div class="photo-small">[IMG: Statue / Trees]</div>348        </div>349      </div>350    </div>351  </div>352 353  <div class="gesture-bar"></div>354</div>355</body>356</html>