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 on eBay - Dark UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #000000;20 color: #FFFFFF;21 }22 23 /* Status bar */24 .status-bar {25 height: 100px;26 padding: 20px 28px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 box-sizing: border-box;31 font-weight: 600;32 }33 .status-left {34 font-size: 42px;35 letter-spacing: 0.5px;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-icon {43 width: 36px;44 height: 36px;45 }46 .battery {47 width: 64px;48 height: 28px;49 border: 2px solid #fff;50 border-radius: 6px;51 position: relative;52 }53 .battery::after {54 content: "";55 position: absolute;56 right: -8px;57 top: 8px;58 width: 6px;59 height: 12px;60 background: #fff;61 border-radius: 2px;62 }63 .battery-level {64 position: absolute;65 left: 3px;66 top: 3px;67 bottom: 3px;68 width: 40px;69 background: #fff;70 border-radius: 4px;71 }72 73 /* Search bar */74 .search-wrapper {75 padding: 0 24px;76 box-sizing: border-box;77 }78 .search-bar {79 height: 110px;80 background: #262626;81 border-radius: 56px;82 display: flex;83 align-items: center;84 padding: 0 26px;85 box-sizing: border-box;86 gap: 22px;87 }88 .back-icon {89 width: 44px;90 height: 44px;91 }92 .search-text {93 flex: 1;94 font-size: 38px;95 color: #E0E0E0;96 }97 .icon-btn {98 width: 54px;99 height: 54px;100 display: inline-flex;101 align-items: center;102 justify-content: center;103 border-radius: 30px;104 background: transparent;105 }106 107 /* Tabs */108 .tabs {109 display: flex;110 gap: 34px;111 padding: 24px 40px 6px 40px;112 font-size: 36px;113 box-sizing: border-box;114 }115 .tab-active {116 color: #8AB4F8;117 font-weight: 600;118 }119 .tab {120 color: #BDBDBD;121 }122 .tab-underline {123 width: 120px;124 height: 4px;125 background: #FFFFFF;126 border-radius: 2px;127 margin-left: 40px;128 }129 130 /* Suggestions list */131 .suggestions {132 padding: 16px 40px 0 40px;133 box-sizing: border-box;134 }135 .suggestion {136 font-size: 42px;137 color: #FFFFFF;138 padding: 28px 0;139 border-bottom: 0px solid #1F1F1F; /* visual spacing without visible divider */140 }141 142 /* Keyboard */143 .keyboard {144 position: absolute;145 left: 0;146 bottom: 0;147 width: 1080px;148 height: 980px;149 background: #141414;150 border-top: 1px solid #2A2A2A;151 box-sizing: border-box;152 }153 .kb-top-tools {154 display: flex;155 align-items: center;156 gap: 34px;157 padding: 24px 30px 8px 30px;158 color: #D0D0D0;159 font-size: 28px;160 }161 .tool-icon {162 width: 56px;163 height: 56px;164 background: #1E1E1E;165 border: 1px solid #333333;166 border-radius: 12px;167 display: flex;168 align-items: center;169 justify-content: center;170 }171 172 .kb-rows {173 padding: 10px 16px 20px 16px;174 }175 .kb-row {176 display: flex;177 justify-content: center;178 gap: 16px;179 margin: 12px 0;180 }181 .key {182 width: 90px;183 height: 110px;184 background: #2A2A2A;185 color: #FFFFFF;186 border: 1px solid #3A3A3A;187 border-radius: 18px;188 display: flex;189 align-items: center;190 justify-content: center;191 font-size: 40px;192 box-shadow: inset 0 -6px 0 rgba(0,0,0,0.2);193 }194 .key-wide {195 width: 140px;196 }197 .key-extra-wide {198 width: 620px;199 }200 .key-circle {201 width: 120px;202 height: 120px;203 border-radius: 60px;204 background: #BFD4FF;205 border: 1px solid #9DBAF7;206 color: #091E42;207 }208 .key-light {209 background: #56606A;210 border-color: #707C89;211 }212 .key-muted {213 background: #2C2C2C;214 color: #CCCCCC;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status bar -->222 <div class="status-bar">223 <div class="status-left">8:36</div>224 <div class="status-right">225 <!-- Simple icons to emulate status indicators -->226 <svg class="status-icon" viewBox="0 0 24 24">227 <rect x="2" y="14" width="3" height="8" fill="#fff"></rect>228 <rect x="7" y="10" width="3" height="12" fill="#fff" opacity="0.85"></rect>229 <rect x="12" y="6" width="3" height="16" fill="#fff" opacity="0.7"></rect>230 <rect x="17" y="2" width="3" height="20" fill="#fff" opacity="0.55"></rect>231 </svg>232 <svg class="status-icon" viewBox="0 0 24 24">233 <path d="M2 18c3-3 6-5 10-5s7 2 10 5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>234 <circle cx="12" cy="18" r="2" fill="#fff"></circle>235 </svg>236 <div class="battery">237 <div class="battery-level"></div>238 </div>239 </div>240 </div>241 242 <!-- Search bar -->243 <div class="search-wrapper">244 <div class="search-bar">245 <!-- Back arrow -->246 <svg class="back-icon" viewBox="0 0 24 24">247 <path d="M15 5L7 12l8 7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>248 </svg>249 250 <div class="search-text">Search on eBay</div>251 252 <!-- Mic icon -->253 <div class="icon-btn">254 <svg width="32" height="32" viewBox="0 0 24 24">255 <rect x="9" y="4" width="6" height="10" rx="3" fill="#FFFFFF"></rect>256 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" fill="none" stroke="#FFFFFF" stroke-width="2"></path>257 <path d="M12 21v-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>258 </svg>259 </div>260 261 <!-- Camera icon -->262 <div class="icon-btn">263 <svg width="32" height="32" viewBox="0 0 24 24">264 <rect x="3" y="7" width="18" height="12" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"></rect>265 <circle cx="12" cy="13" r="4" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>266 <rect x="7" y="5" width="4" height="2" rx="1" fill="#FFFFFF"></rect>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Tabs -->273 <div class="tabs">274 <div class="tab-active">Recent</div>275 <div class="tab">Saved</div>276 </div>277 <div class="tab-underline"></div>278 279 <!-- Suggestions -->280 <div class="suggestions">281 <div class="suggestion">allbird shoes</div>282 <div class="suggestion">the wall street journal</div>283 <div class="suggestion">adidas jogging shoes</div>284 <div class="suggestion">the wall of street journal</div>285 <div class="suggestion">allbirds tree runners</div>286 <div class="suggestion">outdoor voices</div>287 <div class="suggestion">adidas shoes men</div>288 <div class="suggestion">the economist</div>289 </div>290 291 <!-- Keyboard area -->292 <div class="keyboard">293 <!-- Top tools row -->294 <div class="kb-top-tools">295 <div class="tool-icon">⬜</div>296 <div class="tool-icon">☺</div>297 <div class="tool-icon">GIF</div>298 <div class="tool-icon">299 <svg width="28" height="28" viewBox="0 0 24 24">300 <circle cx="12" cy="12" r="9" stroke="#ccc" fill="none"></circle>301 <path d="M12 3v18M3 12h18" stroke="#ccc"></path>302 </svg>303 </div>304 <div class="tool-icon">305 <svg width="28" height="28" viewBox="0 0 24 24">306 <path d="M12 2l3 6 7 1-5 4 2 7-7-3-7 3 2-7-5-4 7-1z" fill="#ccc"></path>307 </svg>308 </div>309 <div class="tool-icon">310 <svg width="24" height="24" viewBox="0 0 24 24">311 <rect x="9" y="4" width="6" height="10" rx="3" fill="#ccc"></rect>312 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" fill="none" stroke="#ccc" stroke-width="2"></path>313 </svg>314 </div>315 </div>316 317 <!-- Keys -->318 <div class="kb-rows">319 <div class="kb-row">320 <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>321 <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>322 </div>323 <div class="kb-row">324 <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>325 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>326 </div>327 <div class="kb-row">328 <div class="key key-wide key-light">?123</div>329 <div class="key">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>330 <div class="key key-wide">331 <svg width="40" height="40" viewBox="0 0 24 24">332 <path d="M19 12H7m4-4l-6 4 6 4" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>333 </svg>334 </div>335 </div>336 <div class="kb-row" style="align-items:center;">337 <div class="key key-wide key-muted">,</div>338 <div class="key key-wide">☺</div>339 <div class="key key-extra-wide">space</div>340 <div class="key key-wide">.</div>341 <div class="key key-circle">342 <svg width="48" height="48" viewBox="0 0 24 24">343 <circle cx="11" cy="11" r="7" stroke="#0A3A7E" stroke-width="2" fill="none"></circle>344 <path d="M20 20l-4-4" stroke="#0A3A7E" stroke-width="2" stroke-linecap="round"></path>345 </svg>346 </div>347 </div>348 </div>349 </div>350 351</div>352</body>353</html>