GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #000000;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #000;29    color: #ffffff;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    box-sizing: border-box;35    font-weight: 600;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .status-time {43    font-size: 46px;44    letter-spacing: 0.5px;45  }46  .status-app {47    font-size: 34px;48    padding: 6px 12px;49    border-radius: 8px;50    border: 1px solid #333;51    color: #d9d9d9;52  }53  .status-right {54    display: flex;55    align-items: center;56    gap: 24px;57  }58  .icon-wrap {59    display: flex;60    align-items: center;61    gap: 18px;62  }63  .icon {64    width: 48px;65    height: 48px;66  }67 68  /* Top toolbar */69  .toolbar {70    position: absolute;71    top: 120px;72    left: 0;73    width: 1080px;74    height: 150px;75    background: #6f6509; /* olive bar */76    display: flex;77    align-items: center;78    padding: 0 30px;79    box-sizing: border-box;80    gap: 26px;81  }82  .btn-check {83    width: 92px;84    height: 92px;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .title-input {90    width: 620px;91    height: 88px;92    background: #f2f2e9;93    border: 1px solid #8b7b23;94    border-radius: 6px;95  }96  .color-square {97    width: 92px;98    height: 92px;99    background: #fff000;100    border: 1px solid #8b7b23;101  }102  .ellipsis {103    margin-left: auto;104    width: 72px;105    height: 100%;106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .ellipsis .dot {111    width: 14px;112    height: 14px;113    background: #eae5b5;114    border-radius: 50%;115    margin: 6px 0;116  }117  .date-text {118    position: absolute;119    top: 280px;120    right: 30px;121    color: #d0caa9;122    font-size: 40px;123  }124 125  /* Content area with ruled lines */126  .content {127    position: absolute;128    left: 0;129    top: 270px;130    width: 1080px;131    height: 1180px;132    background:133      repeating-linear-gradient(134        to bottom,135        #000 0px,136        #000 149px,137        rgba(126,113,22,0.45) 150px,138        #000 151px139      );140  }141  .editing-label {142    position: absolute;143    top: 320px;144    left: 40px;145    color: #9f9f9f;146    font-size: 56px;147    letter-spacing: 0.3px;148  }149 150  /* Undo/Redo above keyboard */151  .undo-redo {152    position: absolute;153    bottom: 980px;154    left: 0;155    width: 1080px;156    height: 90px;157    display: flex;158    align-items: center;159    justify-content: center;160    gap: 140px;161  }162  .circle-btn {163    width: 86px;164    height: 86px;165    border-radius: 43px;166    border: 2px solid #777;167    display: flex;168    align-items: center;169    justify-content: center;170    background: #111;171  }172 173  /* Keyboard */174  .keyboard {175    position: absolute;176    bottom: 100px;177    left: 0;178    width: 1080px;179    height: 880px;180    background: #1f1f1f;181    border-top: 1px solid #333;182    box-sizing: border-box;183    display: flex;184    flex-direction: column;185  }186  .kb-top-tools {187    height: 110px;188    display: flex;189    align-items: center;190    padding: 0 26px;191    gap: 30px;192    box-sizing: border-box;193  }194  .kb-tool {195    width: 90px;196    height: 68px;197    border-radius: 16px;198    background: #2b2b2b;199    border: 1px solid #444;200    display: flex;201    align-items: center;202    justify-content: center;203    color: #d7d7d7;204    font-size: 32px;205  }206  .kb-rows {207    flex: 1;208    display: flex;209    flex-direction: column;210    gap: 26px;211    padding: 16px 24px 24px;212    box-sizing: border-box;213  }214  .kb-row {215    display: flex;216    justify-content: center;217    gap: 18px;218  }219  .key {220    width: 92px;221    height: 122px;222    background: #2b2b2b;223    border-radius: 20px;224    border: 1px solid #3c3c3c;225    display: flex;226    align-items: center;227    justify-content: center;228    color: #f0f0f0;229    font-size: 44px;230    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);231  }232  .key-wide {233    width: 140px;234  }235  .key-xl {236    width: 460px;237  }238  .key-special {239    background: #323232;240    color: #eaeaea;241  }242  .key-accent {243    background: #cfd7ff;244    color: #111;245  }246  .kb-bottom {247    height: 140px;248    display: flex;249    align-items: center;250    justify-content: space-between;251    padding: 0 24px;252    box-sizing: border-box;253    gap: 18px;254  }255  .gesture-bar {256    position: absolute;257    bottom: 24px;258    left: 50%;259    transform: translateX(-50%);260    width: 240px;261    height: 12px;262    background: #eaeaea;263    border-radius: 6px;264    opacity: 0.9;265  }266</style>267</head>268<body>269<div id="render-target">270 271  <!-- Status Bar -->272  <div class="status-bar">273    <div class="status-left">274      <div class="status-time">11:35</div>275      <div class="status-app">M</div>276    </div>277    <div class="status-right">278      <div class="icon-wrap">279        <!-- Wifi icon -->280        <svg class="icon" viewBox="0 0 64 64">281          <path d="M6 24c12-10 40-10 52 0" stroke="#fff" stroke-width="4" fill="none"/>282          <path d="M14 32c8-7 28-7 36 0" stroke="#fff" stroke-width="4" fill="none"/>283          <path d="M24 40c5-4 11-4 16 0" stroke="#fff" stroke-width="4" fill="none"/>284          <circle cx="32" cy="48" r="4" fill="#fff"/>285        </svg>286        <!-- Battery icon -->287        <svg class="icon" viewBox="0 0 80 64">288          <rect x="2" y="14" width="64" height="36" rx="6" ry="6" stroke="#fff" stroke-width="4" fill="none"/>289          <rect x="6" y="18" width="46" height="28" fill="#fff"/>290          <rect x="68" y="22" width="8" height="20" rx="2" fill="#fff"/>291        </svg>292      </div>293    </div>294  </div>295 296  <!-- Top Toolbar -->297  <div class="toolbar">298    <div class="btn-check">299      <svg width="72" height="72" viewBox="0 0 72 72">300        <path d="M16 38l12 12 28-34" stroke="#f4f4f4" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>301      </svg>302    </div>303    <div class="title-input"></div>304    <div class="color-square"></div>305    <div class="ellipsis">306      <div class="dot"></div>307      <div class="dot"></div>308      <div class="dot"></div>309    </div>310  </div>311 312  <div class="date-text">8/9/23 11:35 AM</div>313 314  <!-- Content area -->315  <div class="content"></div>316  <div class="editing-label">Editing</div>317 318  <!-- Undo / Redo -->319  <div class="undo-redo">320    <div class="circle-btn">321      <svg width="50" height="50" viewBox="0 0 64 64">322        <path d="M20 18l-12 12 12 12" stroke="#cfcfcf" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>323        <path d="M26 20c14 0 22 8 22 16" stroke="#cfcfcf" stroke-width="4" fill="none"/>324      </svg>325    </div>326    <div class="circle-btn">327      <svg width="50" height="50" viewBox="0 0 64 64">328        <path d="M44 18l12 12-12 12" stroke="#cfcfcf" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>329        <path d="M38 20c-14 0-22 8-22 16" stroke="#cfcfcf" stroke-width="4" fill="none"/>330      </svg>331    </div>332  </div>333 334  <!-- Keyboard -->335  <div class="keyboard">336    <div class="kb-top-tools">337      <div class="kb-tool">⬚</div>338      <div class="kb-tool">🙂</div>339      <div class="kb-tool">GIF</div>340      <div class="kb-tool">⚙</div>341      <div class="kb-tool">G🌐</div>342      <div class="kb-tool">🎨</div>343      <div class="kb-tool">🎙</div>344    </div>345 346    <div class="kb-rows">347      <div class="kb-row">348        <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>349      </div>350      <div class="kb-row">351        <div class="key-wide 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>352      </div>353      <div class="kb-row">354        <div class="key special key-special">⇧</div>355        <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>356        <div class="key special key-special">⌫</div>357      </div>358      <div class="kb-bottom">359        <div class="key key-accent">?123</div>360        <div class="key key-special">,</div>361        <div class="key key-special">🙂</div>362        <div class="key key-xl key-special"></div>363        <div class="key key-special">.</div>364        <div class="key key-accent">⏎</div>365      </div>366    </div>367  </div>368 369  <div class="gesture-bar"></div>370</div>371</body>372</html>