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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #000000;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 right: 0;25 height: 96px;26 padding: 0 32px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 40px;32 box-sizing: border-box;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 22px;38 opacity: 0.95;39 }40 .status-dot {41 width: 26px;42 height: 26px;43 background: #fff;44 border-radius: 6px;45 }46 47 /* Search bar */48 .search-wrap {49 position: absolute;50 top: 110px;51 left: 28px;52 right: 28px;53 height: 118px;54 background: #222225;55 border-radius: 60px;56 display: flex;57 align-items: center;58 padding: 0 24px;59 gap: 22px;60 box-sizing: border-box;61 }62 .search-input {63 flex: 1;64 display: flex;65 align-items: center;66 gap: 10px;67 color: #eaeaea;68 font-size: 44px;69 white-space: nowrap;70 overflow: hidden;71 }72 .caret {73 width: 3px;74 height: 48px;75 background: #89b4ff;76 border-radius: 2px;77 margin-left: 6px;78 }79 .search-actions {80 display: flex;81 align-items: center;82 gap: 18px;83 }84 85 /* Suggestions list */86 .suggestions {87 position: absolute;88 top: 260px;89 left: 24px;90 right: 24px;91 }92 .suggestion {93 display: flex;94 align-items: flex-start;95 justify-content: space-between;96 padding: 30px 8px;97 border-bottom: 1px solid rgba(255,255,255,0.06);98 }99 .suggestion .text {100 max-width: 880px;101 }102 .title {103 font-size: 46px;104 color: #e0e0e0;105 line-height: 1.25;106 }107 .title .bold { font-weight: 700; color: #ffffff; }108 .subtitle {109 font-size: 30px;110 color: #9e9e9e;111 margin-top: 10px;112 }113 .arrow {114 width: 56px;115 height: 56px;116 opacity: 0.7;117 margin-top: 6px;118 }119 120 /* Keyboard */121 .keyboard {122 position: absolute;123 left: 0;124 right: 0;125 bottom: 54px;126 height: 920px;127 background: #1b1b1d;128 border-top: 1px solid #2b2b2e;129 box-sizing: border-box;130 }131 .kb-suggest {132 height: 110px;133 background: #232326;134 display: flex;135 align-items: center;136 gap: 16px;137 padding: 0 22px;138 box-sizing: border-box;139 }140 .chip {141 padding: 14px 26px;142 background: #2c2c30;143 border-radius: 30px;144 color: #e6e6e6;145 font-size: 34px;146 }147 .kb-rows {148 padding: 16px 18px 18px;149 box-sizing: border-box;150 }151 .row {152 display: flex;153 gap: 14px;154 margin-top: 16px;155 }156 .key {157 flex: 1;158 height: 120px;159 background: #2a2a2e;160 border-radius: 18px;161 display: flex;162 align-items: center;163 justify-content: center;164 color: #eaeaea;165 font-size: 42px;166 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);167 }168 .key.small { flex: 0 0 92px; }169 .key.wide { flex: 1.9; }170 .key.wider { flex: 2.8; }171 .key.icon {172 color: #c7c7c7;173 font-size: 36px;174 }175 .action-search {176 background: #c9dafc;177 color: #0d1d3a;178 }179 180 /* Home indicator */181 .home-indicator {182 position: absolute;183 width: 360px;184 height: 10px;185 background: #f2f2f2;186 border-radius: 10px;187 left: 50%;188 transform: translateX(-50%);189 bottom: 18px;190 opacity: 0.9;191 }192</style>193</head>194<body>195<div id="render-target">196 <!-- Status Bar -->197 <div class="status-bar">198 <div>9:24</div>199 <div class="status-icons">200 <!-- Simple WiFi icon -->201 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">202 <path d="M2 8c6-5 14-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>203 <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>204 <path d="M8 14c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>205 <circle cx="12" cy="18" r="1.5" fill="#fff"/>206 </svg>207 <!-- Battery -->208 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">209 <rect x="2" y="7" width="18" height="10" rx="2" stroke="#fff" stroke-width="2"/>210 <rect x="4" y="9" width="14" height="6" rx="1" fill="#fff"/>211 <rect x="20" y="10" width="2" height="4" rx="1" fill="#fff"/>212 </svg>213 </div>214 </div>215 216 <!-- Search Bar -->217 <div class="search-wrap">218 <!-- Back -->219 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">220 <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 223 <div class="search-input">224 <span>Clothes for Men</span>225 <div class="caret"></div>226 </div>227 228 <div class="search-actions">229 <!-- Clear (X) -->230 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">231 <path d="M6 6l12 12M18 6L6 18" stroke="#e9e9e9" stroke-width="2.2" stroke-linecap="round"/>232 </svg>233 <!-- Camera -->234 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">235 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#e9e9e9" stroke-width="2"/>236 <circle cx="12" cy="12" r="3.5" stroke="#e9e9e9" stroke-width="2"/>237 <rect x="7" y="4" width="4" height="3" rx="1" fill="#e9e9e9"/>238 </svg>239 </div>240 </div>241 242 <!-- Suggestions -->243 <div class="suggestions">244 <div class="suggestion">245 <div class="text">246 <div class="title">clothes for men <span class="bold">lot</span></div>247 <div class="subtitle">Men's Clothing</div>248 </div>249 <svg class="arrow" viewBox="0 0 24 24" fill="none">250 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>251 </svg>252 </div>253 254 <div class="suggestion">255 <div class="text">256 <div class="title">clothes for men <span class="bold">ubanpipeline</span></div>257 </div>258 <svg class="arrow" viewBox="0 0 24 24" fill="none">259 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 263 <div class="suggestion">264 <div class="text">265 <div class="title">clothes for men</div>266 </div>267 <svg class="arrow" viewBox="0 0 24 24" fill="none">268 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 </div>271 272 <div class="suggestion">273 <div class="text">274 <div class="title">golf clothes for <span class="bold">men</span></div>275 </div>276 <svg class="arrow" viewBox="0 0 24 24" fill="none">277 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 </div>280 281 <div class="suggestion">282 <div class="text">283 <div class="title">work clothes for <span class="bold">men</span></div>284 </div>285 <svg class="arrow" viewBox="0 0 24 24" fill="none">286 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>287 </svg>288 </div>289 290 <div class="suggestion">291 <div class="text">292 <div class="title">versace clothes for <span class="bold">men</span></div>293 </div>294 <svg class="arrow" viewBox="0 0 24 24" fill="none">295 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>296 </svg>297 </div>298 299 <div class="suggestion">300 <div class="text">301 <div class="title">designer clothes for <span class="bold">men</span></div>302 </div>303 <svg class="arrow" viewBox="0 0 24 24" fill="none">304 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>305 </svg>306 </div>307 308 <div class="suggestion">309 <div class="text">310 <div class="title">sissy clothes for <span class="bold">men</span></div>311 </div>312 <svg class="arrow" viewBox="0 0 24 24" fill="none">313 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>314 </svg>315 </div>316 317 <div class="suggestion" style="border-bottom: none;">318 <div class="text">319 <div class="title">cowboy clothes for <span class="bold">men</span></div>320 </div>321 <svg class="arrow" viewBox="0 0 24 24" fill="none">322 <path d="M8 16L16 8M10 8h6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>323 </svg>324 </div>325 </div>326 327 <!-- Keyboard -->328 <div class="keyboard">329 <div class="kb-suggest">330 <div class="chip">Men</div>331 <div class="chip">Mens</div>332 <div class="chip">Men's</div>333 </div>334 <div class="kb-rows">335 <div class="row">336 <div class="key">q</div>337 <div class="key">w</div>338 <div class="key">e</div>339 <div class="key">r</div>340 <div class="key">t</div>341 <div class="key">y</div>342 <div class="key">u</div>343 <div class="key">i</div>344 <div class="key">o</div>345 <div class="key">p</div>346 </div>347 <div class="row">348 <div class="key small icon">1</div>349 <div class="key">a</div>350 <div class="key">s</div>351 <div class="key">d</div>352 <div class="key">f</div>353 <div class="key">g</div>354 <div class="key">h</div>355 <div class="key">j</div>356 <div class="key">k</div>357 <div class="key">l</div>358 </div>359 <div class="row">360 <div class="key small icon">361 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">362 <path d="M8 17l4-4-4-4" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>363 <path d="M12 13h5" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>364 </svg>365 </div>366 <div class="key">z</div>367 <div class="key">x</div>368 <div class="key">c</div>369 <div class="key">v</div>370 <div class="key">b</div>371 <div class="key">n</div>372 <div class="key">m</div>373 <div class="key small icon">374 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">375 <path d="M4 4l16 16M20 4L4 20" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>376 </svg>377 </div>378 </div>379 <div class="row">380 <div class="key wider icon">?123</div>381 <div class="key small icon">😊</div>382 <div class="key wide">space</div>383 <div class="key small">.</div>384 <div class="key small icon">385 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">386 <path d="M12 3v8m0 0a4 4 0 104 4h-8a4 4 0 104-4z" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>387 </svg>388 </div>389 <div class="key small action-search">390 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">391 <circle cx="11" cy="11" r="6" stroke="#0d1d3a" stroke-width="2"/>392 <path d="M16 16l5 5" stroke="#0d1d3a" stroke-width="2" stroke-linecap="round"/>393 </svg>394 </div>395 </div>396 </div>397 </div>398 399 <div class="home-indicator"></div>400</div>401</body>402</html>