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 Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 background: #153B8F;27 color: #fff;28 padding: 0 36px;29 box-sizing: border-box;30 display: flex;31 align-items: center;32 justify-content: space-between;33 z-index: 5;34 }35 .status-left {36 font-size: 40px;37 font-weight: 600;38 letter-spacing: 1px;39 }40 .status-center {41 display: flex;42 gap: 18px;43 align-items: center;44 }45 .status-dot {46 width: 20px; height: 20px; background: #fff; border-radius: 50%;47 opacity: 0.9;48 }49 .status-right {50 display: flex; align-items: center; gap: 22px;51 }52 .icon-wifi {53 width: 44px; height: 44px;54 }55 .icon-battery {56 width: 50px; height: 30px;57 }58 59 /* App bar */60 .app-bar {61 position: absolute;62 top: 110px;63 left: 0;64 width: 1080px;65 height: 160px;66 background: #153B8F;67 color: #fff;68 padding: 0 36px;69 box-sizing: border-box;70 display: flex;71 align-items: center;72 justify-content: space-between;73 }74 .app-bar-left {75 display: flex; align-items: center; gap: 24px;76 }77 .app-title {78 font-size: 46px;79 font-weight: 600;80 }81 .app-actions {82 display: flex; gap: 30px; align-items: center;83 }84 .icon-btn svg { display: block; }85 86 /* Content area */87 .content {88 position: absolute;89 top: 270px;90 left: 0;91 width: 1080px;92 height: calc(2400px - 270px);93 overflow: hidden;94 background: #fff;95 }96 97 /* Nearby list */98 .nearby {99 padding: 18px 36px 0 36px;100 }101 .nearby-row {102 display: flex; justify-content: space-between; align-items: center;103 padding: 28px 0;104 border-bottom: 1px solid #E6E6E6;105 font-size: 40px;106 }107 .nearby-row:last-child { border-bottom: none; }108 .distance {109 color: #666;110 font-size: 38px;111 }112 113 /* Rating card */114 .rating-card {115 margin: 28px 0 0 0;116 padding: 36px;117 }118 .rating-header {119 display: flex; align-items: center; gap: 24px;120 margin-bottom: 24px;121 }122 .score-box {123 width: 94px; height: 94px; background: #153B8F; color: #fff; border-radius: 18px;124 display: flex; align-items: center; justify-content: center;125 font-size: 42px; font-weight: 700;126 }127 .rating-text {128 display: flex; flex-direction: column;129 }130 .rating-title { font-size: 44px; font-weight: 700; }131 .rating-sub { font-size: 34px; color: #666; margin-top: 6px; }132 133 .divider { height: 2px; background: #E6E6E6; margin: 24px 0 28px 0; }134 135 .metric {136 margin-bottom: 28px;137 }138 .metric-head {139 display: flex; justify-content: space-between; align-items: center;140 font-size: 40px;141 margin-bottom: 16px;142 }143 .metric-value { color: #666; }144 .progress {145 width: 100%;146 height: 24px;147 background: #E9E9E9;148 border-radius: 12px;149 overflow: hidden;150 }151 .fill {152 height: 100%;153 background: #153B8F;154 border-radius: 12px;155 }156 157 .show-summary {158 color: #2D5BB2;159 font-size: 38px;160 padding: 12px 36px;161 display: inline-flex; align-items: center; gap: 12px;162 }163 164 /* Reviews */165 .section-title {166 font-size: 54px; font-weight: 800;167 padding: 24px 36px;168 margin-top: 10px;169 }170 .review {171 padding: 24px 36px;172 border-top: 1px solid #E6E6E6;173 }174 .review:first-of-type { border-top: none; }175 .review-head {176 display: flex; gap: 20px; align-items: center;177 margin-bottom: 8px;178 }179 .avatar {180 width: 80px; height: 80px; border-radius: 50%; background: #D9D9D9;181 display: flex; align-items: center; justify-content: center;182 font-weight: 700; color: #555; font-size: 40px;183 }184 .review-name {185 font-size: 40px; font-weight: 700;186 }187 .review-country {188 display: flex; align-items: center; gap: 12px;189 font-size: 34px; color: #666;190 margin: 2px 0 12px 100px;191 }192 .flag {193 width: 64px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;194 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;195 }196 .review-text {197 font-size: 38px; color: #333; line-height: 1.38;198 margin-left: 100px;199 }200 .review + .review { border-top: 1px solid #E6E6E6; margin-top: 20px; padding-top: 30px; }201 202 /* Bottom button */203 .bottom-bar {204 position: absolute; bottom: 100px; left: 0; width: 100%;205 padding: 0 24px;206 box-sizing: border-box;207 }208 .cta {209 height: 140px;210 background: #2D5BB2;211 border-radius: 10px;212 color: #fff;213 font-size: 48px;214 font-weight: 700;215 display: flex; align-items: center; justify-content: center;216 box-shadow: 0 2px 0 rgba(0,0,0,0.05);217 }218 219 /* Home indicator */220 .home-indicator {221 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);222 width: 300px; height: 18px; background: #CFCFCF; border-radius: 9px;223 }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Status bar -->230 <div class="status-bar">231 <div class="status-left">8:44</div>232 <div class="status-center">233 <div class="status-dot"></div>234 <div class="status-dot"></div>235 <div class="status-dot"></div>236 <div class="status-dot"></div>237 <div style="width:8px;"></div>238 <div class="status-dot" style="width:12px;height:12px;opacity:.7;"></div>239 </div>240 <div class="status-right">241 <!-- Simple wifi icon -->242 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none">243 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>244 <path d="M6 12c3-2 9-2 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>245 <path d="M10.5 16.5c1-.8 2.9-.8 4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>246 <circle cx="12" cy="20" r="1.5" fill="#fff"/>247 </svg>248 <!-- Battery icon -->249 <svg class="icon-battery" viewBox="0 0 28 16" fill="none">250 <rect x="1" y="1" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"/>251 <rect x="3" y="3" width="18" height="10" rx="1" fill="#fff"/>252 <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"/>253 </svg>254 </div>255 </div>256 257 <!-- App bar -->258 <div class="app-bar">259 <div class="app-bar-left">260 <!-- Back arrow -->261 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">262 <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 <div class="app-title">Sallés Hotel Pere IV</div>265 </div>266 <div class="app-actions">267 <!-- Heart outline -->268 <div class="icon-btn">269 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">270 <path d="M12 21s-6-4.35-8.2-6.55C1.6 12.25 2 8.9 5 7.5c2-1 4 .2 5 1.8 1-1.6 3-2.8 5-1.8 3 1.4 3.4 4.75 1.2 7.0C18 16.7 12 21 12 21z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>271 </svg>272 </div>273 <!-- Share icon -->274 <div class="icon-btn">275 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">276 <circle cx="6" cy="12" r="2.2" stroke="#fff" stroke-width="2"/>277 <circle cx="18" cy="6" r="2.2" stroke="#fff" stroke-width="2"/>278 <circle cx="18" cy="18" r="2.2" stroke="#fff" stroke-width="2"/>279 <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>280 </svg>281 </div>282 </div>283 </div>284 285 <!-- Content -->286 <div class="content">287 <!-- Nearby list -->288 <div class="nearby">289 <div class="nearby-row">290 <div>Llevant</div>291 <div class="distance">1.3 mi. away</div>292 </div>293 <div class="nearby-row">294 <div>Sant Miquel Beach</div>295 <div class="distance">1.3 mi. away</div>296 </div>297 <div class="nearby-row" style="padding-bottom: 22px;">298 <div>Sant Sebastian Beach</div>299 <div class="distance">1.6 mi. away</div>300 </div>301 </div>302 303 <!-- Rating card -->304 <div class="rating-card">305 <div class="rating-header">306 <div class="score-box">8.1</div>307 <div class="rating-text">308 <div class="rating-title">Very Good</div>309 <div class="rating-sub">See all 7665 reviews</div>310 </div>311 </div>312 313 <div class="divider"></div>314 315 <div class="metric">316 <div class="metric-head">317 <div>Cleanliness</div>318 <div class="metric-value">8.8</div>319 </div>320 <div class="progress">321 <div class="fill" style="width: 88%;"></div>322 </div>323 </div>324 325 <div class="metric">326 <div class="metric-head">327 <div>Comfort</div>328 <div class="metric-value">8.7</div>329 </div>330 <div class="progress">331 <div class="fill" style="width: 87%;"></div>332 </div>333 </div>334 335 <div class="metric">336 <div class="metric-head">337 <div>Facilities</div>338 <div class="metric-value">8.3</div>339 </div>340 <div class="progress">341 <div class="fill" style="width: 83%;"></div>342 </div>343 </div>344 </div>345 346 <div class="show-summary">347 Show summary348 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">349 <path d="M6 14l6-6 6 6" stroke="#2D5BB2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>350 </svg>351 </div>352 353 <div class="section-title">What guests loved the most:</div>354 355 <!-- Review 1 -->356 <div class="review">357 <div class="review-head">358 <div class="avatar">A</div>359 <div class="review-name">Anh – Couple</div>360 </div>361 <div class="review-country">362 <div class="flag">[IMG: Flag UK]</div>363 <div>United Kingdom</div>364 </div>365 <div class="review-text">366 "Room is clean, quite big and including air con. facilities are excellent, staffs are helpful and friendly"367 </div>368 </div>369 370 <!-- Review 2 -->371 <div class="review">372 <div class="review-head">373 <div class="avatar">K</div>374 <div class="review-name">Kerry – Couple</div>375 </div>376 <div class="review-country">377 <div class="flag">[IMG: Flag UK]</div>378 <div>United Kingdom</div>379 </div>380 <div class="review-text">381 "Very friendly staff. Great choice for breakfast. Location was great for all attractions and beaches"382 </div>383 </div>384 385 <!-- Bottom button -->386 <div class="bottom-bar">387 <div class="cta">Select rooms</div>388 </div>389 </div>390 391 <!-- Home indicator -->392 <div class="home-indicator"></div>393 394</div>395</body>396</html>