GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</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: #ffffff;13  }14  /* Status bar */15  .status-bar {16    height: 90px;17    padding: 0 32px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #212121;22    font-size: 36px;23  }24  .status-icons { display: flex; align-items: center; gap: 26px; }25  .icon-small { width: 34px; height: 34px; }26  /* Header */27  .header {28    background: #fff;29    padding: 20px 28px 24px 28px;30    border-bottom: 1px solid #e6e6e6;31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .back-btn {36    width: 86px;37    height: 86px;38    border-radius: 18px;39    background: #f3f3f3;40    display: flex;41    align-items: center;42    justify-content: center;43  }44  .title-wrap { flex: 1; }45  .title {46    font-size: 48px;47    font-weight: 700;48    color: #1a1a1a;49    line-height: 1.1;50  }51  .subtitle {52    font-size: 30px;53    color: #6b6b6b;54    margin-top: 6px;55  }56  .filter-btn {57    width: 102px;58    height: 102px;59    border-radius: 52px;60    background: #f3f3f3;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  /* Map placeholder */66  .map-area {67    position: relative;68    height: 1180px;69    padding: 0 0;70  }71  .map-placeholder {72    width: 100%;73    height: 100%;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    color: #757575;77    display: flex;78    align-items: center;79    justify-content: center;80    font-size: 34px;81    letter-spacing: 0.3px;82  }83  .price-tag {84    position: absolute;85    background: #ffffff;86    border: 2px solid #e1e1e1;87    padding: 18px 28px;88    border-radius: 50px;89    font-size: 36px;90    color: #212121;91    box-shadow: 0 4px 8px rgba(0,0,0,0.08);92    white-space: nowrap;93  }94  .pin {95    position: absolute;96    width: 30px;97    height: 30px;98    background: #000;99    border-radius: 50%;100    border: 6px solid #ffffff;101    box-shadow: 0 2px 6px rgba(0,0,0,0.2);102  }103  /* Bottom sheet */104  .sheet {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 150px; /* above tab bar */109    height: 980px;110    background: #ffffff;111    border-top-left-radius: 36px;112    border-top-right-radius: 36px;113    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);114    padding: 16px 24px 24px 24px;115  }116  .grabber {117    width: 140px;118    height: 12px;119    background: #cfcfcf;120    border-radius: 6px;121    margin: 8px auto 12px auto;122  }123  .sheet-title {124    text-align: center;125    font-size: 40px;126    font-weight: 700;127    color: #222;128    margin-bottom: 24px;129  }130  .toggle-row {131    display: flex;132    align-items: center;133    background: #fff;134    border: 2px solid #ececec;135    border-radius: 24px;136    padding: 26px;137    margin: 0 4px 24px 4px;138    gap: 26px;139  }140  .toggle-text {141    flex: 1;142  }143  .toggle-title {144    font-size: 40px;145    font-weight: 700;146    color: #111;147    margin-bottom: 10px;148  }149  .toggle-sub {150    font-size: 30px;151    color: #6c6c6c;152  }153  .switch {154    width: 132px;155    height: 76px;156    border-radius: 38px;157    background: #d9d9d9;158    position: relative;159  }160  .switch::after {161    content: "";162    position: absolute;163    top: 8px;164    right: 8px;165    width: 60px;166    height: 60px;167    border-radius: 50%;168    background: #ffffff;169    box-shadow: 0 2px 4px rgba(0,0,0,0.2);170  }171  .listing-card {172    margin: 0 4px;173    border: 2px solid #ececec;174    border-radius: 24px;175    overflow: hidden;176  }177  .listing-image {178    height: 640px;179    background: #E0E0E0;180    border-bottom: 1px solid #BDBDBD;181    display: flex;182    align-items: center;183    justify-content: center;184    color: #757575;185    font-size: 34px;186    position: relative;187  }188  .heart {189    position: absolute;190    right: 24px;191    top: 24px;192    width: 72px;193    height: 72px;194    background: rgba(255,255,255,0.96);195    border-radius: 36px;196    display: flex;197    align-items: center;198    justify-content: center;199    box-shadow: 0 2px 8px rgba(0,0,0,0.12);200  }201  .card-body {202    padding: 22px 24px 28px 24px;203    font-size: 32px;204    color: #444;205  }206  /* Bottom navigation */207  .tabbar {208    position: absolute;209    left: 0;210    right: 0;211    bottom: 0;212    height: 150px;213    background: #ffffff;214    border-top: 1px solid #e9e9e9;215    display: flex;216    align-items: center;217    justify-content: space-around;218  }219  .tab {220    display: flex;221    flex-direction: column;222    align-items: center;223    gap: 8px;224    font-size: 28px;225    color: #8a8a8a;226  }227  .tab.active { color: #e91e63; }228  .tab svg { width: 54px; height: 54px; }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div>1:00</div>237    <div class="status-icons">238      <!-- cloud/weather as dot -->239      <svg class="icon-small" viewBox="0 0 24 24">240        <circle cx="12" cy="12" r="8" fill="#757575"></circle>241      </svg>242      <!-- wifi -->243      <svg class="icon-small" viewBox="0 0 24 24">244        <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>245        <path d="M6 12c3-3 9-3 12 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>246        <circle cx="12" cy="16" r="2" fill="#333"/>247      </svg>248      <!-- battery -->249      <svg class="icon-small" viewBox="0 0 28 20">250        <rect x="1" y="3" width="22" height="14" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>251        <rect x="3" y="5" width="14" height="10" fill="#333"/>252        <rect x="23" y="7" width="3" height="6" fill="#333"/>253      </svg>254    </div>255  </div>256 257  <!-- Header -->258  <div class="header">259    <div class="back-btn">260      <svg width="42" height="42" viewBox="0 0 24 24">261        <path d="M15 4L7 12l8 8" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262      </svg>263    </div>264    <div class="title-wrap">265      <div class="title">Newark</div>266      <div class="subtitle">Jul 1 – 7 · 5 guests</div>267    </div>268    <div class="filter-btn" aria-label="filters">269      <svg width="50" height="50" viewBox="0 0 24 24">270        <path d="M4 7h12" stroke="#222" stroke-width="2" stroke-linecap="round"/>271        <circle cx="18" cy="7" r="2.5" fill="#222"/>272        <path d="M4 12h8" stroke="#222" stroke-width="2" stroke-linecap="round"/>273        <circle cx="14" cy="12" r="2.5" fill="#222"/>274        <path d="M4 17h6" stroke="#222" stroke-width="2" stroke-linecap="round"/>275        <circle cx="10" cy="17" r="2.5" fill="#222"/>276      </svg>277    </div>278  </div>279 280  <!-- Map Area -->281  <div class="map-area">282    <div class="map-placeholder">[IMG: Map]</div>283 284    <!-- Location pin (center-ish) -->285    <div class="pin" style="left: 560px; top: 360px;"></div>286 287    <!-- Price tags -->288    <div class="price-tag" style="left: 92px; top: 120px;">$201</div>289    <div class="price-tag" style="left: 84px; top: 194px;">$269</div>290    <div class="price-tag" style="left: 34px; top: 270px;">$224</div>291    <div class="price-tag" style="left: 20px; top: 358px;">$220</div>292    <div class="price-tag" style="left: 294px; top: 332px;">$401</div>293    <div class="price-tag" style="left: 360px; top: 422px;">$248</div>294    <div class="price-tag" style="left: 728px; top: 550px;">$288</div>295    <div class="price-tag" style="left: 666px; top: 610px;">$361</div>296    <div class="price-tag" style="left: 940px; top: 478px;">$257</div>297    <div class="price-tag" style="left: 248px; top: 840px;">$539</div>298  </div>299 300  <!-- Bottom Sheet -->301  <div class="sheet">302    <div class="grabber"></div>303    <div class="sheet-title">147 places</div>304 305    <div class="toggle-row">306      <div class="toggle-text">307        <div class="toggle-title">Display total price</div>308        <div class="toggle-sub">Includes all fees, before taxes</div>309      </div>310      <div class="switch" aria-label="toggle"></div>311    </div>312 313    <div class="listing-card">314      <div class="listing-image">315        [IMG: Listing photo]316        <div class="heart">317          <svg width="36" height="36" viewBox="0 0 24 24">318            <path d="M12 20s-7-4.6-9.5-8C-0.2 8.3 2.1 4.5 6 5.2c2 .4 3.1 2 3.9 3.3.8-1.3 1.9-2.9 3.9-3.3 3.9-.8 6.2 3.1 3.5 6.8C19 15.4 12 20 12 20z" fill="#e91e63"/>319          </svg>320        </div>321      </div>322      <div class="card-body">323        [Listing details go here...]324      </div>325    </div>326  </div>327 328  <!-- Bottom Navigation -->329  <div class="tabbar">330    <div class="tab active">331      <svg viewBox="0 0 24 24">332        <circle cx="10" cy="10" r="7" stroke="#e91e63" stroke-width="2" fill="none"/>333        <line x1="15" y1="15" x2="22" y2="22" stroke="#e91e63" stroke-width="2" stroke-linecap="round"/>334      </svg>335      <div>Explore</div>336    </div>337    <div class="tab">338      <svg viewBox="0 0 24 24">339        <path d="M12 20s-6-4-8.5-7.4C1 8 3.6 4.6 7 5.3 9 5.7 10 7 12 9c2-2 3-3.3 5-3.7 3.4-.7 6 2.7 3.5 7.3C18 16 12 20 12 20z" fill="none" stroke="#8a8a8a" stroke-width="2"/>340      </svg>341      <div>Wishlists</div>342    </div>343    <div class="tab">344      <svg viewBox="0 0 24 24">345        <path d="M12 2C8 2 6 6 6 9v2l-2 2v1h16v-1l-2-2V9c0-3-2-7-6-7z" fill="none" stroke="#8a8a8a" stroke-width="2"/>346        <path d="M8 20h8" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/>347      </svg>348      <div>Trips</div>349    </div>350    <div class="tab">351      <svg viewBox="0 0 24 24">352        <path d="M4 19V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v12l-6-3H10l-6 3z" fill="none" stroke="#8a8a8a" stroke-width="2"/>353      </svg>354      <div>Inbox</div>355    </div>356    <div class="tab">357      <svg viewBox="0 0 24 24">358        <circle cx="12" cy="8" r="4" fill="none" stroke="#8a8a8a" stroke-width="2"/>359        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#8a8a8a" stroke-width="2"/>360      </svg>361      <div>Profile</div>362    </div>363  </div>364 365</div>366</body>367</html>