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 Screen - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 box-sizing: border-box;30 color: #EDEDED;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .sb-right {35 display: flex; align-items: center; gap: 18px;36 }37 .sb-dot { width: 8px; height: 8px; background: #BDBDBD; border-radius: 50%; display: inline-block; }38 39 /* Top search row */40 .search-row {41 position: absolute;42 top: 110px;43 left: 0;44 width: 100%;45 padding: 26px 24px 10px 24px;46 box-sizing: border-box;47 display: flex;48 align-items: center;49 gap: 20px;50 }51 .back-btn {52 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;53 }54 .searchbar {55 flex: 1;56 height: 112px;57 background: #1F1F1F;58 border-radius: 60px;59 display: flex;60 align-items: center;61 padding: 0 22px;62 box-sizing: border-box;63 gap: 14px;64 }65 .search-placeholder {66 color: #CFCFCF;67 font-size: 42px;68 flex: 1;69 }70 .sb-icon-bubble {71 width: 78px; height: 78px; border-radius: 22px;72 background: #2A2A2A;73 display: flex; align-items: center; justify-content: center;74 }75 76 /* Tabs */77 .tabs {78 position: absolute;79 top: 270px;80 left: 0;81 width: 100%;82 padding: 18px 36px 10px 36px;83 box-sizing: border-box;84 display: flex; gap: 34px; align-items: flex-end;85 color: #EDEDED;86 }87 .tab {88 font-size: 40px; color: #EDEDED; opacity: 0.9;89 padding-bottom: 16px; position: relative;90 }91 .tab.active { font-weight: 600; }92 .tab.active::after {93 content: "";94 position: absolute; left: 0; right: 0; bottom: 0;95 height: 6px; background: #FFFFFF; border-radius: 4px;96 }97 98 /* Search history list */99 .list {100 position: absolute;101 top: 380px;102 left: 36px; right: 36px;103 box-sizing: border-box;104 }105 .list-item {106 font-size: 48px;107 color: #F3F3F3;108 padding: 28px 0;109 border-bottom: 1px solid rgba(255,255,255,0.05);110 letter-spacing: 0.2px;111 }112 113 /* Keyboard overlay */114 .keyboard {115 position: absolute;116 left: 0; right: 0; bottom: 0;117 height: 820px;118 background: #0E0E0E;119 border-top-left-radius: 28px;120 border-top-right-radius: 28px;121 box-shadow: 0 -8px 20px rgba(0,0,0,0.6);122 padding: 18px 20px 24px 20px;123 box-sizing: border-box;124 }125 .kb-toolbar {126 height: 72px;127 display: flex; align-items: center; gap: 14px;128 }129 .kb-tool {130 width: 70px; height: 70px; border-radius: 16px; background: #1C1C1C;131 display: flex; align-items: center; justify-content: center;132 }133 .kb-rows {134 margin-top: 12px;135 display: grid;136 grid-template-rows: repeat(3, 1fr);137 row-gap: 14px;138 height: 520px;139 }140 .kb-row {141 display: flex; justify-content: center; gap: 12px;142 }143 .key {144 flex: 0 0 88px;145 height: 120px;146 border-radius: 20px;147 background: #232323;148 color: #DCDCDC;149 font-size: 40px;150 display: flex; align-items: center; justify-content: center;151 }152 .key.wide { flex-basis: 120px; }153 .space-row {154 margin-top: 16px;155 display: flex; align-items: center; justify-content: space-between;156 padding: 0 10px;157 }158 .mode-key {159 width: 182px; height: 120px; border-radius: 60px; background: #A6DDBD; color: #0D0D0D;160 display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 38px;161 }162 .emoji-key, .mic-key, .comma-key, .dot-key, .backspace-key {163 width: 120px; height: 120px; border-radius: 26px; background: #232323;164 display: flex; align-items: center; justify-content: center;165 }166 .spacebar {167 flex: 1;168 height: 120px; border-radius: 26px; margin: 0 12px;169 background: #232323;170 }171 .search-fab {172 position: absolute; right: 26px; bottom: 24px;173 width: 132px; height: 132px; border-radius: 50%;174 background: #B6F2CF; display: flex; align-items: center; justify-content: center;175 }176 177 /* Helper for small svg strokes on dark bg */178 svg { display: block; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status bar -->185 <div class="status-bar">186 <div>3:45</div>187 <div class="sb-right">188 <!-- simple small icons to mimic Android status -->189 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M2 18h2a8 8 0 0 1 8-8v-2c-6.08 0-11 4.92-11 11z"/></svg>190 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 3C7 3 3 7 3 12h3a6 6 0 1 1 6 6v3c5 0 9-4 9-9s-4-9-9-9z"/></svg>191 <div style="display:flex; align-items:center; gap:8px;">192 <svg width="46" height="26" viewBox="0 0 46 26">193 <rect x="1" y="3" width="38" height="20" rx="4" ry="4" fill="none" stroke="#FFFFFF" stroke-width="3"/>194 <rect x="4" y="6" width="32" height="14" fill="#FFFFFF"/>195 <rect x="40" y="9" width="5" height="8" rx="1" fill="#FFFFFF"/>196 </svg>197 <span style="font-size:32px;">100%</span>198 </div>199 </div>200 </div>201 202 <!-- Search row -->203 <div class="search-row">204 <div class="back-btn">205 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">206 <path d="M15 18l-6-6 6-6"/>207 </svg>208 </div>209 <div class="searchbar">210 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>211 <div class="search-placeholder">Search on eBay</div>212 <div class="sb-icon-bubble">213 <!-- mic -->214 <svg width="28" height="28" viewBox="0 0 24 24" fill="#E0E0E0">215 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>216 </svg>217 </div>218 <div class="sb-icon-bubble">219 <!-- camera -->220 <svg width="30" height="30" viewBox="0 0 24 24" fill="#E0E0E0">221 <path d="M9 4l1.5-2h3L15 4h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h3zm3 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- Tabs -->228 <div class="tabs">229 <div class="tab active">Recent</div>230 <div class="tab" style="opacity:0.6;">Saved</div>231 </div>232 233 <!-- List of recent searches -->234 <div class="list">235 <div class="list-item">bmw x7 suv</div>236 <div class="list-item">bmw x7</div>237 <div class="list-item">wall mounted folding table</div>238 <div class="list-item">Wall mounted folding table</div>239 <div class="list-item">three seater wall mounted dining table</div>240 <div class="list-item">Fiskars hammer</div>241 <div class="list-item">Screwdriver kit</div>242 <div class="list-item">Hurricane hammer</div>243 </div>244 245 <!-- Keyboard overlay -->246 <div class="keyboard">247 <div class="kb-toolbar">248 <div class="kb-tool"><svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M12 3l4 6h-8l4-6zm0 18l-4-6h8l-4 6z"/></svg></div>249 <div class="kb-tool"><svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M3 12h18v2H3z"/></svg></div>250 <div class="kb-tool"><svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><circle cx="12" cy="12" r="9"/></svg></div>251 <div class="kb-tool"><svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M4 5h16v14H4z"/></svg></div>252 <div style="margin-left:auto" class="kb-tool"><svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M12 2l4 4-4 4-4-4 4-4zM4 14h16v6H4z"/></svg></div>253 </div>254 255 <div class="kb-rows">256 <div class="kb-row">257 <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>258 <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>259 </div>260 <div class="kb-row">261 <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>262 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>263 </div>264 <div class="kb-row">265 <div class="key wide">⇧</div>266 <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>267 <div class="key">n</div><div class="key">m</div>268 <div class="key wide">⌫</div>269 </div>270 </div>271 272 <div class="space-row">273 <div class="mode-key">?123</div>274 <div class="emoji-key"><span style="font-size:42px;">😊</span></div>275 <div class="comma-key"><span style="font-size:52px; color:#CFCFCF;">,</span></div>276 <div class="spacebar"></div>277 <div class="dot-key"><span style="font-size:52px; color:#CFCFCF;">.</span></div>278 <div class="mic-key">279 <svg width="30" height="30" viewBox="0 0 24 24" fill="#DADADA">280 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>281 </svg>282 </div>283 <div class="backspace-key">284 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2.4"><path d="M3 12l6-6h12v12H9l-6-6z"/><path d="M12 9l6 6M18 9l-6 6"/></svg>285 </div>286 </div>287 288 <div class="search-fab">289 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#0F3D2B" stroke-width="2.4"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.2-4.2"/></svg>290 </div>291 </div>292 293</div>294</body>295</html>