GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Top status bar */16 .status-bar {17 height: 100px;18 padding: 0 40px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #333;23 font-size: 34px;24 border-bottom: 1px solid #EEE;25 }26 .status-left { display: flex; align-items: center; gap: 20px; }27 .status-right { display: flex; align-items: center; gap: 16px; }28 .status-icon {29 width: 32px; height: 32px; border-radius: 50%; background: #D0D0D0;30 }31 32 /* Search toolbar */33 .search-bar {34 height: 150px;35 display: flex;36 align-items: center;37 padding: 0 24px;38 gap: 20px;39 border-bottom: 1px solid #EAEAEA;40 }41 .icon-btn {42 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;43 }44 .search-input {45 flex: 1;46 font-size: 46px;47 color: #111;48 line-height: 1.2;49 }50 .caret {51 display: inline-block;52 width: 3px;53 height: 55px;54 background: #1E88E5;55 vertical-align: middle;56 margin-left: 6px;57 }58 59 /* Suggestions list */60 .suggestions {61 height: 1050px;62 overflow: hidden;63 }64 .row {65 display: flex;66 align-items: center;67 padding: 32px 24px;68 border-bottom: 1px solid #EFEFEF;69 }70 .row .left {71 width: 110px;72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .row .content {77 flex: 1;78 padding: 0 10px;79 }80 .title {81 font-size: 40px; color: #222;82 }83 .subtitle {84 font-size: 34px; color: #1976D2; margin-top: 8px;85 }86 .forward {87 width: 90px;88 height: 90px;89 display: flex;90 align-items: center;91 justify-content: center;92 }93 .magnify-svg, .arrow-svg, .back-svg, .close-svg {94 width: 56px; height: 56px;95 }96 97 .img-ph {98 width: 90px; height: 90px;99 background: #E0E0E0;100 border: 1px solid #BDBDBD;101 display: flex;102 align-items: center;103 justify-content: center;104 font-size: 22px;105 color: #757575;106 border-radius: 6px;107 }108 109 /* Keyboard */110 .keyboard {111 height: 1100px;112 background: #0F1518;113 color: #E8ECEF;114 position: absolute;115 bottom: 0;116 left: 0;117 right: 0;118 border-top: 1px solid #1F272B;119 }120 .kb-suggestions {121 height: 110px;122 display: flex;123 align-items: center;124 gap: 24px;125 padding: 0 24px;126 border-bottom: 1px solid #1D2529;127 }128 .chip {129 padding: 16px 28px;130 background: #1F262A;131 border-radius: 22px;132 font-size: 34px;133 }134 135 .kb-row {136 display: flex;137 justify-content: center;138 gap: 20px;139 padding: 26px 24px;140 }141 .key {142 width: 90px;143 height: 120px;144 background: #1E262B;145 border-radius: 20px;146 display: flex;147 align-items: center;148 justify-content: center;149 font-size: 44px;150 box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);151 }152 .key.wide { width: 160px; }153 .space { width: 520px; }154 155 .bottom-row {156 display: flex;157 align-items: center;158 justify-content: space-between;159 padding: 16px 24px;160 }161 .left-keys, .right-keys { display: flex; align-items: center; gap: 16px; }162 .round-btn {163 width: 140px; height: 140px; border-radius: 70px;164 display: flex; align-items: center; justify-content: center;165 background: #8FD9B8; color: #0F1518; font-size: 60px; font-weight: bold;166 }167 .round-btn.gray { background: #90B8A2; color: #0F1518; }168 .mic {169 width: 80px; height: 80px;170 }171 .dot { font-size: 66px; }172</style>173</head>174<body>175<div id="render-target">176 177 <!-- Status Bar -->178 <div class="status-bar">179 <div class="status-left">180 <span>3:22</span>181 <div class="status-icon"></div>182 <div class="status-icon" style="border-radius:6px;"></div>183 </div>184 <div class="status-right">185 <span>100%</span>186 <div class="status-icon" style="width: 40px; height: 22px; border-radius: 4px;"></div>187 </div>188 </div>189 190 <!-- Search Bar -->191 <div class="search-bar">192 <div class="icon-btn">193 <svg class="back-svg" viewBox="0 0 24 24">194 <path d="M15 4l-8 8 8 8" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 <div class="search-input">LEVI'S Jeans for Men<span class="caret"></span></div>198 <div class="icon-btn">199 <svg class="close-svg" viewBox="0 0 24 24">200 <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>201 </svg>202 </div>203 </div>204 205 <!-- Suggestions -->206 <div class="suggestions">207 <!-- First suggestion with image -->208 <div class="row" style="padding-top: 24px; padding-bottom: 24px;">209 <div class="left">210 <div class="img-ph">[IMG: Jeans]</div>211 </div>212 <div class="content">213 <div class="title">levis jeans for men</div>214 <div class="subtitle">in Men's Jeans</div>215 </div>216 <div class="forward">217 <svg class="arrow-svg" viewBox="0 0 24 24">218 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 </div>222 223 <!-- Other suggestions -->224 <div class="row">225 <div class="left">226 <svg class="magnify-svg" viewBox="0 0 24 24">227 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>228 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>229 </svg>230 </div>231 <div class="content"><div class="title">levis jeans for men 32</div></div>232 <div class="forward">233 <svg class="arrow-svg" viewBox="0 0 24 24">234 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 </div>238 239 <div class="row">240 <div class="left">241 <svg class="magnify-svg" viewBox="0 0 24 24">242 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>243 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>244 </svg>245 </div>246 <div class="content"><div class="title">levis jeans for men 34</div></div>247 <div class="forward">248 <svg class="arrow-svg" viewBox="0 0 24 24">249 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 </div>253 254 <div class="row">255 <div class="left">256 <svg class="magnify-svg" viewBox="0 0 24 24">257 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>258 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>259 </svg>260 </div>261 <div class="content"><div class="title">levis jeans for men 511</div></div>262 <div class="forward">263 <svg class="arrow-svg" viewBox="0 0 24 24">264 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265 </svg>266 </div>267 </div>268 269 <div class="row">270 <div class="left">271 <svg class="magnify-svg" viewBox="0 0 24 24">272 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>273 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>274 </svg>275 </div>276 <div class="content"><div class="title">levis jeans for men 30</div></div>277 <div class="forward">278 <svg class="arrow-svg" viewBox="0 0 24 24">279 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 284 <div class="row">285 <div class="left">286 <svg class="magnify-svg" viewBox="0 0 24 24">287 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>288 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>289 </svg>290 </div>291 <div class="content"><div class="title">levis jeans for men 28</div></div>292 <div class="forward">293 <svg class="arrow-svg" viewBox="0 0 24 24">294 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>295 </svg>296 </div>297 </div>298 299 <div class="row">300 <div class="left">301 <svg class="magnify-svg" viewBox="0 0 24 24">302 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>303 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>304 </svg>305 </div>306 <div class="content"><div class="title">levis jeans for men 512</div></div>307 <div class="forward">308 <svg class="arrow-svg" viewBox="0 0 24 24">309 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>310 </svg>311 </div>312 </div>313 314 <div class="row">315 <div class="left">316 <svg class="magnify-svg" viewBox="0 0 24 24">317 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>318 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>319 </svg>320 </div>321 <div class="content"><div class="title">levis black jeans for men</div></div>322 <div class="forward">323 <svg class="arrow-svg" viewBox="0 0 24 24">324 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>325 </svg>326 </div>327 </div>328 329 <div class="row">330 <div class="left">331 <svg class="magnify-svg" viewBox="0 0 24 24">332 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"/>333 <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>334 </svg>335 </div>336 <div class="content"><div class="title">levis jeans for men 36</div></div>337 <div class="forward">338 <svg class="arrow-svg" viewBox="0 0 24 24">339 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>340 </svg>341 </div>342 </div>343 </div>344 345 <!-- Keyboard -->346 <div class="keyboard">347 <div class="kb-suggestions">348 <div class="chip">Men</div>349 <div class="chip">Mens</div>350 <div class="chip">Men's</div>351 </div>352 353 <div class="kb-row">354 <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>355 <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>356 </div>357 358 <div class="kb-row">359 <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>360 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>361 </div>362 363 <div class="kb-row">364 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>365 <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>366 </div>367 368 <div class="bottom-row">369 <div class="left-keys">370 <div class="round-btn gray">?123</div>371 <div class="key wide">,</div>372 <div class="key space"></div>373 </div>374 <div class="right-keys">375 <svg class="mic" viewBox="0 0 24 24">376 <rect x="9" y="5" width="6" height="10" rx="3" fill="#E8ECEF"/>377 <path d="M12 15v4M8 19h8" stroke="#E8ECEF" stroke-width="2" stroke-linecap="round"/>378 </svg>379 <div class="key dot">.</div>380 <div class="round-btn">✓</div>381 </div>382 </div>383 </div>384 385</div>386</body>387</html>