GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Hotels in Berlin – Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-shadow: none;16 }17 18 /* Status bar (top system area) */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 120px;25 background: #2f2f2f;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 32px;30 font-size: 36px;31 box-sizing: border-box;32 }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 24px;38 opacity: 0.9;39 }40 .status-dot {41 width: 12px;42 height: 12px;43 background: #cfcfcf;44 border-radius: 50%;45 display: inline-block;46 }47 48 /* Browser top bar */49 .top-bar {50 position: absolute;51 top: 120px;52 left: 0;53 width: 100%;54 height: 220px;55 background: #3a3a3a;56 color: #fff;57 box-sizing: border-box;58 padding: 30px 32px;59 }60 .top-row {61 display: flex;62 align-items: center;63 gap: 24px;64 }65 .title {66 font-size: 42px;67 font-weight: 600;68 white-space: nowrap;69 overflow: hidden;70 text-overflow: ellipsis;71 max-width: 540px;72 }73 .domain {74 font-size: 30px;75 color: #cfcfcf;76 margin-top: 12px;77 }78 .top-actions {79 margin-left: auto;80 display: flex;81 align-items: center;82 gap: 32px;83 }84 .icon-btn svg { width: 44px; height: 44px; fill: #fff; }85 86 .lock-icon svg { width: 36px; height: 36px; fill: #cfcfcf; }87 88 /* Filter chip container (rounded sheet) */89 .filter-sheet {90 position: absolute;91 top: 300px;92 left: 24px;93 width: 1032px;94 background: #ffffff;95 border-radius: 28px;96 box-shadow: 0 8px 24px rgba(0,0,0,0.15);97 padding: 26px 24px 40px;98 box-sizing: border-box;99 }100 .chips {101 display: flex;102 gap: 16px;103 flex-wrap: nowrap;104 overflow: hidden;105 }106 .chip {107 border: 1px solid #d7d7d7;108 background: #fff;109 border-radius: 40px;110 padding: 16px 22px;111 display: inline-flex;112 align-items: center;113 gap: 12px;114 font-size: 34px;115 color: #333;116 box-sizing: border-box;117 white-space: nowrap;118 }119 .chip svg { width: 36px; height: 36px; fill: #5f6368; }120 .sheet-handle {121 position: absolute;122 left: 50%;123 transform: translateX(-50%);124 bottom: 12px;125 width: 220px;126 height: 10px;127 background: #dcdcdc;128 border-radius: 8px;129 }130 131 /* Cards */132 .content {133 position: absolute;134 top: 520px;135 left: 24px;136 width: 1032px;137 box-sizing: border-box;138 }139 .card {140 background: #fff;141 border-radius: 28px;142 box-shadow: 0 6px 18px rgba(0,0,0,0.12);143 margin-bottom: 36px;144 overflow: hidden;145 }146 .card-top {147 display: grid;148 grid-template-columns: 1fr 1fr;149 gap: 0;150 }151 .img-box, .map-box {152 height: 360px;153 background: #E0E0E0;154 border: 1px solid #BDBDBD;155 display: flex;156 justify-content: center;157 align-items: center;158 color: #757575;159 font-size: 34px;160 position: relative;161 }162 .map-box { color: #555; }163 .price-badge {164 position: absolute;165 right: 24px;166 bottom: 24px;167 background: #1976d2;168 color: #fff;169 font-weight: 700;170 font-size: 38px;171 padding: 16px 22px;172 border-radius: 24px;173 box-shadow: 0 4px 10px rgba(0,0,0,0.25);174 }175 .card-body {176 padding: 26px;177 }178 .hotel-title {179 font-size: 46px;180 font-weight: 700;181 color: #222;182 margin-bottom: 16px;183 }184 .rating-row {185 display: flex;186 align-items: center;187 gap: 12px;188 color: #666;189 font-size: 34px;190 margin-bottom: 12px;191 }192 .stars {193 display: inline-flex;194 gap: 4px;195 }196 .stars svg { width: 34px; height: 34px; fill: #ffb300; }197 .description {198 font-size: 32px;199 color: #666;200 line-height: 1.35;201 margin-top: 6px;202 margin-bottom: 6px;203 }204 205 /* Floating "View map" pill */206 .floating-pill {207 position: absolute;208 left: 50%;209 transform: translateX(-50%);210 bottom: 240px;211 background: #ffffff;212 border-radius: 50px;213 box-shadow: 0 10px 24px rgba(0,0,0,0.25);214 padding: 22px 28px;215 display: flex;216 align-items: center;217 gap: 22px;218 font-size: 36px;219 color: #1967d2;220 border: 1px solid #e5e5e5;221 }222 .floating-pill .blue-icon svg { width: 40px; height: 40px; fill: #1967d2; }223 .floating-pill .bookmark svg { width: 40px; height: 40px; fill: #5f6368; }224 225 /* Gesture bar */226 .gesture-bar {227 position: absolute;228 bottom: 40px;229 left: 50%;230 transform: translateX(-50%);231 width: 320px;232 height: 14px;233 background: #cfcfcf;234 border-radius: 14px;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Status bar -->242 <div class="status-bar">243 <div>2:08</div>244 <div class="status-right">245 <!-- simple gear icon -->246 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm9 4l-2.1.8c-.1.4-.3.8-.5 1.1l1 2-2 2-2-1c-.3.2-.7.4-1.1.5L12 21l-2.1-.8c-.4-.1-.8-.3-1.1-.5l-2 1-2-2 1-2c-.2-.3-.4-.7-.5-1.1L3 12l2.1-.8c.1-.4.3-.8.5-1.1l-1-2 2-2 2 1c.3-.2.7-.4 1.1-.5L12 3l2.1.8c.4.1.8.3 1.1.5l2-1 2 2-1 2c.2.3.4.7.5 1.1L21 12z"/></svg>247 <div class="status-dot"></div>248 <div class="status-dot"></div>249 <div class="status-dot"></div>250 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3.003 3.003 0 0018 7.92 3 3 0 1015 5a3 3 0 00.09.7L8.04 9.81A3.003 3.003 0 006 9a3 3 0 100 6c1.2 0 2.25-.69 2.72-1.69l7.22 4.21c-.05.16-.06.33-.06.48a3 3 0 103-3z"/></svg>251 <svg viewBox="0 0 24 24"><path d="M17 1H7c-1.1 0-2 .9-2 2v18l7-3 7 3V3c0-1.1-.9-2-2-2z"/></svg>252 <svg viewBox="0 0 24 24"><path d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10zm-1-10H7v-2h4V7h2v3h4v2h-4v3h-2v-3z"/></svg>253 <svg viewBox="0 0 24 24"><path d="M20 7h-8l-2-2H4c-1.1 0-2 .9-2 2v11a2 2 0 002 2h16a2 2 0 002-2V9c0-1.1-.9-2-2-2z"/></svg>254 <div>100%</div>255 </div>256 </div>257 258 <!-- Browser top bar with title -->259 <div class="top-bar">260 <div class="top-row">261 <!-- Close icon -->262 <div class="icon-btn">263 <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>264 </div>265 <div class="lock-icon">266 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm-3 8V7a3 3 0 116 0v3H9z"/></svg>267 </div>268 <div class="title">Hotels in Berlin – Google ...</div>269 <div class="top-actions">270 <div class="icon-btn">271 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3.003 3.003 0 0018 7.92 3 3 0 1015 5a3 3 0 00.09.7L8.04 9.81A3.003 3.003 0 006 9a3 3 0 100 6c1.2 0 2.25-.69 2.72-1.69l7.22 4.21c-.05.16-.06.33-.06.48a3 3 0 103-3z"/></svg>272 </div>273 <div class="icon-btn">274 <svg viewBox="0 0 24 24"><path d="M17 1H7c-1.1 0-2 .9-2 2v18l7-3 7 3V3c0-1.1-.9-2-2-2z"/></svg>275 </div>276 <div class="icon-btn">277 <svg viewBox="0 0 24 24"><path d="M12 7a2 2 0 110-4 2 2 0 010 4zm0 5a2 2 0 110-4 2 2 0 010 4zm0 5a2 2 0 110-4 2 2 0 010 4z"/></svg>278 </div>279 </div>280 </div>281 <div class="domain">google.com</div>282 </div>283 284 <!-- Filter sheet -->285 <div class="filter-sheet">286 <div class="chips">287 <div class="chip">288 <svg viewBox="0 0 24 24"><path d="M7 22h2v-2h6v2h2v-2h2v-4h-2v-2H7v2H5v4h2v2zM7 2h10v6H7V2zm0 8h10v2H7v-2z"/></svg>289 Filters290 </div>291 <div class="chip">292 <svg viewBox="0 0 24 24"><path d="M12 2l4 8h8l-6.5 5.1L19 22l-7-4.6L5 22l1.5-6.9L0 10h8l4-8z"/></svg>293 Under ₹6,500294 </div>295 <div class="chip">296 <svg viewBox="0 0 24 24"><path d="M12 2l4 8h8l-6.5 5.1L19 22l-7-4.6L5 22l1.5-6.9L0 10h8l4-8z"/></svg>297 4+ rating298 </div>299 <div class="chip">300 <svg viewBox="0 0 24 24"><path d="M12 21c4-3 6-6 6-9a6 6 0 10-12 0c0 3 2 6 6 9z"/></svg>301 Spa302 </div>303 <div class="chip">304 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7v7h-4v4H9v-4H5V9a7 7 0 017-7z"/></svg>305 More306 </div>307 </div>308 <div class="sheet-handle"></div>309 </div>310 311 <!-- List content -->312 <div class="content">313 <!-- Card 1 -->314 <div class="card">315 <div class="card-top">316 <div class="img-box">[IMG: Hotel room interior]</div>317 <div class="map-box">318 [IMG: Map of Berlin]319 <div class="price-badge">₹7,096</div>320 </div>321 </div>322 <div class="card-body">323 <div class="hotel-title">Mercure Hotel Berlin Wittenbergplatz</div>324 <div class="rating-row">325 <div style="font-weight:700;color:#222;">4.6</div>326 <div class="stars">327 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>328 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>329 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>330 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>331 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>332 </div>333 <div>(1,596)</div>334 <div>· 4-star hotel</div>335 </div>336 <div class="description">337 Plush rooms in a contemporary hotel offering a modern restaurant/bar & a hip lounge.338 </div>339 </div>340 </div>341 342 <!-- Card 2 -->343 <div class="card">344 <div class="card-top">345 <div class="img-box">[IMG: Hotel lobby with reception]</div>346 <div class="map-box">347 [IMG: Map near Alexanderplatz]348 <div class="price-badge">₹6,138</div>349 </div>350 </div>351 <div class="card-body">352 <div class="hotel-title">Premier Inn Berlin Alexanderplatz hotel</div>353 <div class="rating-row">354 <div style="font-weight:700;color:#222;">4.1</div>355 <div class="stars">356 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>357 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>358 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>359 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>360 <svg viewBox="0 0 24 24" style="opacity:.4"><path d="M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>361 </div>362 <div>(3,240)</div>363 </div>364 <div class="description">365 Unpretentious rooms in a modern hotel featuring a relaxed bar & Wi‑Fi.366 </div>367 </div>368 </div>369 </div>370 371 <!-- Floating view map pill -->372 <div class="floating-pill">373 <div class="blue-icon">374 <svg viewBox="0 0 24 24"><path d="M12 2l7 3v15l-7-3-7 3V5l7-3zm0 4l-5 2v9l5-2 5 2V8l-5-2z"/></svg>375 </div>376 View map377 <div class="bookmark">378 <svg viewBox="0 0 24 24"><path d="M17 1H7c-1.1 0-2 .9-2 2v18l7-3 7 3V3c0-1.1-.9-2-2-2z"/></svg>379 </div>380 </div>381 382 <!-- Gesture bar -->383 <div class="gesture-bar"></div>384</div>385</body>386</html>