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; position: relative; overflow: hidden;11 background: #FFFFFF;12 font-family: Arial, Helvetica, sans-serif;13 color: #212121;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; width: 100%; height: 120px;19 background: #FFFFFF;20 display: flex; align-items: center; justify-content: space-between;21 padding: 0 36px;22 box-sizing: border-box;23 }24 .status-left { font-size: 40px; font-weight: 600; color: #111; }25 .status-right { display: flex; align-items: center; gap: 24px; }26 .sb-icon {27 width: 34px; height: 34px; border-radius: 50%; background: #C9C9C9;28 }29 .battery {30 display: flex; align-items: center; gap: 8px; font-size: 32px; color: #555;31 }32 .battery .cell {33 width: 42px; height: 24px; border: 2px solid #777; border-radius: 6px; position: relative;34 }35 .battery .cell::after {36 content: ""; position: absolute; right: 2px; top: 2px; bottom: 2px; width: 70%;37 background: #777; border-radius: 3px;38 }39 .battery .tip {40 width: 6px; height: 12px; background: #777; border-radius: 2px;41 }42 43 /* Top search area */44 .top-search {45 position: absolute; top: 128px; left: 24px; right: 24px; height: 140px;46 display: flex; align-items: center; gap: 24px;47 }48 .back-btn {49 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;50 }51 .search-pill {52 flex: 1; height: 120px; border: 6px solid #000; border-radius: 60px;53 display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;54 gap: 16px; background: #FFFFFF;55 }56 .pill-text {57 flex: 1; font-size: 46px; color: #000000;58 }59 .pill-action {60 display: flex; align-items: center; gap: 16px;61 }62 .circle-btn {63 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;64 background: #E0E0E0; border: 2px solid #BDBDBD;65 }66 .circle-dark {67 background: #000; border-color: #000;68 }69 .circle-btn svg { width: 40px; height: 40px; }70 71 /* Suggestions list */72 .suggestions {73 position: absolute; top: 300px; left: 0; right: 0; bottom: 980px;74 overflow: hidden;75 }76 .suggestion {77 display: flex; align-items: center; gap: 26px;78 padding: 36px 36px; box-sizing: border-box;79 border-bottom: 2px solid #EEEEEE;80 }81 .s-icon {82 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;83 }84 .s-text {85 font-size: 44px; color: #333;86 }87 .s-text b { font-weight: 700; color: #000; }88 89 /* Keyboard */90 .keyboard {91 position: absolute; bottom: 64px; left: 0; width: 100%; height: 900px;92 background: #131A20; color: #E4E7EB;93 box-shadow: 0 -6px 16px rgba(0,0,0,0.15);94 }95 .kb-suggest {96 height: 110px; background: #0E151B; display: flex; align-items: center; gap: 22px;97 padding: 0 36px; box-sizing: border-box; font-size: 40px; color: #D0D6DC;98 }99 .kb-divider { color: #7C8793; }100 .kb-rows { padding: 24px 24px 0; box-sizing: border-box; }101 .kb-row { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }102 .key {103 width: 84px; height: 112px; background: #1F2A33; border-radius: 22px;104 display: flex; align-items: center; justify-content: center;105 font-size: 46px; color: #DDE3EA;106 }107 .key.wide { width: 120px; }108 .key.xwide { width: 160px; }109 .key.space { flex: 1; height: 112px; }110 .key.green {111 background: #65E1B7; color: #0A0F13; font-weight: 700;112 }113 .key.circle {114 width: 120px; height: 120px; border-radius: 60px;115 }116 .kb-bottom { display: flex; align-items: center; gap: 18px; padding: 0 24px; }117 118 /* Bottom gesture bar */119 .gesture-bar {120 position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);121 width: 280px; height: 10px; background: #EDEDED; border-radius: 8px;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status Bar -->129 <div class="status-bar">130 <div class="status-left">8:51</div>131 <div class="status-right">132 <div class="sb-icon"></div>133 <div class="sb-icon"></div>134 <div class="sb-icon"></div>135 <div class="battery">136 <div class="cell"></div>137 <div class="tip"></div>138 <div style="font-weight:600;">95%</div>139 </div>140 </div>141 </div>142 143 <!-- Search Header -->144 <div class="top-search">145 <div class="back-btn">146 <svg viewBox="0 0 24 24" width="60" height="60">147 <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div class="search-pill">151 <div class="pill-text">mens sports shoes</div>152 <div class="pill-action">153 <div class="circle-btn">154 <svg viewBox="0 0 24 24">155 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2.5" stroke-linecap="round"/>156 </svg>157 </div>158 <div class="circle-btn circle-dark">159 <svg viewBox="0 0 24 24">160 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2.5"/>161 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>162 </svg>163 </div>164 </div>165 </div>166 </div>167 168 <!-- Suggestions -->169 <div class="suggestions">170 <div class="suggestion">171 <div class="s-icon">172 <svg viewBox="0 0 24 24" width="56" height="56">173 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>174 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>175 </svg>176 </div>177 <div class="s-text">mens sports shoes <b>for men</b></div>178 </div>179 <div class="suggestion">180 <div class="s-icon">181 <svg viewBox="0 0 24 24" width="56" height="56">182 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>183 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="s-text">mens sports shoes</div>187 </div>188 <div class="suggestion">189 <div class="s-icon">190 <svg viewBox="0 0 24 24" width="56" height="56">191 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>192 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="s-text">mens sports shoes <b>clearance</b></div>196 </div>197 <div class="suggestion">198 <div class="s-icon">199 <svg viewBox="0 0 24 24" width="56" height="56">200 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>201 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>202 </svg>203 </div>204 <div class="s-text">mens sports shoes <b>for men climbing</b></div>205 </div>206 <div class="suggestion">207 <div class="s-icon">208 <svg viewBox="0 0 24 24" width="56" height="56">209 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>210 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>211 </svg>212 </div>213 <div class="s-text">mens sports shoes <b>clearance 90 of</b></div>214 </div>215 <div class="suggestion">216 <div class="s-icon">217 <svg viewBox="0 0 24 24" width="56" height="56">218 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>219 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>220 </svg>221 </div>222 <div class="s-text">mens sports shoes <b>comfortable</b></div>223 </div>224 <div class="suggestion">225 <div class="s-icon">226 <svg viewBox="0 0 24 24" width="56" height="56">227 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>228 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>229 </svg>230 </div>231 <div class="s-text">mens sports shoes <b>waterproof</b></div>232 </div>233 <div class="suggestion">234 <div class="s-icon">235 <svg viewBox="0 0 24 24" width="56" height="56">236 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>237 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="s-text">mens sports shoes <b>for women</b></div>241 </div>242 <div class="suggestion">243 <div class="s-icon">244 <svg viewBox="0 0 24 24" width="56" height="56">245 <circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2.5"/>246 <path d="M20 20l-5-5" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>247 </svg>248 </div>249 <div class="s-text">mens sports shoes <b>clearance high tops</b></div>250 </div>251 </div>252 253 <!-- Keyboard -->254 <div class="keyboard">255 <div class="kb-suggest">256 shoes <span class="kb-divider">|</span> shoestring <span class="kb-divider">|</span> 👟257 <div style="margin-left:auto;">258 <svg viewBox="0 0 24 24" width="44" height="44">259 <path d="M12 5v14M5 12h14" stroke="#9FB1C3" stroke-width="2.5" stroke-linecap="round"/>260 </svg>261 </div>262 </div>263 <div class="kb-rows">264 <div class="kb-row">265 <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>266 </div>267 <div class="kb-row">268 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>269 </div>270 <div class="kb-row">271 <div class="key xwide">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>272 <div class="key xwide">273 <svg viewBox="0 0 24 24" width="44" height="44">274 <path d="M5 7l6 6 6-6" stroke="#DDE3EA" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 </div>277 </div>278 <div class="kb-row kb-bottom">279 <div class="key circle green">?123</div>280 <div class="key">281 <svg viewBox="0 0 24 24" width="40" height="40">282 <circle cx="12" cy="12" r="3" fill="#DDE3EA"/>283 </svg>284 </div>285 <div class="key space"></div>286 <div class="key">287 <svg viewBox="0 0 24 24" width="44" height="44">288 <path d="M12 5v14M5 12h14" stroke="#DDE3EA" stroke-width="2.5" stroke-linecap="round"/>289 </svg>290 </div>291 <div class="key xwide">292 <svg viewBox="0 0 24 24" width="44" height="44">293 <path d="M5 5h11l3 3v11H5z" fill="none" stroke="#DDE3EA" stroke-width="2"/>294 <path d="M14 9l-6 6M8 9h6v6" stroke="#DDE3EA" stroke-width="2" stroke-linecap="round"/>295 </svg>296 </div>297 <div class="key circle green">298 <svg viewBox="0 0 24 24" width="44" height="44">299 <circle cx="11" cy="11" r="7" fill="none" stroke="#0A0F13" stroke-width="2.5"/>300 <path d="M20 20l-4-4" stroke="#0A0F13" stroke-width="2.5" stroke-linecap="round"/>301 </svg>302 </div>303 </div>304 </div>305 </div>306 307 <!-- Gesture bar -->308 <div class="gesture-bar"></div>309</div>310</body>311</html>