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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-size: 32px;26 }27 .status-icons {28 display: flex; align-items: center; gap: 20px;29 }30 .status-icons svg { width: 36px; height: 36px; }31 32 /* Search header */33 .search-header {34 padding: 12px 24px 0 24px;35 display: flex; align-items: center; gap: 20px;36 }37 .back-btn {38 width: 56px; height: 56px; border-radius: 28px;39 display: flex; align-items: center; justify-content: center;40 }41 .search-bar {42 flex: 1;43 height: 86px;44 border: 4px solid #000;45 border-radius: 44px;46 display: flex; align-items: center; justify-content: space-between;47 padding: 0 16px 0 24px;48 }49 .search-input-text {50 font-size: 36px; color: #111;51 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;52 }53 .search-actions { display: flex; align-items: center; gap: 14px; }54 .round-icon {55 width: 48px; height: 48px; border-radius: 24px;56 display: flex; align-items: center; justify-content: center;57 background: #ECECEC; color: #555;58 }59 .round-icon.dark {60 width: 66px; height: 66px; border-radius: 33px;61 background: #000; color: #fff;62 }63 .round-icon svg { width: 28px; height: 28px; }64 65 /* Suggestions list */66 .suggestions {67 margin-top: 18px;68 border-top: 1px solid #eee;69 }70 .suggestion-row {71 display: flex; align-items: center;72 padding: 26px 28px;73 border-bottom: 1px solid #eee;74 gap: 26px;75 }76 .suggestion-row .icon {77 width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;78 }79 .suggestion-text {80 font-size: 34px; color: #222;81 }82 .suggestion-text strong { font-weight: 700; }83 84 /* Keyboard mock */85 .keyboard {86 position: absolute; left: 0; right: 0; bottom: 0;87 height: 920px;88 background: #11191f;89 color: #e6edf3;90 border-top: 1px solid #1e272d;91 }92 .predict-strip {93 height: 74px;94 display: flex; align-items: center; gap: 24px;95 padding: 0 24px;96 color: #c7d1d9; font-size: 30px;97 }98 .keys {99 padding: 8px 18px 0 18px;100 }101 .key-row {102 display: flex; justify-content: center; gap: 16px;103 margin-top: 18px;104 }105 .key {106 width: 86px; height: 110px;107 background: #2a343d; border-radius: 18px;108 display: flex; align-items: center; justify-content: center;109 font-size: 40px; color: #cfe3ef;110 }111 .key.wide { width: 150px; }112 .key.extra-wide { width: 210px; }113 .key.icon { font-size: 32px; }114 .key.circle {115 width: 110px; height: 110px; border-radius: 55px;116 background: #79e8c5; color: #0c2b24; font-weight: 700;117 }118 .bottom-bar {119 position: absolute; left: 50%; transform: translateX(-50%);120 bottom: 18px; width: 300px; height: 10px; border-radius: 6px;121 background: #eaeaea;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status Bar -->129 <div class="status-bar">130 <div class="time">11:17</div>131 <div class="status-icons">132 <!-- Simple icons -->133 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">134 <circle cx="9" cy="12" r="3"></circle>135 <path d="M2 12a10 10 0 0 1 20 0"></path>136 </svg>137 <svg viewBox="0 0 28 18" fill="none" stroke="#333" stroke-width="2">138 <rect x="1" y="1" width="22" height="16" rx="2"></rect>139 <rect x="24" y="6" width="3" height="6"></rect>140 <rect x="3" y="3" width="18" height="12" fill="#4CAF50" stroke="none"></rect>141 </svg>142 <div style="font-size:28px; color:#555;">94%</div>143 </div>144 </div>145 146 <!-- Search Header -->147 <div class="search-header">148 <div class="back-btn">149 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">150 <path d="M15 19l-7-7 7-7"></path>151 </svg>152 </div>153 154 <div class="search-bar">155 <div class="search-input-text">Electric Lawn Mower</div>156 <div class="search-actions">157 <div class="round-icon">158 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round">159 <path d="M6 6l12 12M18 6L6 18"></path>160 </svg>161 </div>162 <div class="round-icon dark">163 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">164 <circle cx="11" cy="11" r="7"></circle>165 <path d="M20 20l-4-4"></path>166 </svg>167 </div>168 </div>169 </div>170 </div>171 172 <!-- Suggestions List -->173 <div class="suggestions">174 <div class="suggestion-row">175 <div class="icon">176 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>177 </div>178 <div class="suggestion-text">electric lawn mowers <strong>machine</strong></div>179 </div>180 <div class="suggestion-row">181 <div class="icon">182 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>183 </div>184 <div class="suggestion-text">electric lawn mower <strong>cordless</strong></div>185 </div>186 <div class="suggestion-row">187 <div class="icon">188 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>189 </div>190 <div class="suggestion-text">electric lawn mower <strong>for home garden</strong></div>191 </div>192 <div class="suggestion-row">193 <div class="icon">194 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>195 </div>196 <div class="suggestion-text">electric lawn mowers <strong>clearance</strong></div>197 </div>198 <div class="suggestion-row">199 <div class="icon">200 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>201 </div>202 <div class="suggestion-text">electric lawn mowers <strong>for trimming</strong></div>203 </div>204 <div class="suggestion-row">205 <div class="icon">206 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>207 </div>208 <div class="suggestion-text">electric lawn mower <strong>kid</strong></div>209 </div>210 <div class="suggestion-row">211 <div class="icon">212 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>213 </div>214 <div class="suggestion-text">electric lawn <strong>mower</strong></div>215 </div>216 <div class="suggestion-row">217 <div class="icon">218 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>219 </div>220 <div class="suggestion-text">electric lawn mower <strong>clean up</strong></div>221 </div>222 <div class="suggestion-row">223 <div class="icon">224 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>225 </div>226 <div class="suggestion-text">electric lawn mower <strong>set</strong></div>227 </div>228 </div>229 230 <!-- Keyboard -->231 <div class="keyboard">232 <div class="predict-strip">233 <div style="opacity:.8;">Mower</div>234 <div>|</div>235 <div style="opacity:.8;">Mowers</div>236 <div style="margin-left:auto;">237 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#c7d1d9" stroke-width="2">238 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>239 <path d="M7 7h10M7 12h10M7 17h6"></path>240 </svg>241 </div>242 </div>243 244 <div class="keys">245 <div class="key-row">246 <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>247 <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>248 </div>249 <div class="key-row">250 <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>251 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>252 <div class="key icon">253 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#cfe3ef" stroke-width="2" stroke-linecap="round">254 <path d="M3 12h18M12 3l-9 9 9 9"></path>255 </svg>256 </div>257 </div>258 <div class="key-row">259 <div class="key circle" style="background:#79e8c5; color:#0c2b24;">?123</div>260 <div class="key extra-wide">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>261 <div class="key">b</div><div class="key">n</div><div class="key">m</div>262 <div class="key icon">263 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#cfe3ef" stroke-width="2">264 <path d="M12 3v10"></path>265 <path d="M8 13h8"></path>266 </svg>267 </div>268 </div>269 <div class="key-row">270 <div class="key wide">,</div>271 <div class="key extra-wide">space</div>272 <div class="key wide">.</div>273 <div class="key circle">274 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#0c2b24" stroke-width="2">275 <circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path>276 </svg>277 </div>278 </div>279 </div>280 281 <div class="bottom-bar"></div>282 </div>283 284</div>285</body>286</html>