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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: linear-gradient(180deg, #a7e3df 0%, #c9efd5 60%, #ffffff 60%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 92px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 color: #0b0b0b;27 font-weight: 600;28 font-size: 32px;29 letter-spacing: 1px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 color: #2e2e2e;36 font-size: 28px;37 }38 .dot { width: 8px; height: 8px; background:#2e2e2e; border-radius: 50%; display:inline-block; }39 40 /* Search area */41 .search-header {42 position: absolute;43 top: 92px;44 left: 0;45 width: 1080px;46 height: 120px;47 display: flex;48 align-items: center;49 padding: 0 26px;50 gap: 18px;51 }52 .back-btn {53 width: 84px;54 height: 84px;55 border-radius: 16px;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .back-btn svg { width: 44px; height: 44px; fill: none; stroke:#1f1f1f; stroke-width: 6; }61 .search-bar {62 flex: 1;63 height: 110px;64 background: #ffffff;65 border-radius: 22px;66 box-shadow: 0 2px 6px rgba(0,0,0,0.08);67 display: flex;68 align-items: center;69 padding: 0 24px;70 gap: 20px;71 }72 .search-icon svg { width: 44px; height: 44px; fill:none; stroke:#4a4a4a; stroke-width:6; }73 .search-text {74 flex: 1;75 font-size: 46px;76 color: #1a1a1a;77 }78 .clear-x {79 width: 56px; height: 56px; border-radius: 28px;80 display: flex; align-items: center; justify-content: center;81 background: #f1f1f1; color:#5a5a5a; font-weight:700; font-size: 34px;82 }83 84 /* White suggestions panel */85 .suggestions {86 position: absolute;87 top: 220px;88 left: 0;89 width: 1080px;90 bottom: 830px; /* space for keyboard */91 background: #ffffff;92 overflow: hidden;93 border-top: 1px solid #ececec;94 }95 .row {96 height: 110px;97 display: flex;98 align-items: center;99 padding: 0 32px;100 border-bottom: 1px solid #eeeeee;101 color: #202020;102 }103 .row .left {104 width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; margin-right: 22px;105 }106 .row .left svg { width: 40px; height: 40px; stroke:#4a4a4a; fill:none; stroke-width:6; }107 .row .label {108 font-size: 44px;109 }110 .row .sub {111 color:#7a7a7a; font-size: 34px; margin-left: 12px;112 }113 .row .right {114 margin-left: auto; width: 44px; height: 44px; display:flex; align-items:center; justify-content:center;115 }116 .row .right svg { width: 34px; height: 34px; stroke:#9a9a9a; fill:none; stroke-width:6; }117 118 /* Keyboard mock */119 .keyboard {120 position: absolute;121 bottom: 0;122 left: 0;123 width: 1080px;124 height: 830px;125 background: #0f0f12;126 color: #e9e9e9;127 border-top-left-radius: 20px;128 border-top-right-radius: 20px;129 box-shadow: 0 -4px 12px rgba(0,0,0,0.25);130 }131 .kb-suggest {132 height: 86px;133 display: flex;134 align-items: center;135 gap: 22px;136 padding: 0 28px;137 border-bottom: 1px solid #1e1e22;138 background: #141419;139 font-size: 34px;140 }141 .chip {142 background: #212129;143 color: #e8e8ec;144 padding: 8px 16px;145 border-radius: 18px;146 }147 .kb-rows {148 padding: 22px 14px;149 }150 .kb-row {151 display: flex;152 gap: 14px;153 margin-bottom: 18px;154 justify-content: center;155 }156 .key {157 background: #1a1a20;158 width: 86px; height: 110px;159 border-radius: 18px;160 display: flex; align-items: center; justify-content: center;161 color: #fafafa; font-size: 36px; font-weight: 600;162 }163 .key.wide { width: 120px; }164 .key.wider { width: 180px; }165 .space { flex: 1; height: 110px; background:#1a1a20; border-radius: 18px; }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status Bar -->172 <div class="status-bar">173 <div>10:04</div>174 <div class="status-right">175 <span>📶</span>176 <span class="dot"></span>177 <span>🔋</span>178 </div>179 </div>180 181 <!-- Search Header -->182 <div class="search-header">183 <div class="back-btn">184 <svg viewBox="0 0 24 24">185 <path d="M15 4 L7 12 L15 20" />186 </svg>187 </div>188 <div class="search-bar">189 <div class="search-icon">190 <svg viewBox="0 0 24 24">191 <circle cx="10" cy="10" r="6"></circle>192 <line x1="14" y1="14" x2="21" y2="21"></line>193 </svg>194 </div>195 <div class="search-text">Cheese</div>196 <div class="clear-x">×</div>197 </div>198 </div>199 200 <!-- Suggestions List -->201 <div class="suggestions">202 <div class="row">203 <div class="left">204 <svg viewBox="0 0 24 24">205 <circle cx="12" cy="12" r="8"></circle>206 <line x1="12" y1="12" x2="12" y2="7"></line>207 <line x1="12" y1="12" x2="16" y2="12"></line>208 </svg>209 </div>210 <div class="label">211 cheese <span class="sub">in All Categories</span>212 </div>213 <div class="right"><span style="font-size:34px;color:#8a8a8a;">✕</span></div>214 </div>215 216 <div class="row">217 <div class="left">218 <svg viewBox="0 0 24 24">219 <circle cx="10" cy="10" r="6"></circle>220 <line x1="14" y1="14" x2="21" y2="21"></line>221 </svg>222 </div>223 <div class="label">cheese</div>224 <div class="right">225 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>226 </div>227 </div>228 229 <div class="row">230 <div class="left">231 <svg viewBox="0 0 24 24">232 <circle cx="10" cy="10" r="6"></circle>233 <line x1="14" y1="14" x2="21" y2="21"></line>234 </svg>235 </div>236 <div class="label">cheese <span style="font-weight:700">slices</span></div>237 <div class="right">238 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>239 </div>240 </div>241 242 <div class="row">243 <div class="left">244 <svg viewBox="0 0 24 24">245 <circle cx="10" cy="10" r="6"></circle>246 <line x1="14" y1="14" x2="21" y2="21"></line>247 </svg>248 </div>249 <div class="label">cheese <span style="font-weight:700">cubes</span></div>250 <div class="right">251 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>252 </div>253 </div>254 255 <div class="row">256 <div class="left">257 <svg viewBox="0 0 24 24">258 <circle cx="10" cy="10" r="6"></circle>259 <line x1="14" y1="14" x2="21" y2="21"></line>260 </svg>261 </div>262 <div class="label">cheese <span style="font-weight:700">spread</span></div>263 <div class="right">264 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>265 </div>266 </div>267 268 <div class="row">269 <div class="left">270 <svg viewBox="0 0 24 24">271 <circle cx="10" cy="10" r="6"></circle>272 <line x1="14" y1="14" x2="21" y2="21"></line>273 </svg>274 </div>275 <div class="label">cheese <span style="font-weight:700">block</span></div>276 <div class="right">277 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>278 </div>279 </div>280 281 <div class="row">282 <div class="left">283 <svg viewBox="0 0 24 24">284 <circle cx="10" cy="10" r="6"></circle>285 <line x1="14" y1="14" x2="21" y2="21"></line>286 </svg>287 </div>288 <div class="label">cheese <span style="font-weight:700">powder</span></div>289 <div class="right">290 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>291 </div>292 </div>293 294 <div class="row">295 <div class="left">296 <svg viewBox="0 0 24 24">297 <circle cx="10" cy="10" r="6"></circle>298 <line x1="14" y1="14" x2="21" y2="21"></line>299 </svg>300 </div>301 <div class="label">cheese <span style="font-weight:700">balls</span></div>302 <div class="right">303 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>304 </div>305 </div>306 307 <div class="row">308 <div class="left">309 <svg viewBox="0 0 24 24">310 <circle cx="10" cy="10" r="6"></circle>311 <line x1="14" y1="14" x2="21" y2="21"></line>312 </svg>313 </div>314 <div class="label">cheese <span style="font-weight:700">sauce</span></div>315 <div class="right">316 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>317 </div>318 </div>319 320 <div class="row">321 <div class="left">322 <svg viewBox="0 0 24 24">323 <circle cx="10" cy="10" r="6"></circle>324 <line x1="14" y1="14" x2="21" y2="21"></line>325 </svg>326 </div>327 <div class="label">cheese <span style="font-weight:700">butter</span></div>328 <div class="right">329 <svg viewBox="0 0 24 24"><polyline points="8,5 16,12 8,19"></polyline></svg>330 </div>331 </div>332 </div>333 334 <!-- Keyboard mock -->335 <div class="keyboard">336 <div class="kb-suggest">337 <div class="chip">Cheese</div>338 <div class="chip">Cheesecake</div>339 <div class="chip">🧀</div>340 <div class="chip">🍕</div>341 <div style="margin-left:auto; display:flex; align-items:center; gap:10px;">342 <span>🎤</span>343 </div>344 </div>345 346 <div class="kb-rows">347 <div class="kb-row">348 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div>349 <div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div>350 <div class="key">O</div><div class="key">P</div>351 </div>352 <div class="kb-row">353 <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div>354 <div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div>355 <div class="key">L</div>356 </div>357 <div class="kb-row">358 <div class="key wide">⇧</div>359 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>360 <div class="key">B</div><div class="key">N</div><div class="key">M</div>361 <div class="key wide">⌫</div>362 </div>363 <div class="kb-row">364 <div class="key wide">?123</div>365 <div class="key">,</div>366 <div class="space"></div>367 <div class="key">.</div>368 <div class="key wider">↵</div>369 </div>370 </div>371 </div>372 373</div>374</body>375</html>