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  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }10  #render-target {11    position: relative;12    width: 1080px;13    height: 2400px;14    overflow: hidden;15    background: #1E1E1E;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: 100px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon {40    display: inline-flex;41    width: 44px;42    height: 44px;43    align-items: center;44    justify-content: center;45    opacity: 0.9;46  }47  .icon svg { width: 100%; height: 100%; fill: none; stroke: #EDEDED; stroke-width: 3; }48 49  /* App header with back and actions */50  .app-header {51    position: absolute;52    top: 100px;53    left: 0;54    width: 1080px;55    height: 120px;56    padding: 0 40px;57    display: flex;58    align-items: center;59    justify-content: space-between;60  }61  .header-left { display: flex; align-items: center; gap: 24px; }62  .header-right { display: flex; align-items: center; gap: 48px; }63  .action-icon svg { width: 56px; height: 56px; stroke: #BDBDBD; stroke-width: 3; }64 65  /* Content */66  .content {67    position: absolute;68    top: 260px;69    left: 60px;70    right: 60px;71    color: #EDEDED;72  }73  .title {74    font-size: 96px;75    font-weight: 500;76    margin: 0 0 28px 0;77  }78  .subtitle {79    font-size: 44px;80    color: #CFCFCF;81    margin: 0;82  }83 84  /* Bottom toolbar above keyboard */85  .bottom-bar {86    position: absolute;87    left: 0;88    width: 100%;89    height: 120px;90    bottom: 980px; /* sits just above keyboard */91    padding: 0 40px;92    display: flex;93    align-items: center;94    justify-content: space-between;95    color: #CFCFCF;96  }97  .bottom-left { display: flex; align-items: center; gap: 36px; }98  .bottom-center {99    position: absolute;100    left: 0; right: 0;101    text-align: center;102    font-size: 36px;103    color: #BDBDBD;104  }105  .bottom-right { display: flex; align-items: center; }106  .tiny-icon svg { width: 60px; height: 60px; stroke: #BDBDBD; stroke-width: 3; }107 108  /* Keyboard */109  .keyboard {110    position: absolute;111    bottom: 0;112    left: 0;113    width: 1080px;114    height: 980px;115    background: #232323;116    border-top: 1px solid #2E2E2E;117  }118  .suggestions {119    height: 110px;120    display: flex;121    align-items: center;122    justify-content: center;123    gap: 28px;124    color: #EDEDED;125    font-size: 40px;126  }127  .suggestion {128    padding: 12px 28px;129    background: #2B2B2B;130    border-radius: 22px;131    border: 1px solid #3A3A3A;132  }133  .keys {134    padding: 24px 22px 22px;135    display: grid;136    grid-template-columns: repeat(10, 1fr);137    grid-row-gap: 24px;138    grid-column-gap: 14px;139  }140  .key {141    height: 120px;142    background: #2D2D2D;143    border-radius: 22px;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #EDEDED;148    font-size: 42px;149    border: 1px solid #3A3A3A;150  }151  /* Row offsets to mimic staggered layout */152  .row2 { grid-column: 1 / span 9; margin-left: 40px; display: contents; }153  .row3 { grid-column: 1 / span 9; margin-left: 80px; display: contents; }154 155  /* Special keys */156  .key-wide { grid-column: span 2; }157  .space { grid-column: span 5; }158  .enter, .backspace, .shift { background: #3A3A3A; }159  .special-light { background: #AEB7FF; color: #1E1E1E; }160 161  /* Gesture bar */162  .gesture-bar {163    position: absolute;164    bottom: 24px;165    left: 50%;166    transform: translateX(-50%);167    width: 320px;168    height: 10px;169    background: #CFCFCF;170    opacity: 0.8;171    border-radius: 20px;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="status-left">8:20</div>181    <div class="status-right">182      <div class="icon">183        <svg viewBox="0 0 24 24">184          <path d="M2 18h20" />185          <path d="M6 6h12l2 4H4l2-4z" />186        </svg>187      </div>188      <div class="icon">189        <svg viewBox="0 0 24 24">190          <circle cx="12" cy="12" r="8"></circle>191          <path d="M12 8v6l4 2"></path>192        </svg>193      </div>194      <div class="icon">195        <svg viewBox="0 0 24 24">196          <path d="M2 12h20"></path>197          <path d="M12 2v20"></path>198        </svg>199      </div>200      <div class="icon">201        <svg viewBox="0 0 24 24">202          <path d="M3 8h18M5 5h14M7 2h10" />203        </svg>204      </div>205      <div class="icon">206        <svg viewBox="0 0 24 24">207          <path d="M3 12c4 5 14 5 18 0"></path>208        </svg>209      </div>210      <div class="icon">211        <svg viewBox="0 0 24 24">212          <rect x="7" y="4" width="10" height="16" rx="2"></rect>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- App header -->219  <div class="app-header">220    <div class="header-left">221      <div class="action-icon">222        <svg viewBox="0 0 24 24">223          <path d="M15 5l-7 7 7 7" />224        </svg>225      </div>226    </div>227    <div class="header-right">228      <div class="action-icon">229        <svg viewBox="0 0 24 24">230          <path d="M12 3l4 4-8 8-4 1 1-4 8-8z" />231        </svg>232      </div>233      <div class="action-icon">234        <svg viewBox="0 0 24 24">235          <path d="M12 3c3 0 5 2 5 5v4l2 2H5l2-2V8c0-3 2-5 5-5z"></path>236          <path d="M10 19h4"></path>237        </svg>238      </div>239      <div class="action-icon">240        <svg viewBox="0 0 24 24">241          <rect x="4" y="4" width="16" height="16" rx="2"></rect>242          <path d="M12 8v8M8 12h8"></path>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Content -->249  <div class="content">250    <h1 class="title">ABC</h1>251    <p class="subtitle">ABC</p>252  </div>253 254  <!-- Bottom toolbar -->255  <div class="bottom-bar">256    <div class="bottom-left">257      <div class="tiny-icon">258        <svg viewBox="0 0 24 24">259          <rect x="3" y="3" width="18" height="18" rx="3"></rect>260          <path d="M12 7v10M7 12h10"></path>261        </svg>262      </div>263      <div class="tiny-icon">264        <svg viewBox="0 0 24 24">265          <path d="M12 3l4 4-8 8-4 1 1-4 8-8z"></path>266        </svg>267      </div>268    </div>269    <div class="bottom-center">Edited Yesterday, 12:15 PM</div>270    <div class="bottom-right">271      <div class="tiny-icon">272        <svg viewBox="0 0 24 24">273          <circle cx="12" cy="5" r="2"></circle>274          <circle cx="12" cy="12" r="2"></circle>275          <circle cx="12" cy="19" r="2"></circle>276        </svg>277      </div>278    </div>279  </div>280 281  <!-- Keyboard -->282  <div class="keyboard">283    <div class="suggestions">284      <div class="suggestion">ABC</div>285      <div class="suggestion">ABCD</div>286      <div class="suggestion">abc</div>287    </div>288 289    <div class="keys">290      <!-- Row 1 -->291      <div class="key">q</div>292      <div class="key">w</div>293      <div class="key">e</div>294      <div class="key">r</div>295      <div class="key">t</div>296      <div class="key">y</div>297      <div class="key">u</div>298      <div class="key">i</div>299      <div class="key">o</div>300      <div class="key">p</div>301 302      <!-- Row 2 (staggered) -->303      <div class="row2">304        <div class="key">a</div>305        <div class="key">s</div>306        <div class="key">d</div>307        <div class="key">f</div>308        <div class="key">g</div>309        <div class="key">h</div>310        <div class="key">j</div>311        <div class="key">k</div>312        <div class="key">l</div>313      </div>314 315      <!-- Row 3 -->316      <div class="key shift">⇧</div>317      <div class="key">z</div>318      <div class="key">x</div>319      <div class="key">c</div>320      <div class="key">v</div>321      <div class="key">b</div>322      <div class="key">n</div>323      <div class="key">m</div>324      <div class="key backspace">⌫</div>325      <div class="key"></div>326 327      <!-- Row 4 -->328      <div class="key key-wide special-light">?123</div>329      <div class="key">,</div>330      <div class="key">☺</div>331      <div class="key space">space</div>332      <div class="key">.</div>333      <div class="key key-wide special-light">↵</div>334    </div>335 336    <div class="gesture-bar"></div>337  </div>338 339</div>340</body>341</html>