GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 80px;24 padding: 0 36px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #4d4d4d;30 font-size: 34px;31 letter-spacing: 1px;32 }33 .status-right {34 display: flex;35 gap: 22px;36 align-items: center;37 }38 .mini-icon {39 width: 34px;40 height: 34px;41 border: 2px solid #8c8c8c;42 border-radius: 50%;43 display: inline-flex;44 align-items: center;45 justify-content: center;46 font-size: 22px;47 color: #777;48 }49 50 /* Close icon top-left */51 .close-top {52 position: absolute;53 top: 116px;54 left: 36px;55 width: 56px;56 height: 56px;57 cursor: default;58 }59 .close-top svg { width: 100%; height: 100%; stroke: #111; stroke-width: 6; }60 61 /* Search section */62 .search-wrapper {63 position: absolute;64 top: 166px;65 left: 54px;66 width: 972px;67 }68 .search-bar {69 height: 120px;70 border: 2px solid #222;71 box-sizing: border-box;72 display: flex;73 align-items: center;74 justify-content: space-between;75 padding: 0 28px 0 28px;76 }77 .search-placeholder {78 color: #2c6b59;79 font-size: 42px;80 letter-spacing: 1px;81 }82 .search-clear {83 width: 56px; height: 56px;84 }85 .search-clear svg { width: 100%; height: 100%; stroke: #111; stroke-width: 6; }86 87 .search-tabs {88 margin-top: 30px;89 display: flex;90 gap: 70px;91 font-size: 36px;92 color: #444;93 letter-spacing: 3px;94 }95 96 /* Title */97 .interest-title {98 position: absolute;99 top: 480px;100 left: 0;101 width: 100%;102 text-align: center;103 font-size: 40px;104 letter-spacing: 3px;105 color: #333;106 }107 108 /* Grid */109 .grid {110 position: absolute;111 top: 580px;112 left: 0;113 width: 1080px;114 display: flex;115 }116 .grid .img {117 width: 540px;118 height: 760px;119 background: #E0E0E0;120 border: 1px solid #BDBDBD;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #757575;125 font-size: 34px;126 text-align: center;127 padding: 20px;128 box-sizing: border-box;129 }130 .divider {131 position: absolute;132 top: 580px;133 left: 540px;134 width: 1px;135 height: 760px;136 background: #E5E5E5;137 }138 139 /* Keyboard mock */140 .keyboard {141 position: absolute;142 bottom: 0;143 left: 0;144 width: 1080px;145 height: 1000px;146 background: #f8ded6;147 border-top-left-radius: 26px;148 border-top-right-radius: 26px;149 box-sizing: border-box;150 padding: 28px 24px 24px;151 }152 .kb-top-tools {153 display: flex;154 justify-content: space-between;155 padding: 8px 24px 22px;156 }157 .tool {158 width: 84px; height: 84px; border-radius: 26px;159 background: #fff;160 display: flex; align-items: center; justify-content: center;161 font-size: 28px; color: #555; border: 1px solid #eee;162 }163 164 .kb-keys {165 display: grid;166 grid-template-columns: repeat(10, 1fr);167 gap: 14px;168 padding: 0 6px;169 }170 .key {171 height: 110px;172 background: #ffffff;173 border-radius: 18px;174 border: 1px solid #f1f1f1;175 display: flex; align-items: center; justify-content: center;176 font-size: 42px; color: #111;177 }178 .row {179 margin-top: 18px;180 display: grid;181 gap: 14px;182 grid-template-columns: repeat(9, 1fr);183 padding: 0 56px;184 }185 .row.row3 { grid-template-columns: 120px repeat(7, 1fr) 120px; padding: 0 36px; }186 .long-row {187 margin-top: 18px;188 display: grid;189 grid-template-columns: 140px 140px 140px 1fr 140px 140px;190 gap: 14px;191 padding: 0 16px;192 align-items: center;193 }194 .space {195 height: 120px;196 background: #fff;197 border-radius: 20px;198 border: 1px solid #f1f1f1;199 display: flex; align-items: center; padding-left: 24px; color: #777; font-size: 40px;200 }201 .circle-btn {202 width: 140px; height: 140px; border-radius: 50%;203 background: #f3b9aa;204 display: flex; align-items: center; justify-content: center;205 border: 1px solid #e6a99a;206 }207 .dot-btn, .emoji-btn, .shift-btn {208 width: 140px; height: 120px; border-radius: 22px; background: #fff; border: 1px solid #f1f1f1;209 display:flex; align-items:center; justify-content:center; font-size: 48px; color:#333;210 }211 212 /* Helpers */213 .muted { color: #8a8a8a; }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div>11:02</div>222 <div class="status-right">223 <div class="mini-icon">–</div>224 <div class="mini-icon">⟲</div>225 <div>100%</div>226 </div>227 </div>228 229 <!-- Close icon -->230 <div class="close-top" aria-label="Close">231 <svg viewBox="0 0 24 24" fill="none">232 <path d="M3 3 L21 21 M21 3 L3 21" />233 </svg>234 </div>235 236 <!-- Search -->237 <div class="search-wrapper">238 <div class="search-bar">239 <div class="search-placeholder">SEARCH</div>240 <div class="search-clear">241 <svg viewBox="0 0 24 24" fill="none">242 <path d="M3 3 L21 21 M21 3 L3 21" />243 </svg>244 </div>245 </div>246 <div class="search-tabs">247 <div>STORES</div>248 <div>IMAGE</div>249 <div>SCAN</div>250 </div>251 </div>252 253 <!-- Title -->254 <div class="interest-title">YOU MIGHT BE INTERESTED IN</div>255 256 <!-- Grid of items -->257 <div class="grid">258 <div class="img">[IMG: Grey cargo pants with pockets]</div>259 <div class="img">[IMG: Taupe cargo pants with seams]</div>260 </div>261 <div class="divider"></div>262 263 <!-- Keyboard mock -->264 <div class="keyboard">265 <div class="kb-top-tools">266 <div class="tool">▦</div>267 <div class="tool">☺</div>268 <div class="tool">GIF</div>269 <div class="tool">G</div>270 <div class="tool">⚙</div>271 <div class="tool">🎨</div>272 <div class="circle-btn">273 <svg width="44" height="44" viewBox="0 0 24 24">274 <circle cx="10" cy="10" r="7" fill="none" stroke="#333" stroke-width="2"></circle>275 <line x1="16" y1="16" x2="22" y2="22" stroke="#333" stroke-width="2"></line>276 </svg>277 </div>278 </div>279 280 <!-- Row 1 -->281 <div class="kb-keys">282 <div class="key">Q</div>283 <div class="key">W</div>284 <div class="key">E</div>285 <div class="key">R</div>286 <div class="key">T</div>287 <div class="key">Y</div>288 <div class="key">U</div>289 <div class="key">I</div>290 <div class="key">O</div>291 <div class="key">P</div>292 </div>293 294 <!-- Row 2 -->295 <div class="row">296 <div class="key">A</div>297 <div class="key">S</div>298 <div class="key">D</div>299 <div class="key">F</div>300 <div class="key">G</div>301 <div class="key">H</div>302 <div class="key">J</div>303 <div class="key">K</div>304 <div class="key">L</div>305 </div>306 307 <!-- Row 3 -->308 <div class="row row3">309 <div class="shift-btn">↑</div>310 <div class="key">Z</div>311 <div class="key">X</div>312 <div class="key">C</div>313 <div class="key">V</div>314 <div class="key">B</div>315 <div class="key">N</div>316 <div class="key">M</div>317 <div class="shift-btn">⌫</div>318 </div>319 320 <!-- Bottom row -->321 <div class="long-row">322 <div class="dot-btn">?123</div>323 <div class="emoji-btn">,</div>324 <div class="emoji-btn">☺</div>325 <div class="space">Type a message</div>326 <div class="emoji-btn">.</div>327 <div class="circle-btn" title="Search">328 <svg width="56" height="56" viewBox="0 0 24 24">329 <circle cx="10" cy="10" r="7" fill="none" stroke="#333" stroke-width="2"></circle>330 <line x1="16" y1="16" x2="22" y2="22" stroke="#333" stroke-width="2"></line>331 </svg>332 </div>333 </div>334 </div>335 336</div>337</body>338</html>