GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Search UI - Yonex Badminton Racket</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: linear-gradient(180deg, #9ED8D0 0%, #C7EAE4 30%, #F7F9F9 55%, #FFFFFF 100%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 height: 90px;21 width: 100%;22 display: flex;23 align-items: center;24 padding: 0 28px;25 color: #222;26 font-weight: 600;27 font-size: 32px;28 box-sizing: border-box;29 }30 .status-icons {31 margin-left: 20px;32 display: flex;33 gap: 22px;34 align-items: center;35 }36 .sb-icon {37 width: 32px; height: 32px;38 }39 .sb-icon svg { width: 100%; height: 100%; fill: #4a4a4a; }40 41 /* Header area with back button and search bar */42 .header-area {43 position: absolute;44 top: 90px;45 left: 0;46 width: 100%;47 height: 170px;48 padding: 0 28px;49 box-sizing: border-box;50 display: flex;51 align-items: center;52 gap: 18px;53 }54 .back-btn {55 width: 70px;56 height: 70px;57 border-radius: 12px;58 display: flex;59 align-items: center;60 justify-content: center;61 color: #333;62 }63 .back-btn svg { width: 44px; height: 44px; stroke: #333; fill: none; stroke-width: 6; }64 65 .search-bar {66 flex: 1;67 height: 100px;68 background: #FFFFFF;69 border-radius: 20px;70 box-shadow: 0 2px 0 rgba(0,0,0,0.06);71 display: flex;72 align-items: center;73 padding: 0 28px;74 box-sizing: border-box;75 }76 .search-icon {77 width: 48px; height: 48px; margin-right: 20px;78 }79 .search-icon svg { width: 100%; height: 100%; fill: none; stroke: #2E2E2E; stroke-width: 6; }80 .search-input-text {81 flex: 1;82 font-size: 40px;83 color: #1d1d1d;84 white-space: nowrap;85 overflow: hidden;86 text-overflow: ellipsis;87 }88 .cursor {89 width: 2px;90 height: 44px;91 background: #2bb673;92 margin-left: 4px;93 }94 .clear-btn {95 width: 48px; height: 48px; margin-left: 16px;96 }97 .clear-btn svg { width: 100%; height: 100%; stroke: #6f6f6f; stroke-width: 6; fill: none; }98 99 /* Suggestions list */100 .suggestions {101 position: absolute;102 top: 260px;103 left: 0;104 width: 100%;105 bottom: 1080px; /* space for keyboard */106 overflow: hidden;107 padding: 0 28px;108 box-sizing: border-box;109 }110 .suggestion-row {111 height: 108px;112 border-bottom: 1px solid #E6E6E6;113 display: flex;114 align-items: center;115 gap: 26px;116 }117 .s-left {118 width: 50px; height: 50px;119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .s-left svg { width: 100%; height: 100%; fill: none; stroke: #6b6b6b; stroke-width: 6; }124 .s-text {125 flex: 1;126 font-size: 38px;127 color: #1f1f1f;128 }129 .s-right {130 width: 42px; height: 42px;131 display: flex; align-items: center; justify-content: center;132 }133 .s-right svg { width: 100%; height: 100%; stroke: #7a7a7a; fill: none; stroke-width: 6; }134 135 /* Keyboard mock */136 .keyboard {137 position: absolute;138 bottom: 0;139 left: 0;140 width: 100%;141 height: 1080px;142 background: #111315;143 color: #fff;144 box-sizing: border-box;145 padding: 18px 24px 24px;146 }147 .kb-suggest {148 height: 110px;149 display: flex;150 align-items: center;151 gap: 24px;152 color: #DADADA;153 font-size: 40px;154 margin-bottom: 18px;155 }156 .kb-chip {157 background: #1E2327;158 border-radius: 24px;159 padding: 14px 28px;160 }161 .kb-row {162 display: grid;163 grid-template-columns: repeat(10, 1fr);164 gap: 16px;165 margin-bottom: 22px;166 }167 .kb-row.two { grid-template-columns: repeat(9, 1fr); }168 .kb-row.three { grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr; }169 .key {170 background: #252A30;171 border-radius: 20px;172 height: 150px;173 display: flex;174 align-items: center;175 justify-content: center;176 font-size: 58px;177 color: #EDEDED;178 }179 .key.small { font-size: 42px; }180 .space-row {181 display: grid;182 grid-template-columns: 1.3fr 1fr 1fr 5fr 1fr 1.6fr;183 gap: 16px;184 }185 .enter {186 background: #2D88FF;187 color: #fff;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status bar -->195 <div class="status-bar">196 <div>2:13</div>197 <div class="status-icons">198 <div class="sb-icon">199 <!-- search icon small -->200 <svg viewBox="0 0 24 24">201 <circle cx="10" cy="10" r="7"></circle>202 <line x1="15" y1="15" x2="22" y2="22"></line>203 </svg>204 </div>205 <div class="sb-icon">206 <!-- small phone rectangle icon -->207 <svg viewBox="0 0 24 24">208 <rect x="5" y="2" width="14" height="20" rx="3"></rect>209 <rect x="10" y="18" width="4" height="2" rx="1"></rect>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- Search header -->216 <div class="header-area">217 <div class="back-btn">218 <svg viewBox="0 0 24 24">219 <path d="M15 4 L7 12 L15 20"></path>220 </svg>221 </div>222 <div class="search-bar">223 <div class="search-icon">224 <svg viewBox="0 0 24 24">225 <circle cx="11" cy="11" r="7"></circle>226 <line x1="16" y1="16" x2="22" y2="22"></line>227 </svg>228 </div>229 <div class="search-input-text">Yonex Badminton Racket</div>230 <div class="cursor"></div>231 <div class="clear-btn">232 <svg viewBox="0 0 24 24">233 <line x1="5" y1="5" x2="19" y2="19"></line>234 <line x1="19" y1="5" x2="5" y2="19"></line>235 </svg>236 </div>237 </div>238 </div>239 240 <!-- Suggestions -->241 <div class="suggestions">242 <div class="suggestion-row">243 <div class="s-left">244 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>245 </div>246 <div class="s-text">yonex badminton racket</div>247 <div class="s-right">248 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>249 </div>250 </div>251 252 <div class="suggestion-row">253 <div class="s-left">254 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>255 </div>256 <div class="s-text">yonex badminton rackets set of 2</div>257 <div class="s-right">258 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>259 </div>260 </div>261 262 <div class="suggestion-row">263 <div class="s-left">264 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>265 </div>266 <div class="s-text">yonex badminton racket astrox</div>267 <div class="s-right">268 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>269 </div>270 </div>271 272 <div class="suggestion-row">273 <div class="s-left">274 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>275 </div>276 <div class="s-text">yonex badminton racket set</div>277 <div class="s-right">278 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>279 </div>280 </div>281 282 <div class="suggestion-row">283 <div class="s-left">284 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>285 </div>286 <div class="s-text">yonex badminton racket under 1000</div>287 <div class="s-right">288 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>289 </div>290 </div>291 292 <div class="suggestion-row">293 <div class="s-left">294 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>295 </div>296 <div class="s-text">yonex badminton racket grip</div>297 <div class="s-right">298 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>299 </div>300 </div>301 302 <div class="suggestion-row">303 <div class="s-left">304 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>305 </div>306 <div class="s-text">yonex badminton racket 6000i</div>307 <div class="s-right">308 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>309 </div>310 </div>311 312 <div class="suggestion-row">313 <div class="s-left">314 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>315 </div>316 <div class="s-text">yonex badminton racket under 500</div>317 <div class="s-right">318 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>319 </div>320 </div>321 322 <div class="suggestion-row">323 <div class="s-left">324 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>325 </div>326 <div class="s-text">yonex badminton racket 7000i</div>327 <div class="s-right">328 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>329 </div>330 </div>331 332 <div class="suggestion-row">333 <div class="s-left">334 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>335 </div>336 <div class="s-text">yonex badminton racket voltric</div>337 <div class="s-right">338 <svg viewBox="0 0 24 24"><polyline points="8,6 16,6 16,14"></polyline><line x1="6" y1="18" x2="16" y2="8"></line></svg>339 </div>340 </div>341 </div>342 343 <!-- Keyboard -->344 <div class="keyboard">345 <div class="kb-suggest">346 <div class="kb-chip">Racket</div>347 <div class="kb-chip">Rackets</div>348 <div style="margin-left:auto; width:64px; height:64px; display:flex; align-items:center; justify-content:center;">349 <!-- Mic icon -->350 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#DADADA" stroke-width="2">351 <rect x="9" y="4" width="6" height="10" rx="3"></rect>352 <path d="M6 10a6 6 0 0 0 12 0"></path>353 <line x1="12" y1="20" x2="12" y2="16"></line>354 <line x1="8" y1="20" x2="16" y2="20"></line>355 </svg>356 </div>357 </div>358 359 <div class="kb-row">360 <div class="key">q</div>361 <div class="key">w</div>362 <div class="key">e</div>363 <div class="key">r</div>364 <div class="key">t</div>365 <div class="key">y</div>366 <div class="key">u</div>367 <div class="key">i</div>368 <div class="key">o</div>369 <div class="key">p</div>370 </div>371 372 <div class="kb-row two">373 <div class="key">a</div>374 <div class="key">s</div>375 <div class="key">d</div>376 <div class="key">f</div>377 <div class="key">g</div>378 <div class="key">h</div>379 <div class="key">j</div>380 <div class="key">k</div>381 <div class="key">l</div>382 </div>383 384 <div class="kb-row three">385 <div class="key small">⇧</div>386 <div class="key">z</div>387 <div class="key">x</div>388 <div class="key">c</div>389 <div class="key">v</div>390 <div class="key">b</div>391 <div class="key">n</div>392 <div class="key">m</div>393 <div class="key small">⌫</div>394 </div>395 396 <div class="space-row">397 <div class="key small">?123</div>398 <div class="key small">,</div>399 <div class="key small">☺</div>400 <div class="key"> </div>401 <div class="key small">.</div>402 <div class="key enter">↵</div>403 </div>404 </div>405 406</div>407</body>408</html>