GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Berlin Hotels List - Mock</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 border-radius: 0;14 box-shadow: none;15 }16 17 /* Top blue app bar */18 .app-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 240px;24 background: #143c97;25 color: #fff;26 }27 .status-row {28 height: 60px;29 display: flex;30 align-items: center;31 padding: 0 32px;32 font-size: 36px;33 letter-spacing: 0.2px;34 }35 .status-right {36 margin-left: auto;37 display: flex;38 gap: 22px;39 align-items: center;40 }41 .status-dot {42 width: 10px; height: 10px; background: #fff; border-radius: 50%;43 }44 45 .search-pill {46 margin: 24px 32px;47 background: #fff;48 border: 6px solid #f7c55a;49 border-radius: 26px;50 height: 120px;51 display: flex;52 align-items: center;53 padding: 0 24px;54 color: #202124;55 box-sizing: border-box;56 }57 .search-pill .back {58 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-right: 18px;59 }60 .search-pill .title {61 font-size: 42px;62 font-weight: 600;63 }64 65 /* Controls row */66 .controls {67 position: absolute;68 top: 240px;69 left: 0;70 width: 1080px;71 background: #fff;72 padding: 26px 32px 16px 32px;73 box-sizing: border-box;74 display: flex;75 gap: 48px;76 align-items: center;77 color: #222;78 }79 .control {80 display: flex;81 align-items: center;82 gap: 14px;83 font-size: 38px;84 color: #222;85 }86 87 .count {88 position: absolute;89 top: 340px;90 left: 32px;91 font-size: 42px;92 color: #333;93 font-weight: 600;94 }95 96 /* List area */97 .list {98 position: absolute;99 top: 396px;100 left: 0;101 width: 1080px;102 padding-bottom: 260px;103 }104 105 .card {106 display: flex;107 padding: 24px 32px;108 box-sizing: border-box;109 border-bottom: 1px solid #eee;110 position: relative;111 }112 .thumb {113 width: 260px;114 height: 380px;115 background: #E0E0E0;116 border: 1px solid #BDBDBD;117 display: flex;118 align-items: center;119 justify-content: center;120 color: #757575;121 font-size: 28px;122 text-align: center;123 border-radius: 12px;124 }125 .card-content {126 margin-left: 24px;127 flex: 1;128 }129 .title {130 font-size: 44px;131 font-weight: 800;132 color: #111;133 line-height: 1.1;134 margin-right: 120px;135 }136 .heart {137 position: absolute;138 right: 40px;139 top: 40px;140 font-size: 44px;141 color: #c33;142 }143 .sub {144 margin-top: 16px;145 font-size: 36px;146 color: #444;147 }148 .pill {149 display: inline-block;150 font-size: 34px;151 margin-top: 16px;152 background: #f2efe2;153 color: #775f22;154 padding: 10px 16px;155 border-radius: 12px;156 border: 1px solid #e5d6aa;157 }158 .features {159 margin-top: 14px;160 font-size: 34px;161 color: #333;162 }163 .price-block {164 margin-top: 26px;165 font-size: 40px;166 color: #111;167 font-weight: 700;168 }169 .price-row {170 margin-top: 6px;171 display: flex;172 align-items: baseline;173 gap: 14px;174 }175 .strikethrough {176 color: #d34b4b;177 text-decoration: line-through;178 font-weight: 700;179 font-size: 40px;180 }181 .current {182 font-size: 56px;183 font-weight: 800;184 color: #111;185 }186 .fees {187 font-size: 32px;188 color: #666;189 margin-top: 8px;190 }191 .warning {192 margin-top: 18px;193 color: #d32f2f;194 font-size: 36px;195 font-weight: 700;196 }197 198 /* Rating styles */199 .rating-row {200 margin-top: 8px;201 display: flex;202 align-items: center;203 gap: 12px;204 }205 .stars {206 color: #ffc107;207 font-size: 42px;208 }209 .ad-tag {210 font-size: 34px;211 border: 1px solid #aaa;212 padding: 2px 10px;213 border-radius: 10px;214 color: #333;215 }216 .score {217 margin-top: 10px;218 display: inline-flex;219 align-items: center;220 gap: 12px;221 font-size: 38px;222 color: #333;223 }224 .score-box {225 background: #1550d0;226 color: #fff;227 font-weight: 800;228 padding: 8px 12px;229 border-radius: 12px;230 }231 .sustain {232 margin-top: 12px;233 font-size: 34px;234 color: #1b7f3d;235 }236 .small-fees {237 margin-top: 8px;238 font-size: 34px;239 color: #666;240 }241 242 /* Toast */243 .toast {244 position: absolute;245 bottom: 160px;246 left: 32px;247 right: 32px;248 background: rgba(0,0,0,0.88);249 color: #fff;250 border-radius: 24px;251 padding: 32px;252 display: flex;253 align-items: center;254 justify-content: space-between;255 font-size: 40px;256 }257 .toast .action { color: #78a7ff; font-weight: 700; }258 259 /* Bottom gesture bar */260 .gesture {261 position: absolute;262 bottom: 40px;263 left: 390px;264 width: 300px;265 height: 14px;266 background: #121212;267 opacity: 0.8;268 border-radius: 8px;269 }270 271 /* Simple icons */272 .icon {273 width: 44px; height: 44px;274 }275</style>276</head>277<body>278<div id="render-target">279 280 <!-- Blue app bar with status and search -->281 <div class="app-bar">282 <div class="status-row">283 <div>2:48</div>284 <div class="status-right">285 <!-- simple circular icons to mimic status -->286 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>287 <svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16" stroke="#fff" stroke-width="2" fill="none"/><path d="M6 7l5 5-5 5" stroke="#fff" stroke-width="2" fill="none"/></svg>288 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 4v5l4 2" stroke="#fff" stroke-width="2" fill="none"/></svg>289 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/><rect x="6" y="9" width="12" height="6" fill="#fff"/></svg>290 <div>100%</div>291 </div>292 </div>293 294 <div class="search-pill">295 <div class="back">296 <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#143c97" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>297 </div>298 <div class="title">Berlin · Jan 1 - Jan 5</div>299 </div>300 </div>301 302 <!-- controls -->303 <div class="controls">304 <div class="control">305 <svg class="icon" viewBox="0 0 24 24"><path d="M6 15l-3 3M6 9l-3-3M18 15l3 3M18 9l3-3" stroke="#222" stroke-width="2" fill="none"/><path d="M8 6h8M8 18h8" stroke="#222" stroke-width="2"/></svg>306 <span>Sort</span>307 </div>308 <div class="control">309 <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16M8 12h8M11 18h2" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>310 <span>Filter</span>311 </div>312 <div class="control">313 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l8 8-8 12-8-12z" fill="none" stroke="#222" stroke-width="2"/><circle cx="12" cy="10" r="3" stroke="#222" stroke-width="2" fill="none"/></svg>314 <span>Map</span>315 </div>316 </div>317 318 <div class="count">820 properties</div>319 320 <!-- list -->321 <div class="list">322 <!-- Card 1 -->323 <div class="card">324 <div class="thumb">[IMG: Cozy apartment with Christmas tree]</div>325 <div class="card-content">326 <div class="title">bevo: Stilvolles Souterrain im Bergmannkiez</div>327 <div class="heart">♡</div>328 <div class="sub">Friedrichshain-Kreuzberg • 1.7 miles from center</div>329 <div class="pill">New to Booking.com</div>330 <div class="features">914.9 ft² • 2 beds • 1 bedroom • 1 living room • 1 bathroom</div>331 <div class="price-block">Price for 4 nights, 2 adults</div>332 <div class="price-row">333 <div class="strikethrough">€ 674</div>334 <div class="current">€ 539</div>335 </div>336 <div class="fees">+€ 69 taxes and fees</div>337 <div class="warning">Only 1 left at this price on Booking.com</div>338 </div>339 </div>340 341 <!-- Card 2 -->342 <div class="card">343 <div class="thumb">[IMG: Modern hotel room with yellow wall]</div>344 <div class="card-content">345 <div class="title">Leonardo Hotel Berlin Mitte</div>346 <div class="heart">❤</div>347 <div class="rating-row">348 <div class="stars">★ ★ ★ ★ ★</div>349 <div class="ad-tag">Ad</div>350 </div>351 <div class="score">352 <span class="score-box">8.2</span>353 <span>Very Good • 12709 reviews</span>354 </div>355 <div class="sub">Mitte • 2,950 feet from center</div>356 <div class="sustain">Travel Sustainable</div>357 <div class="features">Hotel room: Beds: 1 double or 2 twins</div>358 <div class="price-block">Price for 4 nights, 2 adults</div>359 <div class="current">€ 411</div>360 <div class="small-fees">+€ 21 taxes and fees</div>361 </div>362 </div>363 364 <!-- Card 3 -->365 <div class="card">366 <div class="thumb">[IMG: Hotel entrance facade]</div>367 <div class="card-content">368 <div class="title">Hotel Alex Berlin</div>369 <div class="heart">♡</div>370 <div class="score">371 <span class="score-box">7.7</span>372 <span>Good • 709 reviews</span>373 </div>374 <div class="sub">Prenzlauer Berg • 2.2 miles from center</div>375 <div class="current" style="margin-top:18px;">€ 415</div>376 </div>377 </div>378 </div>379 380 <!-- Toast at bottom -->381 <div class="toast">382 <div>Saved to Berlin trip</div>383 <div class="action">Change</div>384 </div>385 386 <!-- Gesture bar -->387 <div class="gesture"></div>388 389 <!-- Back icon inside search pill (for clarity placed earlier). -->390</div>391</body>392</html>