GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search Suggestions UI</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 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: linear-gradient(180deg, #AEE2DC 0%, #9DD7CA 60%, #8FD0C4 100%);13 }14 /* Status bar */15 .status-bar {16 position: absolute;17 top: 0;18 left: 0;19 width: 1080px;20 height: 110px;21 padding: 0 36px;22 color: #1f1f1f;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 font-size: 36px;28 }29 .status-left { display: flex; align-items: center; gap: 22px; }30 .status-right { display: flex; align-items: center; gap: 26px; }31 .status-icon {32 width: 38px; height: 38px;33 }34 35 /* Search bar area */36 .search-area {37 position: absolute;38 top: 110px;39 left: 0;40 width: 1080px;41 height: 180px;42 display: flex;43 align-items: center;44 padding: 0 28px;45 gap: 26px;46 }47 .back-btn {48 width: 90px; height: 90px; border-radius: 18px;49 display: flex; align-items: center; justify-content: center;50 }51 .search-pill {52 flex: 1;53 height: 120px;54 background: #ffffff;55 border-radius: 26px;56 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;57 display: flex; align-items: center;58 padding: 0 28px;59 gap: 22px;60 }61 .search-icon { width: 44px; height: 44px; }62 .search-text {63 font-size: 42px;64 color: #222;65 flex: 1;66 white-space: nowrap;67 }68 .close-icon {69 width: 44px; height: 44px;70 }71 72 /* Suggestion list */73 .suggestions {74 position: absolute;75 top: 300px;76 left: 0;77 width: 1080px;78 padding: 0 24px;79 }80 .suggestion-item {81 height: 120px;82 background: rgba(255,255,255,0.75);83 border-bottom: 1px solid rgba(0,0,0,0.08);84 display: flex;85 align-items: center;86 padding: 0 24px;87 gap: 18px;88 }89 .suggestion-item:nth-child(odd) { background: rgba(255,255,255,0.82); }90 .suggestion-text {91 font-size: 44px;92 color: #111;93 flex: 1;94 }95 .go-icon { width: 40px; height: 40px; opacity: 0.7; }96 97 /* Keyboard */98 .keyboard {99 position: absolute;100 bottom: 0;101 left: 0;102 width: 1080px;103 height: 860px;104 background: #0F1617;105 border-top-left-radius: 26px;106 border-top-right-radius: 26px;107 box-shadow: 0 -6px 16px rgba(0,0,0,0.25);108 padding: 30px 32px 40px;109 color: #DDE6E5;110 }111 .kb-suggestions {112 display: flex; align-items: center; gap: 28px;113 font-size: 38px; color: #C8D1CF;114 margin-bottom: 28px;115 }116 .kb-chip {117 padding: 10px 22px;118 background: #141D1E;119 border: 1px solid #263032;120 border-radius: 22px;121 }122 .kb-row { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 22px; }123 .key {124 flex: 1;125 height: 120px;126 max-width: 92px;127 background: #1C2426;128 border: 1px solid #2B3537;129 border-radius: 18px;130 display: flex; align-items: center; justify-content: center;131 font-size: 46px;132 color: #DDE6E5;133 }134 .key.wide { max-width: 140px; }135 .key.space { flex: 1; max-width: none; }136 .kb-bottom {137 display: flex; align-items: center; justify-content: space-between; margin-top: 24px;138 }139 .microphone {140 width: 100px; height: 100px; border-radius: 28px;141 background: #1C2426; border: 1px solid #2B3537;142 display: flex; align-items: center; justify-content: center;143 }144 .enter-btn {145 width: 140px; height: 140px; border-radius: 70px;146 background: #7AF28E;147 display: flex; align-items: center; justify-content: center;148 box-shadow: 0 6px 0 rgba(0,0,0,0.2) inset;149 }150 .enter-icon { width: 72px; height: 72px; }151 .bottom-pill {152 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);153 width: 300px; height: 12px; background: #D6D6D6; border-radius: 6px; opacity: 0.6;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">163 <span>5:44</span>164 <span class="status-icon">165 <!-- small clock dot or indicator -->166 <svg viewBox="0 0 24 24" class="status-icon">167 <circle cx="12" cy="12" r="10" fill="#3a3a3a" opacity="0.15"></circle>168 <line x1="12" y1="12" x2="12" y2="7" stroke="#2e2e2e" stroke-width="2"></line>169 <line x1="12" y1="12" x2="16" y2="12" stroke="#2e2e2e" stroke-width="2"></line>170 </svg>171 </span>172 <span>42°</span>173 </div>174 <div class="status-right">175 <!-- bell icon -->176 <svg viewBox="0 0 24 24" class="status-icon">177 <path d="M12 2c-3 0-5 2-5 5v4l-2 3v2h14v-2l-2-3V7c0-3-2-5-5-5z" fill="#2d2d2d"></path>178 <circle cx="12" cy="20" r="2" fill="#2d2d2d"></circle>179 </svg>180 <!-- dot -->181 <svg viewBox="0 0 24 24" class="status-icon">182 <circle cx="12" cy="12" r="4" fill="#2d2d2d"></circle>183 </svg>184 <!-- wifi -->185 <svg viewBox="0 0 24 24" class="status-icon">186 <path d="M2 8c5-5 15-5 20 0" stroke="#2d2d2d" stroke-width="2" fill="none"></path>187 <path d="M5 12c4-4 10-4 14 0" stroke="#2d2d2d" stroke-width="2" fill="none"></path>188 <circle cx="12" cy="17" r="2" fill="#2d2d2d"></circle>189 </svg>190 <!-- battery -->191 <svg viewBox="0 0 32 24" class="status-icon">192 <rect x="2" y="6" width="24" height="12" rx="3" fill="none" stroke="#2d2d2d" stroke-width="2"></rect>193 <rect x="4" y="8" width="16" height="8" rx="2" fill="#2d2d2d"></rect>194 <rect x="26" y="9" width="4" height="6" rx="2" fill="#2d2d2d"></rect>195 </svg>196 </div>197 </div>198 199 <!-- Search area -->200 <div class="search-area">201 <div class="back-btn">202 <svg viewBox="0 0 24 24" width="56" height="56">203 <path d="M15 4L7 12l8 8" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>204 </svg>205 </div>206 <div class="search-pill">207 <svg class="search-icon" viewBox="0 0 24 24">208 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"></circle>209 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#666" stroke-width="2"></line>210 </svg>211 <div class="search-text">women formal shoes</div>212 <svg class="close-icon" viewBox="0 0 24 24">213 <path d="M5 5l14 14M19 5L5 19" stroke="#7C7C7C" stroke-width="2" stroke-linecap="round"></path>214 </svg>215 </div>216 </div>217 218 <!-- Suggestions -->219 <div class="suggestions">220 <div class="suggestion-item">221 <div class="suggestion-text">women formal shoes black</div>222 <svg class="go-icon" viewBox="0 0 24 24">223 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>224 </svg>225 </div>226 <div class="suggestion-item">227 <div class="suggestion-text">women formal shoes with heels</div>228 <svg class="go-icon" viewBox="0 0 24 24">229 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>230 </svg>231 </div>232 <div class="suggestion-item">233 <div class="suggestion-text">women formal shoes metro</div>234 <svg class="go-icon" viewBox="0 0 24 24">235 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>236 </svg>237 </div>238 <div class="suggestion-item">239 <div class="suggestion-text">women formal shoes for office</div>240 <svg class="go-icon" viewBox="0 0 24 24">241 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>242 </svg>243 </div>244 <div class="suggestion-item">245 <div class="suggestion-text">women formal shoes bata</div>246 <svg class="go-icon" viewBox="0 0 24 24">247 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>248 </svg>249 </div>250 <div class="suggestion-item">251 <div class="suggestion-text">women formal shoes with lace</div>252 <svg class="go-icon" viewBox="0 0 24 24">253 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>254 </svg>255 </div>256 <div class="suggestion-item">257 <div class="suggestion-text">women formal shoes flat</div>258 <svg class="go-icon" viewBox="0 0 24 24">259 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>260 </svg>261 </div>262 <div class="suggestion-item">263 <div class="suggestion-text">women formal shoes without heels</div>264 <svg class="go-icon" viewBox="0 0 24 24">265 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>266 </svg>267 </div>268 <div class="suggestion-item">269 <div class="suggestion-text">women formal shoes for office wear</div>270 <svg class="go-icon" viewBox="0 0 24 24">271 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 </div>274 <div class="suggestion-item">275 <div class="suggestion-text">women formal shoes leather</div>276 <svg class="go-icon" viewBox="0 0 24 24">277 <path d="M7 5l10 7-10 7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>278 </svg>279 </div>280 </div>281 282 <!-- Keyboard -->283 <div class="keyboard">284 <div class="kb-suggestions">285 <div class="kb-chip">combo</div>286 <div class="kb-chip">for</div>287 <div class="kb-chip">👞</div>288 <div class="kb-chip">👟</div>289 <div style="margin-left:auto;" class="microphone">290 <svg viewBox="0 0 24 24" width="44" height="44">291 <rect x="9" y="5" width="6" height="10" rx="3" fill="#CDE3DB"></rect>292 <path d="M5 11c0 4 3 7 7 7s7-3 7-7" stroke="#CDE3DB" stroke-width="2" fill="none"></path>293 </svg>294 </div>295 </div>296 <div class="kb-row">297 <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><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>298 </div>299 <div class="kb-row">300 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>301 </div>302 <div class="kb-row">303 <div class="key wide">⇧</div>304 <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>305 <div class="key wide">⌫</div>306 </div>307 <div class="kb-bottom">308 <div class="key wide">?123</div>309 <div class="key wide">,</div>310 <div class="key wide">🙂</div>311 <div class="key space" style="height: 120px; margin: 0 18px;"> </div>312 <div class="key wide">.</div>313 <div class="enter-btn">314 <svg viewBox="0 0 24 24" class="enter-icon">315 <path d="M4 12h12v-5l5 5-5 5v-5H4" fill="#0E5E1E"></path>316 </svg>317 </div>318 </div>319 <div class="bottom-pill"></div>320 </div>321 322</div>323</body>324</html>