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 Suggestions - Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 font-family: Arial, Helvetica, sans-serif;16 color: #FFFFFF;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #EDEDED;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .icon-dot {40 width: 8px;41 height: 8px;42 background: #BDBDBD;43 border-radius: 50%;44 display: inline-block;45 }46 .battery {47 width: 44px;48 height: 22px;49 border: 2px solid #E0E0E0;50 border-radius: 4px;51 position: relative;52 }53 .battery::after {54 content: '';55 position: absolute;56 right: -6px;57 top: 6px;58 width: 6px;59 height: 10px;60 background: #E0E0E0;61 border-radius: 2px;62 }63 .battery .level {64 width: 28px;65 height: 100%;66 background: #E0E0E0;67 }68 69 /* Search bar */70 .search-wrap {71 position: absolute;72 top: 120px;73 left: 36px;74 right: 36px;75 }76 .search-bar {77 height: 112px;78 background: #1E1E1E;79 border-radius: 56px;80 display: flex;81 align-items: center;82 padding: 0 26px;83 box-shadow: inset 0 0 0 1px #2A2A2A;84 }85 .search-bar .left,86 .search-bar .right {87 display: flex;88 align-items: center;89 gap: 22px;90 }91 .search-bar .left {92 gap: 26px;93 }94 .search-bar .query {95 font-size: 46px;96 color: #E7E7E7;97 letter-spacing: 0.2px;98 }99 .spacer {100 flex: 1;101 }102 .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #CFCFCF; stroke-width: 3.5; }103 104 /* Suggestions */105 .suggestions {106 position: absolute;107 top: 252px;108 left: 0;109 width: 100%;110 bottom: 910px; /* leave room for keyboard and handle */111 overflow: hidden;112 }113 .sug {114 display: flex;115 align-items: center;116 padding: 26px 36px;117 border-bottom: 1px solid #121212;118 }119 .sug .text {120 flex: 1;121 display: flex;122 flex-direction: column;123 }124 .sug .primary {125 font-size: 42px;126 color: #DDDDDD;127 }128 .sug .primary .dim { color: #BDBDBD; font-weight: 500; }129 .sug .primary strong { color: #FFFFFF; font-weight: 700; }130 .sug .secondary {131 margin-top: 6px;132 font-size: 28px;133 color: #8E8E8E;134 }135 .sug .launch {136 width: 56px; height: 56px;137 display: flex; align-items: center; justify-content: center;138 }139 .sug .launch svg {140 width: 40px; height: 40px; stroke: #CFCFCF; stroke-width: 3.5; fill: none;141 }142 143 /* Keyboard */144 #keyboard {145 position: absolute;146 left: 0;147 right: 0;148 bottom: 86px;149 height: 820px;150 background: #1B1B1D;151 border-top-left-radius: 26px;152 border-top-right-radius: 26px;153 box-shadow: 0 -2px 0 #111;154 display: flex;155 flex-direction: column;156 padding: 18px 18px 26px;157 }158 .suggest-strip {159 height: 96px;160 display: flex;161 align-items: center;162 gap: 16px;163 padding: 0 10px;164 }165 .chip {166 background: #2A2A2F;167 color: #E2E2E2;168 padding: 12px 18px;169 border-radius: 18px;170 font-size: 30px;171 }172 .strip-icon svg { width: 42px; height: 42px; stroke: #CFCFCF; fill: none; stroke-width: 3; }173 174 .row {175 flex: 1;176 display: flex;177 justify-content: center;178 align-items: center;179 gap: 12px;180 }181 .key {182 width: 88px;183 height: 120px;184 background: #2A2A2F;185 color: #E0E0E0;186 border-radius: 18px;187 display: flex;188 align-items: center;189 justify-content: center;190 font-size: 42px;191 user-select: none;192 }193 .key.wide { width: 118px; }194 .key.back { width: 118px; }195 .space { width: 480px; }196 .key.dark { background: #242428; color: #D0D0D0; }197 .action-key {198 width: 118px;199 height: 120px;200 background: #D7D8FF;201 color: #1B1B1D;202 border-radius: 28px;203 font-weight: bold;204 }205 .key svg { width: 40px; height: 40px; stroke: #E0E0E0; fill: none; stroke-width: 3.5; }206 207 /* Bottom gesture handle */208 .handle {209 position: absolute;210 bottom: 24px;211 left: 50%;212 transform: translateX(-50%);213 width: 320px;214 height: 10px;215 background: #E6E6E6;216 border-radius: 6px;217 opacity: 0.9;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status Bar -->225 <div class="status-bar">226 <div class="time">8:47</div>227 <div class="status-icons">228 <!-- simple placeholders for icons -->229 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#E0E0E0" fill="none" stroke-width="2"/></svg>230 <svg width="28" height="28" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#E0E0E0" fill="none" stroke-width="2"/><path d="M3 8l9 6 9-6" stroke="#E0E0E0" fill="none" stroke-width="2"/></svg>231 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 18h16M7 14h10M9 10h6M11 6h2" stroke="#E0E0E0" fill="none" stroke-width="2"/></svg>232 <span class="icon-dot"></span>233 <div class="battery"><div class="level"></div></div>234 </div>235 </div>236 237 <!-- Search Bar -->238 <div class="search-wrap">239 <div class="search-bar">240 <div class="left">241 <!-- back arrow -->242 <span class="icon-btn">243 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/></svg>244 </span>245 <div class="query">trackpants</div>246 </div>247 <div class="spacer"></div>248 <div class="right">249 <!-- clear X -->250 <span class="icon-btn">251 <svg viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke-linecap="round"/></svg>252 </span>253 <!-- camera/lens -->254 <span class="icon-btn">255 <svg viewBox="0 0 24 24">256 <rect x="4" y="7" width="16" height="11" rx="2"></rect>257 <path d="M9 7l2-3h2l2 3" stroke-linecap="round"></path>258 <circle cx="12" cy="12.5" r="3.2"></circle>259 </svg>260 </span>261 </div>262 </div>263 </div>264 265 <!-- Suggestions List -->266 <div class="suggestions">267 <div class="sug">268 <div class="text">269 <div class="primary"><span class="dim">track pants</span></div>270 <div class="secondary">Men's Clothing</div>271 </div>272 <div class="launch">273 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>274 </div>275 </div>276 277 <div class="sug">278 <div class="text">279 <div class="primary"><span class="dim">track pants</span></div>280 <div class="secondary">Women's Clothing</div>281 </div>282 <div class="launch">283 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>284 </div>285 </div>286 287 <div class="sug">288 <div class="text">289 <div class="primary"><span class="dim">track pants</span> <strong>mens</strong></div>290 </div>291 <div class="launch">292 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>293 </div>294 </div>295 296 <div class="sug">297 <div class="text">298 <div class="primary"><span class="dim">track pants</span> <strong>vintage</strong></div>299 </div>300 <div class="launch">301 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>302 </div>303 </div>304 305 <div class="sug">306 <div class="text">307 <div class="primary"><span class="dim">track pants</span> <strong>women</strong></div>308 </div>309 <div class="launch">310 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>311 </div>312 </div>313 314 <div class="sug">315 <div class="text">316 <div class="primary"><span class="dim">track pants</span> <strong>mens vintage</strong></div>317 </div>318 <div class="launch">319 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>320 </div>321 </div>322 323 <div class="sug">324 <div class="text">325 <div class="primary"><span class="dim">track pants</span> <strong>nike</strong></div>326 </div>327 <div class="launch">328 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>329 </div>330 </div>331 332 <div class="sug">333 <div class="text">334 <div class="primary"><span class="dim">track pants</span> <strong>xl</strong></div>335 </div>336 <div class="launch">337 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>338 </div>339 </div>340 341 <div class="sug">342 <div class="text">343 <div class="primary"><span class="dim">track pants</span> <strong>medium</strong></div>344 </div>345 <div class="launch">346 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7" stroke-linecap="round"/><path d="M9 7H17V15" stroke-linecap="round"/></svg>347 </div>348 </div>349 </div>350 351 <!-- Keyboard -->352 <div id="keyboard">353 <div class="suggest-strip">354 <span class="strip-icon">355 <svg viewBox="0 0 24 24">356 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"></path>357 </svg>358 </span>359 <span class="chip">trackpants</span>360 <span class="chip">track pants</span>361 <div class="spacer"></div>362 <span class="strip-icon">363 <svg viewBox="0 0 24 24">364 <path d="M12 3v10M7 8h10" stroke-linecap="round"></path>365 <circle cx="12" cy="18" r="3"></circle>366 </svg>367 </span>368 </div>369 370 <div class="row">371 <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>372 </div>373 <div class="row">374 <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>375 </div>376 <div class="row">377 <div class="key wide">378 <svg viewBox="0 0 24 24"><path d="M8 17l-3-5 3-5" stroke-linecap="round" stroke-linejoin="round"/></svg>379 </div>380 <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>381 <div class="key back">382 <svg viewBox="0 0 24 24"><path d="M4 12h14M10 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>383 </div>384 </div>385 <div class="row">386 <div class="key dark wide">?12