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 with Keyboard</title>7 <style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #202124;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 38px;26 color: #000;27 }28 .status-left { font-weight: 500; }29 .status-right { display: flex; align-items: center; gap: 26px; }30 .status-icon svg { display: block; }31 32 /* Search header */33 .search-header {34 height: 130px;35 display: flex;36 align-items: center;37 padding: 0 24px;38 border-bottom: 1px solid #e6e6e6;39 gap: 16px;40 }41 .back-btn {42 width: 72px;43 height: 72px;44 display: flex;45 align-items: center;46 justify-content: center;47 border-radius: 36px;48 }49 .search-box {50 flex: 1;51 height: 82px;52 display: flex;53 align-items: center;54 border-radius: 12px;55 padding: 0 20px;56 background: #fafafa;57 border: 1px solid #e0e0e0;58 color: #5f6368;59 font-size: 36px;60 }61 .search-box .caret {62 width: 2px;63 height: 46px;64 background: #d32f2f;65 margin-right: 12px;66 }67 .mic-btn {68 width: 64px;69 height: 64px;70 display: flex;71 align-items: center;72 justify-content: center;73 margin-left: 12px;74 }75 76 /* Suggestions list */77 .suggestions {78 background: #ffffff;79 }80 .suggest-item {81 display: flex;82 align-items: center;83 padding: 24px 24px;84 gap: 28px;85 height: 150px;86 border-bottom: 1px solid #ececec;87 }88 .thumb {89 width: 96px;90 height: 96px;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 border-radius: 10px;94 display: flex;95 align-items: center;96 justify-content: center;97 color: #757575;98 font-size: 22px;99 text-align: center;100 }101 .suggest-text {102 flex: 1;103 color: #1a73e8;104 font-size: 40px;105 line-height: 1.2;106 white-space: nowrap;107 overflow: hidden;108 text-overflow: ellipsis;109 }110 .clear-btn {111 width: 64px;112 height: 64px;113 display: flex;114 align-items: center;115 justify-content: center;116 opacity: 0.5;117 }118 119 /* Spacer above keyboard representing empty results area */120 .spacer {121 height: 260px;122 background: #f4f6f8;123 border-top: 1px solid #f0f0f0;124 border-bottom: 1px solid #f0f0f0;125 }126 127 /* Keyboard */128 .keyboard {129 position: absolute;130 bottom: 0;131 left: 0;132 width: 100%;133 background: #1f1f1f;134 color: #e0e0e0;135 padding: 18px 22px 34px;136 box-sizing: border-box;137 }138 .kb-top {139 display: flex;140 align-items: center;141 justify-content: space-between;142 padding: 8px 6px 18px;143 }144 .kb-top .tool {145 width: 82px; height: 82px;146 display: flex; align-items: center; justify-content: center;147 border-radius: 20px;148 background: #2a2a2a;149 }150 .keys { display: grid; grid-template-rows: repeat(4, auto); gap: 18px; }151 .row { display: flex; justify-content: center; }152 .key {153 background: #303030;154 border-radius: 18px;155 min-width: 86px;156 height: 116px;157 margin: 0 10px;158 display: flex;159 align-items: center;160 justify-content: center;161 font-size: 42px;162 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);163 }164 .key.wide { min-width: 180px; }165 .key.space { min-width: 520px; }166 .key.icon { padding: 0 18px; }167 .key.special { background: #2b2b2b; color: #cfcfcf; }168 .search-go {169 width: 130px; height: 130px;170 background: #c7dcff;171 border-radius: 65px;172 display: flex; align-items: center; justify-content: center;173 }174 .gesture-bar {175 position: absolute;176 bottom: 14px; left: 50%;177 transform: translateX(-50%);178 width: 300px; height: 8px; border-radius: 4px; background: #e5e5e5;179 opacity: 0.9;180 }181 .muted { color: #8a8a8a; }182 </style>183</head>184<body>185 <div id="render-target">186 <!-- Status Bar -->187 <div class="status-bar">188 <div class="status-left">9:42</div>189 <div class="status-right">190 <div class="status-icon" title="locked">191 <svg width="36" height="36" viewBox="0 0 24 24">192 <path d="M7 9V7a5 5 0 0110 0v2" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>193 <rect x="4" y="9" width="16" height="11" rx="2" fill="#000"/>194 </svg>195 </div>196 <div class="status-icon" title="wifi">197 <svg width="36" height="36" viewBox="0 0 24 24">198 <path d="M2 8c5-4 15-4 20 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>199 <path d="M5 12c4-3 10-3 14 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>200 <path d="M9 16c3-2 5-2 8 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>201 <circle cx="12" cy="19" r="1.5" fill="#000"/>202 </svg>203 </div>204 <div class="status-icon" title="battery">205 <svg width="46" height="36" viewBox="0 0 28 16">206 <rect x="1" y="3" width="22" height="10" rx="2" fill="#000"/>207 <rect x="24" y="6" width="3" height="4" rx="1" fill="#000"/>208 </svg>209 </div>210 </div>211 </div>212 213 <!-- Search Header -->214 <div class="search-header">215 <div class="back-btn">216 <svg width="48" height="48" viewBox="0 0 24 24">217 <path d="M15 6L9 12l6 6" stroke="#5f6368" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218 </svg>219 </div>220 <div class="search-box">221 <div class="caret"></div>222 <div>Search for “army shoe”</div>223 </div>224 <div class="mic-btn">225 <svg width="48" height="48" viewBox="0 0 24 24">226 <rect x="9" y="3" width="6" height="10" rx="3" fill="#5f6368"/>227 <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>228 </svg>229 </div>230 </div>231 232 <!-- Suggestions -->233 <div class="suggestions">234 <div class="suggest-item">235 <div class="thumb">[IMG: Boot]</div>236 <div class="suggest-text">Hiking shoes for women</div>237 <div class="clear-btn">238 <svg width="40" height="40" viewBox="0 0 24 24">239 <path d="M6 6l12 12M18 6L6 18" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>240 </svg>241 </div>242 </div>243 <div class="suggest-item">244 <div class="thumb">[IMG: Black Boot]</div>245 <div class="suggest-text" style="text-transform: lowercase;">hiking shoes for women</div>246 <div class="clear-btn">247 <svg width="40" height="40" viewBox="0 0 24 24">248 <path d="M6 6l12 12M18 6L6 18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/>249 </svg>250 </div>251 </div>252 <div class="suggest-item">253 <div class="thumb">[IMG: White Sneaker]</div>254 <div class="suggest-text">golf sports shoes for men</div>255 <div class="clear-btn">256 <svg width="40" height="40" viewBox="0 0 24 24">257 <path d="M6 6l12 12M18 6L6 18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/>258 </svg>259 </div>260 </div>261 <div class="suggest-item">262 <div class="thumb">[IMG: Black Sports Shoe]</div>263 <div class="suggest-text">black sports shoes for women</div>264 <div class="clear-btn">265 <svg width="40" height="40" viewBox="0 0 24 24">266 <path d="M6 6l12 12M18 6L6 18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/>267 </svg>268 </div>269 </div>270 <div class="suggest-item">271 <div class="thumb">[IMG: Running Shoe]</div>272 <div class="suggest-text">golf sports shoes for men</div>273 <div class="clear-btn">274 <svg width="40" height="40" viewBox="0 0 24 24">275 <path d="M6 6l12 12M18 6L6 18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/>276 </svg>277 </div>278 </div>279 <div class="suggest-item">280 <div class="thumb">[IMG: Golf Shoe]</div>281 <div class="suggest-text">golf shoes for men</div>282 <div class="clear-btn">283 <svg width="40" height="40" viewBox="0 0 24 24">284 <path d="M6 6l12 12M18 6L6 18" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/>285 </svg>286 </div>287 </div>288 </div>289 290 <div class="spacer"></div>291 292 <!-- Keyboard -->293 <div class="keyboard">294 <div class="kb-top">295 <div class="tool">296 <svg width="34" height="34" viewBox="0 0 24 24">297 <rect x="3" y="3" width="7" height="7" fill="#9e9e9e"/><rect x="14" y="3" width="7" height="7" fill="#9e9e9e"/>298 <rect x="3" y="14" width="7" height="7" fill="#9e9e9e"/><rect x="14" y="14" width="7" height="7" fill="#9e9e9e"/>299 </svg>300 </div>301 <div class="tool"><span class="muted">🙂</span></div>302 <div class="tool"><span class="muted" style="font-weight:700">GIF</span></div>303 <div class="tool">304 <svg width="34" height="34" viewBox="0 0 24 24">305 <path d="M12 3v4M12 17v4M4 12h4M16 12h4M5.5 5.5l2.8 2.8M15.7 15.7l2.8 2.8M18.5 5.5l-2.8 2.8M8.3 15.7l-2.8 2.8" stroke="#9e9e9e" stroke-width="2"/>306 </svg>307 </div>308 <div class="tool">309 <svg width="34" height="34" viewBox="0 0 24 24">310 <path d="M5 4h9l-1 3H6l-1-3zm0 6h14l-2 8H7l-2-8z" fill="#9e9e9e"/>311 </svg>312 </div>313 <div class="tool">314 <svg width="34" height="34" viewBox="0 0 24 24">315 <circle cx="12" cy="12" r="9" fill="#9e9e9e"/>316 </svg>317 </div>318 <div class="tool">319 <svg width="34" height="34" viewBox="0 0 24 24">320 <rect x="9" y="3" width="6" height="10" rx="3" fill="#9e9e9e"/>321 <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>322 </svg>323 </div>324 </div>325 326 <div class="keys">327 <div class="row">328 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>329 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>330 <div class="key">o</div><div class="key">p</div>331 </div>332 <div class="row">333 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>334 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>335 <div class="key">l</div>336 </div>337 <div class="row">338 <div class="key special wide">339 <svg width="40" height="40" viewBox="0 0 24 24">340 <path d="M6 12l4 4 4-4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>341 </svg>342 </div>343 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>344 <div class="key">b</div><div class="key">n</div><div class="key">m</div>345 <div class="key special wide">346 <svg width="44" height="44" viewBox="0 0 24 24">347 <path d="M20 8l-6 6-6-6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round" transform="rotate(90 12 12)"/>348 </svg>349 </div>350 </div>351 <div class="row">352 <div class="key special wide">?123</div>353 <div class="key">,</div>354 <div class="key space"> </div>355 <div class="key">.</div>356 <div class="search-go">357 <svg width="56" height="56" viewBox="0 0 24 24">358 <circle cx="11" cy="11" r="7" stroke="#2b518b" stroke-width="2" fill="none"/>359 <path d="M16 16l5 5" stroke="#2b518b" stroke-width="2" stroke-linecap="round"/>360 </svg>361 </div>362 </div>363 </div>364 <div class="gesture-bar"></div>365 </div>366 </div>367</body>368</html>