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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: Arial, Helvetica, sans-serif;16    color: #EDEDED;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 20px 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #FFFFFF;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .status-icon svg { width: 42px; height: 42px; fill: #FFFFFF; opacity: 0.9; }41 42  /* Search header */43  .search-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 140px;49    background: #1A1A1A;50    border-bottom: 1px solid #2A2A2A;51    display: flex;52    align-items: center;53    padding: 0 28px;54    box-sizing: border-box;55    gap: 24px;56  }57  .icon-btn {58    width: 80px;59    height: 80px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    border-radius: 40px;64    color: #FFFFFF;65  }66  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #FFFFFF; stroke-width: 6; }67  .search-text {68    font-size: 56px;69    color: #FFFFFF;70    flex: 1;71  }72  .caret {73    display: inline-block;74    width: 3px;75    height: 64px;76    background: #8AB4F8;77    margin-left: 6px;78    vertical-align: middle;79  }80 81  /* Suggestion box */82  .suggestions {83    position: absolute;84    top: 320px;85    left: 60px;86    width: 720px;87    background: #1E1E1E;88    border: 2px solid #3A3A3A;89    border-radius: 28px;90    padding: 24px 28px;91    box-sizing: border-box;92    color: #EDEDED;93    box-shadow: 0 6px 16px rgba(0,0,0,0.35);94  }95  .suggestions .line {96    font-size: 48px;97    margin: 16px 0;98  }99  .highlight {100    background: #FFD54F;101    color: #000000;102    padding: 6px 10px;103    border-radius: 6px;104  }105 106  /* Keyboard */107  .keyboard {108    position: absolute;109    bottom: 80px;110    left: 0;111    width: 1080px;112    height: 980px;113    background: #101010;114    border-top: 1px solid #2A2A2A;115    box-sizing: border-box;116    padding: 24px 24px 34px;117    display: flex;118    flex-direction: column;119    gap: 26px;120  }121  .kb-top-label {122    text-align: center;123    font-size: 44px;124    color: #DADADA;125    margin-bottom: 12px;126  }127  .row {128    display: flex;129    gap: 16px;130    justify-content: center;131  }132  .key {133    height: 120px;134    min-width: 88px;135    padding: 0 12px;136    border-radius: 22px;137    background: #2B2B2B;138    color: #EAEAEA;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 42px;143    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.05);144  }145  .key.wide { min-width: 120px; }146  .key.special {147    background: #cfd6ff;148    color: #1A1A1A;149  }150  .space {151    flex: 1;152    height: 120px;153    border-radius: 22px;154    background: #2B2B2B;155    color: #DADADA;156    display: flex;157    align-items: center;158    justify-content: center;159    font-size: 42px;160  }161  .icon-key svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 6; }162  .bottom-row {163    display: flex;164    gap: 16px;165    align-items: center;166    justify-content: center;167  }168  .gesture-bar {169    position: absolute;170    bottom: 16px;171    left: 50%;172    transform: translateX(-50%);173    width: 240px;174    height: 12px;175    border-radius: 6px;176    background: #EAEAEA;177    opacity: 0.9;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">8:21</div>187    <div class="status-right">188      <div class="status-icon">189        <!-- Cellular signal -->190        <svg viewBox="0 0 24 24">191          <path d="M3 20h3v-4H3v4zm5 0h3v-7H8v7zm5 0h3v-10h-3v10zm5 0h3V4h-3v16z"></path>192        </svg>193      </div>194      <div class="status-icon">195        <!-- Wi-Fi -->196        <svg viewBox="0 0 24 24">197          <path d="M2 8c5-4 15-4 20 0m-3 4c-4-3-10-3-14 0m5 4c2-2 6-2 8 0m-6 4a2 2 0 1 0 4 0 2 2 0 1 0-4 0"></path>198        </svg>199      </div>200      <div class="status-icon">201        <!-- Battery -->202        <svg viewBox="0 0 24 24">203          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#FFFFFF"></rect>204          <rect x="20" y="10" width="2" height="4" fill="#FFFFFF"></rect>205          <rect x="4" y="8" width="14" height="8" fill="#121212"></rect>206          <rect x="4" y="8" width="10" height="8" fill="#FFFFFF"></rect>207        </svg>208      </div>209    </div>210  </div>211 212  <!-- Search Header -->213  <div class="search-bar">214    <div class="icon-btn">215      <!-- Back arrow -->216      <svg viewBox="0 0 24 24">217        <path d="M15 5l-7 7 7 7"></path>218      </svg>219    </div>220    <div class="search-text">Testing<span class="caret"></span></div>221    <div class="icon-btn">222      <!-- Close/X -->223      <svg viewBox="0 0 24 24">224        <path d="M5 5l14 14M19 5L5 19"></path>225      </svg>226    </div>227  </div>228 229  <!-- Suggestions Box -->230  <div class="suggestions">231    <div class="line"><span class="highlight">Testing</span></div>232    <div class="line"><span class="highlight">Testing</span></div>233  </div>234 235  <!-- Keyboard -->236  <div class="keyboard">237    <div class="kb-top-label">Testing</div>238 239    <div class="row">240      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>241      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>242      <div class="key">o</div><div class="key">p</div>243    </div>244 245    <div class="row">246      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>247      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>248      <div class="key">l</div>249    </div>250 251    <div class="row">252      <div class="key wide">⇧</div>253      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>254      <div class="key">b</div><div class="key">n</div><div class="key">m</div>255      <div class="key icon-key wide">256        <!-- Backspace -->257        <svg viewBox="0 0 24 24">258          <path d="M6 7l-4 5 4 5h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6z"></path>259          <path d="M9 9l6 6M15 9l-6 6"></path>260        </svg>261      </div>262    </div>263 264    <div class="bottom-row">265      <div class="key special wide">?123</div>266      <div class="key wide">,</div>267      <div class="key icon-key wide">268        <!-- Emoji icon (smile) -->269        <svg viewBox="0 0 24 24">270          <circle cx="12" cy="12" r="9"></circle>271          <circle cx="9" cy="10" r="1.2"></circle>272          <circle cx="15" cy="10" r="1.2"></circle>273          <path d="M8 14c1.5 2 6.5 2 8 0" fill="none"></path>274        </svg>275      </div>276      <div class="space">Testing</div>277      <div class="key wide">.</div>278      <div class="key icon-key special wide">279        <!-- Search icon -->280        <svg viewBox="0 0 24 24">281          <circle cx="10" cy="10" r="6"></circle>282          <path d="M15 15l6 6"></path>283        </svg>284      </div>285    </div>286  </div>287 288  <div class="gesture-bar"></div>289</div>290</body>291</html>