GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>MOXY NYC Times Square - Deals</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-weight: 600;26    font-size: 36px;27    background: #0f0f0f;28  }29  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }30  .dot { width: 22px; height: 22px; border-radius: 50%; background: #EDEDED; opacity: 0.8; }31  .icon-bar {32    width: 42px; height: 24px; border: 3px solid #EDEDED; border-radius: 4px; position: relative;33  }34  .icon-bar::after {35    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #EDEDED; border-radius: 2px;36  }37  .wifi {38    width: 36px; height: 24px; position: relative;39  }40  .wifi:before, .wifi:after {41    content:""; position:absolute; left:0; right:0; margin:auto; border: 3px solid #EDEDED; border-top-color:#EDEDED; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; }42  .wifi:before { top: 0; width: 32px; height: 16px; }43  .wifi:after { top: 6px; width: 20px; height: 10px; }44  .wifi-dot { width: 6px; height: 6px; background:#EDEDED; border-radius:50%; margin-left:6px; }45 46  /* App bar */47  .app-bar {48    height: 110px;49    padding: 0 24px;50    background: #181818;51    display: flex;52    align-items: center;53    justify-content: space-between;54    border-bottom: 1px solid #2a2a2a;55  }56  .app-left { display: flex; align-items: center; gap: 24px; }57  .back-btn {58    width: 64px; height: 64px; display:flex; align-items:center; justify-content:center;59  }60  .app-title { font-size: 48px; font-weight: 700; letter-spacing: 0.2px; }61  .app-actions { display:flex; align-items:center; gap: 36px; }62  .action { display:flex; align-items:center; gap:12px; color:#EDEDED; font-size:34px; }63  .heart, .share { width: 42px; height: 42px; }64 65  /* Tabs */66  .tabs {67    height: 72px;68    display: flex;69    gap: 60px;70    align-items: flex-end;71    padding: 0 24px;72    background: #181818;73    border-bottom: 1px solid #2a2a2a;74  }75  .tab {76    padding-bottom: 16px;77    color: #BDBDBD;78    font-size: 34px;79  }80  .tab.active {81    color: #FFFFFF;82    border-bottom: 4px solid #FFFFFF;83  }84 85  /* Deals list */86  .deals {87    padding: 24px;88  }89  .deal-card {90    background: #1d1d1d;91    border-radius: 18px;92    border: 1px solid #2b2b2b;93    padding: 24px;94    display: flex;95    align-items: center;96    gap: 24px;97    margin-bottom: 22px;98  }99  .logo {100    width: 170px; height: 120px;101    background: #E0E0E0; border: 1px solid #BDBDBD;102    display: flex; justify-content: center; align-items: center;103    color: #616161; font-size: 30px; text-align: center;104  }105  .deal-mid { flex: 1; display: flex; align-items: center; gap: 18px; }106  .deal-info { flex: 1; }107  .deal-sub { color: #A8A8A8; font-size: 30px; }108  .price {109    font-size: 52px; font-weight: 800;110  }111  .price.green { color: #51C971; }112  .price.purple { color: #B79CFF; }113  .per-night, .mobile-rate {114    font-size: 30px; color: #A8A8A8; margin-top: 8px;115  }116  .book-btn {117    background: #F36F24;118    color: #fff;119    font-weight: 800;120    width: 220px; height: 96px;121    border-radius: 24px;122    display: flex; align-items: center; justify-content: center;123    font-size: 40px;124  }125  .more-deals {126    text-align: center;127    font-size: 34px;128    color: #4CC7E6;129    margin: 10px 0 30px;130  }131 132  /* Overview section */133  .section {134    padding: 24px;135  }136  .section h2 {137    font-size: 54px;138    margin: 10px 0 20px;139  }140  .sustainable {141    background: #1d1d1d;142    border: 1px solid #2b2b2b;143    border-radius: 18px;144    padding: 26px;145    display: flex; align-items: center; justify-content: space-between;146  }147  .s-left { display:flex; align-items:center; gap: 20px; font-size: 36px; color: #EDEDED; }148  .leaf { width: 40px; height: 40px; }149  .link { color: #4CC7E6; font-size: 36px; }150  .desc {151    margin-top: 22px;152    color: #EDEDED;153    line-height: 1.5;154    font-size: 34px;155  }156 157  /* Location */158  .map {159    width: 100%; height: 360px;160    background: #E0E0E0; border: 1px solid #BDBDBD;161    display:flex; align-items:center; justify-content:center; color:#616161; font-size:36px;162    margin-top: 16px;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div class="status-left">172      <div>9:01</div>173      <div class="dot"></div>174      <div class="dot"></div>175      <div class="dot"></div>176      <div class="dot"></div>177    </div>178    <div class="status-right">179      <div class="wifi"></div>180      <div class="wifi-dot"></div>181      <div class="icon-bar"></div>182    </div>183  </div>184 185  <!-- App Bar -->186  <div class="app-bar">187    <div class="app-left">188      <div class="back-btn">189        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">190          <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>191        </svg>192      </div>193      <div class="app-title">MOXY NYC Ti...</div>194    </div>195    <div class="app-actions">196      <div class="action">197        <svg class="heart" viewBox="0 0 24 24" fill="none">198          <path d="M12 21s-6.6-4.6-9.2-7.2C1 12.9 1 9.6 3.3 7.6c2.1-1.8 5.1-1.1 6.7.7l1.9 2.2 1.9-2.2c1.6-1.8 4.6-2.5 6.7-.7 2.3 2 2.3 5.3.2 6.2C18.6 16.4 12 21 12 21z" stroke="#ffffff" stroke-width="2" fill="none"/>199        </svg>200        <span>Save</span>201      </div>202      <div class="action">203        <svg class="share" viewBox="0 0 24 24" fill="none">204          <path d="M4 12v7h16v-7M12 16V4m0 0l-4 4m4-4l4 4" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>205        </svg>206        <span>Share</span>207      </div>208    </div>209  </div>210 211  <!-- Tabs -->212  <div class="tabs">213    <div class="tab active">Details</div>214    <div class="tab">Reviews</div>215    <div class="tab">Deals</div>216  </div>217 218  <!-- Deals List -->219  <div class="deals">220    <div class="deal-card">221      <div class="logo">[IMG: Expedia]</div>222      <div class="deal-mid">223        <div class="deal-info">224          <div class="deal-sub">Free internet</div>225        </div>226        <div>227          <div class="price green">$357</div>228          <div class="per-night">per night</div>229        </div>230      </div>231      <div class="book-btn">Book</div>232    </div>233 234    <div class="deal-card">235      <div class="logo">[IMG: Hotels.com]</div>236      <div class="deal-mid">237        <div class="deal-info">238          <div class="deal-sub">Free internet</div>239        </div>240        <div>241          <div class="price purple">$357</div>242          <div class="mobile-rate">Mobile rate</div>243        </div>244      </div>245      <div class="book-btn">Book</div>246    </div>247 248    <div class="deal-card">249      <div class="logo">[IMG: Orbitz]</div>250      <div class="deal-mid">251        <div class="deal-info">252          <div class="deal-sub">Free internet</div>253        </div>254        <div>255          <div class="price purple">$357</div>256          <div class="mobile-rate">Mobile rate</div>257        </div>258      </div>259      <div class="book-btn">Book</div>260    </div>261 262    <div class="deal-card">263      <div class="logo">[IMG: Travelocity]</div>264      <div class="deal-mid">265        <div class="deal-info">266          <div class="deal-sub">Free internet</div>267        </div>268        <div>269          <div class="price purple">$357</div>270          <div class="mobile-rate">Mobile rate</div>271        </div>272      </div>273      <div class="book-btn">Book</div>274    </div>275 276    <div class="more-deals">10 more deals from $361</div>277  </div>278 279  <!-- Overview Section -->280  <div class="section">281    <h2>Overview</h2>282    <div class="sustainable">283      <div class="s-left">284        <svg class="leaf" viewBox="0 0 24 24" fill="none">285          <path d="M4 13c6-8 16-8 16-8s-1 10-9 13c-5 2-7-3-7-5z" stroke="#97D978" stroke-width="2" fill="none"/>286        </svg>287        <span>Travel Sustainable Program</span>288      </div>289      <div class="link">More</div>290    </div>291 292    <div class="desc">293      Discover a hotel with an innovative design and playful soul at rates that make it accessible to all. Located near Bryant Park, Moxy NYC Times Square proves that affordability in midtown Manhattan doesn’t mean sacrificing style or comfort. Our 612 modern hotel rooms are cleverly designed...294    </div>295    <div class="link" style="margin-top: 12px;">More</div>296  </div>297 298  <!-- Location -->299  <div class="section" style="padding-bottom: 36px;">300    <h2>Location</h2>301    <div class="map">[IMG: Google Map]</div>302  </div>303 304</div>305</body>306</html>