GD-ML/AndroidCode

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>eBay Search - Recent</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000; color: #FFFFFF;13    font-family: Arial, Helvetica, sans-serif;14  }15  /* Status bar */16  .status-bar {17    height: 96px;18    padding: 18px 28px 12px 28px;19    display: flex; align-items: center; justify-content: space-between;20    color: #EAEAEA;21    font-weight: 600; font-size: 34px;22  }23  .status-right { display: flex; align-items: center; gap: 18px; }24  .icon { display: inline-flex; align-items: center; justify-content: center; }25  /* Search header */26  .header {27    padding: 10px 24px 0 12px;28    display: flex; align-items: center; gap: 14px;29  }30  .back-btn {31    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;32  }33  .search-field {34    flex: 1;35    height: 90px;36    background: #262626;37    border-radius: 46px;38    display: flex; align-items: center;39    padding: 0 16px 0 26px;40    position: relative;41    color: #CFCFCF;42    font-size: 34px;43  }44  .search-placeholder { opacity: 0.9; }45  .search-actions {46    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);47    display: flex; gap: 10px;48  }49  .circle-icon {50    width: 64px; height: 64px; border-radius: 50%;51    background: #303030; display: flex; align-items: center; justify-content: center;52  }53  /* Tabs */54  .tabs {55    margin: 22px 0 8px 36px;56    display: flex; align-items: center; gap: 40px;57    font-size: 34px;58  }59  .tab { color: #9FA3A7; }60  .tab.active { color: #3C82F6; font-weight: 600; }61  .underline {62    width: 120px; height: 4px; background: #EDEDED; border-radius: 4px;63    margin-left: 36px; margin-top: 14px;64  }65  /* Recents list */66  .recents {67    margin-left: 54px;68    margin-top: 40px;69    color: #F2F2F2;70  }71  .recent-item {72    font-size: 44px;73    line-height: 1.3;74    margin: 44px 0;75    color: #EDEDED;76  }77  .clear-link {78    color: #4E8BF5;79    margin-top: 52px;80    font-size: 36px;81    font-weight: 600;82    letter-spacing: 1px;83  }84 85  /* Keyboard */86  .keyboard {87    position: absolute; bottom: 0; left: 0; right: 0;88    height: 900px; background: #1E1E1F; border-top: 1px solid #2E2E2E;89    padding: 10px 16px 70px 16px;90  }91  .kb-toolbar {92    height: 96px; display: flex; align-items: center; justify-content: space-between;93    padding: 0 18px;94  }95  .kb-pill {96    width: 72px; height: 72px; border-radius: 20px;97    background: #2B2B2D; display: flex; align-items: center; justify-content: center;98    color: #CFCFCF; font-size: 28px;99  }100  .kb-rows { margin-top: 10px; display: grid; gap: 12px; }101  .kb-row { display: flex; gap: 12px; }102  .key {103    flex: 1; height: 120px; border-radius: 18px;104    background: #2C2C2E; color: #EAEAEA; display: flex; align-items: center; justify-content: center;105    font-size: 42px; font-weight: 600;106  }107  .key.small { flex: 0 0 100px; }108  .key.mid { flex: 0 0 130px; }109  .key.wide { flex: 0 0 170px; }110  .key.space { flex: 1.8; }111  .key.action { background: #AFC4DC; color: #1A1A1A; font-weight: 700; }112  /* Bottom gesture handle */113  .gesture {114    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);115    width: 320px; height: 10px; background: #A0A0A0; border-radius: 10px; opacity: 0.6;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="status-bar">124    <div>9:23</div>125    <div class="status-right">126      <!-- Wi-Fi -->127      <svg class="icon" width="34" height="34" viewBox="0 0 24 24" fill="none">128        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>129        <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>130        <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>131        <circle cx="12" cy="19" r="2" fill="#fff"/>132      </svg>133      <!-- Battery -->134      <svg class="icon" width="46" height="34" viewBox="0 0 28 18" fill="none">135        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>136        <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"/>137        <rect x="24" y="7" width="3" height="4" rx="1" fill="#fff"/>138      </svg>139    </div>140  </div>141 142  <!-- Search header -->143  <div class="header">144    <div class="back-btn">145      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">146        <path d="M15 19L8 12l7-7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148    </div>149    <div class="search-field">150      <span class="search-placeholder">Search on eBay</span>151      <div class="search-actions">152        <div class="circle-icon">153          <!-- mic -->154          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">155            <rect x="9" y="4" width="6" height="10" rx="3" stroke="#E7E7E7" stroke-width="2"/>156            <path d="M5 11v1a7 7 0 0 0 14 0v-1" stroke="#E7E7E7" stroke-width="2" stroke-linecap="round"/>157            <path d="M12 21v-2" stroke="#E7E7E7" stroke-width="2" stroke-linecap="round"/>158          </svg>159        </div>160        <div class="circle-icon">161          <!-- camera -->162          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">163            <rect x="3" y="6" width="18" height="12" rx="2" stroke="#E7E7E7" stroke-width="2"/>164            <rect x="8" y="2" width="8" height="4" rx="1" fill="#E7E7E7"/>165            <circle cx="12" cy="12" r="3" stroke="#E7E7E7" stroke-width="2"/>166          </svg>167        </div>168      </div>169    </div>170  </div>171 172  <!-- Tabs -->173  <div class="tabs">174    <div class="tab active">Recent</div>175    <div class="tab">Saved</div>176  </div>177  <div class="underline"></div>178 179  <!-- Recent searches -->180  <div class="recents">181    <div class="recent-item">clothes</div>182    <div class="recent-item">nike shoes men</div>183    <div class="recent-item">boots</div>184 185    <div class="clear-link">CLEAR RECENT SEARCHES</div>186  </div>187 188  <!-- Keyboard mock -->189  <div class="keyboard">190    <div class="kb-toolbar">191      <div class="kb-pill">❖</div>192      <div class="kb-pill">☺</div>193      <div class="kb-pill">GIF</div>194      <div class="kb-pill">⚙</div>195      <div class="kb-pill">Gᵗʳ</div>196      <div class="kb-pill">🎨</div>197      <div class="kb-pill">🎤</div>198    </div>199 200    <div class="kb-rows">201      <div class="kb-row">202        <div class="key">q</div>203        <div class="key">w</div>204        <div class="key">e</div>205        <div class="key">r</div>206        <div class="key">t</div>207        <div class="key">y</div>208        <div class="key">u</div>209        <div class="key">i</div>210        <div class="key">o</div>211        <div class="key">p</div>212      </div>213      <div class="kb-row">214        <div class="key">a</div>215        <div class="key">s</div>216        <div class="key">d</div>217        <div class="key">f</div>218        <div class="key">g</div>219        <div class="key">h</div>220        <div class="key">j</div>221        <div class="key">k</div>222        <div class="key">l</div>223      </div>224      <div class="kb-row">225        <div class="key mid">⇧</div>226        <div class="key">z</div>227        <div class="key">x</div>228        <div class="key">c</div>229        <div class="key">v</div>230        <div class="key">b</div>231        <div class="key">n</div>232        <div class="key">m</div>233        <div class="key mid">⌫</div>234      </div>235      <div class="kb-row">236        <div class="key wide">?123</div>237        <div class="key small">,</div>238        <div class="key small">☺</div>239        <div class="key space">space</div>240        <div class="key small">.</div>241        <div class="key action" style="border-radius: 60px; flex: 0 0 120px;">242          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">243            <circle cx="11" cy="11" r="7" stroke="#1A1A1A" stroke-width="3"/>244            <path d="M16 16l5 5" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round"/>245          </svg>246        </div>247      </div>248    </div>249    <div class="gesture"></div>250  </div>251 252</div>253</body>254</html>