GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Etsy Search - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    padding: 0 28px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #eaeaea;30    font-weight: 600;31    letter-spacing: 1px;32  }33  .status-right {34    display: flex; align-items: center; gap: 22px;35  }36  .status-icon {37    width: 28px; height: 28px; opacity: .85;38  }39 40  /* Search header row */41  .search-row {42    position: absolute;43    top: 90px;44    left: 0;45    width: 1080px;46    height: 130px;47    display: flex;48    align-items: center;49    padding: 0 28px;50    box-sizing: border-box;51    border-bottom: 1px solid #262626;52  }53  .back-btn {54    width: 70px; height: 70px;55    display: flex; align-items: center; justify-content: center;56    margin-right: 18px;57  }58  .search-placeholder {59    font-size: 44px;60    color: #bdbdbd;61    white-space: nowrap;62    overflow: hidden;63    text-overflow: ellipsis;64  }65 66  /* Content */67  .content {68    position: absolute;69    top: 220px;70    left: 0;71    right: 0;72    bottom: 770px; /* space for keyboard */73    overflow: hidden;74    padding: 18px 32px;75    box-sizing: border-box;76  }77  .section-head {78    font-size: 40px;79    font-weight: 700;80    margin: 18px 0 18px;81    display: flex;82    align-items: center;83    justify-content: space-between;84  }85  .divider {86    height: 2px; background: #2a2a2a; margin: 12px 0 26px;87  }88  .subhead {89    font-size: 34px;90    color: #cfcfcf;91    margin: 6px 0 22px;92  }93  .suggestion {94    font-size: 42px;95    padding: 22px 0;96    border-bottom: 1px solid #222;97    color: #f1f1f1;98  }99 100  /* Keyboard mock */101  .keyboard {102    position: absolute;103    left: 0; right: 0; bottom: 0;104    height: 770px;105    background: #1b1b1b;106    border-top: 1px solid #2a2a2a;107    box-shadow: 0 -6px 24px rgba(0,0,0,.35) inset;108  }109  .kb-toolbar {110    height: 90px;111    display: flex;112    align-items: center;113    gap: 34px;114    padding: 0 28px;115    box-sizing: border-box;116  }117  .kb-tool {118    width: 68px; height: 68px; border-radius: 18px;119    background: #222; display: flex; align-items: center; justify-content: center;120    color: #d9d9d9; font-size: 30px;121    border: 1px solid #2c2c2c;122  }123  .kb-rows {124    padding: 16px 20px 20px; box-sizing: border-box;125  }126  .kb-row {127    display: flex; gap: 14px; margin: 16px 10px;128  }129  .key {130    flex: 1;131    height: 110px;132    border-radius: 24px;133    background: #2a2a2a;134    border: 1px solid #333;135    color: #eee; display: flex; align-items: center; justify-content: center;136    font-size: 44px; font-weight: 600;137  }138  .key-wide { flex: 1.35; }139  .key-xwide { flex: 4.5; font-weight: 500; color: #d0d0d0; }140  .key-small { flex: 1.1; }141  .backspace {142    flex: 1.6;143  }144  .search-fab {145    position: absolute;146    right: 24px;147    bottom: 26px;148    width: 120px; height: 120px;149    border-radius: 60px;150    background: #cfd7ff;151    display: flex; align-items: center; justify-content: center;152    border: 1px solid #A7B2FF;153  }154  .muted { color: #bdbdbd; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div class="status-left" style="font-size:36px;">9:09</div>163    <div class="status-right">164      <!-- simple icons to imply indicators -->165      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8e8e8"><path d="M7 4h10v2H7zM3 8h18v2H3zM1 12h22v2H1zM3 16h18v2H3zM7 20h10v2H7z"/></svg>166      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8e8e8"><path d="M12 22a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm0-2a5 5 0 1 1 .001-10.001A5 5 0 0 1 12 20z"/></svg>167      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8e8e8"><path d="M3 7h18v10H3z"/><path d="M1 9h2v6H1zM21 9h2v6h-2z"/></svg>168    </div>169  </div>170 171  <!-- Search row -->172  <div class="search-row">173    <div class="back-btn">174      <svg width="44" height="44" viewBox="0 0 24 24" fill="#eaeaea">175        <path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/>176      </svg>177    </div>178    <div class="search-placeholder">Search for anything on Etsy</div>179  </div>180 181  <!-- Content: suggestions -->182  <div class="content">183    <div class="section-head">184      <div>Browse by category</div>185      <svg width="42" height="42" viewBox="0 0 24 24" fill="#eaeaea"><path d="M9 4l8 8-8 8-1.5-1.5L14 12 7.5 5.5 9 4z"/></svg>186    </div>187    <div class="divider"></div>188 189    <div class="subhead">Popular right now</div>190 191    <div class="suggestion">frustration monopoly go</div>192    <div class="suggestion">fireplace ornament</div>193    <div class="suggestion">there will be no explanation only reputation</div>194    <div class="suggestion">josh hutcherson</div>195    <div class="suggestion">gus gus looking like a snack png</div>196    <div class="suggestion">hoodies and sweatshirts</div>197    <div class="suggestion">ugly christmas sweater womens funny</div>198    <div class="suggestion">cutting boards personalized cutting board ...</div>199  </div>200 201  <!-- Keyboard mock -->202  <div class="keyboard">203    <div class="kb-toolbar">204      <div class="kb-tool">◻︎</div>205      <div class="kb-tool">😊</div>206      <div class="kb-tool">GIF</div>207      <div class="kb-tool">⚙️</div>208      <div class="kb-tool">Gx</div>209      <div class="kb-tool">🎨</div>210      <div class="kb-tool">🎤</div>211    </div>212 213    <div class="kb-rows">214      <div class="kb-row">215        <div class="key">q</div>216        <div class="key">w</div>217        <div class="key">e</div>218        <div class="key">r</div>219        <div class="key">t</div>220        <div class="key">y</div>221        <div class="key">u</div>222        <div class="key">i</div>223        <div class="key">o</div>224        <div class="key">p</div>225      </div>226      <div class="kb-row">227        <div class="key">a</div>228        <div class="key">s</div>229        <div class="key">d</div>230        <div class="key">f</div>231        <div class="key">g</div>232        <div class="key">h</div>233        <div class="key">j</div>234        <div class="key">k</div>235        <div class="key">l</div>236      </div>237      <div class="kb-row">238        <div class="key">z</div>239        <div class="key">x</div>240        <div class="key">c</div>241        <div class="key">v</div>242        <div class="key">b</div>243        <div class="key">n</div>244        <div class="key">m</div>245        <div class="key backspace">⌫</div>246      </div>247      <div class="kb-row">248        <div class="key key-wide">?123</div>249        <div class="key key-small">,</div>250        <div class="key key-small">😊</div>251        <div class="key key-xwide">space</div>252        <div class="key key-small">.</div>253      </div>254    </div>255 256    <div class="search-fab" title="Search">257      <svg width="52" height="52" viewBox="0 0 24 24" fill="#1b1b1b">258        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>259      </svg>260    </div>261  </div>262</div>263</body>264</html>