GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }10  #render-target {11    position: relative;12    width: 1080px;13    height: 2400px;14    overflow: hidden;15    background: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 90px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #000;30    font-weight: 600;31    font-size: 32px;32  }33  .status-icons {34    display: flex;35    gap: 22px;36    align-items: center;37  }38  .status-dot {39    width: 26px; height: 26px; border-radius: 13px; background: #9E9E9E;40  }41  .status-battery {42    width: 48px; height: 26px; border: 2px solid #000; border-radius: 6px; position: relative;43  }44  .status-battery::after{45    content:"";46    position:absolute; right:-6px; top:8px; width:6px; height:10px; background:#000; border-radius:2px;47  }48  .status-battery .level { width: 60%; height: 100%; background:#000; }49 50  /* Search row */51  .search-row {52    position: absolute;53    top: 110px;54    left: 24px;55    right: 24px;56    display: flex;57    align-items: center;58    gap: 24px;59  }60  .back-btn {61    width: 70px; height: 70px; display:flex; align-items:center; justify-content:center;62  }63  .search-box {64    flex: 1;65    height: 120px;66    border: 3px solid #000;67    border-radius: 60px;68    padding: 0 170px 0 40px; /* reserve right space for icons */69    position: relative;70    display: flex;71    align-items: center;72    background: #fff;73  }74  .search-placeholder {75    color: #9E9E9E;76    font-size: 40px;77  }78  .search-actions {79    position: absolute;80    right: 10px;81    top: 50%;82    transform: translateY(-50%);83    display: flex;84    align-items: center;85    gap: 14px;86  }87  .action-circle {88    width: 94px; height: 94px; border-radius: 47px; display:flex; align-items:center; justify-content:center;89    border: 2px solid #000; background: #fff;90  }91  .action-circle.dark {92    background: #000; border-color: #000;93  }94 95  /* Popular tags section */96  .section-title {97    position: absolute;98    top: 280px;99    left: 40px;100    font-size: 44px;101    font-weight: 700;102    color: #000;103  }104  .chips {105    position: absolute;106    top: 360px;107    left: 32px;108    right: 32px;109    display: flex;110    flex-wrap: wrap;111    gap: 18px 18px;112  }113  .chip {114    padding: 18px 32px;115    border-radius: 999px;116    background: #F0F0F0;117    color: #333;118    font-size: 36px;119    border: 1px solid #E0E0E0;120  }121 122  /* Keyboard mock */123  .keyboard {124    position: absolute;125    left: 0;126    bottom: 0;127    width: 1080px;128    height: 760px;129    background: #1E1E1E;130    border-top-left-radius: 26px;131    border-top-right-radius: 26px;132    padding: 24px 24px 40px 24px;133    color: #fff;134  }135  .kbd-top {136    display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px;137  }138  .kbd-top .kbd-icon {139    width: 72px; height: 72px; border-radius: 16px; background:#2B2B2B; display:flex; align-items:center; justify-content:center;140    color:#BDBDBD; font-weight:700;141  }142  .keys {143    display: grid;144    grid-template-rows: repeat(4, 1fr);145    gap: 16px;146    margin-top: 16px;147  }148  .row {149    display:flex; gap: 12px; justify-content:center;150  }151  .key {152    min-width: 86px; height: 120px; background:#2A2A2A; border-radius: 20px; display:flex; align-items:center; justify-content:center;153    color:#E6E6E6; font-size: 44px; font-weight:600;154  }155  .key.wide { min-width: 180px; }156  .key.space { flex: 1; min-width: 300px; }157  .kbd-bottom {158    display:flex; align-items:center; gap: 12px; margin-top: 16px;159  }160  .nav-dot {161    width: 220px; height: 10px; border-radius:5px; background:#E0E0E0; opacity:0.7; margin: 22px auto 0;162  }163 164  /* Simple SVG styling */165  svg { display:block; }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div>1:12</div>174    <div class="status-icons">175      <div class="status-dot"></div>176      <div class="status-dot"></div>177      <div class="status-dot"></div>178      <div class="status-battery"><div class="level"></div></div>179    </div>180  </div>181 182  <!-- Search bar row -->183  <div class="search-row">184    <div class="back-btn">185      <svg width="54" height="54" viewBox="0 0 54 54">186        <path d="M32 10 L14 27 L32 44" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188    </div>189 190    <div class="search-box">191      <div class="search-placeholder">Men's Big &amp; Tall</div>192      <div class="search-actions">193        <div class="action-circle">194          <!-- Camera icon -->195          <svg width="36" height="36" viewBox="0 0 36 36">196            <rect x="6" y="10" width="24" height="18" rx="4" stroke="#000" stroke-width="2" fill="none"/>197            <circle cx="18" cy="19" r="6" stroke="#000" stroke-width="2" fill="none"/>198            <path d="M12 10 L15 7 H21 L24 10" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>199          </svg>200        </div>201        <div class="action-circle dark">202          <!-- Search icon -->203          <svg width="36" height="36" viewBox="0 0 36 36">204            <circle cx="16" cy="16" r="10" stroke="#fff" stroke-width="3" fill="none"/>205            <path d="M24 24 L32 32" stroke="#fff" stroke-width="3" stroke-linecap="round"/>206          </svg>207        </div>208      </div>209    </div>210  </div>211 212  <!-- Popular tags -->213  <div class="section-title">Popular right now</div>214  <div class="chips">215    <div class="chip">🔥 prime</div>216    <div class="chip">underwear</div>217    <div class="chip">womens sandals</div>218    <div class="chip">womens t shirts</div>219    <div class="chip">wall stickers</div>220    <div class="chip">sweatshirts</div>221    <div class="chip">fall dresses</div>222    <div class="chip">sweat pants</div>223    <div class="chip">shirts</div>224    <div class="chip">chains</div>225  </div>226 227  <!-- Keyboard mockup -->228  <div class="keyboard">229    <div class="kbd-top">230      <div class="kbd-icon">⌨️</div>231      <div class="kbd-icon">GIF</div>232      <div class="kbd-icon">⚙</div>233      <div class="kbd-icon">G</div>234      <div class="kbd-icon">🎨</div>235      <div class="kbd-icon">🎤</div>236    </div>237    <div class="keys">238      <div class="row">239        <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>240        <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>241      </div>242      <div class="row">243        <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>244        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>245      </div>246      <div class="row">247        <div class="key">⬆️</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>248        <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>249      </div>250      <div class="row">251        <div class="key wide">?123</div>252        <div class="key">,</div>253        <div class="key">😊</div>254        <div class="key space"></div>255        <div class="key">.</div>256        <div class="key wide">🔍</div>257      </div>258    </div>259    <div class="nav-dot"></div>260  </div>261 262</div>263</body>264</html>