GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Google Hotels Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; color: #202124;12 }13 /* Top system + browser bars */14 .status-bar {15 height: 60px; background: #2b2b2b; color: #fff;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 24px; font-size: 26px;18 }19 .browser-bar {20 height: 120px; background: #3a3a3a; color: #fff;21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 24px; font-size: 30px;23 }24 .browser-left, .browser-right { display: flex; align-items: center; gap: 24px; }25 .icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }26 .icon-btn svg { width: 36px; height: 36px; fill: #fff; }27 .lock {28 display: inline-flex; align-items: center; gap: 12px; color: #cfcfcf; font-size: 30px;29 }30 31 /* Main content */32 .content { padding: 24px 32px 0 32px; }33 .google-header {34 display: flex; align-items: center; justify-content: space-between;35 padding: 16px 0 8px 0;36 }37 .left-brand { display: flex; align-items: center; gap: 24px; }38 .hamburger svg { width: 48px; height: 48px; fill: #5f6368; }39 .google-wordmark { font-weight: bold; font-size: 48px; color: #4285F4; letter-spacing: 0.5px; }40 .header-actions { display: flex; align-items: center; gap: 28px; }41 .grid-dots svg { width: 48px; height: 48px; fill: #5f6368; }42 .avatar {43 width: 70px; height: 70px; border-radius: 50%; background: #1e8e3e; color: #fff;44 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 36px;45 }46 47 .tabs { display: flex; gap: 36px; padding: 10px 0 18px 0; color: #5f6368; font-size: 34px; }48 .tab { padding-bottom: 12px; }49 .tab.active { color: #1a73e8; position: relative; }50 .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 6px; background: #1a73e8; }51 52 .search-bar {53 height: 100px; border: 1px solid #dadce0; border-radius: 50px;54 display: flex; align-items: center; gap: 20px; padding: 0 28px; font-size: 34px; color: #3c4043;55 box-shadow: 0 2px 0 rgba(0,0,0,0.03);56 }57 .search-icon svg { width: 40px; height: 40px; fill: #5f6368; }58 59 .date-row {60 margin-top: 20px; display: flex; align-items: center; gap: 16px;61 }62 .date-pill {63 display: flex; align-items: center; height: 110px;64 border: 2px solid #1a73e8; border-radius: 28px; overflow: hidden;65 }66 .date-seg {67 display: flex; align-items: center; gap: 16px; padding: 0 24px; font-size: 32px; color: #1a73e8; height: 100%;68 }69 .date-seg + .date-seg { border-left: 1px solid #c5d8fb; }70 .cal-icon svg { width: 40px; height: 40px; fill: #1a73e8; }71 .guest-pill {72 display: flex; align-items: center; gap: 16px; height: 110px;73 border: 2px solid #dadce0; border-radius: 28px; padding: 0 24px; font-size: 32px; color: #3c4043;74 }75 .person-icon svg { width: 42px; height: 42px; fill: #5f6368; }76 77 .filters { margin-top: 18px; display: flex; gap: 16px; flex-wrap: wrap; }78 .chip {79 height: 84px; display: flex; align-items: center; gap: 16px;80 border: 1px solid #dadce0; border-radius: 50px; padding: 0 24px;81 font-size: 30px; color: #3c4043; background: #fff;82 }83 .chip svg { width: 36px; height: 36px; fill: #5f6368; }84 .chip.primary { border-color: #dadce0; }85 86 .section-title {87 margin: 28px 0 18px 0; font-size: 36px; color: #3c4043;88 }89 90 .cards-row {91 display: flex; gap: 24px; overflow: hidden;92 }93 .card {94 width: 324px; border: 1px solid #e0e0e0; border-radius: 18px; background: #fff;95 box-shadow: 0 1px 0 rgba(0,0,0,0.04);96 }97 .card .img {98 width: 100%; height: 240px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;99 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;100 border-top-left-radius: 18px; border-top-right-radius: 18px;101 }102 .card-body { padding: 18px 20px 22px 20px; }103 .hotel-title { font-size: 32px; color: #1a73e8; line-height: 1.2; min-height: 76px; }104 .price { font-size: 32px; color: #202124; margin: 8px 0; }105 .vendor { display: flex; align-items: center; gap: 12px; color: #5f6368; font-size: 28px; }106 .badgeB { width: 34px; height: 34px; background: #1a73e8; color: #fff; border-radius: 6px;107 display: flex; align-items: center; justify-content: center; font-weight: bold; }108 .rating { margin-top: 10px; font-size: 28px; color: #5f6368; display: flex; align-items: center; gap: 8px; }109 .rating .star svg { width: 30px; height: 30px; fill: #fbbc04; }110 .amenity { margin-top: 8px; font-size: 28px; color: #5f6368; }111 112 .separator { margin: 24px -32px 0 -32px; height: 18px; background: #f1f3f4; }113 .results-row {114 padding: 24px 32px; display: flex; align-items: center; justify-content: space-between;115 font-size: 34px; color: #3c4043;116 }117 .results-row .right { color: #5f6368; font-size: 30px; display: flex; align-items: center; gap: 10px; }118 .info-icon {119 width: 28px; height: 28px; border-radius: 50%; border: 1px solid #9aa0a6; color: #9aa0a6;120 display: inline-flex; align-items: center; justify-content: center; font-size: 22px;121 }122 123 .floating-map {124 position: absolute; left: 120px; bottom: 200px;125 width: 840px; height: 120px; background: #fff; border-radius: 64px;126 box-shadow: 0 8px 24px rgba(0,0,0,0.2);127 display: flex; align-items: center; justify-content: space-between; padding: 0 36px;128 font-size: 34px; color: #3c4043;129 }130 .floating-map .left { display: flex; align-items: center; gap: 18px; }131 .map-icon {132 width: 56px; height: 56px; border-radius: 12px; background: #1a73e8;133 display: flex; align-items: center; justify-content: center;134 }135 .map-icon svg { width: 36px; height: 36px; fill: #fff; }136 .bookmark-icon svg { width: 40px; height: 40px; fill: #5f6368; }137 138 .bottom-bar {139 position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: #141414;140 display: flex; align-items: center; justify-content: center;141 }142 .home-indicator { width: 320px; height: 10px; background: #e0e0e0; border-radius: 10px; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Android status bar -->149 <div class="status-bar">150 <div>2:03</div>151 <div>• • •</div>152 <div>🔊 📶 🔋100%</div>153 </div>154 155 <!-- Browser address bar -->156 <div class="browser-bar">157 <div class="browser-left">158 <div class="icon-btn">159 <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>160 </div>161 <span class="lock">162 <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 016 0v3H9z"/></svg>163 google.com164 </span>165 </div>166 <div class="browser-right">167 <div class="icon-btn">168 <svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 01-6 6 6 6 0 01-6-6h2a4 4 0 008 0h2zm-6 8l-4 6h8l-4-6z"/></svg>169 </div>170 <div class="icon-btn">171 <svg viewBox="0 0 24 24"><path d="M6 4h12v2H6V4zm0 6h12v2H6v-2zm0 6h12v2H6v-2z"/></svg>172 </div>173 </div>174 </div>175 176 <div class="content">177 <!-- Google header -->178 <div class="google-header">179 <div class="left-brand">180 <div class="hamburger">181 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>182 </div>183 <div class="google-wordmark">Google</div>184 </div>185 <div class="header-actions">186 <div class="grid-dots">187 <svg viewBox="0 0 24 24"><path d="M4 4h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zM4 10h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zM4 16h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z"/></svg>188 </div>189 <div class="avatar">C</div>190 </div>191 </div>192 193 <!-- Tabs -->194 <div class="tabs">195 <div class="tab">Travel</div>196 <div class="tab">Explore</div>197 <div class="tab">Flights</div>198 <div class="tab active">Hotels</div>199 <div class="tab">Holiday rentals</div>200 </div>201 202 <!-- Search bar -->203 <div class="search-bar">204 <div class="search-icon">205 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zM9.5 14A4.5 4.5 0 115 9.5 4.5 4.5 0 019.5 14z"/></svg>206 </div>207 <div>hotels in berlin</div>208 </div>209 210 <!-- Dates and guests -->211 <div class="date-row">212 <div class="date-pill">213 <div class="date-seg">214 <div class="cal-icon"><svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 6H4v12h16V8z"/></svg></div>215 <div>Sat, 30 Dec</div>216 </div>217 <div class="date-seg">218 <div>Sun, 31 Dec</div>219 </div>220 </div>221 <div class="guest-pill">222 <div class="person-icon"><svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-8 8v-1a7 7 0 0114 0v1H4z"/></svg></div>223 <div>2</div>224 </div>225 </div>226 227 <!-- Filter chips -->228 <div class="filters">229 <div class="chip">230 <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z"/></svg>231 Filters232 </div>233 <div class="chip">234 <svg viewBox="0 0 24 24"><path d="M12 4c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm1 3h-2v6h5v-2h-3V7z"/></svg>235 Under ₹6,500236 </div>237 <div class="chip">238 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.5-5.9L3 9.9l6-.5L12 4l3 5.4 6 .5-5.3 4.6 1.5 5.9z"/></svg>239 4+ rating240 </div>241 <div class="chip">242 <svg viewBox="0 0 24 24"><path d="M12 2C7 2 4 6 4 10c0 5 8 12 8 12s8-7 8-12c0-4-3-8-8-8zm0 10a3 3 0 110-6 3 3 0 010 6z"/></svg>243 Spa244 </div>245 <div class="chip">246 <svg viewBox="0 0 24 24"><path d="M12 6l8 6-8 6-8-6 8-6z"/></svg>247 More248 </div>249 </div>250 251 <!-- Sponsored section -->252 <div class="section-title">Sponsored · Berlin hotels</div>253 254 <!-- Hotel cards -->255 <div class="cards-row">256 <div class="card">257 <div class="img">[IMG: Berlin hotel exterior]</div>258 <div class="card-body">259 <div class="hotel-title">CAMPANILE BERLIN...</div>260 <div class="price">₹6,714</div>261 <div class="vendor"><div class="badgeB">B</div> Booking.com</div>262 <div class="rating"><span>4.1/5</span><span class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.5-5.9L3 9.9l6-.5L12 4l3 5.4 6 .5-5.3 4.6 1.5 5.9z"/></svg></span><span>(751)</span></div>263 <div class="amenity">Pet-friendly</div>264 </div>265 </div>266 267 <div class="card">268 <div class="img">[IMG: Brick hotel facade]</div>269 <div class="card-body">270 <div class="hotel-title">H24 HOTELTOW</div>271 <div class="price">₹7,697</div>272 <div class="vendor"><div class="badgeB">B</div> Booking.com</div>273 <div class="rating"><span>3.8/5</span><span class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.5-5.9L3 9.9l6-.5L12 4l3 5.4 6 .5-5.3 4.6 1.5 5.9z"/></svg></span><span>(520)</span></div>274 <div class="amenity">Pet-friendly</div>275 </div>276 </div>277 278 <div class="card">279 <div class="img">[IMG: Hotel courtyard]</div>280 <div class="card-body">281 <div class="hotel-title">B&B Hotels Dreilin...</div>282 <div class="price">₹6,573</div>283 <div class="vendor"><div class="badgeB">B</div> Booking.com</div>284 <div class="rating"><span>4.3/5</span><span class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.5-5.9L3 9.9l6-.5L12 4l3 5.4 6 .5-5.3 4.6 1.5 5.9z"/></svg></span><span>(—)</span></div>285 <div class="amenity">Free cancel</div>286 </div>287 </div>288 </div>289 290 <div class="separator"></div>291 292 <div class="results-row">293 <div>Berlin · 4,249 results</div>294 <div class="right">About these results <span class="info-icon">i</span></div>295 </div>296 </div>297 298 <!-- Floating map pill -->299 <div class="floating-map">300 <div class="left">301 <div class="map-icon">302 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 6.2 7 13 7 13s7-6.8 7-13c0-3.9-3.1-7-7-7zm0 10a3 3 0 110-6 3 3 0 010 6z"/></svg>303 </div>304 <div>View map</div>305 </div>306 <div class="bookmark-icon">307 <svg viewBox="0 0 24 24"><path d="M6 4h12v18l-6-4-6 4V4z"/></svg>308 </div>309 </div>310 311 <!-- Bottom navigation bar -->312 <div class="bottom-bar">313 <div class="home-indicator"></div>314 </div>315</div>316</body>317</html>