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 - Dark UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EAEAEA;16 }17 18 /* Status bar */19 .status-bar {20 height: 88px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #E0E0E0;26 font-size: 36px;27 letter-spacing: 0.5px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .icon { display: inline-flex; align-items: center; justify-content: center; }35 .icon svg { display: block; }36 37 /* Search bar */38 .search-bar {39 height: 116px;40 padding: 0 24px;41 background: #1B1B1D;42 display: flex;43 align-items: center;44 border-bottom: 1px solid #2C2C2C;45 }46 .search-field {47 flex: 1;48 display: flex;49 align-items: center;50 gap: 20px;51 }52 .search-text {53 font-size: 40px;54 color: #EDEDED;55 white-space: nowrap;56 overflow: hidden;57 text-overflow: ellipsis;58 }59 .search-text .hl { color: #8AB4F8; }60 .cursor {61 display: inline-block;62 width: 3px;63 height: 46px;64 background: #8AB4F8;65 margin-left: 4px;66 vertical-align: middle;67 }68 .clear-btn {69 width: 72px;70 height: 72px;71 border-radius: 36px;72 background: #2A2A2D;73 display: flex;74 align-items: center;75 justify-content: center;76 }77 78 /* Results area */79 .content {80 position: absolute;81 top: 204px; /* 88 + 116 */82 left: 0;83 right: 0;84 bottom: 860px; /* leave space for keyboard */85 overflow: hidden;86 }87 .scroll {88 height: 100%;89 overflow: hidden;90 }91 .list {92 height: 100%;93 overflow-y: auto;94 }95 .section-title {96 font-size: 30px;97 color: #9AA0A6;98 padding: 22px 28px 10px;99 letter-spacing: 0.5px;100 }101 .result {102 display: flex;103 align-items: center;104 gap: 24px;105 padding: 26px 24px;106 border-top: 1px solid #242424;107 border-bottom: 1px solid #1E1E1E;108 }109 .left-col {110 width: 120px;111 text-align: center;112 color: #9AA0A6;113 font-size: 24px;114 }115 .distance {116 margin-top: 10px;117 color: #6FB6FF;118 font-size: 28px;119 }120 .details {121 flex: 1;122 min-width: 0;123 }124 .title {125 font-size: 36px;126 color: #FFFFFF;127 margin-bottom: 6px;128 }129 .subtitle {130 font-size: 28px;131 color: #B0BEC5;132 line-height: 1.2;133 }134 .trailing {135 width: 60px;136 display: flex;137 justify-content: center;138 align-items: center;139 opacity: 0.7;140 }141 .divider {142 height: 1px;143 background: #2B2B2B;144 margin: 0 24px;145 }146 147 /* Keyboard */148 .keyboard {149 position: absolute;150 left: 0;151 right: 0;152 bottom: 36px;153 height: 860px;154 background: #1A1617;155 border-top: 1px solid #2A2A2A;156 display: flex;157 flex-direction: column;158 }159 .suggestions {160 display: flex;161 gap: 16px;162 padding: 18px 20px;163 border-bottom: 1px solid #2A2A2A;164 }165 .chip {166 background: #2B2728;167 padding: 10px 18px;168 border-radius: 22px;169 color: #E7E0DE;170 font-size: 30px;171 }172 .keys {173 flex: 1;174 padding: 18px 24px 24px;175 display: flex;176 flex-direction: column;177 justify-content: space-between;178 }179 .row {180 display: flex;181 justify-content: center;182 gap: 14px;183 }184 .key {185 background: #2E2A2B;186 color: #EFE3E1;187 font-size: 40px;188 min-width: 84px;189 height: 112px;190 border-radius: 18px;191 display: flex;192 align-items: center;193 justify-content: center;194 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);195 }196 .key.small { min-width: 104px; }197 .key.medium { min-width: 136px; }198 .key.wide { min-width: 220px; }199 .space { flex: 1; min-width: 420px; }200 .enter { background: #EEC3C1; color: #2B2728; }201 .nav-pill {202 position: absolute;203 bottom: 8px;204 left: 50%;205 transform: translateX(-50%);206 width: 220px;207 height: 10px;208 background: #E6E6E6;209 opacity: 0.9;210 border-radius: 6px;211 }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status Bar -->218 <div class="status-bar">219 <div class="time">4:18</div>220 <div class="status-icons">221 <!-- Location -->222 <span class="icon">223 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 2a7 7 0 0 0 0 14 7 7 0 0 0 0-14zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>224 </span>225 <!-- WiFi -->226 <span class="icon">227 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M2 8c5.5-4.5 14.5-4.5 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3.5-2.5 8.5-2.5 12 0l-2 2c-2-1.5-6-1.5-8 0l-2-2zm4 4 2 2 2-2-2 2-2-2z"/></svg>228 </span>229 <!-- Battery -->230 <span class="icon">231 <svg width="46" height="34" viewBox="0 0 28 16" fill="none">232 <rect x="1" y="3" width="22" height="10" rx="2" fill="#E0E0E0"/>233 <rect x="3" y="5" width="16" height="6" rx="1" fill="#121212"/>234 <rect x="3" y="5" width="13" height="6" rx="1" fill="#E0E0E0"/>235 <rect x="23" y="6" width="4" height="4" rx="1" fill="#E0E0E0"/>236 </svg>237 </span>238 </div>239 </div>240 241 <!-- Search Bar -->242 <div class="search-bar">243 <div class="search-field">244 <!-- Back Arrow -->245 <span class="icon">246 <svg width="48" height="48" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M14.7 6.3 9 12l5.7 5.7-1.4 1.4L6.2 12l7.1-7.1 1.4 1.4z"/></svg>247 </span>248 <div class="search-text">Pacific mall tagore <span class="hl">garden</span><span class="cursor"></span></div>249 </div>250 <div class="clear-btn">251 <svg width="36" height="36" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 13.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4L10.6 12 8.5 9.9l1.4-1.4L12 10.6l2.1-2.1 1.4 1.4L13.4 12l2.1 2.1z"/></svg>252 </div>253 </div>254 255 <!-- Results -->256 <div class="content">257 <div class="scroll">258 <div class="list">259 260 <div class="section-title">Favourites</div>261 262 <div class="result">263 <div class="left-col">264 <!-- pin -->265 <svg width="54" height="54" viewBox="0 0 24 24" fill="#9AA0A6">266 <path d="M12 2a7 7 0 0 0-7 7c0 4.6 7 13 7 13s7-8.4 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>267 </svg>268 <div class="distance">24 km</div>269 </div>270 <div class="details">271 <div class="title">Mystery Rooms - Pacific Mall, Tagore Garden Delhi</div>272 <div class="subtitle">Najafgarh Road, Tagore Garden, Tilak Nagar, New Delhi, Delhi, India</div>273 </div>274 <div class="trailing">275 <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5"><path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z"/></svg>276 </div>277 </div>278 279 <div class="section-title">Places</div>280 281 <div class="result">282 <div class="left-col">283 <!-- bag -->284 <svg width="54" height="54" viewBox="0 0 24 24" fill="#9AA0A6">285 <path d="M7 7V6a5 5 0 0 1 10 0v1h3v13H4V7h3zm2 0h6V6a3 3 0 0 0-6 0v1z"/>286 </svg>287 <div class="distance">24 km</div>288 </div>289 <div class="details">290 <div class="title">Pacific Mall Tagore Garden</div>291 <div class="subtitle">Najafgarh Road, Tagore Garden, Tilak Nagar, New Delhi, Delhi, India</div>292 </div>293 <div class="trailing">294 <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5"><path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z"/></svg>295 </div>296 </div>297 298 <div class="result">299 <div class="left-col">300 <!-- pin -->301 <svg width="54" height="54" viewBox="0 0 24 24" fill="#9AA0A6">302 <path d="M12 2a7 7 0 0 0-7 7c0 4.6 7 13 7 13s7-8.4 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>303 </svg>304 <div class="distance">24 km</div>305 </div>306 <div class="details">307 <div class="title">Pacific Mall Tagore Garden - Park+ Valet</div>308 <div class="subtitle">New, Block AE, Tagore Garden, Tagore Garden Extension, Delhi, India</div>309 </div>310 <div class="trailing">311 <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5"><path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z"/></svg>312 </div>313 </div>314 315 <div class="result">316 <div class="left-col">317 <!-- pin -->318 <svg width="54" height="54" viewBox="0 0 24 24" fill="#9AA0A6">319 <path d="M12 2a7 7 0 0 0-7 7c0 4.6 7 13 7 13s7-8.4 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>320 </svg>321 <div class="distance">24 km</div>322 </div>323 <div class="details">324 <div class="title">Timezone Pacific Mall Tagore Garden - Arcade Games, VR Rabbits & Prizes</div>325 <div class="subtitle">Najafgarh Road, Tagore Garden, Tilak Nagar, New Delhi, Delhi, India</div>326 </div>327 <div class="trailing">328 <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5"><path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z"/></svg>329 </div>330 </div>331 332 <div class="result">333 <div class="left-col">334 <!-- pin -->335 <svg width="54" height="54" viewBox="0 0 24 24" fill="#9AA0A6">336 <path d="M12 2a7 7 0 0 0-7 7c0 4.6 7 13 7 13s7-8.4 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>337 </svg>338 <div class="distance">24 km</div>339 </div>340 <div class="details">341 <div class="title">Mystery Rooms - Pacific Mall, Tagore Garden Delhi</div>342 <div class="subtitle">Tagore Garden, New Delhi</div>343 </div>344 <div class="trailing">345 <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5"><path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z"/></svg>346 </div>347 </div>348 349 </div>350 </div>351 </div>352 353 <!-- Keyboard -->354 <div class="keyboard">355 <div class="suggestions">356 <div class="chip">garden</div>357 <div class="chip">gardens</div>358 <div class="chip">🏡</div>359 </div>360 361 <div class="keys">362 <div class="row">363 <div class="key">q</div>364 <div class="key">w</div>365 <div class="key">e</div>366 <div class="key">r</div>367 <div class="key">t</div>368 <div class="key">y</div>369 <div class="key">u</div>370 <div class="key">i</div>371 <div class="key">o</div>372 <div class="key">p</div>373 </div>374 <div class="row">375 <div class="key small">a</div>376 <div class="key small">s</div>377 <div class="key small">d</div>378 <div class="key small">f</div>379 <div class="key small">g</div>380 <div class="key small">h</div>381 <div class="key small">j</div>382 <div class="key small">k</div>383 <div class="key small">l</div>384 </div>385 <div class="row">386 <div class="key medium">⇧</div>387 <div class="key">z</div>388 <div class="key">x</div>389 <div class="key">c</div>390 <div class="key">v</div>391 <div class="key">b</div>392 <div class="key">n</div>393 <div class="key">m</div>394 <div class="key medium">⌫</div>395 </div>396 <div class="row">397 <div class="key medium">?123</div>398 <div class="key">,</div>399 <div class="key">☺</div>400 <div class="key space wide"> </div>401 <div class="key">.</div>402 <div class="key enter">✓</div>403 </div>404 </div>405 </div>406 407 <div class="nav-pill"></div>408</div>409</body>410</html>