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>Gmail Reply - Dark</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #ECECEC;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 90px;30    padding: 0 36px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #e6e6e6;36    font-size: 34px;37    letter-spacing: 0.4px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .status-icon svg {45    width: 44px;46    height: 44px;47    fill: none;48    stroke: #e6e6e6;49    stroke-width: 3.25;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 90px;56    left: 0;57    width: 1080px;58    height: 130px;59    box-sizing: border-box;60    padding: 0 24px;61    border-bottom: 1px solid #2a2a2a;62    display: flex;63    align-items: center;64    gap: 18px;65  }66  .app-icon {67    width: 64px;68    height: 64px;69    display: inline-flex;70    align-items: center;71    justify-content: center;72  }73  .app-icon svg {74    width: 44px;75    height: 44px;76    stroke: #e6e6e6;77    stroke-width: 3;78    fill: none;79  }80  .title {81    font-size: 40px;82    font-weight: 600;83  }84  .title-caret svg {85    width: 36px;86    height: 36px;87    stroke: #e6e6e6;88    stroke-width: 3;89  }90  .app-actions {91    margin-left: auto;92    display: flex;93    align-items: center;94    gap: 10px;95  }96  .send svg {97    fill: #8ab4f8;98    stroke: none;99  }100  .kebab svg {101    fill: #e6e6e6;102    stroke: none;103  }104 105  /* Compose fields */106  .compose {107    position: absolute;108    top: 220px;109    left: 0;110    width: 1080px;111    box-sizing: border-box;112    padding: 0 24px;113  }114  .field {115    padding: 28px 0;116    border-bottom: 1px solid #2a2a2a;117  }118  .label {119    color: #9aa0a6;120    font-size: 28px;121    margin-bottom: 10px;122  }123  .value {124    font-size: 34px;125    color: #e6e6e6;126  }127 128  /* To row pill */129  .to-row {130    display: flex;131    align-items: center;132    gap: 18px;133  }134  .pill {135    display: inline-flex;136    align-items: center;137    gap: 18px;138    padding: 14px 20px 14px 14px;139    border: 1px solid #3a3a3a;140    border-radius: 28px;141    background: #1e1e1e;142    color: #e6e6e6;143  }144  .avatar {145    width: 44px;146    height: 44px;147    border-radius: 50%;148    background: #E0E0E0;149    border: 1px solid #BDBDBD;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #757575;154    font-size: 18px;155  }156  .arrow-down-small svg {157    width: 30px;158    height: 30px;159    stroke: #9aa0a6;160    stroke-width: 2.5;161  }162 163  /* Subject */164  .subject {165    font-size: 38px;166    padding: 30px 0;167    border-bottom: 1px solid #2a2a2a;168    color: #e6e6e6;169  }170 171  /* Body area */172  .body-area {173    height: 900px;174    padding-top: 24px;175    color: #d0d0d0;176    font-size: 48px;177    letter-spacing: 2px;178  }179  .dots {180    display: inline-flex;181    gap: 18px;182    margin-top: 24px;183  }184  .dot {185    width: 16px;186    height: 16px;187    background: #6f6f6f;188    border-radius: 50%;189  }190 191  /* Keyboard */192  .keyboard {193    position: absolute;194    bottom: 70px;195    left: 0;196    width: 1080px;197    height: 950px;198    background: #1A1A1A;199    border-top: 1px solid #2a2a2a;200    box-sizing: border-box;201    padding: 18px 24px;202  }203  .kb-toolbar {204    height: 110px;205    display: flex;206    align-items: center;207    gap: 40px;208    color: #e6e6e6;209    font-size: 28px;210  }211  .kb-tool {212    width: 80px;213    height: 80px;214    border-radius: 18px;215    background: #242424;216    display: flex;217    align-items: center;218    justify-content: center;219  }220  .kb-tool svg {221    width: 42px;222    height: 42px;223    stroke: #e6e6e6;224    stroke-width: 2.6;225    fill: none;226  }227 228  .kb-row {229    margin-top: 20px;230    display: grid;231    grid-template-columns: repeat(10, 1fr);232    gap: 16px;233  }234  .kb-row.row-2 {235    grid-template-columns: repeat(9, 1fr);236  }237  .kb-row.row-3 {238    grid-template-columns: repeat(8, 1fr);239  }240  .key {241    height: 150px;242    background: #2a2a2a;243    border-radius: 18px;244    color: #ffffff;245    font-size: 44px;246    display: flex;247    align-items: center;248    justify-content: center;249  }250  .key.muted {251    background: #262626;252    color: #cfd8dc;253  }254  .kb-bottom {255    margin-top: 22px;256    display: grid;257    grid-template-columns: 160px 120px 120px 1fr 120px 160px;258    gap: 16px;259    align-items: center;260  }261  .key-round {262    height: 150px;263    border-radius: 30px;264    background: #2a2a2a;265    color: #ffffff;266    font-size: 36px;267    display: flex;268    align-items: center;269    justify-content: center;270  }271  .space {272    height: 150px;273    border-radius: 30px;274    background: #2a2a2a;275  }276  .mic {277    height: 150px;278    border-radius: 30px;279    background: #b9d8ff;280    color: #0b2957;281    font-size: 44px;282    display: flex;283    align-items: center;284    justify-content: center;285  }286 287  /* Navigation handle */288  .nav-handle {289    position: absolute;290    bottom: 20px;291    left: 50%;292    transform: translateX(-50%);293    width: 360px;294    height: 12px;295    background: #e6e6e6;296    border-radius: 8px;297    opacity: 0.7;298  }299</style>300</head>301<body>302<div id="render-target">303 304  <!-- Status bar -->305  <div class="status-bar">306    <div class="status-left">10:23</div>307    <div class="status-right">308      <div class="status-icon">309        <!-- Signal -->310        <svg viewBox="0 0 24 24">311          <path d="M3 18h2M6 15h2M9 12h2M12 9h2M15 6h2" />312        </svg>313      </div>314      <div class="status-icon">315        <!-- WiFi -->316        <svg viewBox="0 0 24 24">317          <path d="M2 8c5-4 15-4 20 0" />318          <path d="M5 12c3-2 11-2 14 0" />319          <circle cx="12" cy="16" r="2" />320        </svg>321      </div>322      <div class="status-icon">323        <!-- Battery -->324        <svg viewBox="0 0 24 24">325          <rect x="2" y="6" width="18" height="12" rx="2" />326          <rect x="21" y="9" width="2" height="6" />327          <rect x="4" y="8" width="10" height="8" fill="#e6e6e6" stroke="none"/>328        </svg>329      </div>330    </div>331  </div>332 333  <!-- App bar -->334  <div class="app-bar">335    <div class="app-icon">336      <!-- Back arrow -->337      <svg viewBox="0 0 24 24">338        <path d="M15 5l-7 7 7 7" />339      </svg>340    </div>341    <div class="title">Reply</div>342    <div class="title-caret">343      <svg viewBox="0 0 24 24">344        <path d="M6 9l6 6 6-6" />345      </svg>346    </div>347 348    <div class="app-actions">349      <div class="app-icon">350        <!-- Attach (paperclip) -->351        <svg viewBox="0 0 24 24">352          <path d="M7 7l8 8a3 3 0 0 1-4 4L3 13a5 5 0 0 1 7-7l8 8" />353        </svg>354      </div>355      <div class="app-icon send">356        <!-- Send -->357        <svg viewBox="0 0 24 24">358          <path d="M2 21l21-9L2 3l6 9-6 9z" />359        </svg>360      </div>361      <div class="app-icon kebab">362        <!-- Kebab -->363        <svg viewBox="0 0 24 24">364          <circle cx="12" cy="5" r="2" />365          <circle cx="12" cy="12" r="2" />366          <circle cx="12" cy="19" r="2" />367        </svg>368      </div>369    </div>370  </div>371 372  <!-- Compose fields -->373  <div class="compose">374    <div class="field">375      <div class="label">From</div>376      <div class="value">lucaskramer733@gmail.com</div>377    </div>378 379    <div class="field">380      <div class="label">To</div>381      <div class="to-row">382        <div class="pill">383          <div class="avatar">[IMG]</div>384          <div style="font-size:34px;">Cerebra Research</div>385        </div>386        <div class="arrow-down-small">387          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>388        </div>389      </div>390    </div>391 392    <div class="subject">Re: Shopping list</div>393 394    <div class="body-area">395      <div class="dots">396        <div class="dot"></div>397        <div class="dot"></div>398        <div class="dot"></div>399      </div>400    </div>401  </div>402 403  <!-- Keyboard -->404  <div class="keyboard">405    <div class="kb-toolbar">406      <div class="kb-tool">407        <!-- Apps grid -->408        <svg viewBox="0 0 24 24">409          <rect x="3" y="3" width="6" height="6"/><rect x="15" y="3" width="6" height="6"/>410          <rect x="3" y="15" width="6" height="6"/><rect x="15" y="15" width="6" height="6"/>411        </svg>412      </div>413      <div class="kb-tool">414        <!-- Emoji face -->415        <svg viewBox="0 0 24 24">416          <circle cx="12" cy="12" r="9"/>417          <circle cx="9" cy="10" r="1.2"/><circle cx="15" cy="10" r="1.2"/>418          <path d="M8 15c2 2 6 2 8 0"/>419        </svg>420      </div>421      <div class="kb-tool"><span style="font-weight:700;color:#e6e6e6;">GIF</span></div>422      <div class="kb-tool">423        <!-- Gear -->424        <svg viewBox="0 0 24 24">425          <circle cx="12" cy="12" r="3"/>426          <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.6 4.6l2.8 2.8M16.6 16.6l2.8 2.8M4.6 19.4l2.8-2.8M16.6 7.4l2.8-2.8"/>427        </svg>428      </div>429      <div class="kb-tool">430        <!-- Translate (G) -->431        <svg viewBox="0 0 24 24">432          <path d="M4 5h10v10H4z"/>433          <path d="M15 9h5v10h-10v-2" />434          <path d="M7 9h4M9 7v6" />435        </svg>436      </div>437      <div class="kb-tool">438        <!-- Palette -->439        <svg viewBox="0 0 24 24">440          <path d="M12 3a9 9 0 1 0 0 18c3 0 3-3 1.5-3h-1.5"/>441          <circle cx="7" cy="10" r="1.2"/><circle cx="10" cy="7" r="1.2"/><circle cx="14" cy="7" r="1.2"/><circle cx="17" cy="10" r="1.2"/>442        </svg>443      </div>444      <div class="kb-tool">445        <!-- Mic -->446        <svg viewBox="0 0 24 24">447          <rect x="9" y="5" width="6" height="10" rx="3"/>448          <path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>449        </svg>450      </div>451    </div>452 453    <div class="kb-row">454      <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>455    </div>456 457    <div class="kb-row row-2">458      <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><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>459    </div>460 461    <div class="kb-row row-3">462      <div class="key muted">⇧</div><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>463    </div>464 465    <div class="kb-bottom">466      <div class="key-round muted">?123</div>467      <div class="key-round">,</div>468      <div class="key-round">😊</div>469      <div class="space"></div>470      <div class="key-round">.</div>471      <div class="mic">↵</div>472    </div>473  </div>474 475  <!-- Navigation handle -->476  <div class="nav-handle"></div>477</div>478</body>479</html>