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>Search - Berlin</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #F3F6FA;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 left: 0; top: 0; right: 0;22 height: 120px;23 background: #FFFFFF;24 display: flex;25 align-items: center;26 padding: 0 36px;27 color: #2B2E34;28 font-weight: 600;29 font-size: 36px;30 }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 color: #2B2E34;37 font-weight: 600;38 }39 .sb-icon { width: 42px; height: 42px; }40 41 /* Search bar */42 .search-wrap {43 position: absolute;44 left: 36px; right: 36px; top: 140px;45 }46 .search-bar {47 height: 120px;48 background: #FFFFFF;49 border: 3px solid #2E6EEB;50 border-radius: 24px;51 display: flex;52 align-items: center;53 padding: 0 26px;54 gap: 22px;55 box-shadow: 0 2px 0 rgba(0,0,0,0.02);56 }57 .back-btn svg { width: 48px; height: 48px; fill: #2B2E34; }58 .search-input {59 flex: 1;60 height: 80px;61 border: none;62 outline: none;63 font-size: 46px;64 color: #1F2A36;65 background: transparent;66 }67 .clear-chip {68 width: 64px; height: 64px;69 border-radius: 50%;70 background: #E8EDF6;71 display: flex; align-items: center; justify-content: center;72 }73 .clear-chip svg { width: 30px; height: 30px; stroke: #5F6C7B; stroke-width: 6; fill: none; }74 75 /* Suggestions card */76 .suggestions {77 position: absolute;78 left: 18px; right: 18px;79 top: 300px;80 bottom: 940px; /* leaves space for keyboard */81 padding: 14px;82 }83 .card {84 background: #FFFFFF;85 border-radius: 26px;86 box-shadow: 0 2px 0 rgba(0,0,0,0.02);87 height: 100%;88 overflow: hidden;89 }90 .row {91 display: flex;92 align-items: center;93 padding: 34px 26px;94 border-top: 1px solid #E8EEF4;95 }96 .row:first-child { border-top: none; }97 98 .left-icon {99 width: 80px; height: 80px;100 border-radius: 12px;101 background: #EEF3FA;102 display: flex; align-items: center; justify-content: center;103 margin-right: 26px;104 }105 .left-icon svg { width: 54px; height: 54px; fill: #7487A4; }106 107 .middle {108 flex: 1;109 }110 .title {111 font-size: 40px;112 color: #1E2B3C;113 margin-bottom: 8px;114 }115 .subtitle {116 font-size: 32px;117 color: #6F88A6;118 font-weight: 600;119 }120 .tag {121 font-size: 32px;122 color: #6F88A6;123 font-weight: 700;124 }125 126 /* Keyboard mock */127 .keyboard {128 position: absolute;129 left: 0; right: 0; bottom: 0;130 height: 940px;131 background: #121A1C;132 color: #E7ECF0;133 box-shadow: 0 -6px 16px rgba(0,0,0,0.3);134 border-top-left-radius: 22px;135 border-top-right-radius: 22px;136 overflow: hidden;137 }138 .kb-suggest {139 height: 120px;140 background: #0F1719;141 display: flex;142 align-items: center;143 gap: 28px;144 padding: 0 28px;145 }146 .chip {147 background: #273237;148 color: #D7DCE0;149 padding: 18px 28px;150 border-radius: 24px;151 font-size: 34px;152 }153 .rows {154 padding: 26px;155 display: grid;156 row-gap: 22px;157 }158 .keys-row {159 display: grid;160 grid-auto-flow: column;161 column-gap: 16px;162 }163 .key {164 background: #243137;165 border-radius: 16px;166 height: 120px;167 display: flex; align-items: center; justify-content: center;168 font-size: 42px;169 }170 .key.small { width: 90px; }171 .space-row {172 display: grid;173 grid-template-columns: 160px 1fr 160px 160px;174 column-gap: 16px;175 }176 .search-key {177 background: #78E3C2;178 color: #0E1517;179 border-radius: 70px;180 width: 120px; height: 120px;181 display: flex; align-items: center; justify-content: center;182 margin-left: auto;183 }184 .search-key svg { width: 44px; height: 44px; fill: #0E1517; }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar">192 12:47193 <div class="status-right">194 <!-- simple signal icon -->195 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="2" y="14" width="3" height="8" fill="#2B2E34"/><rect x="7" y="10" width="3" height="12" fill="#2B2E34"/><rect x="12" y="6" width="3" height="16" fill="#2B2E34"/><rect x="17" y="2" width="3" height="20" fill="#2B2E34"/></svg>196 <!-- wifi -->197 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#2B2E34" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#2B2E34" stroke-width="2" fill="none"/><path d="M8 16c2-2 6-2 8 0" stroke="#2B2E34" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="2" fill="#2B2E34"/></svg>198 <!-- battery -->199 <div style="display:flex; align-items:center; gap:10px;">200 <svg class="sb-icon" viewBox="0 0 30 18">201 <rect x="1" y="3" width="24" height="12" rx="2" ry="2" stroke="#2B2E34" fill="none" stroke-width="2"></rect>202 <rect x="3" y="5" width="20" height="8" fill="#2B2E34"></rect>203 <rect x="26" y="7" width="3" height="4" rx="1" fill="#2B2E34"></rect>204 </svg>205 <span>100%</span>206 </div>207 </div>208 </div>209 210 <!-- Search field -->211 <div class="search-wrap">212 <div class="search-bar">213 <div class="back-btn">214 <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" fill="none" stroke="#2B2E34" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>215 </div>216 <input class="search-input" value="Berlin" />217 <div class="clear-chip">218 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" /></svg>219 </div>220 </div>221 </div>222 223 <!-- Suggestions -->224 <div class="suggestions">225 <div class="card">226 <div class="row">227 <div class="left-icon">228 <!-- building -->229 <svg viewBox="0 0 24 24">230 <rect x="4" y="7" width="4" height="12"></rect>231 <rect x="10" y="3" width="4" height="16"></rect>232 <rect x="16" y="10" width="4" height="9"></rect>233 </svg>234 </div>235 <div class="middle">236 <div class="title">Berlin, Germany</div>237 <div class="subtitle">1449 properties</div>238 </div>239 <div class="tag">City</div>240 </div>241 242 <div class="row">243 <div class="left-icon">244 <!-- location pin with star -->245 <svg viewBox="0 0 24 24">246 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7z"></path>247 <path d="M12 6l1.2 2.4 2.6.3-1.9 1.8.5 2.6L12 12.1 9.6 13.1l.5-2.6-1.9-1.8 2.6-.3L12 6z" fill="#FFFFFF"></path>248 </svg>249 </div>250 <div class="middle">251 <div class="title">Berlin City Centre, Berlin</div>252 <div class="subtitle">707 properties</div>253 </div>254 <div class="tag">Landmark</div>255 </div>256 257 <div class="row">258 <div class="left-icon">259 <svg viewBox="0 0 24 24">260 <rect x="4" y="7" width="4" height="12"></rect>261 <rect x="10" y="3" width="4" height="16"></rect>262 <rect x="16" y="10" width="4" height="9"></rect>263 </svg>264 </div>265 <div class="middle">266 <div class="title">Mitte, Berlin</div>267 <div class="subtitle">399 properties</div>268 </div>269 <div class="tag">Area</div>270 </div>271 272 <div class="row">273 <div class="left-icon">274 <svg viewBox="0 0 24 24">275 <rect x="4" y="7" width="4" height="12"></rect>276 <rect x="10" y="3" width="4" height="16"></rect>277 <rect x="16" y="10" width="4" height="9"></rect>278 </svg>279 </div>280 <div class="middle">281 <div class="title">Friedrichshain-Kreuzberg, Berlin</div>282 <div class="subtitle">480 properties</div>283 </div>284 <div class="tag">Area</div>285 </div>286 287 <div class="row">288 <div class="left-icon">289 <svg viewBox="0 0 24 24">290 <rect x="4" y="7" width="4" height="12"></rect>291 <rect x="10" y="3" width="4" height="16"></rect>292 <rect x="16" y="10" width="4" height="9"></rect>293 </svg>294 </div>295 <div class="middle">296 <div class="title">Mitte, Berlin</div>297 <div class="subtitle">318 properties</div>298 </div>299 <div class="tag">Area</div>300 </div>301 302 <div class="row">303 <div class="left-icon">304 <svg viewBox="0 0 24 24">305 <rect x="4" y="7" width="4" height="12"></rect>306 <rect x="10" y="3" width="4" height="16"></rect>307 <rect x="16" y="10" width="4" height="9"></rect>308 </svg>309 </div>310 <div class="middle">311 <div class="title">Pankow, Berlin</div>312 <div class="subtitle">464 properties</div>313 </div>314 <div class="tag">Area</div>315 </div>316 317 <div class="row">318 <div class="left-icon">319 <svg viewBox="0 0 24 24">320 <rect x="4" y="7" width="4" height="12"></rect>321 <rect x="10" y="3" width="4" height="16"></rect>322 <rect x="16" y="10" width="4" height="9"></rect>323 </svg>324 </div>325 <div class="middle">326 <div class="title">Tiergarten, Berlin</div>327 <div class="subtitle">101 properties</div>328 </div>329 <div class="tag">Area</div>330 </div>331 332 <div class="row">333 <div class="left-icon">334 <svg viewBox="0 0 24 24">335 <rect x="4" y="7" width="4" height="12"></rect>336 <rect x="10" y="3" width="4" height="16"></rect>337 <rect x="16" y="10" width="4" height="9"></rect>338 </svg>339 </div>340 <div class="middle">341 <div class="title">Charlottenburg-Wilmersdorf, Berlin</div>342 <div class="subtitle">329 properties</div>343 </div>344 <div class="tag">Area</div>345 </div>346 </div>347 </div>348 349 <!-- Keyboard mock -->350 <div class="keyboard">351 <div class="kb-suggest">352 <div class="chip">Berlin</div>353 <div class="chip">Berliner</div>354 <div class="chip">Berl in</div>355 </div>356 357 <div class="rows">358 <div class="keys-row" style="grid-template-columns: repeat(10, 1fr);">359 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>360 </div>361 362 <div class="keys-row" style="grid-template-columns: 0.5fr repeat(9, 1fr) 0.5fr;">363 <div class="key"></div>364 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>365 <div class="key"></div>366 </div>367 368 <div class="keys-row" style="grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr;">369 <div class="key">⇧</div>370 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>371 <div class="key">⌫</div>372 </div>373 374 <div class="space-row">375 <div class="key">?123</div>376 <div class="key">space</div>377 <div class="key">,</div>378 <div class="search-key">379 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4" stroke="#0E1517" stroke-width="3" fill="none" stroke-linecap="round"/></svg>380 </div>381 </div>382 </div>383 </div>384 385</div>386</body>387</html>