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>Compose Mail - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12  }13  .status-bar {14    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #EDEDED;15    font-size: 44px; box-sizing: border-box;16  }17  .status-left { display: flex; align-items: center; gap: 20px; }18  .status-right { display: flex; align-items: center; gap: 24px; }19  .icon { width: 48px; height: 48px; fill: #EDEDED; }20  .top-toolbar {21    height: 120px; display: flex; align-items: center; justify-content: space-between;22    padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid #1E1E1E;23  }24  .toolbar-left { display: flex; align-items: center; gap: 18px; }25  .toolbar-right { display: flex; align-items: center; gap: 28px; }26  .section {27    padding: 28px 36px; box-sizing: border-box; border-bottom: 1px solid #1E1E1E;28  }29  .field-row { display: flex; align-items: center; gap: 22px; }30  .label { color: #9AA0A6; font-size: 36px; width: 120px; }31  .value { color: #EDEDED; font-size: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }32  .dropdown { margin-left: auto; }33  .suggestion {34    display: flex; align-items: center; gap: 26px; padding: 26px 36px; box-sizing: border-box;35    border-bottom: 1px solid #1E1E1E;36  }37  .avatar {38    width: 88px; height: 88px; border-radius: 50%; background: #F06292; display: flex; align-items: center; justify-content: center;39    color: white; font-weight: 700; font-size: 48px;40  }41  .contact { display: flex; flex-direction: column; }42  .contact .name { font-size: 40px; color: #EDEDED; }43  .contact .email { font-size: 32px; color: #9AA0A6; margin-top: 6px; }44  .spacer { height: 950px; }45  /* Keyboard */46  .keyboard {47    position: absolute; left: 0; right: 0; bottom: 0; height: 920px; background: #161616; border-top: 1px solid #202020;48    box-sizing: border-box; padding: 18px 22px 30px;49  }50  .kb-toolbar { height: 100px; display: flex; align-items: center; gap: 30px; padding: 0 8px; box-sizing: border-box; }51  .kb-toolbar .tool {52    width: 72px; height: 72px; border-radius: 18px; background: #222; display: flex; align-items: center; justify-content: center;53  }54  .rows { margin-top: 10px; display: grid; grid-template-rows: repeat(4, 1fr); gap: 18px; }55  .row { display: grid; grid-auto-flow: column; gap: 16px; }56  .key {57    height: 128px; border-radius: 20px; background: #2A2A2A; color: #EDEDED; display: flex; align-items: center; justify-content: center;58    font-size: 46px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);59  }60  .key.small { width: 72px; }61  .key.wide { grid-column: span 2; }62  .key.long { grid-column: span 3; }63  .row-letters .key { min-width: 1px; }64  .bottom-row { display: grid; grid-template-columns: 180px 120px 1fr 120px 180px; gap: 16px; margin-top: 16px; }65  .space { background: #2A2A2A; border-radius: 24px; height: 128px; display: flex; align-items: center; justify-content: center; color: #CFCFCF; font-size: 38px; }66  .home-pill {67    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);68    width: 380px; height: 12px; background: #E5E5E5; border-radius: 8px; opacity: 0.8;69  }70</style>71</head>72<body>73<div id="render-target">74 75  <!-- Status bar -->76  <div class="status-bar">77    <div class="status-left">78      <div style="font-weight:600;">9:10</div>79      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">80        <path d="M6 19h11a5 5 0 0 0 0-10 7 7 0 0 0-13.7 2A4.5 4.5 0 0 0 6 19z"/>81      </svg>82    </div>83    <div class="status-right">84      <svg class="icon" viewBox="0 0 24 24"><path d="M2 22h20L12 2 2 22z"/></svg>85      <svg class="icon" viewBox="0 0 24 24"><path d="M2 8l10-6 10 6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z"/></svg>86      <svg class="icon" viewBox="0 0 24 24"><path d="M7 22h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm5-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>87    </div>88  </div>89 90  <!-- Top toolbar -->91  <div class="top-toolbar">92    <div class="toolbar-left">93      <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>94    </div>95    <div class="toolbar-right">96      <!-- Attach -->97      <svg class="icon" viewBox="0 0 24 24"><path d="M7 17a5 5 0 0 0 7 0l5-5a3 3 0 1 0-4-4l-6 6a1.5 1.5 0 1 0 2 2l5-5"/></svg>98      <!-- Send -->99      <svg class="icon" viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2z"/></svg>100      <!-- More -->101      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>102    </div>103  </div>104 105  <!-- From -->106  <div class="section">107    <div class="field-row">108      <div class="label">From</div>109      <div class="value">dbwscratch.test.id8@gmail.com</div>110    </div>111  </div>112 113  <!-- To -->114  <div class="section">115    <div class="field-row">116      <div class="label">To</div>117      <div class="value">rick.weinstein@dayrep.com</div>118      <div class="dropdown">119        <svg class="icon" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>120      </div>121    </div>122  </div>123 124  <!-- Suggested contact -->125  <div class="suggestion">126    <div class="avatar">r</div>127    <div class="contact">128      <div class="name">rick.weinstein@dayrep.com</div>129      <div class="email">rick.weinstein@dayrep.com</div>130    </div>131  </div>132 133  <div class="spacer"></div>134 135  <!-- Keyboard -->136  <div class="keyboard">137    <div class="kb-toolbar">138      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></div>139      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M12 20c4.4 0 8-3.6 8-8S16.4 4 12 4 4 7.6 4 12s3.6 8 8 8zm0-5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg></div>140      <div class="tool"><span style="font-size:34px;color:#EDEDED;">GIF</span></div>141      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 7a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"/></svg></div>142      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M10 4v4H6v8h4v4h8V4h-8z"/></svg></div>143      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M4 20h16l-8-16-8 16z"/></svg></div>144      <div class="tool"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v4H6v10h12V11h-2V7a4 4 0 0 0-4-4z"/></svg></div>145    </div>146 147    <div class="rows">148      <div class="row row-letters" style="grid-template-columns: repeat(10, 1fr);">149        <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>150        <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>151      </div>152      <div class="row row-letters" style="grid-template-columns: .6fr repeat(9, 1fr) .6fr;">153        <div></div>154        <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>155        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>156        <div></div>157      </div>158      <div class="row row-letters" style="grid-template-columns: 1.6fr repeat(7, 1fr) 1.6fr;">159        <div class="key">⇧</div>160        <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>161        <div class="key">162          <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h12l-1 12H7L6 6zm3 0V4h6v2"/></svg>163        </div>164      </div>165      <div class="bottom-row">166        <div class="key">?123</div>167        <div class="key">@</div>168        <div class="space">space</div>169        <div class="key">.</div>170        <div class="key">171          <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h10l-4-4 1.4-1.4L19.8 14l-7.4 7.4L11 20l4-4H5z"/></svg>172        </div>173      </div>174    </div>175  </div>176 177  <div class="home-pill"></div>178</div>179</body>180</html>