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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EAEAEA;16    font-family: "Roboto", "Segoe UI", Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    color: #ffffff;32    font-size: 42px;33    letter-spacing: 0.5px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .status-square {41    width: 34px;42    height: 34px;43    background: #FFFFFF;44    border-radius: 4px;45  }46  .status-right {47    display: flex;48    align-items: center;49    gap: 30px;50  }51  .icon {52    width: 54px;53    height: 54px;54    fill: none;55    stroke: #FFFFFF;56    stroke-width: 4;57  }58 59  /* App bar */60  .app-bar {61    position: absolute;62    top: 124px;63    left: 0;64    width: 100%;65    height: 120px;66    display: flex;67    align-items: center;68    justify-content: space-between;69    padding: 0 40px;70    box-sizing: border-box;71  }72  .app-actions {73    display: flex;74    align-items: center;75    gap: 52px;76  }77  .app-icon {78    width: 64px;79    height: 64px;80    fill: none;81    stroke: #BDBDBD;82    stroke-width: 5;83    opacity: 0.9;84  }85 86  /* Content */87  .input-line {88    position: absolute;89    top: 320px;90    left: 60px;91    right: 60px;92    color: #D9D9D9;93    font-size: 110px;94    line-height: 140px;95    font-weight: 500;96    letter-spacing: 0.2px;97  }98  .caret {99    display: inline-block;100    width: 6px;101    height: 120px;102    background: #74d9d2;103    margin-left: 8px;104    border-radius: 3px;105    vertical-align: middle;106  }107  .underline {108    position: absolute;109    top: 520px;110    left: 160px;111    width: 760px;112    height: 6px;113    background: #2b3e3d;114    border-radius: 3px;115  }116  .translation {117    position: absolute;118    top: 720px;119    right: 120px;120    width: 840px;121    text-align: right;122    font-size: 120px;123    line-height: 150px;124    color: #87e3d8;125    font-weight: 500;126  }127 128  /* Language chips above keyboard */129  .lang-row {130    position: absolute;131    bottom: 980px;132    left: 40px;133    width: calc(100% - 80px);134    display: flex;135    align-items: center;136    justify-content: center;137    gap: 40px;138  }139  .chip {140    padding: 24px 46px;141    border-radius: 44px;142    background: #1a1a1a;143    border: 2px solid #2f2f2f;144    color: #9fe8df;145    font-size: 42px;146  }147  .swap-icon {148    width: 72px; height: 72px;149  }150  .swap-icon path { stroke: #9fe8df; stroke-width: 6; fill: none; }151 152  /* Keyboard */153  .keyboard {154    position: absolute;155    left: 0;156    bottom: 0;157    width: 100%;158    height: 930px;159    background: #1E1E1E;160    border-top-left-radius: 24px;161    border-top-right-radius: 24px;162    box-sizing: border-box;163  }164  .suggestions {165    height: 120px;166    display: flex;167    align-items: center;168    padding: 0 24px;169    gap: 28px;170    border-bottom: 1px solid #2c2c2c;171    color: #B8E9E3;172    font-size: 44px;173  }174  .spacer { flex: 1; }175  .mic {176    width: 72px; height: 72px;177  }178  .mic path { stroke: #B8E9E3; stroke-width: 6; fill: none; }179 180  .keys {181    padding: 28px 22px;182    display: grid;183    grid-template-rows: repeat(4, 1fr);184    gap: 22px;185    box-sizing: border-box;186  }187  .row {188    display: flex;189    gap: 18px;190    justify-content: center;191  }192  .key {193    height: 120px;194    min-width: 90px;195    padding: 0 18px;196    border-radius: 22px;197    background: #2B2B2B;198    color: #E0E0E0;199    font-size: 46px;200    display: flex;201    align-items: center;202    justify-content: center;203  }204  .key.small { min-width: 70px; }205  .key.wide { min-width: 140px; }206  .key.extra-wide { min-width: 220px; }207  .key.light {208    background: #a8e6e0;209    color: #0d2d2b;210    font-weight: 600;211  }212  .key.dark {213    background: #2B2B2B;214  }215  .return {216    background: #9fe8df;217    color: #0b2b29;218    font-weight: 700;219  }220  .delete {221    border: 2px solid #666;222  }223 224  /* Home indicator */225  .home-indicator {226    position: absolute;227    bottom: 20px;228    left: 50%;229    transform: translateX(-50%);230    width: 310px;231    height: 10px;232    background: #e6e6e6;233    border-radius: 8px;234    opacity: 0.9;235  }236</style>237</head>238<body>239<div id="render-target">240 241  <!-- Status Bar -->242  <div class="status-bar">243    <div class="status-left">244      <div>10:13</div>245      <div>11°</div>246      <div class="status-square"></div>247    </div>248    <div class="status-right">249      <!-- Wi-Fi -->250      <svg class="icon" viewBox="0 0 48 48">251        <path d="M4 16c10-8 30-8 40 0"/>252        <path d="M10 22c7-6 21-6 28 0"/>253        <path d="M16 28c4-3 12-3 16 0"/>254        <circle cx="24" cy="34" r="3" fill="#FFFFFF" stroke="none"/>255      </svg>256      <!-- Battery -->257      <svg class="icon" viewBox="0 0 60 48">258        <rect x="4" y="10" width="44" height="28" rx="6" ry="6" stroke="#FFFFFF" fill="none" stroke-width="4"/>259        <rect x="8" y="14" width="32" height="20" rx="4" fill="#FFFFFF" stroke="none"/>260        <rect x="50" y="18" width="6" height="12" rx="2" fill="#FFFFFF" stroke="none"/>261      </svg>262    </div>263  </div>264 265  <!-- App Bar -->266  <div class="app-bar">267    <!-- Back -->268    <svg class="app-icon" viewBox="0 0 48 48">269      <path d="M28 10 L12 24 L28 38" />270    </svg>271 272    <div class="app-actions">273      <!-- Scribble/format -->274      <svg class="app-icon" viewBox="0 0 48 48">275        <path d="M8 24c12-16 20 12 32-8" />276      </svg>277      <!-- Close X -->278      <svg class="app-icon" viewBox="0 0 48 48">279        <path d="M12 12 L36 36 M36 12 L12 36" />280      </svg>281      <!-- More/kebab -->282      <svg class="app-icon" viewBox="0 0 48 48">283        <circle cx="24" cy="10" r="4" stroke="none" fill="#BDBDBD"/>284        <circle cx="24" cy="24" r="4" stroke="none" fill="#BDBDBD"/>285        <circle cx="24" cy="38" r="4" stroke="none" fill="#BDBDBD"/>286      </svg>287    </div>288  </div>289 290  <!-- Input content -->291  <div class="input-line">292    My name is Charlie<span class="caret"></span>293  </div>294  <div class="underline"></div>295 296  <!-- Translation -->297  <div class="translation">اسمي تشارلي</div>298 299  <!-- Language chips -->300  <div class="lang-row">301    <div class="chip">English</div>302    <svg class="swap-icon" viewBox="0 0 64 64">303      <path d="M12 20h30M30 8l12 12-12 12M52 44H22M34 56L22 44l12-12"/>304    </svg>305    <div class="chip">Arabic</div>306  </div>307 308  <!-- Keyboard -->309  <div class="keyboard">310    <div class="suggestions">311      <div style="padding-left: 8px;">Charlie</div>312      <div>|</div>313      <div>Charlie's</div>314      <div>|</div>315      <div>Charlies</div>316      <div class="spacer"></div>317      <svg class="mic" viewBox="0 0 64 64">318        <path d="M32 10c6 0 10 4 10 10v10c0 6-4 10-10 10s-10-4-10-10V20c0-6 4-10 10-10z"/>319        <path d="M18 32c0 8 6 14 14 14s14-6 14-14"/>320        <path d="M32 46v10M24 56h16"/>321      </svg>322    </div>323 324    <div class="keys">325      <!-- Row 1 -->326      <div class="row">327        <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>328        <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>329      </div>330      <!-- Row 2 -->331      <div class="row">332        <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>333        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>334      </div>335      <!-- Row 3 -->336      <div class="row">337        <div class="key wide">⬆</div>338        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>339        <div class="key">b</div><div class="key">n</div><div class="key">m</div>340        <div class="key delete">⌫</div>341      </div>342      <!-- Row 4 -->343      <div class="row">344        <div class="key light wide">?123</div>345        <div class="key small">,</div>346        <div class="key extra-wide"><span style="opacity:0.8;">🙂</span></div>347        <div class="key extra-wide">space</div>348        <div class="key small">.</div>349        <div class="key return wide">➜</div>350      </div>351    </div>352  </div>353 354  <!-- Home Indicator -->355  <div class="home-indicator"></div>356</div>357</body>358</html>