GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Recreation</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25  }26 27  /* Floating editor toolbar */28  .toolbar {29    position: absolute;30    top: 130px;31    left: 70px;32    width: 940px;33    height: 120px;34    background: #3a3a3a;35    border-radius: 8px;36    box-shadow: 0 6px 0 rgba(0,0,0,0.35);37    display: flex;38    align-items: center;39    padding: 0 20px;40    gap: 22px;41  }42  .icon-btn {43    width: 84px;44    height: 84px;45    border-radius: 8px;46    background: #424242;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .toolbar .divider {52    width: 2px;53    height: 84px;54    background: #2b2b2b;55    margin-left: auto;56    margin-right: 8px;57  }58  .check-btn {59    width: 84px;60    height: 84px;61    border-radius: 8px;62    background: #2f2f2f;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .icon-svg { width: 56px; height: 56px; }68 69  /* Text dialog panel */70  .text-panel {71    position: absolute;72    top: 300px;73    left: 140px;74    width: 800px;75    background: #3a3a3a;76    border-radius: 8px;77    box-shadow: 0 2px 0 rgba(0,0,0,0.35);78    padding-bottom: 24px;79  }80  .text-panel .title {81    text-align: center;82    color: #e6e6e6;83    font-size: 36px;84    padding: 16px 0 8px;85    letter-spacing: 0.5px;86  }87  .input-sim {88    margin: 14px 28px 24px;89    height: 220px;90    border-radius: 8px;91    border: 4px solid #5677a6;92    background: linear-gradient(#efefef, #e5e5e5);93    color: #111;94    font-size: 48px;95    padding: 26px;96    box-sizing: border-box;97  }98  .caret {99    display: inline-block;100    width: 2px;101    height: 52px;102    background: #2a6fda;103    vertical-align: middle;104    margin-left: 4px;105  }106 107  /* Guide lines */108  .guide {109    position: absolute;110    top: 560px;111    width: 3px;112    height: 700px;113    background: #c5b6ff;114  }115  .guide.left { left: 240px; }116  .guide.right { left: 840px; }117 118  /* Large canvas text */119  .canvas-text {120    position: absolute;121    top: 1120px;122    left: 60px;123    font-size: 200px;124    font-weight: 600;125    color: #000;126    line-height: 1.05;127  }128  .selection-box {129    position: absolute;130    top: 1100px;131    left: 250px;132    width: 580px;133    height: 360px;134    border: 4px solid rgba(163,136,255,0.8);135    border-radius: 2px;136    box-sizing: border-box;137  }138 139  /* Keyboard area */140  .keyboard {141    position: absolute;142    bottom: 0;143    left: 0;144    width: 1080px;145    height: 860px;146    background: #f1f2e9;147    box-sizing: border-box;148    padding-top: 18px;149  }150  .suggestions {151    height: 120px;152    display: flex;153    align-items: center;154    padding: 0 24px;155    gap: 20px;156  }157  .chip {158    background: #ffffff;159    border: 1px solid #d8d8d8;160    border-radius: 26px;161    padding: 16px 22px;162    color: #2d2d2d;163    font-size: 36px;164  }165  .chip.green {166    background: #cfe9c9;167    border-color: #aed8a6;168  }169  .chip.sep {170    width: 2px;171    height: 44px;172    background: #cfcfcf;173    border-radius: 1px;174  }175 176  .key-row {177    display: grid;178    grid-template-columns: repeat(10, 1fr);179    gap: 16px;180    padding: 12px 26px;181  }182  .key {183    background: #ffffff;184    border: 1px solid #dcdcdc;185    border-radius: 14px;186    height: 120px;187    display: flex;188    align-items: center;189    justify-content: center;190    font-size: 44px;191    color: #2c2c2c;192  }193  .key.small { font-size: 36px; }194  .key.green {195    background: #cfe9c9;196    border-color: #aed8a6;197    color: #284b2a;198  }199  .key.space {200    grid-column: span 4;201    font-size: 40px;202    color: #666;203  }204  .row2 {205    grid-template-columns: 120px repeat(9, 1fr) 120px;206    padding: 12px 26px;207    gap: 16px;208  }209  .row3 {210    grid-template-columns: 160px 120px 120px 1fr 120px 160px;211    padding: 12px 26px 24px;212    gap: 16px;213  }214 215  /* Bottom nav pill */216  .nav-pill {217    position: absolute;218    bottom: 12px;219    left: 50%;220    transform: translateX(-50%);221    width: 300px;222    height: 14px;223    background: #a7a7a7;224    border-radius: 8px;225    opacity: 0.8;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <div class="status-bar"></div>233 234  <!-- Editor toolbar -->235  <div class="toolbar">236    <!-- Keyboard icon -->237    <div class="icon-btn">238      <svg class="icon-svg" viewBox="0 0 24 24">239        <rect x="2" y="4" width="20" height="16" rx="2" fill="#cfcfcf"/>240        <rect x="4" y="7" width="3" height="2" fill="#5a5a5a"/>241        <rect x="8" y="7" width="3" height="2" fill="#5a5a5a"/>242        <rect x="12" y="7" width="3" height="2" fill="#5a5a5a"/>243        <rect x="16" y="7" width="3" height="2" fill="#5a5a5a"/>244        <rect x="4" y="10" width="3" height="2" fill="#5a5a5a"/>245        <rect x="8" y="10" width="3" height="2" fill="#5a5a5a"/>246        <rect x="12" y="10" width="3" height="2" fill="#5a5a5a"/>247        <rect x="16" y="10" width="3" height="2" fill="#5a5a5a"/>248        <rect x="6" y="13" width="12" height="2" fill="#5a5a5a"/>249      </svg>250    </div>251    <!-- Aa icon -->252    <div class="icon-btn" style="color:#eaeaea;font-size:42px;font-weight:700;">Aa</div>253    <!-- Color wheel -->254    <div class="icon-btn">255      <svg class="icon-svg" viewBox="0 0 24 24">256        <circle cx="12" cy="12" r="10" fill="#ffcc00"/>257        <path d="M12 2 A10 10 0 0 1 22 12 L12 12 Z" fill="#ff6666"/>258        <path d="M12 12 L22 12 A10 10 0 0 1 12 22 Z" fill="#66ccff"/>259        <circle cx="12" cy="12" r="4" fill="#3a3a3a"/>260      </svg>261    </div>262    <!-- Polygon nodes -->263    <div class="icon-btn">264      <svg class="icon-svg" viewBox="0 0 24 24">265        <circle cx="6" cy="18" r="2.2" fill="#dcdcdc"/>266        <circle cx="18" cy="18" r="2.2" fill="#dcdcdc"/>267        <circle cx="12" cy="6" r="2.2" fill="#dcdcdc"/>268        <path d="M6 18 L12 6 L18 18 Z" stroke="#dcdcdc" stroke-width="2" fill="none"/>269      </svg>270    </div>271    <!-- Circular path -->272    <div class="icon-btn">273      <svg class="icon-svg" viewBox="0 0 24 24">274        <circle cx="12" cy="12" r="8" stroke="#dcdcdc" stroke-width="2" fill="none"/>275        <circle cx="12" cy="4" r="2" fill="#dcdcdc"/>276        <circle cx="20" cy="12" r="2" fill="#dcdcdc"/>277        <circle cx="12" cy="20" r="2" fill="#dcdcdc"/>278        <circle cx="4" cy="12" r="2" fill="#dcdcdc"/>279      </svg>280    </div>281    <!-- Device icon -->282    <div class="icon-btn">283      <svg class="icon-svg" viewBox="0 0 24 24">284        <rect x="6" y="3" width="12" height="18" rx="2" fill="#dcdcdc"/>285        <rect x="10" y="18" width="4" height="1.8" fill="#5a5a5a"/>286      </svg>287    </div>288    <div class="divider"></div>289    <!-- Checkmark -->290    <div class="check-btn">291      <svg class="icon-svg" viewBox="0 0 24 24">292        <path d="M5 12 L10 17 L19 7" stroke="#e6e6e6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>293      </svg>294    </div>295  </div>296 297  <!-- Text input panel -->298  <div class="text-panel">299    <div class="title">Text</div>300    <div class="input-sim">301      Happy Birthday<span class="caret"></span>302    </div>303  </div>304 305  <!-- Guides -->306  <div class="guide left"></div>307  <div class="guide right"></div>308 309  <!-- Big canvas text -->310  <div class="canvas-text">Happy Birthday</div>311  <div class="selection-box"></div>312 313  <!-- Keyboard -->314  <div class="keyboard">315    <div class="suggestions">316      <div class="chip green" style="display:flex; align-items:center; gap:10px;">317        <svg width="36" height="36" viewBox="0 0 24 24">318          <rect x="2" y="3" width="20" height="6" rx="2" fill="#6ea970"/>319          <circle cx="6" cy="16" r="4" fill="#6ea970"/>320        </svg>321      </div>322      <div class="chip">Birthday</div>323      <div class="chip sep"></div>324      <div class="chip">Birthdays</div>325      <div class="chip sep"></div>326      <div class="chip">🎈</div>327      <div class="chip sep"></div>328      <div class="chip">🎂</div>329      <div class="chip sep"></div>330      <div class="chip small">🎤</div>331    </div>332 333    <div class="key-row">334      <div class="key">q</div>335      <div class="key">w</div>336      <div class="key">e</div>337      <div class="key">r</div>338      <div class="key">t</div>339      <div class="key">y</div>340      <div class="key">u</div>341      <div class="key">i</div>342