GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Suggestions - Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #000000;14 border-radius: 24px;15 box-shadow: 0 20px 40px rgba(0,0,0,0.35);16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 96px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 28px;30 color: #ffffff;31 font-weight: 600;32 font-size: 32px;33 letter-spacing: 0.5px;34 }35 .sb-left { display: flex; align-items: center; gap: 18px; }36 .sb-right { display: flex; align-items: center; gap: 20px; }37 .temp { color: #d6d6d6; font-weight: 500; }38 39 /* Simple status icons */40 .icon-signal, .icon-wifi, .icon-battery {41 display: inline-block;42 }43 .icon-signal svg, .icon-wifi svg, .icon-battery svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 4; }44 45 /* Search bar */46 .search-wrap {47 position: absolute;48 top: 116px;49 left: 36px;50 right: 36px;51 height: 120px;52 background: #1d1d1d;53 border-radius: 60px;54 display: flex;55 align-items: center;56 padding: 0 24px;57 }58 .back-btn {59 width: 72px;60 height: 72px;61 border-radius: 36px;62 display: flex;63 align-items: center;64 justify-content: center;65 margin-right: 16px;66 }67 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 6; }68 .search-text {69 flex: 1;70 font-size: 40px;71 color: #eaeaea;72 }73 .search-actions {74 display: flex; align-items: center; gap: 18px;75 }76 .round-action {77 width: 72px; height: 72px; border-radius: 36px;78 display: flex; align-items: center; justify-content: center;79 }80 .round-action svg { width: 36px; height: 36px; stroke: #dcdcdc; fill: none; stroke-width: 6; }81 82 /* Suggestion list */83 .suggestions {84 position: absolute;85 top: 260px;86 left: 0;87 width: 100%;88 padding-left: 36px;89 padding-right: 36px;90 }91 .s-item {92 display: flex;93 align-items: center;94 justify-content: space-between;95 padding: 22px 6px;96 border-bottom: 1px solid #141414;97 }98 .s-item .text {99 max-width: 880px;100 line-height: 1.2;101 }102 .s-item .title {103 font-size: 40px;104 color: #cfcfcf;105 font-weight: 500;106 }107 .s-item .title .match { color: #ffffff; font-weight: 700; }108 .s-item .subtitle {109 margin-top: 10px;110 font-size: 28px;111 color: #8f8f8f;112 }113 .s-item .arrow {114 width: 54px; height: 54px;115 display: flex; align-items: center; justify-content: center;116 }117 .s-item .arrow svg { width: 42px; height: 42px; stroke: #c9c9c9; stroke-width: 6; fill: none; }118 119 /* Chips above keyboard */120 .chips {121 position: absolute;122 bottom: 1130px;123 left: 36px;124 right: 36px;125 display: flex;126 gap: 22px;127 }128 .chip {129 padding: 12px 24px;130 border-radius: 30px;131 background: #1f1f1f;132 color: #dcdcdc;133 font-size: 30px;134 border: 1px solid #2b2b2b;135 }136 137 /* Keyboard */138 .keyboard {139 position: absolute;140 bottom: 120px;141 left: 0;142 width: 100%;143 height: 960px;144 background: #121212;145 border-top: 1px solid #1f1f1f;146 padding: 34px 26px;147 }148 .key-row {149 display: flex;150 justify-content: center;151 gap: 18px;152 margin-bottom: 26px;153 }154 .key {155 background: #2a2a2a;156 border: 1px solid #3a3a3a;157 color: #f4e8ef;158 min-width: 80px;159 height: 120px;160 border-radius: 24px;161 font-size: 44px;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .key.wide { min-width: 160px; }167 .key.space { flex: 1; min-width: 420px; }168 .key.pink {169 background: #e3b8c5;170 border-color: #e3b8c5;171 color: #1a1a1a;172 }173 .key.icon svg { width: 40px; height: 40px; stroke: #f4e8ef; fill: none; stroke-width: 6; }174 175 /* Bottom gesture bar */176 .gesture {177 position: absolute;178 bottom: 40px;179 left: 50%;180 transform: translateX(-50%);181 width: 240px;182 height: 10px;183 background: #e6e6e6;184 border-radius: 6px;185 opacity: 0.85;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status bar -->193 <div class="status-bar">194 <div class="sb-left">195 <div>11:08</div>196 <div>S</div>197 <div>G</div>198 <div class="temp">75°</div>199 </div>200 <div class="sb-right">201 <span class="icon-signal">202 <svg viewBox="0 0 24 24">203 <path d="M3 21h2M7 17h2M11 13h2M15 9h2M19 5h2"/>204 </svg>205 </span>206 <span class="icon-wifi">207 <svg viewBox="0 0 24 24">208 <path d="M2 8c5-5 15-5 20 0"/>209 <path d="M5 12c3-3 11-3 14 0"/>210 <circle cx="12" cy="17" r="2" />211 </svg>212 </span>213 <span class="icon-battery">214 <svg viewBox="0 0 32 24">215 <rect x="2" y="4" width="24" height="16" rx="3"/>216 <rect x="28" y="9" width="4" height="6" rx="1"/>217 </svg>218 </span>219 </div>220 </div>221 222 <!-- Search bar -->223 <div class="search-wrap">224 <div class="back-btn">225 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>226 </div>227 <div class="search-text">gym gloves for men</div>228 <div class="search-actions">229 <div class="round-action" title="Clear">230 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>231 </div>232 <div class="round-action" title="Camera">233 <svg viewBox="0 0 24 24">234 <rect x="3" y="6" width="18" height="12" rx="2"/>235 <rect x="9" y="3" width="6" height="3" rx="1"/>236 <circle cx="12" cy="12" r="3"/>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- Suggestions list -->243 <div class="suggestions">244 <div class="s-item">245 <div class="text">246 <div class="title">gym gloves for men</div>247 <div class="subtitle">Fitness, Running & Yoga Equipment</div>248 </div>249 <div class="arrow">250 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>251 </div>252 </div>253 254 <div class="s-item">255 <div class="text">256 <div class="title">workout gym gloves <span class="match">men's</span></div>257 </div>258 <div class="arrow">259 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>260 </div>261 </div>262 263 <div class="s-item">264 <div class="text">265 <div class="title">gloves gym men <span class="match">leather</span></div>266 </div>267 <div class="arrow">268 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>269 </div>270 </div>271 272 <div class="s-item">273 <div class="text">274 <div class="title">gym gloves men <span class="match">nike</span></div>275 </div>276 <div class="arrow">277 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>278 </div>279 </div>280 281 <div class="s-item">282 <div class="text">283 <div class="title">under armour gym <span class="match">gloves men</span></div>284 </div>285 <div class="arrow">286 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>287 </div>288 </div>289 290 <div class="s-item" style="border-bottom: none;">291 <div class="text">292 <div class="title">gym gloves men <span class="match">adidas</span></div>293 </div>294 <div class="arrow">295 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M10 6h8v8"/></svg>296 </div>297 </div>298 </div>299 300 <!-- Chips above keyboard -->301 <div class="chips">302 <div class="chip">men</div>303 <div class="chip">mens</div>304 <div class="chip">men's</div>305 </div>306 307 <!-- Keyboard -->308 <div class="keyboard">309 <div class="key-row">310 <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>311 <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>312 </div>313 <div class="key-row">314 <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>315 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>316 </div>317 <div class="key-row">318 <div class="key icon"><svg viewBox="0 0 24 24"><path d="M5 19l5-5-5-5"/></svg></div>319 <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>320 <div class="key icon"><svg viewBox="0 0 24 24"><path d="M4 5l16 0M6 12l12 0M8 19l8 0"/></svg></div>321 </div>322 <div class="key-row">323 <div class="key wide">?123</div>324 <div class="key wide">,</div>325 <div class="key space"></div>326 <div class="key icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="11" r="5"/><path d="M20 20l-4-4"/></svg></div>327 <div class="key pink">328 <svg viewBox="0 0 24 24">329 <circle cx="10" cy="10" r="6" stroke="#1a1a1a" stroke-width="2" fill="none"/>330 <path d="M16 16l5 5" stroke="#1a1a1a" stroke-width="3"/>331 </svg>332 </div>333 </div>334 </div>335 336 <!-- Bottom gesture bar -->337 <div class="gesture"></div>338</div>339</body>340</html>