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>Search History UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #F6F5F4;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;20    color: #202020;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    background: #D9D9D9;31    color: #3a3a3a;32    font-weight: 600;33  }34  .status-inner {35    height: 100%;36    display: flex;37    align-items: center;38    justify-content: space-between;39    padding: 0 36px;40    font-size: 34px;41    letter-spacing: 1px;42  }43  .status-icons {44    display: flex;45    align-items: center;46    gap: 18px;47  }48  .status-dot {49    width: 22px;50    height: 22px;51    border-radius: 50%;52    background: #7a7a7a;53    opacity: .8;54  }55 56  /* Header / top area */57  .top-area {58    position: absolute;59    top: 120px;60    left: 0;61    right: 0;62    background: #F6F5F4;63    padding: 28px 0 12px;64  }65  .back-btn {66    width: 80px;67    height: 80px;68    margin-left: 24px;69    display: flex;70    align-items: center;71  }72  .title-row {73    display: flex;74    align-items: center;75    justify-content: space-between;76    padding: 12px 48px 0 48px;77  }78  .title-row h1 {79    margin: 0;80    font-size: 56px;81    font-weight: 800;82    letter-spacing: 0.2px;83  }84  .clear-link {85    font-size: 40px;86    color: #3b3b3b;87  }88 89  /* List */90  .list {91    position: absolute;92    top: 360px;93    left: 0;94    right: 0;95  }96  .row {97    display: flex;98    align-items: center;99    padding: 36px 48px;100    gap: 28px;101  }102  .row + .row {103    margin-top: 8px;104  }105  .row .text {106    font-size: 42px;107    color: #222;108    flex: 1;109  }110  .row .arrow {111    width: 48px;112    height: 48px;113  }114  .clock {115    width: 72px;116    height: 72px;117    border-radius: 50%;118    border: 4px solid #2e2e2e;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #2e2e2e;123  }124 125  /* Spacer content */126  .spacer {127    position: absolute;128    top: 900px;129    left: 0;130    right: 0;131    bottom: 1020px; /* leaves room for quick actions + keyboard */132    background: #F7F6F5;133  }134 135  /* Quick actions bar above keyboard */136  .quick-bar {137    position: absolute;138    left: 0;139    right: 0;140    bottom: 820px; /* sits just above keyboard */141    height: 200px;142    background: #FFFFFF;143    border-top: 1px solid #E7E7E7;144    display: flex;145    align-items: center;146    justify-content: space-around;147  }148  .qa-item {149    display: flex;150    flex-direction: column;151    align-items: center;152    gap: 16px;153    color: #6a6a6a;154  }155  .qa-item svg {156    width: 68px;157    height: 68px;158    stroke: #6a6a6a;159  }160  .qa-item span {161    font-size: 32px;162    color: #3c3c3c;163  }164 165  /* Keyboard placeholder */166  .keyboard {167    position: absolute;168    left: 0;169    right: 0;170    bottom: 0;171    height: 820px;172    background: #111916;173    border-top-left-radius: 16px;174    border-top-right-radius: 16px;175    box-shadow: 0 -6px 20px rgba(0,0,0,0.25);176  }177  /* simple key grid illusion */178  .keys {179    position: absolute;180    left: 36px;181    right: 36px;182    top: 120px;183    display: grid;184    grid-template-columns: repeat(10, 1fr);185    grid-gap: 16px;186  }187  .key {188    height: 92px;189    background: #1b2621;190    border-radius: 18px;191  }192  .keys.row2 { top: 240px; grid-template-columns: repeat(9, 1fr); }193  .keys.row3 { top: 360px; grid-template-columns: repeat(9, 1fr); }194  .keys.row4 { top: 480px; grid-template-columns: repeat(7, 1fr); }195  .gesture {196    position: absolute;197    left: 50%;198    bottom: 22px;199    transform: translateX(-50%);200    width: 260px;201    height: 10px;202    border-radius: 8px;203    background: #F1F1F1;204    opacity: .95;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar -->212  <div class="status-bar">213    <div class="status-inner">214      <div>9:36</div>215      <div class="status-icons">216        <div class="status-dot" title="weather"></div>217        <div class="status-dot" title="alarm"></div>218        <div class="status-dot" title="do-not-disturb"></div>219        <div class="status-dot" title="wifi"></div>220        <div class="status-dot" title="battery"></div>221      </div>222    </div>223  </div>224 225  <!-- Top area with back and title -->226  <div class="top-area">227    <div class="back-btn">228      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">229        <path d="M34 10 L18 28 L34 46" stroke="#1f1f1f" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>230      </svg>231    </div>232    <div class="title-row">233      <h1>Search history</h1>234      <div class="clear-link">Clear</div>235    </div>236  </div>237 238  <!-- History list -->239  <div class="list">240    <div class="row">241      <div class="clock">242        <svg width="44" height="44" viewBox="0 0 44 44">243          <circle cx="22" cy="22" r="20" fill="none" stroke="#2e2e2e" stroke-width="0"/>244          <path d="M22 10 v12 l8 6" stroke="#2e2e2e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>245        </svg>246      </div>247      <div class="text">trouser’s ladies</div>248      <svg class="arrow" viewBox="0 0 24 24">249        <path d="M8 4 L16 12 L8 20" fill="none" stroke="#202020" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>250      </svg>251    </div>252    <div class="row">253      <div class="clock">254        <svg width="44" height="44" viewBox="0 0 44 44">255          <circle cx="22" cy="22" r="20" fill="none" stroke="#2e2e2e" stroke-width="0"/>256          <path d="M22 10 v12 l8 6" stroke="#2e2e2e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>257        </svg>258      </div>259      <div class="text">trouser</div>260      <svg class="arrow" viewBox="0 0 24 24">261        <path d="M8 4 L16 12 L8 20" fill="none" stroke="#202020" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>262      </svg>263    </div>264    <div class="row">265      <div class="clock">266        <svg width="44" height="44" viewBox="0 0 44 44">267          <circle cx="22" cy="22" r="20" fill="none" stroke="#2e2e2e" stroke-width="0"/>268          <path d="M22 10 v12 l8 6" stroke="#2e2e2e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>269        </svg>270      </div>271      <div class="text">oversized poplin shirt</div>272      <svg class="arrow" viewBox="0 0 24 24">273        <path d="M8 4 L16 12 L8 20" fill="none" stroke="#202020" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>274      </svg>275    </div>276  </div>277 278  <div class="spacer"></div>279 280  <!-- Quick actions above keyboard -->281  <div class="quick-bar">282    <div class="qa-item">283      <svg viewBox="0 0 48 48" fill="none">284        <rect x="8" y="14" width="32" height="22" rx="3" stroke-width="3" />285        <path d="M20 14 l2-4 h4 l2 4" stroke-width="3" fill="none"/>286        <circle cx="24" cy="25" r="6" stroke-width="3" fill="none"/>287      </svg>288      <span>Take Photo</span>289    </div>290    <div class="qa-item">291      <svg viewBox="0 0 48 48" fill="none">292        <path d="M8 18 v-8 h8" stroke-width="3" fill="none"/>293        <path d="M40 18 v-8 h-8" stroke-width="3" fill="none"/>294        <path d="M8 30 v8 h8" stroke-width="3" fill="none"/>295        <path d="M40 30 v8 h-8" stroke-width="3" fill="none"/>296        <rect x="18" y="18" width="12" height="12" rx="2" stroke-width="3" fill="none"/>297      </svg>298      <span>Scan Code</span>299    </div>300    <div class="qa-item">301      <svg viewBox="0 0 48 48" fill="none">302        <path d="M24 6c-7 0-12 5-12 12 0 9 12 20 12 20s12-11 12-20c0-7-5-12-12-12z" stroke-width="3" fill="none"/>303        <circle cx="24" cy="18" r="5" stroke-width="3" fill="none"/>304      </svg>305      <span>Find Store</span>306    </div>307  </div>308 309  <!-- Keyboard placeholder -->310  <div class="keyboard">311    <div class="keys">312      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>313      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>314    </div>315    <div class="keys row2">316      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>317      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>318    </div>319    <div class="keys row3">320      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>321      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>322    </div>323    <div class="keys row4">324      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>325      <div class="key"></div><div class="key"></div><div class="key"></div>326    </div>327    <div class="gesture"></div>328  </div>329 330</div>331</body>332</html>