GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Hotel List UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#111519; color:#fff;11  }12 13  .status-bar {14    height:90px; padding:0 32px;15    display:flex; align-items:center; justify-content:space-between;16    color:#cfd8dc; font-size:28px;17  }18  .status-icons { display:flex; gap:28px; align-items:center; }19  .icon { width:36px; height:36px; fill:#cfd8dc; }20  .top-bar {21    padding:20px 32px;22    border-bottom:1px solid rgba(255,255,255,0.08);23  }24  .title-row {25    display:flex; align-items:center; justify-content:space-between;26    color:#ffffff; font-weight:700; font-size:44px;27    margin-bottom:12px;28  }29  .title-row .title { max-width:760px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }30  .title-sub {31    display:flex; align-items:center; gap:18px;32    color:#cfd8dc; font-size:30px;33  }34  .pill-filters {35    display:flex; gap:22px; padding:18px 32px;36  }37  .pill {38    background:#1b2230; border:1px solid #2d3748; color:#e6edf5;39    padding:22px 28px; border-radius:22px; font-size:34px; line-height:1.2;40    display:flex; flex-direction:column;41    min-width:220px;42  }43  .pill .sub { color:#9fb3c8; font-size:26px; margin-top:8px; }44  .banner {45    margin:18px 24px; padding:26px 30px;46    border-radius:18px; background:#16202c; border:1px solid #263648;47    display:flex; align-items:center; gap:20px; color:#a7c0d8; font-size:34px;48  }49  .lock-icon { width:36px; height:36px; fill:#6cc3a8; }50 51  .list {52    padding:0 24px;53  }54  .card {55    background:#151b24; border:1px solid #273445; border-radius:18px;56    display:flex; gap:24px; padding:24px; margin-bottom:28px;57  }58  .card-img {59    width:290px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;60    border-radius:14px; display:flex; align-items:center; justify-content:center;61    color:#757575; font-size:28px; text-align:center;62  }63  .card-content { flex:1; display:flex; flex-direction:column; }64  .hotel-name { font-size:40px; font-weight:800; margin-bottom:8px; }65  .rating-row { display:flex; align-items:center; gap:16px; font-size:30px; color:#e6edf5; margin-bottom:6px; }66  .stars { display:flex; gap:6px; }67  .star { width:28px; height:28px; fill:#ffd54f; }68  .rating-row .score { color:#cfe1ff; font-weight:700; }69  .location { color:#a7c0d8; font-size:30px; margin:8px 0 12px; }70  .tag {71    display:inline-flex; align-items:center; gap:10px;72    background:#1a2432; border:1px solid #2a3a4c; color:#cfe1ff;73    padding:10px 16px; border-radius:12px; font-size:28px;74    width:max-content; margin-bottom:16px;75  }76  .price-row {77    display:flex; align-items:flex-end; gap:24px; margin-top:auto; margin-bottom:8px;78  }79  .price { color:#a18bff; font-size:54px; font-weight:800; }80  .strike { color:#74829a; font-size:30px; text-decoration:line-through; }81  .sites { color:#8fa2b7; font-size:28px; }82  .cta { margin-left:auto; }83  .btn-orange {84    background:#f26c2e; color:#fff; border:none; border-radius:22px;85    padding:20px 34px; font-size:34px; font-weight:700;86  }87  .btn-outline {88    background:#f26c2e; color:#fff; border:none; border-radius:22px;89    padding:20px 34px; font-size:34px; font-weight:700;90  }91  .private { color:#7dd6a3; font-size:28px; margin-top:6px; }92 93  /* Bottom floating controls */94  .floating-controls {95    position:absolute; left:36px; bottom:180px;96    width:1008px; display:flex; justify-content:center;97  }98  .floating-box {99    background:#1b2230; border:1px solid #2d3748; border-radius:30px;100    display:flex; gap:28px; padding:22px 28px; box-shadow:0 6px 24px rgba(0,0,0,0.5);101  }102  .chip {103    background:#131a24; border:1px solid #2d3748; color:#e6edf5;104    padding:20px 28px; border-radius:22px; display:flex; align-items:center; gap:14px; font-size:34px;105  }106  .map-pin, .filter-icon { width:34px; height:34px; fill:#9fb3c8; }107 108  /* Small helpers */109  .share-group { display:flex; align-items:center; gap:22px; color:#b0c4d9; }110  .currency { font-size:28px; color:#b0c4d9; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div class="status-icons">119      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h14M10 5l-7 7 7 7" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>120      <span>9:00</span>121      <span>• • •</span>122    </div>123    <div class="status-icons">124      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8l-8 8M10 8l8 8" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round"/></svg>125      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" stroke="#cfd8dc" stroke-width="2" fill="none"/><rect x="5" y="9" width="10" height="6" fill="#cfd8dc"/></svg>126    </div>127  </div>128 129  <!-- Top area -->130  <div class="top-bar">131    <div class="title-row">132      <div class="title">Upper East Side, New York, U...</div>133      <div class="share-group">134        <svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="12" r="3" fill="#cfd8dc"/><circle cx="19" cy="5" r="3" fill="#cfd8dc"/><circle cx="19" cy="19" r="3" fill="#cfd8dc"/><path d="M8 12l8-7M8 12l8 7" stroke="#cfd8dc" stroke-width="2" fill="none"/></svg>135        <span class="currency">USD</span>136      </div>137    </div>138    <div class="title-sub">139      <span>Oct 12 – 16</span>140      <span>🛏️ 1</span>141      <span>👤 1 ▼</span>142    </div>143  </div>144 145  <!-- Filters -->146  <div class="pill-filters">147    <div class="pill">Recommended<div class="sub">$357</div></div>148    <div class="pill">Cheapest<div class="sub">$36</div></div>149    <div class="pill">Closest<div class="sub">$319</div></div>150    <div class="pill">Deals<div class="sub">$357</div></div>151  </div>152 153  <!-- Sign-in banner -->154  <div class="banner">155    <svg class="lock-icon" viewBox="0 0 24 24"><rect x="6" y="10" width="12" height="10" rx="2"/><path d="M8 10V7a4 4 0 1 1 8 0v3" fill="none" stroke="#6cc3a8" stroke-width="2"/></svg>156    <div>Sign in to unlock Private Deals</div>157  </div>158 159  <!-- List -->160  <div class="list">161 162    <!-- Card 1 -->163    <div class="card">164      <div class="card-img">[IMG: Bar at MOXY NYC Times Square]</div>165      <div class="card-content">166        <div class="hotel-name">MOXY NYC Times Square</div>167        <div class="rating-row">168          <div class="stars">169            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>170            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>171            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>172            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>173          </div>174          <span>Excellent</span>175          <span class="score">8.0</span>176        </div>177        <div class="location">Manhattan</div>178        <div class="tag">179          <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="8" rx="2" fill="#9fb3c8"/><rect x="7" y="5" width="10" height="4" rx="2" fill="#9fb3c8"/></svg>180          Mobile rate181        </div>182        <div class="price-row">183          <div>184            <div class="price">$357</div>185            <div class="strike">$361</div>186            <div class="sites">14 sites</div>187          </div>188          <div class="cta"><button class="btn-orange">View deal</button></div>189        </div>190      </div>191    </div>192 193    <!-- Card 2 -->194    <div class="card">195      <div class="card-img">[IMG: Virgin Hotels New York City Lounge]</div>196      <div class="card-content">197        <div class="hotel-name">Virgin Hotels New York City</div>198        <div class="rating-row">199          <div class="stars">200            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>201            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>202            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>203            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>204            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>205          </div>206          <span>Excellent</span><span class="score">8.4</span>207        </div>208        <div class="location">Manhattan</div>209        <div class="price-row">210          <div>211            <div class="price">$423</div>212            <div class="sites">10 sites</div>213          </div>214          <div class="cta"><button class="btn-orange">View deal</button></div>215        </div>216      </div>217    </div>218 219    <!-- Card 3 -->220    <div class="card">221      <div class="card-img">[IMG: Royalton Park Avenue Exterior]</div>222      <div class="card-content">223        <div class="hotel-name">Royalton Park Avenue</div>224        <div class="rating-row">225          <div class="stars">226            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>227            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>228            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>229            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>230            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 4.8 1.4 7-6.6-3.5-6.6 3.5 1.4-7L1.7 9.5l7.1-1z"/></svg>231          </div>232          <span>Excellent</span><span class="score">8.3</span>233        </div>234        <div class="location">Manhattan</div>235        <div class="tag">236          <svg class="lock-icon" viewBox="0 0 24 24"><rect x="6" y="10" width="12" height="10" rx="2"/><path d="M8 10V7a4 4 0 1 1 8 0v3" fill="none" stroke="#6cc3a8" stroke-width="2"/></svg>237          Private Deal238        </div>239        <div class="price-row">240          <div>241            <div class="price">$394</div>242            <div class="private">Unlock</div>243            <div class="sites">14 sites</div>244          </div>245          <div class="cta"><button class="btn-orange">Unlock</button></div>246        </div>247      </div>248    </div>249 250    <!-- Next item preview -->251    <div class="card" style="margin-bottom:120px;">252      <div class="card-img">[IMG: World Center Hotel View]</div>253      <div class="card-content">254        <div class="hotel-name">World Center Hotel</div>255      </div>256    </div>257 258  </div>259 260  <!-- Floating controls -->261  <div class="floating-controls">262    <div class="floating-box">263      <div class="chip">264        <svg class="map-pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>265        Map view266      </div>267      <div class="chip">268        <svg class="filter-icon" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4" stroke="#9fb3c8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>269        Filters270      </div>271    </div>272  </div>273 274</div>275</body>276</html>