GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top gradient header area */17  .headerGradient {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 320px;23    background: linear-gradient(90deg, #9dd4e6 0%, #c9eadc 100%);24  }25 26  /* Status bar */27  .status-bar {28    position: absolute;29    top: 26px;30    left: 36px;31    right: 36px;32    height: 40px;33    display: flex;34    align-items: center;35    color: #2b2b2b;36    font-weight: 600;37    font-size: 32px;38  }39  .status-bar .time { margin-right: 16px; }40  .status-bar .misc {41    display: flex;42    gap: 10px;43    margin-left: 10px;44    margin-right: auto;45  }46  .status-bar .misc div {47    width: 30px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.15);48  }49  .status-bar .dot {50    width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.35); margin: 0 18px;51  }52  .status-bar .right {53    display: flex; align-items: center; gap: 18px; margin-left: auto;54  }55  .wifi {56    width: 36px; height: 24px; position: relative;57  }58  .wifi::before, .wifi::after {59    content: ""; position: absolute; border: 3px solid #2b2b2b; border-radius: 50%;60  }61  .wifi::before { width: 34px; height: 18px; left: 1px; top: 2px; border-top-color:#2b2b2b; border-right-color: transparent; border-bottom-color: transparent; border-left-color:#2b2b2b; transform: rotate(45deg); }62  .wifi::after { width: 18px; height: 10px; left: 8px; top: 7px; border-top-color:#2b2b2b; border-right-color: transparent; border-bottom-color: transparent; border-left-color:#2b2b2b; transform: rotate(45deg); }63  .battery {64    width: 38px; height: 20px; border: 3px solid #2b2b2b; border-radius: 4px; position: relative;65  }66  .battery::after {67    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #2b2b2b; border-radius: 2px;68  }69  .battery .level { position: absolute; left: 3px; top: 3px; width: 26px; height: 12px; background: #2b2b2b; border-radius: 2px; }70 71  /* Back button */72  .back-btn {73    position: absolute;74    top: 120px;75    left: 24px;76    width: 72px;77    height: 72px;78    display: flex;79    align-items: center;80    justify-content: center;81  }82  .back-btn svg { width: 44px; height: 44px; }83 84  /* Search bar */85  .search-bar {86    position: absolute;87    top: 108px;88    left: 120px;89    width: 920px;90    height: 104px;91    background: #ffffff;92    border-radius: 28px;93    box-shadow: 0 6px 12px rgba(0,0,0,0.18);94    display: flex;95    align-items: center;96    padding: 0 26px;97  }98  .search-icon {99    width: 48px; height: 48px; margin-right: 18px;100  }101  .search-text {102    color: #5a5a5a;103    font-size: 36px;104  }105 106  /* Action buttons */107  .actions {108    position: absolute;109    top: 1420px;110    left: 80px;111    width: 920px;112    display: flex;113    gap: 52px;114  }115  .action-btn {116    flex: 1;117    height: 120px;118    background: #eef1f4;119    border: 2px solid #c7cdd4;120    border-radius: 22px;121    display: flex;122    align-items: center;123    padding: 0 26px;124    color: #333;125    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;126  }127  .action-btn svg { width: 56px; height: 56px; margin-right: 22px; }128  .action-btn span { font-size: 34px; }129 130  /* Keyboard */131  .keyboard {132    position: absolute;133    left: 0;134    bottom: 100px;135    width: 1080px;136    height: 720px;137    background: #161616;138    border-top-left-radius: 18px;139    border-top-right-radius: 18px;140    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);141    padding: 22px 26px;142    color: #eaeaea;143  }144  .kbd-top {145    height: 96px;146    display: flex;147    align-items: center;148    gap: 48px;149  }150  .kbd-top .icon { width: 56px; height: 56px; background: #2a2a2a; border-radius: 14px; border: 1px solid #3a3a3a; }151  .rows { margin-top: 12px; }152  .row {153    display: flex;154    justify-content: center;155    gap: 16px;156    margin-bottom: 18px;157  }158  .key {159    width: 90px;160    height: 92px;161    background: #252525;162    border: 1px solid #3a3a3a;163    border-radius: 18px;164    display: flex;165    align-items: center;166    justify-content: center;167    font-size: 36px;168    color: #efefef;169  }170  .key.wide { width: 180px; }171  .space { width: 480px; }172 173  /* Bottom gesture bar */174  .gesture-bar {175    position: absolute;176    bottom: 30px;177    left: 50%;178    transform: translateX(-50%);179    width: 320px;180    height: 14px;181    background: #e9e9e9;182    border-radius: 7px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <div class="headerGradient"></div>190 191  <div class="status-bar">192    <span class="time">8:29</span>193    <div class="misc">194      <div></div><div></div><div></div>195    </div>196    <div class="dot"></div>197    <div class="right">198      <div class="wifi"></div>199      <div class="battery"><div class="level"></div></div>200    </div>201  </div>202 203  <div class="back-btn">204    <svg viewBox="0 0 48 48">205      <path d="M30 10 L16 24 L30 38" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206    </svg>207  </div>208 209  <div class="search-bar">210    <svg class="search-icon" viewBox="0 0 48 48">211      <circle cx="20" cy="20" r="12" stroke="#707070" stroke-width="4" fill="none"/>212      <line x1="30" y1="30" x2="44" y2="44" stroke="#707070" stroke-width="4" stroke-linecap="round"/>213    </svg>214    <div class="search-text">Search Amazon.in</div>215  </div>216 217  <!-- Large white content area intentionally blank -->218 219  <div class="actions">220    <div class="action-btn">221      <!-- Simple hanger-like icon -->222      <svg viewBox="0 0 56 56">223        <path d="M28 10c-3 0-3 4 0 4h4v4l-18 10-6 10h40l-6-10-14-8" stroke="#4a4a4a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224      </svg>225      <span>Find the look</span>226    </div>227    <div class="action-btn">228      <!-- Camera icon -->229      <svg viewBox="0 0 56 56">230        <path d="M12 20h32l-4-8H16l-4 8z" fill="#bfc6cd"/>231        <rect x="8" y="22" width="40" height="24" rx="4" ry="4" fill="#d7dce2" stroke="#9aa1a9" stroke-width="2"/>232        <circle cx="28" cy="34" r="8" fill="none" stroke="#6f7780" stroke-width="3"/>233      </svg>234      <span>Scan products</span>235    </div>236  </div>237 238  <!-- Keyboard -->239  <div class="keyboard">240    <div class="kbd-top">241      <div class="icon"></div>242      <div class="icon"></div>243      <div class="icon"></div>244      <div class="icon"></div>245      <div class="icon"></div>246      <div class="icon"></div>247      <div class="icon"></div>248    </div>249 250    <div class="rows">251      <div class="row">252        <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><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>253      </div>254      <div class="row">255        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>256      </div>257      <div class="row">258        <div class="key wide">⇧</div>259        <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><div class="key">n</div><div class="key">m</div>260        <div class="key wide">⌫</div>261      </div>262      <div class="row">263        <div class="key wide">?123</div>264        <div class="key">,</div>265        <div class="key">🙂</div>266        <div class="key space"></div>267        <div class="key">.</div>268        <div class="key wide">↵</div>269      </div>270    </div>271  </div>272 273  <div class="gesture-bar"></div>274</div>275</body>276</html>