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 Search - Berlin</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #1f2937;17 }18 19 /* Top status bar */20 .status-bar {21 height: 90px;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-size: 30px;26 color: #374151;27 border-bottom: 1px solid #e5e7eb;28 }29 .status-left { display: flex; gap: 18px; align-items: center; }30 .status-right { margin-left: auto; display: flex; gap: 24px; align-items: center; }31 32 /* Header */33 .header {34 padding: 24px 32px 16px 32px;35 position: relative;36 }37 .header-line {38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .back-icon {43 width: 48px; height: 48px;44 display: inline-flex; align-items: center; justify-content: center;45 }46 .search-icon-wrap {47 margin-left: auto;48 width: 56px; height: 56px;49 display: inline-flex; align-items: center; justify-content: center;50 }51 .city-title {52 font-size: 58px;53 font-weight: 700;54 letter-spacing: 0.2px;55 }56 .subline {57 margin-left: 70px;58 margin-top: 6px;59 font-size: 30px;60 color: #6b7280;61 }62 .subline .edit {63 color: #2563eb;64 font-weight: 600;65 margin-left: 8px;66 }67 68 /* Chips */69 .chips {70 display: flex;71 gap: 18px;72 padding: 16px 32px 20px 32px;73 }74 .chip {75 display: inline-flex;76 align-items: center;77 gap: 12px;78 padding: 18px 24px;79 border: 1px solid #d1d5db;80 border-radius: 26px;81 background: #f7f8fa;82 font-size: 30px;83 color: #374151;84 white-space: nowrap;85 }86 .chip svg { width: 30px; height: 30px; }87 88 /* List content area */89 .content {90 padding: 0 32px;91 }92 .card {93 background: #ffffff;94 border-radius: 22px;95 box-shadow: 0 1px 0 #e5e7eb inset;96 margin-bottom: 28px;97 }98 .card-images {99 display: flex;100 gap: 20px;101 padding: 0;102 margin: 0;103 }104 .image-placeholder {105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 color: #757575;108 display: flex;109 justify-content: center;110 align-items: center;111 border-radius: 22px;112 font-size: 28px;113 }114 .image-large { width: 680px; height: 330px; }115 .image-small { width: 300px; height: 330px; }116 117 .card-body {118 padding: 22px 18px 26px 18px;119 }120 .label {121 font-size: 28px;122 color: #6b7280;123 margin-bottom: 8px;124 }125 .title {126 font-size: 48px;127 font-weight: 800;128 margin-bottom: 10px;129 line-height: 1.15;130 }131 .desc {132 font-size: 30px;133 color: #6b7280;134 line-height: 1.45;135 margin-bottom: 16px;136 }137 .info-row {138 display: flex;139 align-items: center;140 justify-content: space-between;141 gap: 16px;142 margin-bottom: 12px;143 }144 .rating {145 display: inline-flex;146 align-items: center;147 gap: 14px;148 font-size: 28px;149 color: #374151;150 }151 .rating-badge {152 background: #22c55e;153 color: #ffffff;154 padding: 10px 16px;155 border-radius: 10px;156 font-weight: 700;157 font-size: 28px;158 }159 .price {160 text-align: right;161 }162 .price .old {163 color: #9ca3af;164 text-decoration: line-through;165 font-size: 30px;166 margin-bottom: 4px;167 }168 .price .current {169 font-size: 48px;170 font-weight: 800;171 }172 .price .tax {173 color: #6b7280;174 font-size: 28px;175 margin-top: 4px;176 }177 .ticks {178 display: flex;179 justify-content: space-between;180 align-items: flex-start;181 margin-top: 14px;182 }183 .tick {184 display: flex;185 align-items: flex-start;186 gap: 12px;187 font-size: 30px;188 color: #374151;189 }190 .tick svg { width: 30px; height: 30px; color: #10b981; }191 .per-night {192 text-align: right;193 color: #9ca3af;194 font-size: 26px;195 margin-top: 8px;196 }197 198 .promo {199 margin: 12px 0 22px 0;200 padding: 16px 18px;201 background: #eef5ff;202 border-radius: 14px;203 color: #2563eb;204 font-size: 32px;205 }206 207 /* Second card image trio */208 .image-trio .image-placeholder { height: 250px; border-radius: 22px; }209 .image-trio .img-w1 { width: 480px; }210 .image-trio .img-w2 { width: 300px; }211 .image-trio .img-w3 { width: 220px; }212 213 .stars {214 color: #94a3b8;215 font-size: 28px;216 margin-bottom: 6px;217 }218 .book-btn {219 display: inline-block;220 padding: 14px 20px;221 border: 1px solid #2563eb;222 color: #2563eb;223 border-radius: 12px;224 font-size: 28px;225 margin-top: 8px;226 }227 228 /* Bottom nav bar */229 .bottom-nav {230 position: absolute;231 left: 0; right: 0; bottom: 110px;232 height: 150px;233 background: #f8fafc;234 border-top: 1px solid #e5e7eb;235 display: flex;236 align-items: center;237 justify-content: space-around;238 }239 .nav-item {240 display: flex;241 flex-direction: column;242 align-items: center;243 gap: 10px;244 color: #6b7280;245 font-size: 28px;246 }247 .nav-item svg { width: 40px; height: 40px; color: #6b7280; }248 249 /* Home indicator */250 .home-indicator {251 position: absolute;252 left: 50%;253 transform: translateX(-50%);254 bottom: 40px;255 width: 360px;256 height: 10px;257 background: #0f172a;258 border-radius: 10px;259 opacity: 0.25;260 }261</style>262</head>263<body>264<div id="render-target">265 266 <!-- Status Bar -->267 <div class="status-bar">268 <div class="status-left">269 <span>12:50</span>270 </div>271 <div class="status-right">272 <span>◦</span>273 <span>🔔</span>274 <span>📶</span>275 <span>100%</span>276 </div>277 </div>278 279 <!-- Header -->280 <div class="header">281 <div class="header-line">282 <div class="back-icon">283 <svg viewBox="0 0 24 24">284 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 <div class="city-title">Berlin</div>288 <div class="search-icon-wrap">289 <svg viewBox="0 0 24 24">290 <circle cx="11" cy="11" r="7" fill="none" stroke="#111827" stroke-width="2"/>291 <path d="M16.5 16.5L21 21" stroke="#111827" stroke-width="2" stroke-linecap="round"/>292 </svg>293 </div>294 </div>295 <div class="subline">01 Jan – 05 Jan, 2 Adults <span class="edit">Edit</span></div>296 </div>297 298 <!-- Chips -->299 <div class="chips">300 <div class="chip">301 <svg viewBox="0 0 24 24"><path d="M4 11h16M4 6h16M4 16h16" stroke="#374151" stroke-width="2" stroke-linecap="round"/></svg>302 <span>All Filters</span>303 </div>304 <div class="chip">305 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#374151" stroke-width="2" fill="none"/><path d="M5 21c2-4 12-4 14 0" stroke="#374151" stroke-width="2" fill="none"/></svg>306 <span>Explore Berlin</span>307 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/></svg>308 </div>309 <div class="chip">310 <svg viewBox="0 0 24 24"><path d="M4 7h16v10H4z" stroke="#374151" stroke-width="2" fill="none"/><path d="M4 11h16" stroke="#374151" stroke-width="2"/></svg>311 <span>Book @ ₹1</span>312 </div>313 <div class="chip">314 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/></svg>315 <span>Free Cancellation</span>316 </div>317 </div>318 319 <div class="content">320 321 <!-- Card 1 -->322 <div class="card">323 <div class="card-images">324 <div class="image-placeholder image-large">[IMG: Facade of Berlin hotel at night]</div>325 <div class="image-placeholder image-small">[IMG: Hotel room interior]</div>326 </div>327 <div class="card-body">328 <div class="label">Hotel</div>329 <div class="title">Quentin Design Hotel Berlin</div>330 <div class="desc">Tempelhof-Schöneberg | 5.0 km from Berlin City Centre | 5–6 minutes walk to Viktoria Luise Platz U‑Bahn</div>331 332 <div class="info-row">333 <div class="rating">334 <span class="rating-badge">3.5/5</span>335 <span>587 Verified Ratings</span>336 </div>337 <div class="price">338 <div class="old">₹6,473</div>339 <div class="current">₹6,217</div>340 <div class="tax">+₹906 Taxes & Fees</div>341 <div class="per-night">per night</div>342 </div>343 </div>344 345 <div class="ticks">346 <div class="tick">347 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round"/></svg>348 <span>Breakfast available at extra charges</span>349 </div>350 </div>351 </div>352 </div>353 354 <div class="promo">Get ₹3883 off on Canara Bank Credit Card</div>355 356 <!-- Card 2 -->357 <div class="card">358 <div class="card-images image-trio">359 <div class="image-placeholder img-w1">[IMG: Modern hotel room with twin beds]</div>360 <div class="image-placeholder img-w2">[IMG: Colorful wall art in hotel]</div>361 <div class="image-placeholder img-w3">[IMG: View through window with greenery]</div>362 </div>363 <div class="card-body">364 <div class="stars">★★ Hotel</div>365 <div class="title">IBIS BERLIN MITTE</div>366 <div class="desc">Friedrichshain‑Kreuzberg | 2.6 km from Berlin City Centre</div>367 368 <div class="info-row">369 <div class="rating">370 <span class="rating-badge">4/5</span>371 <span>1974 Verified Ratings</span>372 </div>373 <div class="price">374 <div class="current">₹9,248</div>375 <div class="tax">+₹605 Taxes & Fees</div>376 <div class="per-night">per night</div>377 </div>378 </div>379 380 <div class="ticks">381 <div class="tick">382 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round"/></svg>383 <span>Free Cancellation Included</span>384 </div>385 </div>386 387 <div class="ticks" style="margin-top:8px;">388 <div class="tick">389 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round"/></svg>390 <span>Breakfast available at extra charges</span>391 </div>392 <div>393 <span class="book-btn">Book @ ₹1</span>394 </div>395 </div>396 </div>397 </div>398 399 </div>400 401 <!-- Bottom Nav -->402 <div class="bottom-nav">403 <div class="nav-item">404 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8H6v-8H3z" fill="none" stroke="#6b7280" stroke-width="2" stroke-linejoin="round"/></svg>405 <div>Location</div>406 </div>407 <div class="nav-item">408 <svg viewBox="0 0 24 24"><path d="M4 10h16v10H4z" fill="none" stroke="#6b7280" stroke-width="2"/><path d="M4 7h16" stroke="#6b7280" stroke-width="2"/></svg>409 <div>Property</div>410 </div>411 <div class="nav-item">412 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/></svg>413 <div>Sort & Filters</div>414 </div>415 </div>416 417 <div class="home-indicator"></div>418 419</div>420</body>421</html>