GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Hotel Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #9e9e9e;22 color: #fff;23 font-size: 34px;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 justify-content: space-between;29 }30 .status-left { font-weight: 600; }31 .status-right {32 display: flex; align-items: center; gap: 24px; opacity: 0.95;33 }34 .status-dot {35 width: 18px; height: 18px; background: #fff; border-radius: 50%;36 }37 .battery {38 display: flex; align-items: center; gap: 8px;39 }40 41 /* Top nav */42 .top-nav {43 height: 130px;44 display: flex;45 align-items: center;46 padding: 0 24px;47 box-sizing: border-box;48 border-bottom: 1px solid #e0e0e0;49 background: #fff;50 }51 .nav-left {52 width: 90px; display: flex; justify-content: center;53 }54 .search-pill {55 flex: 1;56 background: #eef1f5;57 border-radius: 40px;58 padding: 18px 28px;59 box-sizing: border-box;60 display: flex; align-items: center; gap: 18px;61 }62 .pill-text { flex: 1; line-height: 1.1; }63 .pill-title { font-size: 34px; font-weight: 700; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }64 .pill-sub { font-size: 26px; color: #6b7280; margin-top: 6px; }65 .nav-icons { width: 250px; display: flex; justify-content: flex-end; gap: 26px; align-items: center; }66 67 /* Recommendation banner */68 .recommend {69 display: flex; align-items: center; gap: 16px;70 padding: 20px 28px;71 color: #2e7d32;72 font-size: 32px;73 font-weight: 600;74 border-bottom: 1px solid #eaeaea;75 }76 77 /* Review cards */78 .reviews-row {79 display: flex; gap: 24px;80 padding: 16px 24px;81 overflow: hidden;82 }83 .review-card {84 flex: 1;85 background: #ffffff;86 border: 1px solid #e0e3e7;87 border-radius: 28px;88 padding: 24px;89 min-height: 190px;90 box-sizing: border-box;91 }92 .review-text { font-size: 30px; color: #233042; line-height: 1.3; }93 .review-footer {94 display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #4b5563; font-size: 26px;95 }96 .flag {97 width: 34px; height: 22px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 3px;98 }99 .terms {100 display: flex; align-items: center; gap: 14px;101 font-size: 30px; color: #1a73e8; padding: 10px 28px 18px 28px;102 }103 104 .divider { height: 14px; background: #f2f4f7; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }105 106 /* Location section */107 .section { padding: 26px 28px; }108 .row-between { display: flex; align-items: center; justify-content: space-between; }109 .section-title { font-size: 40px; font-weight: 700; color: #222; }110 .link { color: #1a73e8; font-size: 30px; font-weight: 600; }111 .address { color: #546e7a; font-size: 30px; line-height: 1.35; margin-top: 12px; }112 113 .map-img {114 width: 100%;115 height: 420px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 26px;119 margin-top: 16px;120 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;121 }122 123 .rating { font-size: 36px; font-weight: 700; margin-top: 30px; }124 .subtle { font-size: 28px; color: #607d8b; margin-top: 8px; }125 .thin-divider { height: 2px; background: #e6e6e6; margin: 24px -28px 0 -28px; }126 127 .landmarks { padding: 24px 28px 0 28px; }128 .landmark-row {129 display: flex; align-items: center; justify-content: space-between;130 padding: 24px 0; font-size: 32px; color: #1f2937;131 border-bottom: 1px solid #f0f0f0;132 }133 .distance { color: #6b7280; font-size: 30px; }134 135 /* Floating chat button */136 .fab {137 position: absolute;138 right: 44px;139 top: 1640px;140 width: 110px; height: 110px;141 background: #2a62ea;142 border-radius: 50%;143 display: flex; align-items: center; justify-content: center;144 box-shadow: 0 8px 18px rgba(0,0,0,0.25);145 }146 147 /* Bottom price bar */148 .bottom-sheet {149 position: absolute;150 left: 0; right: 0; bottom: 120px;151 height: 220px;152 background: #fff;153 border-top: 1px solid #e0e0e0;154 display: flex; align-items: center; justify-content: space-between;155 padding: 0 32px;156 box-sizing: border-box;157 }158 .price-col { line-height: 1.15; }159 .muted { font-size: 28px; color: #6b7280; }160 .price { font-size: 48px; color: #d32f2f; font-weight: 800; margin-top: 6px; }161 .discount { font-size: 28px; color: #d32f2f; margin-top: 6px; }162 .cta {163 background: #2a62ea; color: #fff; font-size: 36px; font-weight: 700;164 padding: 28px 52px; border-radius: 60px; border: none;165 min-width: 420px; text-align: center;166 box-shadow: 0 8px 18px rgba(42,98,234,0.35);167 }168 169 /* Bottom navigation pill */170 .os-bar {171 position: absolute; left: 0; right: 0; bottom: 0;172 height: 120px; background: #ffffff; border-top: 1px solid #eaeaea;173 display: flex; align-items: center; justify-content: center;174 }175 .home-pill {176 width: 240px; height: 10px; border-radius: 8px; background: #9e9e9e;177 }178 179 /* Small helpers for icons */180 svg { display: block; }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div class="status-left">11:05</div>189 <div class="status-right">190 <div class="status-dot"></div>191 <div class="status-dot"></div>192 <div class="status-dot"></div>193 <div class="battery">194 <svg width="30" height="18" viewBox="0 0 30 18"><rect x="1" y="2" width="24" height="14" rx="2" fill="none" stroke="white" stroke-width="2"></rect><rect x="3" y="4" width="18" height="10" fill="white"></rect><rect x="26" y="6" width="3" height="6" fill="white"></rect></svg>195 <span style="font-size:28px;">100%</span>196 </div>197 </div>198 </div>199 200 <!-- Top Navigation -->201 <div class="top-nav">202 <div class="nav-left">203 <svg width="48" height="48" viewBox="0 0 24 24" fill="#1f2937">204 <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#1f2937" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205 </svg>206 </div>207 <div class="search-pill">208 <div class="pill-text">209 <div class="pill-title">ibis Copacabana Posto 5</div>210 <div class="pill-sub">Nov 6 - Nov 10, 2 guests</div>211 </div>212 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">213 <circle cx="11" cy="11" r="7" stroke="#374151" stroke-width="2"/>214 <path d="M20 20l-4-4" stroke="#374151" stroke-width="2" stroke-linecap="round"/>215 </svg>216 </div>217 <div class="nav-icons">218 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 018-1 4 4 0 018 1c0 5.65-7 10-7 10z" fill="none" stroke="#374151" stroke-width="2"/></svg>219 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 12v-2h12V6l4 4-4 4v-4H4z" fill="none" stroke="#374151" stroke-width="2" stroke-linejoin="round"/></svg>220 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M7 7h13l-2 9H8L7 7z" fill="none" stroke="#374151" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#374151"/><circle cx="18" cy="20" r="1.5" fill="#374151"/></svg>221 </div>222 </div>223 224 <!-- Recommendation -->225 <div class="recommend">226 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M2 14h4v8H2zM8 22h8a2 2 0 002-2v-8l-5 1 1-6-6 8H8z" fill="#2e7d32"/></svg>227 <div>86% would recommend to a friend</div>228 </div>229 230 <!-- Review cards -->231 <div class="reviews-row">232 <div class="review-card">233 <div class="review-text">Close to the beach and lots of shopping surrounding!</div>234 <div class="review-footer">235 <div class="flag"></div>236 <div><strong>Anabela</strong> | United Kingdom</div>237 </div>238 </div>239 <div class="review-card">240 <div class="review-text">In general the place and room was okay</div>241 <div class="review-footer">242 <div class="flag"></div>243 <div><strong>JAVIER</strong> | Costa Rica</div>244 </div>245 </div>246 </div>247 248 <!-- Terms -->249 <div class="terms">250 <svg width="32" height="32" viewBox="0 0 24 24" fill="#1a73e8"><path d="M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4z" opacity="0.3"/><path d="M12 7v6m0 3v2" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/></svg>251 <span>See terms & conditions</span>252 </div>253 254 <div class="divider"></div>255 256 <!-- Location Section -->257 <div class="section">258 <div class="row-between">259 <div class="section-title">Location</div>260 <div class="link">See map</div>261 </div>262 <div class="address">Rua Xavier Da Silveira, 82, Copacabana, Rio De Janeiro, Brazil 22061-010</div>263 <div class="map-img">[IMG: Map of Copacabana / Ipanema]</div>264 265 <div class="rating">9.2 Exceptional</div>266 <div class="subtle">Location rating score</div>267 268 <div class="thin-divider"></div>269 </div>270 271 <!-- Landmarks -->272 <div class="landmarks">273 <div class="row-between" style="margin-bottom: 6px;">274 <div class="section-title" style="font-size: 38px;">Most popular landmarks</div>275 <div class="link">See all</div>276 </div>277 278 <div class="landmark-row">279 <div>Copacabana Beach</div>280 <div class="distance">390 m</div>281 </div>282 <div class="landmark-row">283 <div>Ipanema Beach</div>284 <div class="distance">1.2 km</div>285 </div>286 <div class="landmark-row" style="border-bottom:none;">287 <div>Botanical Garden</div>288 <div class="distance">3.28 km</div>289 </div>290 </div>291 292 <!-- Floating chat button -->293 <div class="fab">294 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">295 <path d="M4 4h16v10H7l-3 3V4z" opacity="0.9"/>296 <path d="M9 8h6M9 11h4" stroke="#2a62ea" stroke-width="0"/>297 </svg>298 </div>299 300 <!-- Bottom Sheet -->301 <div class="bottom-sheet">302 <div class="price-col">303 <div class="muted">Start at</div>304 <div class="price">₹ 8,688</div>305 <div class="discount">-41% TODAY</div>306 </div>307 <button class="cta">See all rooms</button>308 </div>309 310 <!-- OS bottom bar -->311 <div class="os-bar">312 <div class="home-pill"></div>313 </div>314 315</div>316</body>317</html>