GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>MOXY NYC Times Square - Details</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #111418; color: #e9eef2;12  }13 14  /* Top bars */15  .status-bar {16    height: 105px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #cfd8dc; font-size: 36px;19  }20  .status-icons { display: flex; gap: 26px; align-items: center; }21  .status-dot { width: 18px; height: 18px; background:#cfd8dc; border-radius: 50%; opacity: .8; }22  .battery {23    width: 44px; height: 24px; border:2px solid #cfd8dc; border-radius:6px; position: relative;24  }25  .battery::after { content:''; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#cfd8dc; border-radius:2px; }26  .battery .level { position:absolute; left:3px; top:3px; bottom:3px; right:12px; background:#cfd8dc; }27 28  .app-bar {29    height: 140px;30    display: flex; align-items: center; justify-content: space-between;31    padding: 0 28px;32  }33  .app-left { display:flex; align-items:center; gap:22px; }34  .app-title { font-size: 56px; font-weight: 700; letter-spacing: 0.5px; }35  .app-right { display:flex; align-items:center; gap:38px; color:#cfd8dc; }36  .icon-btn { width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; }37 38  .tabs {39    display:flex; gap:64px; padding: 0 40px; height: 95px; align-items:flex-end;40    border-bottom: 1px solid #25313a;41  }42  .tab { font-size: 42px; color:#cfd8dc; padding-bottom: 22px; }43  .tab.active { color:#ffffff; border-bottom: 6px solid #4ea7ff; }44 45  /* Map block */46  .map-card {47    margin: 26px; border-radius: 18px; overflow:hidden; border: 1px solid #2a323a;48  }49  .map-img {50    height: 340px; background:#E0E0E0; color:#757575;51    border-bottom: 1px solid #BDBDBD;52    display:flex; align-items:center; justify-content:center; font-size: 40px;53  }54 55  .section { padding: 24px 36px; }56  .address { font-size: 42px; line-height: 1.45; }57  .link { color:#4ea7ff; font-weight: 600; margin-top: 16px; font-size: 40px; }58 59  .section-title { font-size: 56px; font-weight: 800; margin: 38px 0 24px; }60  .nearby-list .item {61    display:flex; justify-content: space-between; align-items:center;62    padding: 28px 0; border-bottom: 1px solid #1f2630;63    font-size: 44px;64  }65  .nearby-list .time { color:#cfd8dc; font-weight: 700; }66  .more-link { color:#4ea7ff; font-size: 44px; margin-top: 16px; }67 68  .amenity-list { margin-top: 22px; }69  .amenity {70    display:flex; align-items:center; gap:28px;71    padding: 24px 0; border-bottom: 1px solid #1f2630;72  }73  .amenity svg { width:60px; height:60px; fill:#cfd8dc; }74  .amenity span { font-size: 46px; }75  .show-all { color:#4ea7ff; font-size: 46px; font-weight: 700; margin: 30px 0; }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status bar -->82  <div class="status-bar">83    <div>9:01</div>84    <div class="status-icons">85      <div class="status-dot"></div>86      <div class="status-dot"></div>87      <div class="status-dot"></div>88      <div class="battery"><div class="level"></div></div>89    </div>90  </div>91 92  <!-- App bar -->93  <div class="app-bar">94    <div class="app-left">95      <!-- Back arrow -->96      <div class="icon-btn">97        <svg viewBox="0 0 24 24" width="60" height="60">98          <path fill="#cfd8dc" d="M15.5 4l-9 8 9 8 1.5-1.7L9.8 12 17 5.7z"/>99        </svg>100      </div>101      <div class="app-title">MOXY NYC Ti...</div>102    </div>103    <div class="app-right">104      <!-- Heart -->105      <div class="icon-btn">106        <svg viewBox="0 0 24 24" width="60" height="60">107          <path fill="none" stroke="#cfd8dc" stroke-width="2" d="M12 21s-6.7-4.5-9.2-7.6C1.3 11.4 2.3 8 5.4 7c2-.6 3.7.2 4.6 1.3 1-1.1 2.7-1.9 4.6-1.3 3.1 1 4.1 4.4 2.6 6.4C18.7 16.5 12 21 12 21z"/>108        </svg>109      </div>110      <div style="font-size:40px; color:#cfd8dc;">Save</div>111      <!-- Share -->112      <div class="icon-btn">113        <svg viewBox="0 0 24 24" width="60" height="60">114          <path fill="#cfd8dc" d="M18 16.1c-.8 0-1.5.3-2 .8L8.9 12c.1-.3.1-.6.1-.9 0-.3 0-.6-.1-.9l7-4.9c.5.5 1.2.8 2 .8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .6.1.9L8 8.9C7.5 8.4 6.8 8.1 6 8.1c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.1 5c-.1.3-.1.6-.1.8 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3z"/>115        </svg>116      </div>117    </div>118  </div>119 120  <!-- Tabs -->121  <div class="tabs">122    <div class="tab active">Details</div>123    <div class="tab">Reviews</div>124    <div class="tab">Deals</div>125  </div>126 127  <!-- Map section -->128  <div class="map-card">129    <div class="map-img">[IMG: Google Map of Midtown Manhattan]</div>130  </div>131 132  <!-- Address -->133  <div class="section">134    <div class="address">135      485 7th Avenue, New York, NY 10018, United States136    </div>137    <div class="link">Get directions</div>138  </div>139 140  <!-- Nearby -->141  <div class="section">142    <div class="section-title">What’s nearby</div>143    <div class="nearby-list">144      <div class="item">145        <div>Holy Innocents Church</div>146        <div class="time">2 min walk</div>147      </div>148      <div class="item">149        <div>Garment District</div>150        <div class="time">2 min walk</div>151      </div>152      <div class="item" style="border-bottom:none;">153        <div>Gotham Hall</div>154        <div class="time">3 min walk</div>155      </div>156    </div>157    <div class="more-link">More</div>158  </div>159 160  <!-- Amenities -->161  <div class="section">162    <div class="section-title">Amenities</div>163 164    <div class="amenity-list">165      <div class="amenity">166        <!-- Dumbbell icon -->167        <svg viewBox="0 0 24 24"><path d="M3 9h2v6H3V9zm3-2h2v10H6V7zm4 3h4v4h-4v-4zm8-3h2v10h-2V7zm3 2h2v6h-2V9z"/></svg>168        <span>Fitness center</span>169      </div>170 171      <div class="amenity">172        <!-- Restaurant / fork-knife -->173        <svg viewBox="0 0 24 24"><path d="M6 3h2v7c0 1.7-1.3 3-3 3v8H3v-8c-1.7 0-3-1.3-3-3V3h2v7c0 .6.4 1 1 1s1-.4 1-1V3zm9 0h2v9h3v2h-3v7h-2V3z"/></svg>174        <span>Restaurant</span>175      </div>176 177      <div class="amenity">178        <!-- Bar / cup -->179        <svg viewBox="0 0 24 24"><path d="M5 4h14v3c0 3.3-2.7 6-6 6H9c-2.2 0-4-1.8-4-4V4zm4 11h6l-2 5H11l-2-5z"/></svg>180        <span>Bar/Lounge</span>181      </div>182 183      <div class="amenity">184        <!-- Wi-Fi icon -->185        <svg viewBox="0 0 24 24"><path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-7-6c4.7-4.1 11.3-4.1 16 0l-1.4 1.5c-3.9-3.4-9.3-3.4-13.2 0L5 12zm3.5 3.4c3.1-2.7 7.4-2.7 10.5 0l-1.4 1.5c-2.3-2-5.4-2-7.7 0l-1.4-1.5z"/></svg>186        <span>Free Wi‑Fi</span>187      </div>188 189      <div class="amenity">190        <!-- Coffee mug -->191        <svg viewBox="0 0 24 24"><path d="M5 5h10v10H5V5zm12 3h2c1.1 0 2 .9 2 2s-.9 2-2 2h-2V8zM4 17h12v2H4v-2z"/></svg>192        <span>Coffee shop</span>193      </div>194 195      <div class="amenity" style="border-bottom:none;">196        <!-- Business center / laptop -->197        <svg viewBox="0 0 24 24"><path d="M3 5h18v11H3V5zm-2 13h22v2H1v-2z"/></svg>198        <span>Business center</span>199      </div>200    </div>201 202    <div class="show-all">Show all 98 amenities</div>203  </div>204 205</div>206</body>207</html>