GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hotel Listing UI</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#0f1419; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:95px; padding:0 30px;17 display:flex; align-items:center; justify-content:space-between;18 color:#cfd8dc; font-weight:600; font-size:36px;19 }20 .sb-left, .sb-right { display:flex; align-items:center; gap:28px; }21 .dot { width:14px; height:14px; background:#cfd8dc; border-radius:50%; }22 .battery {23 width:48px; height:26px; border:3px solid #cfd8dc; border-radius:6px; position:relative;24 }25 .battery:after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#cfd8dc; border-radius:2px; }26 .battery .level { position:absolute; left:3px; top:3px; height:18px; width:32px; background:#cfd8dc; }27 28 /* Hero image area */29 .hero {30 position:absolute; top:95px; left:0; width:100%; height:620px;31 }32 .hero .img {33 width:100%; height:100%;34 background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;35 display:flex; align-items:center; justify-content:center; color:#444; font-size:40px; letter-spacing:0.3px;36 }37 .overlay-top {38 position:absolute; top:18px; left:24px; right:24px;39 display:flex; align-items:center; justify-content:space-between;40 }41 .title-bar {42 display:flex; align-items:center; gap:22px;43 background:rgba(0,0,0,0.35); padding:16px 22px; border-radius:50px;44 font-size:44px; font-weight:700;45 }46 .icon-btn { width:72px; height:72px; border-radius:36px; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; }47 .icon-btn svg { width:40px; height:40px; fill:#fff; }48 .hero .caption {49 position:absolute; right:24px; bottom:20px; font-size:28px; color:#cfd8dc;50 }51 .hero .count {52 position:absolute; left:50%; transform:translateX(-50%);53 bottom:22px; background:rgba(0,0,0,0.6); padding:8px 18px; border-radius:20px; font-size:32px;54 }55 56 /* Content section */57 .content {58 position:absolute; top:730px; left:0; right:0; padding:0 30px;59 }60 .hotel-name { font-size:66px; font-weight:800; margin:20px 0 18px; }61 .stars { color:#ffc107; font-size:40px; letter-spacing:6px; margin-bottom:16px; }62 .rating-row { display:flex; align-items:center; gap:22px; color:#e0f2f1; font-size:40px; }63 .rating-badge { background:#1f2a33; color:#a5d6a7; padding:10px 22px; border-radius:28px; font-weight:700; }64 .tabs { margin-top:30px; display:flex; gap:56px; border-bottom:2px solid #26323a; }65 .tab { padding:26px 0; font-size:40px; color:#cfd8dc; }66 .tab.active { color:#fff; border-bottom:6px solid #67d6ff; }67 68 /* Cards */69 .card {70 margin-top:24px; background:#141b22; border-radius:24px; padding:30px; border:1px solid #1f2a33; color:#cfd8dc;71 }72 .row { display:flex; align-items:center; justify-content:space-between; }73 .calendar-icon, .lock-icon, .bell-icon { width:58px; height:58px; border-radius:12px; background:#1f2a33; display:flex; align-items:center; justify-content:center; margin-right:26px; }74 .calendar-icon svg, .lock-icon svg, .bell-icon svg { width:36px; height:36px; fill:#9fb0bf; }75 .card-title { display:flex; align-items:center; font-size:42px; color:#a6e3ff; font-weight:800; }76 .card-sub { margin-top:12px; font-size:36px; color:#cfd8dc; }77 .switch { width:124px; height:64px; background:#26323a; border-radius:40px; position:relative; box-shadow: inset 0 0 0 2px #3a4a59; }78 .switch.on { background:#3ad1a9; }79 .switch .knob { position:absolute; top:5px; left:5px; width:54px; height:54px; background:#fff; border-radius:50%; transition:all .2s; }80 .switch.on .knob { left:65px; }81 .signin { color:#fff; font-size:40px; font-weight:700; }82 83 /* Booking list */84 .deal-list { margin-top:16px; }85 .deal-item { display:flex; align-items:center; justify-content:space-between; padding:28px; border-bottom:1px solid #24303a; }86 .left { display:flex; align-items:flex-start; gap:26px; }87 .logo {88 width:180px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;89 display:flex; align-items:center; justify-content:center; color:#555; font-size:36px;90 }91 .info { display:flex; flex-direction:column; gap:8px; }92 .price { color:#7cf78b; font-size:54px; font-weight:900; }93 .per-night { font-size:28px; color:#7cf78b; margin-top:-6px; }94 .note { color:#b0bec5; font-size:34px; }95 .mobile { color:#b39ddb; font-size:34px; }96 .book-btn {97 background:#ff6b2c; color:#fff; font-weight:800; font-size:44px; border:none; border-radius:28px;98 width:260px; height:110px;99 }100</style>101</head>102<body>103<div id="render-target">104 105 <!-- Status bar -->106 <div class="status-bar">107 <div class="sb-left">108 <div>9:00</div>109 <div class="dot"></div>110 <div class="dot" style="border:3px solid #cfd8dc; background:transparent;"></div>111 <div class="dot" style="border:3px solid #cfd8dc; background:transparent;"></div>112 <div class="dot"></div>113 </div>114 <div class="sb-right">115 <!-- WiFi icon -->116 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc"><path d="M12 18a2 2 0 1 0 0.001 3.999A2 2 0 0 0 12 18zm-7-7a12 12 0 0 1 14 0l-2 2a8 8 0 0 0-10 0l-2-2zm3.5 3.5a8 8 0 0 1 7 0l-2 2a4 4 0 0 0-3 0l-2-2z"/></svg>117 <!-- Battery -->118 <div class="battery"><div class="level"></div></div>119 </div>120 </div>121 122 <!-- Hero image -->123 <div class="hero">124 <div class="img">[IMG: Hotel bar with warm lights]</div>125 126 <div class="overlay-top">127 <div class="title-bar">128 <!-- Back icon -->129 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/></svg>130 <div>MOXY NYC Ti...</div>131 </div>132 <div style="display:flex; gap:18px;">133 <div class="icon-btn">134 <!-- Heart icon -->135 <svg viewBox="0 0 24 24"><path d="M12 21s-6.5-4.5-9-8.4C1.3 9.2 3.3 6 6.6 6c2 0 3.3 1.2 4 2.3C11.9 7.2 13.2 6 15.2 6c3.3 0 5.3 3.2 3.6 6.6C18.5 16.5 12 21 12 21z"/></svg>136 </div>137 <div class="icon-btn">138 <!-- Share icon -->139 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.6 1.5l-6.3-3.4a3.2 3.2 0 0 0 0-3.2l6.3-3.4A3 3 0 1 0 16 6a3 3 0 0 0 .3 1.2l-6.3 3.4a3 3 0 1 0 0 3l6.3 3.4A3 3 0 1 0 18 16z"/></svg>140 </div>141 </div>142 </div>143 144 <div class="caption">Provided by Leonardo</div>145 <div class="count">2/49</div>146 </div>147 148 <!-- Content -->149 <div class="content">150 <div class="hotel-name">MOXY NYC Times Square</div>151 <div class="stars">★ ★ ★ ★ ★</div>152 153 <div class="rating-row">154 <svg width="48" height="48" viewBox="0 0 24 24" fill="#9fb0bf"><path d="M12 12a5 5 0 1 0 .001-10.001A5 5 0 0 0 12 12zm0 2c-4.4 0-8 2.7-8 6v2h16v-2c0-3.3-3.6-6-8-6z"/></svg>155 <div class="rating-badge">8.0 Excellent</div>156 <div style="color:#cfd8dc;">9,395 reviews</div>157 </div>158 159 <div class="tabs">160 <div class="tab active">Details</div>161 <div class="tab">Reviews</div>162 <div class="tab">Deals</div>163 </div>164 165 <!-- Date card -->166 <div class="card">167 <div class="card-title">168 <div class="calendar-icon">169 <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm-1 6h12v10H6V8z"/></svg>170 </div>171 <div>Oct 12 – 16</div>172 </div>173 <div class="card-sub">1 room - 1 guest. Rates are at base price</div>174 </div>175 176 <!-- Price drop card -->177 <div class="card">178 <div class="row">179 <div style="display:flex; align-items:center;">180 <div class="bell-icon">181 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/></svg>182 </div>183 <div style="font-size:42px;">Get notified if the price drops</div>184 </div>185 <div class="switch on"><div class="knob"></div></div>186 </div>187 </div>188 189 <!-- Private deal card -->190 <div class="card">191 <div class="row">192 <div style="display:flex; align-items:center;">193 <div class="lock-icon">194 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H5v12h14V10h-2V7a5 5 0 0 0-5-5zm0 4a3 3 0 0 1 3 3v3H9V9a3 3 0 0 1 3-3z"/></svg>195 </div>196 <div style="font-size:42px;">Unlock Private Deal</div>197 </div>198 <div class="signin">Sign in</div>199 </div>200 </div>201 202 <!-- Deals list -->203 <div class="deal-list card" style="padding:0;">204 <div class="deal-item">205 <div class="left">206 <div class="logo">[IMG: Expedia]</div>207 <div class="info">208 <div class="price">$357</div>209 <div class="per-night">per night</div>210 <div class="note">Free internet</div>211 </div>212 </div>213 <button class="book-btn">Book</button>214 </div>215 216 <div class="deal-item">217 <div class="left">218 <div class="logo">[IMG: Hotels.com]</div>219 <div class="info">220 <div class="price" style="color:#7cf78b;">$357</div>221 <div class="mobile">Mobile rate</div>222 <div class="note">Free internet</div>223 </div>224 </div>225 <button class="book-btn">Book</button>226 </div>227 228 <div class="deal-item" style="border-bottom:none;">229 <div class="left">230 <div class="logo">[IMG: Orbitz]</div>231 <div class="info">232 <div class="price">$357</div>233 <div class="mobile">Mobile rate</div>234 <div class="note">Free internet</div>235 </div>236 </div>237 <button class="book-btn">Book</button>238 </div>239 </div>240 241 </div>242</div>243</body>244</html>