GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>MOXY NYC Times Square - UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121416; /* dark app background */13    color: #EDEFF2;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-size: 38px;30  }31  .status-icons {32    display: flex;33    gap: 28px;34    align-items: center;35  }36  .dot { width: 14px; height: 14px; background:#C9CDD2; border-radius:50%; display:inline-block; }37  .wifi {38    width: 42px; height: 42px; position: relative;39  }40  .wifi:before, .wifi:after {41    content:""; position:absolute; left:8px; right:8px; border:3px solid #C9CDD2; border-top:none; border-radius:0 0 50% 50%;42  }43  .wifi:before { top:4px; height:20px; }44  .wifi:after { top:16px; height:12px; }45  .battery {46    width: 56px; height: 26px; border: 3px solid #C9CDD2; border-radius: 6px; position: relative;47  }48  .battery:after {49    content:""; position:absolute; right:-10px; top:6px; width:8px; height:14px; background:#C9CDD2; border-radius:2px;50  }51  .battery-fill {52    position:absolute; left:4px; top:4px; height:16px; width:34px; background:#C9CDD2; border-radius:3px;53  }54 55  /* App bar */56  .app-bar {57    position: absolute;58    top: 100px;59    left: 0;60    width: 1080px;61    height: 120px;62    padding: 0 30px;63    box-sizing: border-box;64    display: flex;65    align-items: center;66    justify-content: space-between;67  }68  .app-left {69    display: flex;70    align-items: center;71    gap: 22px;72  }73  .title {74    font-size: 56px;75    font-weight: 700;76    letter-spacing: 0.2px;77  }78  .icon-btn {79    width: 72px;80    height: 72px;81    display: grid;82    place-items: center;83  }84  .icon {85    width: 54px;86    height: 54px;87    fill: none;88    stroke: #EDEFF2;89    stroke-width: 5;90  }91 92  /* Tabs */93  .tabs {94    position: absolute;95    top: 220px;96    left: 0;97    width: 1080px;98    height: 90px;99    display: flex;100    align-items: flex-end;101    gap: 60px;102    padding: 0 30px;103    box-sizing: border-box;104    border-bottom: 2px solid #1c1f23;105  }106  .tab {107    font-size: 40px;108    color: #BAC1C7;109    padding-bottom: 26px;110  }111  .tab.active {112    color: #FFFFFF;113    border-bottom: 6px solid #FFFFFF;114    padding-bottom: 20px;115  }116 117  /* Intro text and More link */118  .intro {119    position: absolute;120    top: 330px;121    left: 30px;122    width: 1020px;123    color: #C9CDD2;124    font-size: 34px;125    line-height: 1.6;126  }127  .more-link {128    position: absolute;129    top: 520px;130    left: 30px;131    color: #4EB5E8;132    font-size: 40px;133    font-weight: 700;134  }135 136  /* Section title */137  .section-title {138    position: absolute;139    left: 30px;140    font-size: 64px;141    font-weight: 800;142  }143  #location-title { top: 620px; }144 145  /* Map card */146  .map-card {147    position: absolute;148    top: 720px;149    left: 30px;150    width: 1020px;151    height: 700px;152    background: #0E1012;153    border-radius: 28px;154    border: 1px solid #2a2f35;155    overflow: hidden;156  }157  .map-visual {158    width: 100%;159    height: 560px;160    background: #E0E0E0;161    border-bottom: 1px solid #BDBDBD;162    display: flex;163    align-items: center;164    justify-content: center;165    color: #757575;166    font-size: 40px;167    letter-spacing: 0.3px;168  }169  .map-bottom {170    padding: 26px 28px;171    box-sizing: border-box;172  }173  .address {174    font-size: 44px;175    font-weight: 800;176    line-height: 1.4;177    margin-bottom: 18px;178  }179  .directions {180    color: #4EB5E8;181    font-size: 40px;182    font-weight: 700;183  }184 185  /* Nearby */186  #nearby-title { top: 1490px; }187  .nearby-list {188    position: absolute;189    top: 1590px;190    left: 30px;191    width: 1020px;192  }193  .nearby-item {194    display: flex;195    justify-content: space-between;196    align-items: center;197    padding: 34px 0;198    border-bottom: 1px solid #22262B;199    font-size: 44px;200  }201  .nearby-item .time {202    color: #EDEFF2;203    font-weight: 700;204  }205  .more-link-small {206    position: absolute;207    top: 1900px;208    left: 30px;209    color: #4EB5E8;210    font-size: 40px;211    font-weight: 700;212  }213 214  /* Amenities */215  #amenities-title { top: 1980px; }216  .amenities-row {217    position: absolute;218    top: 2080px;219    left: 30px;220    display: flex;221    align-items: center;222    gap: 26px;223    font-size: 44px;224  }225  .dumbbell {226    width: 60px; height: 60px;227  }228 229  /* Bottom gesture bar */230  .gesture-bar {231    position: absolute;232    bottom: 28px;233    left: 50%;234    transform: translateX(-50%);235    width: 540px;236    height: 12px;237    background: #FFFFFF22;238    border-radius: 8px;239  }240 241</style>242</head>243<body>244<div id="render-target">245 246  <!-- Status bar -->247  <div class="status-bar">248    <div>9:01</div>249    <div class="status-icons">250      <span class="dot"></span>251      <span class="dot"></span>252      <span class="dot"></span>253      <div class="wifi"></div>254      <div class="battery">255        <div class="battery-fill"></div>256      </div>257    </div>258  </div>259 260  <!-- App bar -->261  <div class="app-bar">262    <div class="app-left">263      <div class="icon-btn">264        <svg class="icon" viewBox="0 0 24 24">265          <path d="M15 5 L8 12 L15 19" />266        </svg>267      </div>268      <div class="title">MOXY NYC Ti...</div>269    </div>270    <div style="display:flex; align-items:center; gap:24px;">271      <div class="icon-btn" title="Save">272        <svg class="icon" viewBox="0 0 24 24">273          <path d="M12 20 L5 13 C2 10 5 6 8 7 C9 7.5 10 8.3 12 10 C14 8.3 15 7.5 16 7 C19 6 22 10 19 13 L12 20 Z" />274        </svg>275      </div>276      <div class="icon-btn" title="Share">277        <svg class="icon" viewBox="0 0 24 24">278          <circle cx="6" cy="12" r="3"></circle>279          <circle cx="18" cy="6" r="3"></circle>280          <circle cx="18" cy="18" r="3"></circle>281          <path d="M8.8 10.7 L15.2 7.3 M8.8 13.3 L15.2 16.7" stroke="#EDEFF2" />282        </svg>283      </div>284    </div>285  </div>286 287  <!-- Tabs -->288  <div class="tabs">289    <div class="tab active">Details</div>290    <div class="tab">Reviews</div>291    <div class="tab">Deals</div>292  </div>293 294  <!-- Intro snippet -->295  <div class="intro">296    Staying in midtown Manhattan doesn’t mean sacrificing style or comfort. 297    Our 612 modern hotel rooms are cleverly designed...298  </div>299  <div class="more-link">More</div>300 301  <!-- Location section -->302  <div id="location-title" class="section-title">Location</div>303 304  <div class="map-card">305    <div class="map-visual">[IMG: Google Map around Moxy NYC Times Square]</div>306    <div class="map-bottom">307      <div class="address">485 7th Avenue, New York, NY 10018, United States</div>308      <div class="directions">Get directions</div>309    </div>310  </div>311 312  <!-- Nearby -->313  <div id="nearby-title" class="section-title">What’s nearby</div>314  <div class="nearby-list">315    <div class="nearby-item">316      <div>Holy Innocents Church</div>317      <div class="time">2 min walk</div>318    </div>319    <div class="nearby-item">320      <div>Garment District</div>321      <div class="time">2 min walk</div>322    </div>323    <div class="nearby-item" style="border-bottom:none;">324      <div>Gotham Hall</div>325      <div class="time">3 min walk</div>326    </div>327  </div>328  <div class="more-link-small">More</div>329 330  <!-- Amenities -->331  <div id="amenities-title" class="section-title">Amenities</div>332  <div class="amenities-row">333    <svg class="dumbbell" viewBox="0 0 24 24" fill="none" stroke="#EDEFF2" stroke-width="2">334      <rect x="1" y="8" width="4" height="8" rx="1"></rect>335      <rect x="19" y="8" width="4" height="8" rx="1"></rect>336      <rect x="6" y="10" width="12" height="4" rx="1"></rect>337    </svg>338    <div>Fitness center</div>339  </div>340 341  <!-- Bottom gesture bar -->342  <div class="gesture-bar"></div>343</div>344</body>345</html>