GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Email Compose - Dark UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #121212; color: #EDEDED;11  }12 13  .status-bar {14    height: 100px; padding: 0 36px;15    background: #0E0E0E; color: #DADADA;16    display: flex; align-items: center; justify-content: space-between;17    font-size: 34px; letter-spacing: 0.5px;18  }19  .status-icons { display: flex; align-items: center; gap: 22px; }20  .icon-battery, .icon-signal, .icon-wifi {21    width: 44px; height: 28px; border: 2px solid #CFCFCF; border-radius: 4px; position: relative;22  }23  .icon-battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #CFCFCF; border-radius: 2px; }24  .icon-wifi { border: none; width: 44px; height: 28px; }25  .icon-wifi::before { content: ""; display: block; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 18px solid #CFCFCF; margin: 5px auto 0; }26  .icon-signal { border: none; width: 44px; height: 28px; }27  .icon-signal::before { content: ""; display: block; width: 32px; height: 22px; border-bottom: 4px solid #CFCFCF; border-left: 4px solid #CFCFCF; transform: skewX(-30deg); margin: 2px 6px; }28 29  .app-bar {30    height: 150px; padding: 0 24px;31    display: flex; align-items: center; justify-content: space-between;32    background: #1A1A1A; border-bottom: 1px solid #2A2A2A;33  }34  .app-left { display: flex; align-items: center; gap: 20px; }35  .app-actions { display: flex; align-items: center; gap: 36px; }36  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }37  .icon-btn svg { width: 46px; height: 46px; fill: none; stroke: #DADADA; stroke-width: 3; }38  .icon-btn .filled { fill: #DADADA; stroke: none; }39 40  .fields { padding: 24px 32px; }41  .row { display: flex; align-items: center; gap: 22px; padding: 24px 0; border-bottom: 1px solid #2A2A2A; }42  .label { width: 120px; color: #BDBDBD; font-size: 34px; }43  .value { flex: 1; font-size: 34px; color: #EDEDED; }44  .email { color: #EDEDED; }45  .chip {46    display: inline-flex; align-items: center; gap: 18px;47    background: #252525; border: 1px solid #3A3A3A; border-radius: 38px;48    padding: 16px 22px; color: #EDEDED; font-size: 32px;49  }50  .avatar {51    width: 62px; height: 62px; border-radius: 50%;52    background: #8D6E63; color: #FFFFFF; display: flex; align-items: center; justify-content: center;53    font-weight: bold; text-transform: lowercase; font-size: 32px;54  }55  .down-arrow { width: 28px; height: 28px; margin-left: 14px; border: solid #BDBDBD; border-width: 0 3px 3px 0; transform: rotate(45deg); }56 57  .subject { font-size: 40px; padding: 30px 0; }58 59  .body-area {60    height: 600px; padding: 40px 32px;61    color: #EDEDED; font-size: 36px; line-height: 52px;62  }63  .caret {64    width: 3px; height: 40px; background: #8AB4F8; animation: blink 1.2s infinite;65  }66  @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }67 68  /* Keyboard */69  .keyboard {70    position: absolute; bottom: 0; left: 0; width: 100%;71    height: 1050px; background: #1A1A1D; border-top-left-radius: 22px; border-top-right-radius: 22px;72    box-shadow: 0 -14px 30px rgba(0,0,0,0.4);73  }74  .kb-toolbar {75    height: 120px; padding: 0 36px; display: flex; align-items: center; gap: 46px; color: #CFCFCF;76  }77  .tool { width: 76px; height: 76px; border-radius: 18px; background: #2A2A2E; display: flex; align-items: center; justify-content: center; }78  .tool svg { width: 40px; height: 40px; fill: #CFCFCF; }79 80  .keys { padding: 0 22px; display: grid; gap: 18px; }81  .row-keys { display: flex; gap: 14px; justify-content: space-between; }82  .key {83    flex: 1; min-width: 80px; height: 140px;84    background: #2B2B30; border: 1px solid #3A3A3F; border-radius: 18px;85    color: #EDEDED; font-size: 40px; display: flex; align-items: center; justify-content: center;86  }87  .key.wide { flex: 2.4; }88  .key.space { flex: 5.4; }89  .key.small { font-size: 34px; color: #CFCFCF; }90 91  .kb-bottom { padding: 18px 22px; display: flex; gap: 14px; }92  .kb-bottom .key { height: 140px; }93</style>94</head>95<body>96<div id="render-target">97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="time">9:31</div>100    <div class="status-icons">101      <div class="icon-signal"></div>102      <div class="icon-wifi"></div>103      <div class="icon-battery"></div>104    </div>105  </div>106 107  <!-- App Bar -->108  <div class="app-bar">109    <div class="app-left">110      <div class="icon-btn">111        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>112      </div>113    </div>114    <div class="app-actions">115      <div class="icon-btn">116        <svg viewBox="0 0 24 24"><path d="M4 12l8 8m0-16l8 8"/></svg>117      </div>118      <div class="icon-btn">119        <svg viewBox="0 0 24 24" class="filled"><path d="M3 20l18-8L3 4v6l12 2-12 2z"/></svg>120      </div>121      <div class="icon-btn">122        <svg viewBox="0 0 24 24" class="filled"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>123      </div>124    </div>125  </div>126 127  <!-- Fields -->128  <div class="fields">129    <div class="row">130      <div class="label">From</div>131      <div class="value email">victorjonesdbwresearchpersona@gmail.com</div>132    </div>133 134    <div class="row">135      <div class="label">To</div>136      <div class="value">137        <span class="chip">138          <span class="avatar">m</span>139          maria.rossi1993@gmail.com140        </span>141      </div>142      <div class="down-arrow"></div>143    </div>144 145    <div class="row subject">146      <div class="label"></div>147      <div class="value">Thank you for the Support</div>148    </div>149  </div>150 151  <!-- Body Area -->152  <div class="body-area">153    <div class="caret"></div>154  </div>155 156  <!-- Keyboard -->157  <div class="keyboard">158    <div class="kb-toolbar">159      <div class="tool"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3"/></svg></div>160      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg></div>161      <div class="tool"><svg viewBox="0 0 24 24"><rect x="5" y="8" width="14" height="8" rx="2"/><rect x="9" y="6" width="6" height="2"/></svg></div>162      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v12M6 12h12" stroke="#1A1A1D" stroke-width="2"/></svg></div>163      <div class="tool"><svg viewBox="0 0 24 24"><path d="M4 20l8-16 8 16H4z"/></svg></div>164      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg></div>165      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 10a3 3 0 006 0v2a3 3 0 01-6 0z" fill="#1A1A1D"/></svg></div>166    </div>167 168    <div class="keys">169      <div class="row-keys">170        <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>171        <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>172      </div>173      <div class="row-keys">174        <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>175        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>176      </div>177      <div class="row-keys">178        <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>179        <div class="key">N</div><div class="key">M</div>180        <div class="key small">⌫</div>181      </div>182    </div>183 184    <div class="kb-bottom">185      <div class="key wide small">?123</div>186      <div class="key small">,</div>187      <div class="key small">🙂</div>188      <div class="key space"></div>189      <div class="key small">.</div>190      <div class="key small">↵</div>191    </div>192  </div>193</div>194</body>195</html>