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>Hotels in Berlin – Google</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }9 #render-target {10 position: relative; overflow: hidden;11 width:1080px; height:2400px;12 background:#ffffff;13 }14 15 /* Top system + browser bar */16 .sysbar { height:110px; background:#2b2b2b; color:#fff; padding:0 28px; display:flex; align-items:center; font-size:34px; }17 .sysbar .left { flex:1; }18 .sysbar .right { display:flex; gap:22px; align-items:center; opacity:0.9; }19 .urlbar { height:140px; background:#303030; color:#fff; padding:0 26px; display:flex; align-items:center; }20 .urlbar .left, .urlbar .right { display:flex; align-items:center; gap:28px; }21 .urlbar .title { flex:1; display:flex; flex-direction:column; line-height:1.15; }22 .urlbar .page { font-size:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0.95; }23 .urlbar .domain { font-size:28px; opacity:0.7; }24 25 /* Google header */26 .g-header { padding:28px 34px 0 34px; background:#fff; }27 .g-toprow { height:120px; display:flex; align-items:center; }28 .icon-btn { width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center; }29 .g-logo { font-size:56px; font-weight:700; letter-spacing:-0.5px; margin-left:18px; }30 .g-logo span:nth-child(1){ color:#4285F4; }31 .g-logo span:nth-child(2){ color:#EA4335; }32 .g-logo span:nth-child(3){ color:#FBBC05; }33 .g-logo span:nth-child(4){ color:#4285F4; }34 .g-logo span:nth-child(5){ color:#34A853; }35 .g-logo span:nth-child(6){ color:#EA4335; }36 .avatar { width:86px; height:86px; border-radius:50%; background:#0ea5a3; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-left:auto; }37 38 .tabs { display:flex; gap:44px; padding:18px 0 22px 10px; font-size:40px; color:#6b7280; }39 .tab.active { color:#1a73e8; position:relative; }40 .tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-14px; height:8px; background:#1a73e8; border-radius:6px; }41 42 /* Search box */43 .search-row { padding:24px 34px; }44 .searchbox {45 height:120px; border:1px solid #e1e5ea; border-radius:22px; display:flex; align-items:center; padding:0 26px; box-shadow:0 2px 0 rgba(0,0,0,0.02);46 }47 .searchbox input { border:none; outline:none; font-size:40px; flex:1; color:#4b5563; }48 .searchbox svg { margin-right:18px; }49 50 /* Date and guests row */51 .date-row { padding:8px 34px 0 34px; display:flex; gap:18px; align-items:center; }52 .date-control {53 flex:1; height:128px; border:3px solid #1a73e8; border-radius:22px; display:flex; align-items:center; padding:0 26px; gap:26px; color:#1a73e8; font-size:38px; font-weight:600;54 }55 .date-divider { width:2px; height:70px; background:#d2d8e4; margin:0 8px 0 0; }56 .guest-btn {57 width:160px; height:128px; border:1px solid #e1e5ea; border-radius:22px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:38px; color:#374151; background:#fff;58 }59 60 /* Chips */61 .chips { padding:22px 34px 24px 34px; display:flex; gap:18px; flex-wrap:wrap; }62 .chip {63 display:flex; align-items:center; gap:12px; height:92px; padding:0 28px; border:1px solid #e5e7eb; border-radius:18px; background:#fff; color:#374151; font-size:36px;64 box-shadow:0 2px 0 rgba(0,0,0,0.02);65 }66 67 .section { padding:14px 34px; }68 .muted { color:#6b7280; }69 .section h3 { margin:10px 0 18px 0; font-size:44px; font-weight:700; }70 71 /* Horizontal cards */72 .h-scroll { display:flex; gap:24px; overflow:hidden; padding-bottom:26px; }73 .card {74 width:320px; border:1px solid #e5e7eb; border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 2px 0 rgba(0,0,0,0.02);75 }76 .card .img {77 width:100%; height:200px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;78 }79 .card .body { padding:18px; }80 .card .title { font-size:36px; color:#1a73e8; height:96px; overflow:hidden; }81 .price { font-size:36px; margin-top:10px; }82 .rating { color:#6b7280; font-size:30px; display:flex; align-items:center; gap:8px; margin-top:8px; }83 .star { color:#f59e0b; font-size:34px; }84 85 /* Results section with map pill */86 .results-head { padding:8px 34px 10px 34px; display:flex; align-items:center; }87 .results-head .left { font-size:44px; font-weight:700; }88 .results-head .right { margin-left:auto; color:#6b7280; font-size:34px; display:flex; align-items:center; gap:10px; }89 90 .big-card { margin:6px 34px 0 34px; border-radius:26px; border:1px solid #e5e7eb; overflow:hidden; position:relative; }91 .big-card .bigimg { height:300px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; }92 .floating-pill {93 position:absolute; left:40px; bottom:20px; background:#fff; height:110px; border-radius:60px; box-shadow:0 6px 16px rgba(0,0,0,0.18); display:flex; align-items:center; padding:0 28px; gap:30px;94 }95 .pill-btn { display:flex; align-items:center; gap:14px; padding:0 12px; color:#1a73e8; font-size:40px; }96 .pill-divider { width:2px; height:56px; background:#e5e7eb; }97 98 /* Bottom gesture bar */99 .gesture { position:absolute; left:350px; right:350px; bottom:24px; height:14px; border-radius:8px; background:#cfd3d9; }100 101 /* Helpers */102 .row { display:flex; align-items:center; }103 svg { display:block; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Android status bar -->110 <div class="sysbar">111 <div class="left">2:05</div>112 <div class="right">113 <!-- simple status dots -->114 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="3" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="21" cy="12" r="2" fill="#fff"/></svg>115 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#fff" d="M20 8v8H4V8h16m1-2H3v12h18V6z"/></svg>116 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#fff" d="M17 18h-3v-2h3v2m3-10.5V21H4V7.5L12 3l8 4.5z"/></svg>117 <span style="font-size:32px;">100%</span>118 </div>119 </div>120 121 <!-- Chrome URL bar -->122 <div class="urlbar">123 <div class="left">124 <!-- close/back -->125 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#fff" d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L9.17 12l7.72-7.71 1.41 1.42z"/></svg>126 </div>127 <div class="title">128 <div class="page">Hotels in Berlin — Google …</div>129 <div class="domain">google.com</div>130 </div>131 <div class="right" style="margin-left:auto;">132 <!-- share -->133 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#fff" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7-4.11A3 3 0 1 0 14 5a3 3 0 0 0 .04.48l-7 4.11a3 3 0 1 0 0 4.82l7.04 4.13A3 3 0 1 0 18 16.08z"/></svg>134 <!-- bookmark -->135 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#fff" d="M6 2h12v20l-6-4-6 4V2z"/></svg>136 <!-- more -->137 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#fff" d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/></svg>138 </div>139 </div>140 141 <!-- Google content -->142 <div class="g-header">143 <div class="g-toprow">144 <div class="icon-btn">145 <!-- hamburger -->146 <svg width="52" height="52" viewBox="0 0 24 24"><path fill="#5f6368" d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>147 </div>148 <div class="g-logo">149 <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>150 </div>151 <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">152 <!-- 3x3 grid -->153 <div class="icon-btn">154 <svg width="52" height="52" viewBox="0 0 24 24"><g fill="#5f6368"><circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/></g></svg>155 </div>156 <div class="avatar">C</div>157 </div>158 </div>159 160 <div class="tabs">161 <div class="tab">Travel</div>162 <div class="tab">Explore</div>163 <div class="tab">Flights</div>164 <div class="tab active">Hotels</div>165 <div class="tab">Holiday rentals</div>166 </div>167 </div>168 169 <div class="search-row">170 <div class="searchbox">171 <!-- search icon -->172 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#6b7280" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L15.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/></svg>173 <input type="text" value="Hotels in Berlin" />174 </div>175 </div>176 177 <div class="date-row">178 <div class="date-control">179 <!-- calendar icon -->180 <svg width="52" height="52" viewBox="0 0 24 24"><path fill="#1a73e8" d="M7 2h2v3H7V2m8 0h2v3h-2V2M5 8h14v12H5V8m16-3h-3V2h-2v3H8V2H6v3H3v16h18V5z"/></svg>181 <div>Sat, 30 Dec</div>182 <div class="date-divider"></div>183 <div>Sun, 31 Dec</div>184 </div>185 <div class="guest-btn">186 <!-- user icon -->187 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#374151" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.24-8 5v1h16v-1c0-2.76-3.6-5-8-5z"/></svg>188 <span>2</span>189 </div>190 </div>191 192 <div class="chips">193 <div class="chip">194 <!-- filter icon -->195 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#374151" d="M3 5h18v2H3V5m4 6h10v2H7v-2m-2 6h14v2H5v-2z"/></svg>196 <span>Price</span>197 </div>198 <div class="chip">199 <!-- tag icon -->200 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#374151" d="M21 11l-9-9H4v8l9 9 8-8zM7 5a2 2 0 110 4 2 2 0 010-4z"/></svg>201 <span>Offers</span>202 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#6b7280" d="M7 10l5 5 5-5H7z"/></svg>203 </div>204 <div class="chip">205 <!-- star icon -->206 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#374151" d="M12 17.3l-6.18 3.64 1.64-7.03L2 8.9l7.19-.61L12 1.5l2.81 6.79L22 8.9l-5.46 5.01 1.64 7.03z"/></svg>207 <span>Guest rating</span>208 </div>209 </div>210 211 <div class="section">212 <div class="muted" style="font-size:34px; margin-bottom:8px;">Sponsored · Berlin hotels</div>213 <div class="h-scroll">214 <div class="card">215 <div class="img">[IMG: Hotel bathroom]</div>216 <div class="body">217 <div class="title">Crowne Plaza Berlin City…</div>218 <div class="price">£163</div>219 <div class="rating"><span class="star">★</span> 4.4/5 (2,982)</div>220 <div class="muted" style="margin-top:6px; font-size:30px;">Spa</div>221 </div>222 </div>223 <div class="card">224 <div class="img">[IMG: Hotel exterior at street]</div>225 <div class="body">226 <div class="title">Vienna House by Wyndham…</div>227 <div class="price">£154</div>228 <div class="rating"><span class="star">★</span> 4.4/5 (6,615)</div>229 <div class="muted" style="margin-top:6px; font-size:30px;">Pet-friendly</div>230 </div>231 </div>232 <div class="card">233 <div class="img">[IMG: Hotel lobby entrance]</div>234 <div class="body">235 <div class="title">Hampton by Hilton Berlin…</div>236 <div class="price">£138</div>237 <div class="rating"><span class="star">★</span> 4.5/5 (5,100)</div>238 <div class="muted" style="margin-top:6px; font-size:30px;">Breakfast</div>239 </div>240 </div>241 </div>242 </div>243 244 <div class="results-head">245 <div class="left">Berlin · 1,309 results</div>246 <div class="right">247 <span>About these results</span>248 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#6b7280" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>249 </div>250 </div>251 252 <div class="big-card">253 <div class="bigimg">[IMG: Hotel list with map thumbnail]</div>254 <div class="floating-pill">255 <div class="pill-btn">256 <!-- map icon -->257 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#1a73e8" d="M15 4l-6 2-6-2v16l6 2 6-2 6 2V6l-6-2zm-6 15l-4-1.33V6.33L9 7.67V19zm6 0l-4-1.33V6.33L15 7.67V19zm6 1.33L15 19V7.67l6 2V20.33z"/></svg>258 <span>View map</span>259 </div>260 <div class="pill-divider"></div>261 <div class="pill-btn" style="color:#1f2937;">262 <!-- bookmark -->263 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#1f2937" d="M6 2h12v18l-6-3-6 3V2z"/></svg>264 <span>Save</span>265 </div>266 </div>267 </div>268 269 <!-- iOS/Android gesture bar -->270 <div class="gesture"></div>271</div>272</body>273</html>