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>eBay Search - Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #000;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 104px;24 padding: 0 32px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #eaeaea;30 font-weight: 600;31 letter-spacing: 0.5px;32 font-size: 40px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .icon {40 width: 44px;41 height: 44px;42 display: inline-flex;43 align-items: center;44 justify-content: center;45 color: #e0e0e0;46 }47 .icon svg { width: 44px; height: 44px; fill: #e0e0e0; }48 49 /* Search row */50 .search-row {51 position: absolute;52 top: 110px;53 left: 24px;54 right: 24px;55 height: 120px;56 display: flex;57 align-items: center;58 gap: 22px;59 }60 .back-btn {61 width: 70px;62 height: 70px;63 display: flex;64 align-items: center;65 justify-content: center;66 }67 .back-btn svg { width: 48px; height: 48px; fill: #E0E0E0; }68 69 .search-bar {70 flex: 1;71 height: 108px;72 background: #1f1f1f;73 border-radius: 54px;74 display: flex;75 align-items: center;76 padding: 0 28px 0 36px;77 box-sizing: border-box;78 border: 1px solid #2b2b2b;79 }80 .search-placeholder {81 color: #cfcfcf;82 font-size: 46px;83 flex: 1;84 }85 .search-icons {86 display: flex;87 align-items: center;88 gap: 28px;89 }90 .search-icons .icon svg { width: 50px; height: 50px; }91 92 /* Tabs */93 .tabs {94 position: absolute;95 top: 270px;96 left: 40px;97 right: 40px;98 height: 86px;99 display: flex;100 align-items: flex-end;101 gap: 54px;102 }103 .tab {104 font-size: 44px;105 color: #a1a1a1;106 padding-bottom: 16px;107 }108 .tab.active {109 color: #ffffff;110 position: relative;111 }112 .tab.active::after {113 content: "";114 position: absolute;115 left: 0;116 bottom: 6px;117 width: 130px;118 height: 10px;119 background: #4b82ff;120 border-radius: 6px;121 }122 123 /* Results list */124 .results {125 position: absolute;126 top: 360px;127 left: 40px;128 right: 40px;129 }130 .result-item {131 font-size: 50px;132 color: #ffffff;133 padding: 38px 0;134 border-bottom: 0px solid #1e1e1e;135 }136 137 /* Keyboard mock */138 .keyboard {139 position: absolute;140 left: 0;141 bottom: 84px;142 width: 1080px;143 height: 860px;144 background: #0f0f0f;145 border-top: 1px solid #1e1e1e;146 box-sizing: border-box;147 padding-top: 16px;148 }149 .kb-toolbar {150 height: 96px;151 padding: 0 28px;152 display: flex;153 align-items: center;154 gap: 36px;155 }156 .kb-icon {157 width: 78px;158 height: 78px;159 border-radius: 18px;160 background: #1f1f1f;161 border: 1px solid #2b2b2b;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .kb-icon svg { width: 44px; height: 44px; fill: #e0e0e0; }167 168 .kb-rows {169 padding: 16px 24px 0;170 box-sizing: border-box;171 display: flex;172 flex-direction: column;173 gap: 18px;174 }175 .kb-row {176 display: flex;177 gap: 14px;178 padding: 0 12px;179 }180 .key {181 flex: 1;182 height: 120px;183 background: #222;184 border: 1px solid #313131;185 border-radius: 22px;186 color: #f1f1f1;187 font-size: 46px;188 display: flex;189 align-items: center;190 justify-content: center;191 }192 .key.small { flex: 0 0 100px; }193 .key.medium { flex: 0 0 150px; }194 .key.large { flex: 3; }195 .key.wide { flex: 1.4; }196 .key svg { width: 54px; height: 54px; fill: #e9e9e9; }197 198 .kb-bottom-row {199 display: flex;200 gap: 14px;201 padding: 6px 36px 0 24px;202 align-items: center;203 }204 .space { height: 120px; }205 .search-go {206 width: 140px;207 height: 140px;208 background: #f1ff8a;209 border-radius: 70px;210 display: flex;211 align-items: center;212 justify-content: center;213 margin-left: auto;214 }215 .search-go svg { width: 62px; height: 62px; fill: #0f0f0f; }216 217 /* Gesture bar */218 .gesture {219 position: absolute;220 bottom: 22px;221 left: 50%;222 transform: translateX(-50%);223 width: 500px;224 height: 10px;225 background: #e6e6e6;226 border-radius: 6px;227 opacity: 0.9;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status bar -->235 <div class="status-bar">236 <div>6:10</div>237 <div class="status-right">238 <div class="icon">239 <!-- Vibrate icon -->240 <svg viewBox="0 0 24 24"><path d="M16 3H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H8V5h8v14zM1 8h2v8H1V8zm20 0h2v8h-2V8z"/></svg>241 </div>242 <div class="icon">243 <!-- Clock icon -->244 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 11H7v-2h4V5h2v8z"/></svg>245 </div>246 <div class="icon" style="width:54px;">247 <!-- Temp text 84° -->248 <span style="font-size:32px; color:#fff;">84°</span>249 </div>250 <div class="icon">251 <!-- WiFi -->252 <svg viewBox="0 0 24 24"><path d="M12 18.5l3.5-3.5c-1.93-1.93-5.07-1.93-7 0L12 18.5zM5 11c3.86-3.86 10.14-3.86 14 0l-2.1 2.1C14.47 10.67 9.53 10.67 7.1 13.1L5 11z"/></svg>253 </div>254 <div class="icon">255 <!-- Battery -->256 <svg viewBox="0 0 24 24"><path d="M17 6h2v12h-2V6zM3 8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 0h10v8H5V8z"/></svg>257 </div>258 </div>259 </div>260 261 <!-- Search row -->262 <div class="search-row">263 <div class="back-btn">264 <svg viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7 1.5 1.5L11.5 12l5.5 5.5z"/></svg>265 </div>266 <div class="search-bar">267 <div class="search-placeholder">Search on eBay</div>268 <div class="search-icons">269 <div class="icon">270 <!-- Mic -->271 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm1 2.93V20h-2v-3.07A7.002 7.002 0 015 10h2a5 5 0 0010 0h2a7.002 7.002 0 01-6 6.93z"/></svg>272 </div>273 <div class="icon">274 <!-- Camera -->275 <svg viewBox="0 0 24 24"><path d="M9 4l1.5 2H18c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H6a2 2 0 01-2-2V8c0-1.1.9-2 2-2h1.5L9 4zm3 5a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"/></svg>276 </div>277 </div>278 </div>279 </div>280 281 <!-- Tabs -->282 <div class="tabs">283 <div class="tab active">Recent</div>284 <div class="tab">Saved</div>285 </div>286 287 <!-- Results list -->288 <div class="results">289 <div class="result-item">yerma book by federico garcia lorca</div>290 <div class="result-item">1984 by George Orwell</div>291 <div class="result-item">books</div>292 <div class="result-item">radi watch</div>293 <div class="result-item">yerma</div>294 <div class="result-item">t shirt</div>295 <div class="result-item">cloth for man</div>296 <div class="result-item">redo watch</div>297 </div>298 299 <!-- Keyboard -->300 <div class="keyboard">301 <div class="kb-toolbar">302 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M3 3h6v6H3V3zm12 0h6v6h-6V3zM3 15h6v6H3v-6zM15 15h6v6h-6v-6z"/></svg></div>303 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M12 12c2.5 0 4.5-2 4.5-4.5S14.5 3 12 3 7.5 5 7.5 7.5 9.5 12 12 12zm-7 9c0-3.9 3.1-7 7-7s7 3.1 7 7H5z"/></svg></div>304 <div class="kb-icon"><span style="font-size:30px;color:#fff;">GIF</span></div>305 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M12 8l6 6H6l6-6z"/></svg></div>306 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M20 5H4v14l4-4h12V5z"/></svg></div>307 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg></div>308 <div class="kb-icon"><svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm1 2.93V20h-2v-3.07A7.002 7.002 0 015 10h2a5 5 0 0010 0h2a7.002 7.002 0 01-6 6.93z"/></svg></div>309 </div>310 <div class="kb-rows">311 <div class="kb-row">312 <div class="key">q</div>313 <div class="key">w</div>314 <div class="key">e</div>315 <div class="key">r</div>316 <div class="key">t</div>317 <div class="key">y</div>318 <div class="key">u</div>319 <div class="key">i</div>320 <div class="key">o</div>321 <div class="key">p</div>322 </div>323 <div class="kb-row" style="padding:0 40px;">324 <div class="key">a</div>325 <div class="key">s</div>326 <div class="key">d</div>327 <div class="key">f</div>328 <div class="key">g</div>329 <div class="key">h</div>330 <div class="key">j</div>331 <div class="key">k</div>332 <div class="key">l</div>333 </div>334 <div class="kb-row">335 <div class="key medium">336 <!-- Shift -->337 <svg viewBox="0 0 24 24"><path d="M12 3l7 7h-4v7H9v-7H5l7-7z"/></svg>338 </div>339 <div class="key">z</div>340 <div class="key">x</div>341 <div class="key">c</div>342 <div class="key">v</div>343 <div class="key">b</div>344 <div class="key">n</div>345 <div class="key">m</div>346 <div class="key medium">347 <!-- Backspace -->348 <svg viewBox="0 0 24 24"><path d="M22 6H9L3 12l6 6h13V6zm-6.41 9L13 12.41 10.41 15 9 13.59 11.59 11 9 8.41 10.41 7 13 9.59 15.59 7 17 8.41 14.41 11 17 13.59 15.59 15z"/></svg>349 </div>350 </div>351 <div class="kb-bottom-row">352 <div class="key wide">?123</div>353 <div class="key small">,</div>354 <div class="key small"><span style="font-size:46px;">🙂</span></div>355 <div class="key large space"></div>356 <div class="key small">.</div>357 <div class="search-go">358 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>359 </div>360 </div>361 </div>362 </div>363 364 <div class="gesture"></div>365</div>366</body>367</html>