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 Results - Mockup</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 110px;29 padding: 0 36px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #1F1F1F;34 font-size: 42px;35 box-sizing: border-box;36 background: #ffffff;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 26px;42 }43 .status-icons svg {44 width: 40px;45 height: 40px;46 fill: #616161;47 }48 49 /* Search bar */50 .search-wrap {51 position: absolute;52 top: 120px;53 left: 36px;54 right: 36px;55 height: 118px;56 display: flex;57 align-items: center;58 background: #F1F3F4;59 border: 1px solid #E0E0E0;60 border-radius: 60px;61 padding: 0 28px;62 box-sizing: border-box;63 }64 .icon-btn {65 width: 72px;66 height: 72px;67 border-radius: 36px;68 display: flex;69 align-items: center;70 justify-content: center;71 }72 .icon-btn svg {73 width: 44px;74 height: 44px;75 fill: #5F6368;76 }77 .search-text {78 flex: 1;79 font-size: 46px;80 color: #202124;81 padding: 0 18px;82 white-space: nowrap;83 overflow: hidden;84 text-overflow: ellipsis;85 }86 .clear-btn {87 width: 68px;88 height: 68px;89 border-radius: 50%;90 background: #ffffff;91 border: 1px solid #E0E0E0;92 display: flex;93 align-items: center;94 justify-content: center;95 }96 .clear-btn svg {97 width: 34px;98 height: 34px;99 stroke: #5F6368;100 fill: none;101 stroke-width: 7;102 }103 104 /* Results list */105 .results {106 position: absolute;107 top: 260px;108 left: 0;109 right: 0;110 bottom: 860px; /* leave space for keyboard */111 overflow: hidden;112 }113 .list {114 height: 100%;115 overflow: hidden;116 }117 .item {118 position: relative;119 padding: 28px 120px 28px 170px;120 box-sizing: border-box;121 min-height: 188px;122 display: flex;123 flex-direction: column;124 justify-content: center;125 }126 .item + .item {127 border-top: 1px solid #E5E5E5;128 }129 .pin {130 position: absolute;131 left: 40px;132 top: 30px;133 width: 90px;134 height: 90px;135 border-radius: 45px;136 background: #F5F5F5;137 border: 1px solid #D6D6D6;138 display: flex;139 align-items: center;140 justify-content: center;141 }142 .pin svg {143 width: 44px;144 height: 44px;145 fill: #757575;146 }147 .distance {148 position: absolute;149 left: 36px;150 top: 122px;151 width: 100px;152 text-align: center;153 font-size: 30px;154 color: #7D7D7D;155 }156 .title {157 font-size: 46px;158 color: #202124;159 font-weight: 600;160 margin-bottom: 10px;161 }162 .subtitle {163 font-size: 34px;164 color: #6B6B6B;165 white-space: nowrap;166 overflow: hidden;167 text-overflow: ellipsis;168 }169 .go-icon {170 position: absolute;171 right: 34px;172 top: 0;173 bottom: 0;174 width: 70px;175 display: flex;176 align-items: center;177 justify-content: center;178 }179 .go-icon svg {180 width: 44px;181 height: 44px;182 fill: #6E6E6E;183 }184 185 /* Keyboard mock */186 .keyboard {187 position: absolute;188 left: 0;189 right: 0;190 bottom: 60px;191 height: 820px;192 background: #EFF2EA;193 border-top-left-radius: 22px;194 border-top-right-radius: 22px;195 padding: 16px 22px 26px;196 box-sizing: border-box;197 }198 .suggestions {199 display: flex;200 gap: 18px;201 padding: 12px 0 18px;202 }203 .chip {204 background: #FFFFFF;205 border: 1px solid #E0E0E0;206 color: #3C4043;207 font-size: 36px;208 padding: 12px 22px;209 border-radius: 30px;210 }211 .keys {212 display: grid;213 grid-template-rows: repeat(4, 1fr);214 row-gap: 18px;215 height: calc(100% - 100px);216 }217 .row {218 display: grid;219 grid-template-columns: repeat(10, 1fr);220 column-gap: 12px;221 align-items: center;222 }223 .key {224 background: #FFFFFF;225 border: 1px solid #E0E0E0;226 border-radius: 18px;227 height: 112px;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 44px;232 color: #2B2B2B;233 }234 .key.small {235 grid-column: span 1;236 }237 .key.wide {238 grid-column: span 2;239 }240 .key.green {241 background: #DDE8D4;242 border-color: #C9D7C0;243 }244 .spacebar {245 grid-column: span 6;246 }247 248 /* Gesture pill */249 .gesture {250 position: absolute;251 bottom: 16px;252 left: 50%;253 transform: translateX(-50%);254 width: 260px;255 height: 10px;256 background: #CBCBCB;257 border-radius: 8px;258 }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Status bar -->265 <div class="status-bar">266 <div class="time">3:34</div>267 <div class="status-icons">268 <!-- location dot -->269 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M12 2v3M12 19v3M2 12h3M19 12h3" /></svg>270 <!-- wifi -->271 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#616161" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#616161" stroke-width="2" fill="none"/><path d="M9 16c2-2 4-2 6 0" stroke="#616161" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.5" /></svg>272 <!-- battery -->273 <svg viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" ry="2"></rect><rect x="3" y="5" width="14" height="6" fill="#616161"></rect><rect x="24" y="6" width="3" height="4"></rect></svg>274 </div>275 </div>276 277 <!-- Search -->278 <div class="search-wrap">279 <div class="icon-btn">280 <!-- back arrow -->281 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke="#5F6368" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>282 </div>283 <div class="search-text">taj mahal</div>284 <div class="clear-btn">285 <svg viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="10"></circle>287 <path d="M8 8 L16 16 M16 8 L8 16" />288 </svg>289 </div>290 </div>291 292 <!-- Result List -->293 <div class="results">294 <div class="list">295 296 <div class="item">297 <div class="pin">298 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>299 </div>300 <div class="distance">164 km</div>301 <div class="title">Taj Mahal</div>302 <div class="subtitle">Dharmapuri, Forest Colony, Tajganj, Agra…</div>303 <div class="go-icon">304 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>305 </div>306 </div>307 308 <div class="item">309 <div class="pin">310 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>311 </div>312 <div class="distance">20 km</div>313 <div class="title">Taj Mahal Hotel, New Delhi</div>314 <div class="subtitle">Maan Singh Road, South Block, Man Sing…</div>315 <div class="go-icon">316 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>317 </div>318 </div>319 320 <div class="item">321 <div class="pin">322 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>323 </div>324 <div class="distance">20 km</div>325 <div class="title">Taj Mahal Hotel</div>326 <div class="subtitle">Taj Mansingh Hotel Road, South Block,…</div>327 <div class="go-icon">328 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>329 </div>330 </div>331 332 <div class="item">333 <div class="pin">334 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>335 </div>336 <div class="distance">25 km</div>337 <div class="title">Taj Mahal India Tours</div>338 <div class="subtitle">Channa Market, Raigar Pura, Dev Nagar,…</div>339 <div class="go-icon">340 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>341 </div>342 </div>343 344 <div class="item">345 <div class="pin">346 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>347 </div>348 <div class="distance">165 km</div>349 <div class="title">Taj Mahal Agra Tour Guide (Govt. a…</div>350 <div class="subtitle">Dharmapuri, Nai basti, Tajganj, Agra, Utt…</div>351 <div class="go-icon">352 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>353 </div>354 </div>355 356 <div class="item">357 <div class="pin">358 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>359 </div>360 <div class="distance">22 km</div>361 <div class="title">TAJ MAHAL</div>362 <div class="subtitle">Sansad Marg, Police Colony, Connaught…</div>363 <div class="go-icon">364 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>365 </div>366 </div>367 368 <div class="item">369 <div class="pin">370 <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>371 </div>372 <div class="distance">20 km</div>373 <div class="title">Taj mahal - WOW</div>374 <div class="subtitle">Nizamuddin, Block A, Nagli Rajapur, Rail…</div>375 <div class="go-icon">376 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M9 7h8v8" stroke="#6E6E6E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>377 </div>378 </div>379 380 </div>381 </div>382 383 <!-- Keyboard mock -->384 <div class="keyboard">385 <div class="suggestions">386 <div class="chip">mahal</div>387 <div class="chip">Mahal</div>388 <div class="chip">mahalaxmi</div>389 <div class="chip">😊</div>390 </div>391 <div class="keys">392 <div class="row">393 <div class="key">q</div>394 <div class="key">w</div>395 <div class="key">e</div>396 <div class="key">r</div>397 <div class="key">t</div>398 <div class="key">y</div>399 <div class="key">u</div>400 <div class="key">i</div>401 <div class="key">o</div>402 <div class="key">p</div>403 </div>404 <div class="row">405 <div class="key">a</div>406 <div class="key">s</div>407 <div class="key">d</div>408 <div class="key">f</div>409 <div class="key">g</div>410 <div class="key">h</div>411 <div class="key">j</div>412 <div class="key">k</div>413 <div class="key">l</div>414 <div class="key green">⌫</div>415 </div>416 <div class="row">417 <div class="key green wide">⇧</div>418 <div class="key">z</div>419 <div class="key">x</div>420 <div class="key">c</div>421 <div class="key">v</div>422 <div class="key">b</div>423 <div class="key">n</div>424 <div class="key">m</div>425 <div class="key">.</div>426 <div class="key green">⌦</div>427 </div>428 <div class="row">429 <div class="key wide">?123</div>430 <div class="key">,</div>431 <div class="key">🙂</div>432 <div class="key spacebar"></div>433 <div class="key">.</div>434 <div class="key green wide">🔍</div>435 </div>436 </div>437 </div>438 439 <div class="gesture"></div>440</div>441</body>442</html>