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 Email - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EAEAEA;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 90px; padding: 0 32px;19    display: flex; align-items: center; justify-content: space-between;20    color: #EAEAEA; font-size: 36px;21  }22  .status-right { display: flex; gap: 22px; align-items: center; }23  .status-icon { width: 36px; height: 36px; opacity: 0.85; }24 25  /* App bar */26  .app-bar {27    position: absolute; top: 90px; left: 0; right: 0;28    height: 140px; padding: 0 24px;29    display: flex; align-items: center; gap: 20px;30    border-bottom: 1px solid #262626;31  }32  .app-title { flex: 1; font-size: 34px; color: #BDBDBD; }33  .app-actions { display: flex; gap: 36px; align-items: center; }34  .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }35 36  /* Form rows */37  .row {38    position: absolute; left: 0; right: 0;39    padding: 0 24px; display: flex; align-items: center;40    height: 150px; gap: 24px; border-bottom: 1px solid #262626;41  }42  .row-label { width: 120px; color: #BDBDBD; font-size: 34px; }43  .row-value { flex: 1; font-size: 36px; color: #EAEAEA; }44  .dropdown { width: 36px; height: 36px; opacity: 0.85; }45 46  /* Suggestion contact */47  .contact-suggestion {48    position: absolute; left: 0; right: 0;49    height: 180px; padding: 24px; display: flex; align-items: center; gap: 24px;50    border-bottom: 1px solid #262626;51  }52  .avatar {53    width: 96px; height: 96px; border-radius: 50%;54    background: #3A3F44; color: #EAEAEA;55    display: flex; align-items: center; justify-content: center;56    font-weight: bold; font-size: 44px;57  }58  .contact-lines { display: flex; flex-direction: column; }59  .contact-name { font-size: 38px; }60  .contact-email { font-size: 30px; color: #BDBDBD; }61 62  /* Body area (blank compose space) */63  .compose-body {64    position: absolute; left: 0; right: 0;65    top: 720px; bottom: 960px; /* leaves space for keyboard */66    padding: 24px; color: #BDBDBD; font-size: 34px;67  }68 69  /* Keyboard */70  .keyboard {71    position: absolute; left: 0; right: 0; bottom: 70px;72    height: 960px; background: #1A1A1A; border-top: 1px solid #2A2A2A;73    display: flex; flex-direction: column; padding: 18px 14px;74  }75  .kb-top {76    height: 100px; display: flex; align-items: center; gap: 28px; padding: 0 6px;77  }78  .kb-top .tool {79    width: 72px; height: 72px; border-radius: 18px; background: #262626;80    display: flex; align-items: center; justify-content: center;81  }82  .keys-row { display: flex; justify-content: space-between; margin: 10px 6px; }83  .key {84    height: 120px; width: 88px; border-radius: 22px;85    background: #2B2B2B; color: #EAEAEA; font-size: 40px;86    display: flex; align-items: center; justify-content: center;87  }88  .key.wide { width: 160px; }89  .space { flex: 1; margin: 0 8px; height: 120px; border-radius: 22px; background: #2B2B2B; }90  .enter { width: 140px; }91 92  /* Gesture pill */93  .gesture-pill {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: 18px; width: 260px; height: 10px; border-radius: 10px; background: #EAEAEA; opacity: 0.9;96  }97 98  /* Small helpers */99  .muted { color: #BDBDBD; }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status Bar -->106  <div class="status-bar">107    <div>9:27</div>108    <div class="status-right">109      <!-- Simple status icons -->110      <svg class="status-icon" viewBox="0 0 24 24">111        <circle cx="12" cy="12" r="10" fill="#EAEAEA" opacity="0.3"></circle>112        <circle cx="12" cy="12" r="6" fill="#EAEAEA"></circle>113      </svg>114      <svg class="status-icon" viewBox="0 0 24 24">115        <rect x="3" y="5" width="18" height="14" rx="3" fill="#EAEAEA" opacity="0.3"></rect>116        <rect x="5" y="7" width="14" height="10" rx="2" fill="#EAEAEA"></rect>117      </svg>118      <div style="display:flex; align-items:center; gap:8px; font-size:32px;">119        <svg class="status-icon" viewBox="0 0 24 24">120          <rect x="2" y="6" width="18" height="12" rx="2" fill="#EAEAEA"></rect>121          <rect x="20" y="10" width="2" height="4" fill="#EAEAEA"></rect>122        </svg>123        <span>100%</span>124      </div>125    </div>126  </div>127 128  <!-- App Bar -->129  <div class="app-bar">130    <!-- Back arrow -->131    <div class="icon-btn">132      <svg width="56" height="56" viewBox="0 0 24 24">133        <path d="M15 18l-6-6 6-6" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134      </svg>135    </div>136    <div class="app-title muted">Compose</div>137    <div class="app-actions">138      <!-- Attach (paperclip) -->139      <div class="icon-btn">140        <svg width="56" height="56" viewBox="0 0 24 24">141          <path d="M7 12l6-6a3 3 0 014 4l-8 8a5 5 0 01-7-7l9-9" fill="none" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>142        </svg>143      </div>144      <!-- Send -->145      <div class="icon-btn">146        <svg width="56" height="56" viewBox="0 0 24 24">147          <path d="M3 12l18-9-6 9 6 9-18-9z" fill="#EAEAEA"/>148        </svg>149      </div>150      <!-- Overflow menu -->151      <div class="icon-btn">152        <svg width="56" height="56" viewBox="0 0 24 24">153          <circle cx="12" cy="5" r="2" fill="#EAEAEA"/><circle cx="12" cy="12" r="2" fill="#EAEAEA"/><circle cx="12" cy="19" r="2" fill="#EAEAEA"/>154        </svg>155      </div>156    </div>157  </div>158 159  <!-- From row -->160  <div class="row" style="top: 230px;">161    <div class="row-label">From</div>162    <div class="row-value">fabioteixeira00123@gmail.com</div>163    <svg class="dropdown" viewBox="0 0 24 24">164      <path d="M6 9l6 6 6-6" fill="#EAEAEA"/>165    </svg>166  </div>167 168  <!-- To row -->169  <div class="row" style="top: 380px;">170    <div class="row-label">To</div>171    <div class="row-value">Carlos3345@gmail.com</div>172    <svg class="dropdown" viewBox="0 0 24 24">173      <path d="M6 9l6 6 6-6" fill="#EAEAEA"/>174    </svg>175  </div>176 177  <!-- Contact suggestion -->178  <div class="contact-suggestion" style="top: 530px;">179    <div class="avatar">C</div>180    <div class="contact-lines">181      <div class="contact-name">Carlos3345@gmail.com</div>182      <div class="contact-email">Carlos3345@gmail.com</div>183    </div>184  </div>185 186  <!-- Compose body area -->187  <div class="compose-body">188    <!-- Empty area as in screenshot -->189  </div>190 191  <!-- Keyboard -->192  <div class="keyboard">193    <div class="kb-top">194      <div class="tool">195        <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" fill="#BDBDBD"/></svg>196      </div>197      <div class="tool">198        <svg width="40" height="40" viewBox="0 0 24 24"><text x="6" y="16" font-size="12" fill="#BDBDBD">GIF</text></svg>199      </div>200      <div class="tool">201        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#BDBDBD"/></svg>202      </div>203      <div class="tool">204        <svg width="40" height="40" viewBox="0 0 24 24">205          <rect x="5" y="5" width="14" height="6" fill="#BDBDBD"/><rect x="5" y="13" width="10" height="6" fill="#BDBDBD"/>206        </svg>207      </div>208      <div class="tool">209        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 20l16-8L4 4v6l10 2-10 2z" fill="#BDBDBD"/></svg>210      </div>211      <div class="tool">212        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="10" r="4" fill="#BDBDBD"/><path d="M6 20a6 6 0 0112 0" stroke="#BDBDBD" stroke-width="2" fill="none"/></svg>213      </div>214    </div>215 216    <!-- Row 1 -->217    <div class="keys-row">218      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>219      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>220      <div class="key">o</div><div class="key">p</div>221    </div>222    <!-- Row 2 -->223    <div class="keys-row" style="padding: 0 44px;">224      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>225      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>226      <div class="key">l</div>227    </div>228    <!-- Row 3 -->229    <div class="keys-row" style="padding: 0 100px;">230      <div class="key">231        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 18l4-4-4-4" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round"/></svg>232      </div>233      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>234      <div class="key">b</div><div class="key">n</div><div class="key">m</div>235      <div class="key">236        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 7h16M8 11h12M12 15h8" stroke="#EAEAEA" stroke-width="2" fill="none"/></svg>237      </div>238    </div>239    <!-- Bottom controls -->240    <div class="keys-row">241      <div class="key wide muted">?123</div>242      <div class="key">@</div>243      <div class="key">😊</div>244      <div class="space"></div>245      <div class="key">.</div>246      <div class="key enter">247        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M5 12h9v-4l5 6-5 6v-4H5z" fill="#EAEAEA"/></svg>248      </div>249    </div>250  </div>251 252  <!-- Gesture pill -->253  <div class="gesture-pill"></div>254</div>255</body>256</html>