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>Hotels in Berlin – Google</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: #202124;17 }18 19 /* Top browser chrome */20 .browser-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 200px;26 background: #2f2f31;27 color: #fff;28 box-sizing: border-box;29 }30 .status-row {31 height: 60px;32 display: flex;33 align-items: center;34 padding: 0 28px;35 font-size: 34px;36 letter-spacing: 0.2px;37 }38 .status-row .spacer { flex: 1; }39 .status-icon {40 width: 34px; height: 34px; margin-left: 22px; opacity: 0.85;41 border-radius: 6px; background: rgba(255,255,255,0.2);42 }43 44 .address-row {45 height: 140px;46 display: flex;47 align-items: center;48 padding: 0 22px;49 gap: 22px;50 box-sizing: border-box;51 }52 .addr-chip {53 display: flex; align-items: center; gap: 18px;54 color: #eef3f7; font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;55 flex: 1;56 }57 .addr-actions { display: flex; align-items: center; gap: 28px; }58 .icon-btn {59 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;60 border-radius: 50%; background: rgba(255,255,255,0.12);61 }62 .icon-btn svg { width: 34px; height: 34px; fill: #fff; }63 64 /* Main content */65 .content {66 position: absolute;67 top: 200px;68 left: 0;69 right: 0;70 bottom: 0;71 overflow: auto;72 -webkit-overflow-scrolling: touch;73 }74 75 .google-header {76 display: flex; align-items: center; justify-content: space-between;77 padding: 26px 36px 12px 36px;78 }79 .left-header { display: flex; align-items: center; gap: 28px; }80 .hamburger { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }81 .hamburger svg { width: 44px; height: 44px; fill: #5f6368; }82 .google-wordmark { font-size: 58px; font-weight: 700; letter-spacing: -0.5px; }83 .google-wordmark span:nth-child(1){ color:#4285F4;}84 .google-wordmark span:nth-child(2){ color:#DB4437;}85 .google-wordmark span:nth-child(3){ color:#F4B400;}86 .google-wordmark span:nth-child(4){ color:#4285F4;}87 .google-wordmark span:nth-child(5){ color:#0F9D58;}88 .google-wordmark span:nth-child(6){ color:#DB4437;}89 .right-header { display:flex; align-items:center; gap:24px; }90 .grid-icon {91 width: 58px; height: 58px; border-radius: 50%; background: #eef1f5; display:flex; align-items:center; justify-content:center;92 }93 .grid-icon svg { width: 34px; height: 34px; fill:#5f6368; }94 .avatar {95 width: 64px; height: 64px; background:#0F9D58; color:#fff; border-radius: 50%;96 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:36px;97 }98 99 /* Tabs */100 .tabs {101 display: flex; align-items: center; gap: 44px; padding: 8px 36px 24px 36px; font-size: 40px; color:#5f6368;102 }103 .tab { padding: 16px 0; position: relative; }104 .tab.active { color:#1a73e8; font-weight: 600; }105 .tab.active::after {106 content:""; position:absolute; left:0; right:0; bottom:-6px; height:8px; background:#1a73e8; border-radius:4px;107 }108 109 /* Search area */110 .search-bar {111 margin: 22px 28px 16px 28px;112 border: 1px solid #dadce0; border-radius: 28px; padding: 26px 30px; display: flex; align-items: center; gap: 22px;113 font-size: 38px; color:#5f6368;114 }115 .search-bar svg { width: 44px; height: 44px; fill:#5f6368; }116 .date-row {117 margin: 12px 28px; display: flex; align-items: center; gap: 16px;118 }119 .date-pill {120 flex: 1; display: flex; align-items: center; gap: 18px; padding: 26px 26px;121 border: 1px solid #dadce0; border-radius: 24px; font-size: 36px; color:#3c4043;122 background:#fff;123 }124 .date-pill svg { width: 40px; height: 40px; fill:#5f6368; }125 .guest-pill {126 width: 180px; display:flex; align-items:center; gap:16px; padding: 26px;127 border: 1px solid #dadce0; border-radius: 24px; font-size: 36px; color:#3c4043;128 background:#fff;129 }130 .chips {131 display:flex; align-items:center; gap:18px; padding: 18px 28px 26px 28px;132 }133 .chip {134 display:flex; align-items:center; gap:14px; padding: 18px 24px; border:1px solid #dadce0; border-radius: 30px;135 font-size: 34px; color:#3c4043; background:#fff;136 }137 .chip svg { width: 36px; height: 36px; fill:#5f6368; }138 139 /* Section header */140 .section-head {141 display:flex; align-items:center; justify-content: space-between;142 padding: 22px 28px 8px 28px; font-size: 38px;143 }144 .section-head .sub { color:#5f6368; }145 146 /* Cards */147 .card-row {148 display:flex; gap: 22px; padding: 14px 20px 24px 20px; overflow-x: auto;149 }150 .hotel-card {151 min-width: 320px; max-width: 320px; background:#fff; border:1px solid #dadce0; border-radius: 22px; box-shadow: 0 2px 0 rgba(0,0,0,0.05);152 }153 .hotel-img {154 width: 100%; height: 200px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;155 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 30px;156 border-top-left-radius: 22px; border-top-right-radius: 22px;157 }158 .card-body { padding: 18px 18px 22px 18px; }159 .hotel-title { font-size: 38px; color:#1a73e8; line-height: 46px; margin-bottom: 6px; }160 .price { font-size: 36px; margin: 12px 0; }161 .brand { font-size: 32px; color:#5f6368; margin-bottom: 6px; display:flex; align-items:center; gap:8px; }162 .rating { font-size: 32px; color:#5f6368; display:flex; align-items:center; gap:10px; }163 .star { width: 28px; height: 28px; fill:#fbbc04; }164 .tag { font-size: 32px; color:#5f6368; margin-top: 6px; }165 166 .divider { height: 16px; background:#f1f3f4; margin: 18px 0; }167 168 .results-row {169 display:flex; align-items:center; justify-content: space-between; padding: 20px 28px; font-size: 36px;170 }171 .about { display:flex; align-items:center; gap:12px; color:#5f6368; }172 .info-dot {173 width: 34px; height: 34px; border-radius: 50%; border:2px solid #5f6368;174 display:flex; align-items:center; justify-content:center; font-size: 26px; line-height: 34px;175 }176 177 /* Floating view map pill */178 .map-pill {179 position: absolute;180 left: 300px; bottom: 240px;181 background:#fff; border:1px solid #dadce0; border-radius: 48px; box-shadow: 0 6px 20px rgba(0,0,0,0.15);182 padding: 16px 24px; display:flex; align-items:center; gap: 22px; font-size: 36px;183 }184 .map-pill .bookmark {185 width: 46px; height: 46px; border-radius: 12px; background:#eef3ff; display:flex; align-items:center; justify-content:center;186 }187 .map-pill svg { width: 40px; height: 40px; fill:#1a73e8; }188 189 /* Gesture bar */190 .gesture {191 position:absolute; bottom: 20px; left: 50%; transform: translateX(-50%);192 width: 320px; height: 10px; border-radius: 6px; background:#c7c7c7;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Simulated browser chrome -->200 <div class="browser-bar">201 <div class="status-row">202 2:07203 <div class="spacer"></div>204 <div class="status-icon"></div>205 <div class="status-icon"></div>206 <div class="status-icon"></div>207 </div>208 <div class="address-row">209 <!-- back/close -->210 <div class="icon-btn">211 <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2" fill="none"/></svg>212 </div>213 <!-- lock -->214 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff"><path d="M12 2a4 4 0 0 0-4 4v3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-2V6a4 4 0 0 0-4-4zm-2 7V6a2 2 0 0 1 4 0v3H10z"/></svg>215 <div class="addr-chip">Hotels in Berlin – Google … • google.com</div>216 <div class="addr-actions">217 <div class="icon-btn">218 <svg viewBox="0 0 24 24"><path d="M18 8l-6 6-2-2 6-6h-4V4h8v8h-2z"/></svg>219 </div>220 <div class="icon-btn">221 <svg viewBox="0 0 24 24"><path d="M6 2h12v20l-6-4-6 4z"/></svg>222 </div>223 <div class="icon-btn">224 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>225 </div>226 </div>227 </div>228 </div>229 230 <!-- Main content -->231 <div class="content">232 <div class="google-header">233 <div class="left-header">234 <div class="hamburger">235 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3"/></svg>236 </div>237 <div class="google-wordmark">238 <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>239 </div>240 </div>241 <div class="right-header">242 <div class="grid-icon">243 <svg viewBox="0 0 24 24">244 <path d="M4 4h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 10h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 16h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4z"/>245 </svg>246 </div>247 <div class="avatar">C</div>248 </div>249 </div>250 251 <div class="tabs">252 <div class="tab">Travel</div>253 <div class="tab">Explore</div>254 <div class="tab">Flights</div>255 <div class="tab active">Hotels</div>256 <div class="tab">Holiday rentals</div>257 </div>258 259 <div class="search-bar">260 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14.5 14.5L20 20" stroke="#5f6368" stroke-width="2"/></svg>261 Hotels in Berlin262 </div>263 264 <div class="date-row">265 <div class="date-pill">266 <svg viewBox="0 0 24 24"><path d="M19 4h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 15H5V9h14v10z"/></svg>267 Mon, 1 Jan268 </div>269 <div class="date-pill">270 Fri, 5 Jan271 </div>272 <div class="guest-pill">273 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>274 2275 </div>276 </div>277 278 <div class="chips">279 <div class="chip">280 <svg viewBox="0 0 24 24"><path d="M4 6h8v2H4v-2zm0 5h14v2H4v-2zm0 5h10v2H4v-2zM12 6h2v4h-2V6zm8 8h-2v4h2v-4z"/></svg>281 Filters282 </div>283 <div class="chip">284 <svg viewBox="0 0 24 24"><path d="M4 10h16v2H4z"/><path d="M12 4l4 6H8z"/></svg>285 Under ₹6,500286 </div>287 <div class="chip">288 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3.2L6 20l1.5-6.9L3 8.9 9 8l3-6z"/></svg>289 4+ rating290 </div>291 <div class="chip">292 <svg viewBox="0 0 24 24"><path d="M7 14c3-1 5-5 10-6-1 6-5 9-10 10 2-2 3-3 0-4z"/></svg>293 Spa294 </div>295 <div class="chip">⚙ Settings</div>296 </div>297 298 <div class="section-head">299 <div><span class="sub">Sponsored ·</span> Berlin hotels</div>300 <svg viewBox="0 0 24 24" width="40" height="40" fill="#5f6368"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>301 </div>302 303 <div class="card-row">304 <div class="hotel-card">305 <div class="hotel-img">[IMG: Hotel Photo]</div>306 <div class="card-body">307 <div class="hotel-title">Crowne Plaza Berlin -…</div>308 <div class="price">₹9,764</div>309 <div class="brand">🏨 Crowne Plaza …</div>310 <div class="rating">311 4.5/5312 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3.2L6 20l1.5-6.9L3 8.9 9 8l3-6z"/></svg>313 (1,932)314 </div>315 <div class="tag">Spa</div>316 </div>317 </div>318 319 <div class="hotel-card">320 <div class="hotel-img">[IMG: Hotel Photo]</div>321 <div class="card-body">322 <div class="hotel-title">Holiday Inn Berlin - City East Side,…</div>323 <div class="price">₹10,711</div>324 <div class="brand">H Holiday Inn Berlin …</div>325 <div class="rating">326 4.4/5327 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3.2L6 20l1.5-6.9L3 8.9 9 8l3-6z"/></svg>328 (2,066)329 </div>330 <div class="tag">Free cancellation</div>331 </div>332 </div>333 334 <div class="hotel-card">335 <div class="hotel-img">[IMG: Hotel Photo]</div>336 <div class="card-body">337 <div class="hotel-title">MEININGER Berlin Ce…</div>338 <div class="price">₹3,002</div>339 <div class="brand">B Booking …</div>340 <div class="rating">341 3.7/5342 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3.2L6 20l1.5-6.9L3 8.9 9 8l3-6z"/></svg>343 (…)344 </div>345 <div class="tag">Pet-friendly</div>346 </div>347 </div>348 </div>349 350 <div class="divider"></div>351 352 <div class="results-row">353 <div>Berlin · 4,754 results</div>354 <div class="about">355 About these results356 <div class="info-dot">i</div>357 </div>358 </div>359 360 <!-- Simulated lower content preview carousel -->361 <div style="padding: 10px 20px 280px 20px; display:flex; gap:16px;">362 <div style="width: 260px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Hotel Photo]</div>363 <div style="width: 260px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: City Photo]</div>364 <div style="width: 260px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Berlin Landmark]</div>365 <div style="width: 260px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Hotel Room]</div>366 </div>367 368 <!-- Floating map pill -->369 <div class="map-pill">370 <svg viewBox="0 0 24 24"><path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>371 View map372 <div class="bookmark">373 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z" fill="#1a73e8"/></svg>374 </div>375 </div>376 377 </div>378 379 <div class="gesture"></div>380</div>381</body>382</html>