GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Suggestions</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #BFEDE6 0%, #B5E9E2 50%, #B2E6DF 100%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #1d1d1d;27 font-weight: 600;28 font-size: 40px;29 }30 .status-left { display: flex; align-items: center; gap: 18px; }31 .status-icons { display: flex; align-items: center; gap: 26px; }32 .icon { width: 42px; height: 42px; }33 34 /* Search section */35 .search-row {36 position: absolute;37 top: 140px;38 left: 24px;39 width: 1032px;40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .back-btn {45 width: 80px; height: 80px;46 display: flex; align-items: center; justify-content: center;47 border-radius: 20px;48 }49 .search-bar {50 flex: 1;51 background: #FFFFFF;52 border-radius: 28px;53 height: 120px;54 box-shadow: 0 4px 10px rgba(0,0,0,0.08);55 display: flex;56 align-items: center;57 padding: 0 26px;58 gap: 24px;59 }60 .search-input {61 flex: 1;62 font-size: 44px;63 color: #222;64 line-height: 1;65 }66 .underline {67 border-bottom: 4px solid #2c2c2c;68 padding-bottom: 6px;69 }70 71 /* Suggestions list */72 .suggestions {73 position: absolute;74 top: 300px;75 left: 0;76 width: 1080px;77 padding-top: 8px;78 }79 .suggestion-item {80 display: flex;81 align-items: center;82 gap: 26px;83 padding: 30px 34px;84 border-bottom: 1px solid #E7E7E7;85 background: transparent;86 }87 .suggestion-item .text {88 font-size: 46px;89 color: #1f1f1f;90 flex: 1;91 }92 .magnify {93 width: 52px; height: 52px;94 flex: 0 0 auto;95 }96 .diag-arrow {97 width: 52px; height: 52px;98 opacity: 0.6;99 }100 101 /* Keyboard overlay */102 .keyboard {103 position: absolute;104 left: 0;105 bottom: 0;106 width: 1080px;107 height: 900px;108 background: #121316;109 border-top-left-radius: 24px;110 border-top-right-radius: 24px;111 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);112 }113 .suggestion-chips {114 height: 110px;115 display: flex;116 align-items: center;117 gap: 22px;118 padding: 18px 32px;119 }120 .chip {121 background: #1E2126;122 color: #EAEAEA;123 padding: 16px 26px;124 border-radius: 26px;125 font-size: 40px;126 border: 1px solid #2C2F34;127 }128 .chip-icon { display: flex; align-items: center; gap: 10px; }129 .chip svg { width: 42px; height: 42px; }130 131 .keys {132 padding: 24px 22px;133 display: grid;134 grid-template-rows: repeat(4, auto);135 row-gap: 24px;136 }137 .key-row { display: flex; justify-content: space-between; gap: 16px; }138 .key {139 background: #1B1E22;140 color: #F4F4F4;141 height: 120px;142 min-width: 88px;143 flex: 1;144 border-radius: 22px;145 display: flex;146 align-items: center;147 justify-content: center;148 font-size: 46px;149 border: 1px solid #2A2E33;150 }151 .key.small { flex: 0 0 100px; }152 .key.mid { flex: 0 0 120px; }153 .spacebar { flex: 1; min-width: 480px; }154 .enter { flex: 0 0 160px; }155 .bottom-bar {156 position: absolute;157 bottom: 26px;158 left: 0;159 width: 100%;160 display: flex;161 justify-content: center;162 }163 .home-indicator {164 width: 740px; height: 14px; background: #DADADA; border-radius: 10px; opacity: 0.7;165 }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status Bar -->172 <div class="status-bar">173 <div class="status-left">174 <div>1:30</div>175 <!-- small media dots to hint status -->176 <svg class="icon" viewBox="0 0 24 24">177 <circle cx="6" cy="12" r="4" fill="#222"/>178 <rect x="12" y="8" width="10" height="8" fill="#222"/>179 </svg>180 </div>181 <div class="status-icons">182 <!-- WiFi -->183 <svg class="icon" viewBox="0 0 24 24">184 <path d="M2 9c5-5 15-5 20 0" stroke="#222" stroke-width="2" fill="none" />185 <path d="M6 13c3-3 9-3 12 0" stroke="#222" stroke-width="2" fill="none" />186 <circle cx="12" cy="17" r="2" fill="#222"/>187 </svg>188 <!-- Battery -->189 <svg class="icon" viewBox="0 0 28 24">190 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="#222"/>191 <rect x="23" y="9" width="3" height="6" fill="#222"/>192 </svg>193 </div>194 </div>195 196 <!-- Search Row -->197 <div class="search-row">198 <div class="back-btn">199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M15 4L5 12l10 8" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 </div>203 <div class="search-bar">204 <svg class="icon" viewBox="0 0 24 24">205 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>206 <line x1="17" y1="17" x2="22" y2="22" stroke="#666" stroke-width="2"/>207 </svg>208 <div class="search-input">209 headphones <span class="underline">wireless</span>210 </div>211 <svg class="icon" viewBox="0 0 24 24">212 <line x1="5" y1="5" x2="19" y2="19" stroke="#555" stroke-width="3"/>213 <line x1="19" y1="5" x2="5" y2="19" stroke="#555" stroke-width="3"/>214 </svg>215 </div>216 </div>217 218 <!-- Suggestions -->219 <div class="suggestions">220 <div class="suggestion-item">221 <svg class="magnify" viewBox="0 0 24 24">222 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>223 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>224 </svg>225 <div class="text">headphones wireless</div>226 <svg class="diag-arrow" viewBox="0 0 24 24">227 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />228 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>229 </svg>230 </div>231 232 <div class="suggestion-item">233 <svg class="magnify" viewBox="0 0 24 24">234 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>235 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>236 </svg>237 <div class="text">headphones wireless boat</div>238 <svg class="diag-arrow" viewBox="0 0 24 24">239 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />240 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>241 </svg>242 </div>243 244 <div class="suggestion-item">245 <svg class="magnify" viewBox="0 0 24 24">246 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>247 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>248 </svg>249 <div class="text">headphones wireless with mic</div>250 <svg class="diag-arrow" viewBox="0 0 24 24">251 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />252 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>253 </svg>254 </div>255 256 <div class="suggestion-item">257 <svg class="magnify" viewBox="0 0 24 24">258 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>259 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>260 </svg>261 <div class="text">headphones wireless sony</div>262 <svg class="diag-arrow" viewBox="0 0 24 24">263 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />264 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>265 </svg>266 </div>267 268 <div class="suggestion-item">269 <svg class="magnify" viewBox="0 0 24 24">270 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>271 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>272 </svg>273 <div class="text">headphones wireless under 500</div>274 <svg class="diag-arrow" viewBox="0 0 24 24">275 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />276 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>277 </svg>278 </div>279 280 <div class="suggestion-item">281 <svg class="magnify" viewBox="0 0 24 24">282 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>283 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>284 </svg>285 <div class="text">headphones wireless jbl</div>286 <svg class="diag-arrow" viewBox="0 0 24 24">287 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />288 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>289 </svg>290 </div>291 292 <div class="suggestion-item">293 <svg class="magnify" viewBox="0 0 24 24">294 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>295 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>296 </svg>297 <div class="text">headphones wireless boat original</div>298 <svg class="diag-arrow" viewBox="0 0 24 24">299 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />300 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>301 </svg>302 </div>303 304 <div class="suggestion-item">305 <svg class="magnify" viewBox="0 0 24 24">306 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>307 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>308 </svg>309 <div class="text">headphones wireless noise cancellation</div>310 <svg class="diag-arrow" viewBox="0 0 24 24">311 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />312 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>313 </svg>314 </div>315 316 <div class="suggestion-item">317 <svg class="magnify" viewBox="0 0 24 24">318 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>319 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>320 </svg>321 <div class="text">headphones wireless gaming</div>322 <svg class="diag-arrow" viewBox="0 0 24 24">323 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />324 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>325 </svg>326 </div>327 328 <div class="suggestion-item">329 <svg class="magnify" viewBox="0 0 24 24">330 <circle cx="11" cy="11" r="7" stroke="#5E5E5E" stroke-width="2" fill="none"/>331 <line x1="17" y1="17" x2="22" y2="22" stroke="#5E5E5E" stroke-width="2"/>332 </svg>333 <div class="text">headphones wireless under 1000</div>334 <svg class="diag-arrow" viewBox="0 0 24 24">335 <path d="M8 16L16 8" stroke="#666" stroke-width="2" />336 <path d="M9 8h7v7" stroke="#666" stroke-width="2" fill="none"/>337 </svg>338 </div>339 </div>340 341 <!-- Keyboard -->342 <div class="keyboard">343 <div class="suggestion-chips">344 <div class="chip">wireless</div>345 <div class="chip">wirelessly</div>346 <div class="chip chip-icon">347 <svg viewBox="0 0 24 24">348 <path d="M3 9c5-5 13-5 18 0" stroke="#ff9c2a" stroke-width="2" fill="none"/>349 <path d="M7 13c3-3 7-3 10 0" stroke="#ff9c2a" stroke-width="2" fill="none"/>350 <circle cx="12" cy="17" r="2" fill="#ff9c2a"/>351 </svg>352 </div>353 <div style="margin-left:auto;" class="chip chip-icon">354 <svg viewBox="0 0 24 24">355 <rect x="9" y="4" width="6" height="10" rx="3" fill="#EAEAEA"/>356 <path d="M6 11v3c0 3 12 3 12 0v-3" stroke="#EAEAEA" stroke-width="2" fill="none"/>357 </svg>358 </div>359 </div>360 361 <div class="keys">362 <div class="key-row">363 <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>364 <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>365 </div>366 <div class="key-row">367 <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>368 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>369 </div>370 <div class="key-row">371 <div class="key mid">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>372 <div class="key">n</div><div class="key">m</div>373 </div>374 <div class="key-row">375 <div class="key small">?123</div>376 <div class="key small">,</div>377 <div class="key spacebar"> </div>378 <div class="key small">.</div>379 <div class="key enter">380 <svg viewBox="0 0 24 24" width="52" height="52">381 <path d="M6 6h12v8H9l3 3-3 3" stroke="#F4F4F4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>382 </svg>383 </div>384 </div>385 </div>386 387 <div class="bottom-bar">388 <div class="home-indicator"></div>389 </div>390 </div>391 392</div>393</body>394</html>