GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Hotel Green Rooms - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 color: #2b2b2b;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon { width: 40px; height: 40px; display: inline-block; }37 38 /* Header */39 .header {40 position: absolute;41 top: 90px;42 left: 0;43 width: 1080px;44 height: 120px;45 box-sizing: border-box;46 padding: 0 36px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 border-bottom: 1px solid #eee;51 }52 .brand {53 font-size: 52px;54 font-weight: 700;55 color: #234AA6;56 letter-spacing: 0.5px;57 display: flex;58 align-items: center;59 gap: 18px;60 }61 .close-btn {62 width: 72px;63 height: 72px;64 display: flex;65 align-items: center;66 justify-content: center;67 }68 69 /* Content */70 .content {71 position: absolute;72 top: 210px;73 left: 0;74 width: 1080px;75 padding: 36px;76 box-sizing: border-box;77 }78 79 .rating-row {80 display: flex;81 align-items: center;82 gap: 16px;83 margin-bottom: 18px;84 }85 .stars { display: flex; gap: 8px; }86 .thumb-pill {87 display: inline-flex;88 align-items: center;89 gap: 10px;90 background: #FFEAA7;91 border-radius: 12px;92 padding: 6px 12px;93 font-size: 26px;94 color: #704f00;95 }96 97 .sustainable-pill {98 display: inline-flex;99 align-items: center;100 gap: 12px;101 background: #EAF7EA;102 border: 1px solid #CFE8CF;103 border-radius: 999px;104 padding: 10px 18px;105 color: #2c7a2c;106 font-weight: 600;107 margin: 10px 0 24px 0;108 font-size: 28px;109 }110 .sustainable-pill .leaves { display: flex; gap: 8px; }111 112 .hotel-title {113 font-size: 72px;114 font-weight: 800;115 margin: 6px 0 20px 0;116 }117 118 .address {119 font-size: 34px;120 line-height: 1.45;121 color: #4a4a4a;122 }123 .map-link {124 color: #1f70e0;125 font-weight: 700;126 text-decoration: none;127 margin-left: 6px;128 }129 .excellent {130 color: #0a8a3b;131 font-weight: 700;132 }133 134 .score-row {135 display: flex;136 align-items: center;137 gap: 20px;138 margin: 26px 0 28px 0;139 font-size: 36px;140 }141 .score-badge {142 background: #1f70e0;143 color: #fff;144 font-weight: 800;145 border-radius: 16px;146 padding: 14px 18px;147 min-width: 92px;148 text-align: center;149 font-size: 40px;150 }151 .reviews { color: #2b2b2b; }152 .reviews .dot { margin: 0 8px; color: #888; }153 154 /* Image carousel */155 .carousel {156 position: relative;157 width: 100%;158 height: 860px;159 border-radius: 12px;160 overflow: hidden;161 border: 1px solid #ddd;162 margin-bottom: 28px;163 }164 .carousel .photo {165 width: 100%;166 height: 100%;167 background: #E0E0E0;168 color: #757575;169 display: flex;170 justify-content: center;171 align-items: center;172 font-size: 40px;173 }174 .carousel .arrow {175 position: absolute;176 top: 50%;177 transform: translateY(-50%);178 width: 90px;179 height: 90px;180 border-radius: 16px;181 background: rgba(255,255,255,0.85);182 display: flex;183 align-items: center;184 justify-content: center;185 border: 1px solid #ccc;186 }187 .carousel .arrow.left { left: 18px; }188 .carousel .arrow.right { right: 18px; }189 .carousel .label {190 position: absolute;191 left: 18px;192 bottom: 18px;193 background: rgba(0,0,0,0.65);194 color: #fff;195 padding: 18px 24px;196 border-radius: 14px;197 font-size: 38px;198 font-weight: 600;199 }200 .carousel .count {201 position: absolute;202 right: 18px;203 bottom: 18px;204 background: rgba(0,0,0,0.65);205 color: #fff;206 padding: 18px 24px;207 border-radius: 14px;208 font-size: 36px;209 font-weight: 600;210 }211 212 /* Reserve button */213 .reserve-wrap {214 width: 100%;215 margin: 10px 0 36px;216 }217 .reserve-btn {218 width: 100%;219 height: 120px;220 background: #1f70e0;221 color: #fff;222 font-size: 48px;223 font-weight: 800;224 border-radius: 12px;225 display: flex;226 align-items: center;227 justify-content: center;228 }229 230 /* Health & Safety */231 .health {232 border-top: 1px solid #eee;233 padding-top: 28px;234 position: relative;235 }236 .health .title {237 font-size: 54px;238 font-weight: 800;239 margin-bottom: 12px;240 }241 .health .desc {242 font-size: 34px;243 color: #444;244 line-height: 1.55;245 max-width: 880px;246 }247 .health .link {248 color: #1f70e0;249 font-weight: 700;250 text-decoration: none;251 }252 .shield {253 position: absolute;254 right: 36px;255 top: 34px;256 width: 120px;257 height: 120px;258 border: 3px solid #2d8ae4;259 border-radius: 28px;260 display: flex;261 align-items: center;262 justify-content: center;263 color: #2d8ae4;264 font-weight: 900;265 background: #f5fbff;266 }267 268 /* Heart (favorite) */269 .fav-heart {270 position: absolute;271 right: 36px;272 top: 420px;273 width: 72px;274 height: 72px;275 display: flex;276 align-items: center;277 justify-content: center;278 }279 280 /* Home indicator */281 .home-indicator {282 position: absolute;283 bottom: 18px;284 left: 50%;285 transform: translateX(-50%);286 width: 360px;287 height: 12px;288 background: #000;289 opacity: 0.2;290 border-radius: 6px;291 }292</style>293</head>294<body>295<div id="render-target">296 297 <!-- Status Bar -->298 <div class="status-bar">299 <div class="time">3:11</div>300 <div class="status-right">301 <!-- Wi-Fi icon -->302 <svg class="icon" viewBox="0 0 24 24">303 <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>304 <path d="M5 12c3-3 11-3 14 0" stroke="#555" stroke-width="2" fill="none"/>305 <path d="M9 16c2-2 6-2 8 0" stroke="#555" stroke-width="2" fill="none"/>306 <circle cx="13" cy="19" r="1.5" fill="#555"/>307 </svg>308 <!-- Battery icon -->309 <svg class="icon" viewBox="0 0 28 18">310 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"></rect>311 <rect x="4" y="6" width="16" height="6" fill="#555"></rect>312 <rect x="24" y="6" width="3" height="6" rx="1" fill="#555"></rect>313 </svg>314 </div>315 </div>316 317 <!-- Header -->318 <div class="header">319 <div class="close-btn">320 <svg width="42" height="42" viewBox="0 0 24 24">321 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#555" stroke-width="2" />322 </svg>323 </div>324 <div class="brand">IndiGo325 <svg width="42" height="42" viewBox="0 0 24 24">326 <path d="M2 18 L22 6 L16 6 L14 2 L10 8 L2 10 Z" fill="#234AA6"/>327 </svg>328 </div>329 </div>330 331 <!-- Favorite heart -->332 <div class="fav-heart">333 <svg width="48" height="48" viewBox="0 0 24 24">334 <path d="M12 21s-7-5.5-9.5-9a6 6 0 019-8 6 6 0 019 8C19 15.5 12 21 12 21z" fill="none" stroke="#666" stroke-width="1.8"/>335 </svg>336 </div>337 338 <!-- Content -->339 <div class="content">340 341 <!-- Rating and badges -->342 <div class="rating-row">343 <div class="stars">344 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/></svg>345 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/></svg>346 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/></svg>347 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/></svg>348 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/></svg>349 </div>350 <div class="thumb-pill">351 <svg width="28" height="28" viewBox="0 0 24 24">352 <path d="M9 11V5l5-2v8h5l-2 9H9V11H5v9H3v-9c0-1 1-2 2-2h4z" fill="#6b4f00"></path>353 </svg>354 <span>+</span>355 </div>356 </div>357 358 <div class="sustainable-pill">359 <div class="leaves">360 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 12c6-2 9-6 8-10-6 2-8 6-8 10z" fill="#2c7a2c"/></svg>361 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 12c6-2 9-6 8-10-6 2-8 6-8 10z" fill="#2c7a2c"/></svg>362 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 12c6-2 9-6 8-10-6 2-8 6-8 10z" fill="#2c7a2c"/></svg>363 </div>364 <span>Travel Sustainable Level 3</span>365 </div>366 367 <div class="hotel-title">Hotel Green Rooms</div>368 369 <div class="address">370 near Green Scape, Bishember Nagar, Chinar Bagh, Srinagar, Jammu and Kashmir 190001, Srinagar —371 <span class="excellent">Excellent location</span>372 <a class="map-link" href="#">Show on map</a>373 </div>374 375 <div class="score-row">376 <div class="score-badge">9.3</div>377 <div class="reviews"><strong>Superb</strong><span class="dot">·</span>49 reviews</div>378 </div>379 380 <div class="carousel">381 <div class="photo">[IMG: Hotel Lobby / Deluxe Double Room]</div>382 <div class="arrow left">383 <svg width="40" height="40" viewBox="0 0 24 24">384 <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>385 </svg>386 </div>387 <div class="arrow right">388 <svg width="40" height="40" viewBox="0 0 24 24">389 <path d="M9 4 L17 12 L9 20" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>390 </svg>391 </div>392 <div class="label">Deluxe Double Room</div>393 <div class="count">1/25</div>394 </div>395 396 <div class="reserve-wrap">397 <div class="reserve-btn">Reserve for 5 nights</div>398 </div>399 400 <div class="health">401 <div class="title">Health & safety</div>402 <div class="desc">403 This property has taken extra health and hygiene measures to ensure that your safety is their priority —404 <a href="#" class="link">See health & safety details</a>405 </div>406 <div class="shield">407 <svg width="62" height="62" viewBox="0 0 24 24">408 <path d="M12 2l8 3v6c0 6-4.5 9-8 11-3.5-2-8-5-8-11V5l8-3z" fill="none" stroke="#2d8ae4" stroke-width="2"/>409 <path d="M9 11h2V9h2v2h2v2h-2v2h-2v-2H9v-2z" fill="#2d8ae4"/>410 </svg>411 </div>412 </div>413 414 </div>415 416 <!-- Home indicator -->417 <div class="home-indicator"></div>418 419</div>420</body>421</html>