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>Email Compose 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:#111311; color:#EEE;13    border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,0.4);14  }15 16  /* Status bar */17  .status-bar {18    height:110px; padding:0 32px;19    display:flex; align-items:center; justify-content:space-between;20    color:#F5F5F5; font-weight:600; font-size:42px;21  }22  .status-icons { display:flex; align-items:center; gap:26px; }23  .status-icons svg { width:44px; height:44px; fill:none; stroke:#F5F5F5; stroke-width:3; }24 25  /* Top app bar */26  .app-bar {27    height:140px; padding:0 22px;28    display:flex; align-items:center; justify-content:space-between;29    border-bottom:1px solid #1f211f;30  }31  .left-actions, .right-actions { display:flex; align-items:center; gap:30px; }32  .app-bar svg { width:56px; height:56px; stroke:#EDEDED; fill:none; stroke-width:3; }33  .icon-dots { width:10px; height:10px; background:#eaeaea; border-radius:50%; box-shadow:0 18px 0 #eaeaea, 0 -18px 0 #eaeaea; }34 35  /* Compose fields */36  .compose {37    padding:12px 36px 0 36px;38  }39  .field {40    display:flex; align-items:center; justify-content:space-between;41    padding:26px 0;42    border-bottom:1px solid #1f211f;43  }44  .label { color:#BFBFBF; font-size:34px; width:130px; }45  .value { flex:1; color:#EDEDED; font-size:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }46  .chev-down { width:42px; height:42px; }47  .chev-down path { stroke:#D9D9D9; stroke-width:3; fill:none; }48 49  /* Recipient chip */50  .recipient {51    display:flex; align-items:center; gap:26px;52    padding:26px 0 24px 0;53    border-bottom:1px solid #1f211f;54  }55  .avatar {56    width:92px; height:92px; border-radius:50%;57    background:#E65F2A; color:#fff; display:flex; align-items:center; justify-content:center;58    font-weight:700; font-size:46px;59  }60  .rec-details { display:flex; flex-direction:column; }61  .rec-primary { font-size:44px; color:#FAFAFA; line-height:1.2; }62  .rec-secondary { font-size:28px; color:#A8A8A8; }63 64  /* Spacer area (message body) */65  .body-area { height:1100px; }66 67  /* Keyboard */68  .keyboard {69    position:absolute; left:0; right:0; bottom:0;70    background:#1A1A1A; border-top:1px solid #232323;71    padding:16px 18px 32px;72  }73  .kb-tools { display:flex; align-items:center; gap:34px; padding:4px 10px 20px; }74  .tool {75    width:72px; height:72px; border-radius:18px; background:#2B2B2B;76    display:flex; align-items:center; justify-content:center; color:#EDEDED; font-size:28px;77  }78 79  .row { display:flex; gap:14px; padding:8px 10px; }80  .key {81    flex:1; height:108px; border-radius:22px; background:#2D2D2D;82    display:flex; align-items:center; justify-content:center;83    color:#E7E7E7; font-size:44px; font-weight:600;84  }85  .key.small { flex:0.8; }86  .key.wide { flex:1.5; }87  .key.xwide { flex:4; font-weight:500; }88  .key.light { background:#CBD59A; color:#111; }89  .key.enter { background:#E9F289; color:#0F0F0F; }90  .key.symbol { font-size:40px; font-weight:700; }91  .home-indicator {92    position:absolute; left:50%; transform:translateX(-50%);93    bottom:10px; width:180px; height:10px; background:#EDEDED; border-radius:6px; opacity:0.85;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div>6:11</div>103    <div class="status-icons">104      <!-- location dot -->105      <svg viewBox="0 0 48 48">106        <circle cx="24" cy="20" r="6" />107        <path d="M24 6 C15 6 8 13 8 22 c0 10 16 20 16 20 s16-10 16-20C40 13 33 6 24 6 Z" />108      </svg>109      <!-- wifi -->110      <svg viewBox="0 0 48 48">111        <path d="M6 18 C18 8 30 8 42 18" />112        <path d="M12 24 C20 16 28 16 36 24" />113        <path d="M18 30 C22 26 26 26 30 30" />114        <circle cx="24" cy="36" r="2.5" />115      </svg>116      <!-- battery -->117      <svg viewBox="0 0 60 48">118        <rect x="6" y="12" width="42" height="24" rx="4" />119        <rect x="50" y="18" width="6" height="12" rx="2" />120        <rect x="10" y="16" width="32" height="16" rx="3" fill="#F5F5F5" />121      </svg>122    </div>123  </div>124 125  <!-- App bar -->126  <div class="app-bar">127    <div class="left-actions">128      <!-- back -->129      <svg viewBox="0 0 48 48">130        <path d="M30 8 L14 24 L30 40" />131      </svg>132    </div>133    <div class="right-actions">134      <!-- attach -->135      <svg viewBox="0 0 48 48">136        <path d="M16 30 c0 6 6 10 12 6 l12-12 c5-5 0-12-6-12 s-10 6-6 12 l10-10" />137      </svg>138      <!-- send -->139      <svg viewBox="0 0 48 48">140        <path d="M6 24 L42 8 L30 24 L42 40 Z" />141      </svg>142      <div class="icon-dots"></div>143    </div>144  </div>145 146  <!-- Compose fields -->147  <div class="compose">148    <div class="field">149      <div class="label">From</div>150      <div class="value">thomas.blanc1978@gmail.com</div>151      <svg class="chev-down" viewBox="0 0 48 48"><path d="M10 18 L24 30 L38 18" /></svg>152    </div>153 154    <div class="field">155      <div class="label">To</div>156      <div class="value">rick.weinstein@dayrep.com</div>157      <svg class="chev-down" viewBox="0 0 48 48"><path d="M10 18 L24 30 L38 18" /></svg>158    </div>159 160    <div class="recipient">161      <div class="avatar">r</div>162      <div class="rec-details">163        <div class="rec-primary">rick.weinstein@dayrep.com</div>164        <div class="rec-secondary">rick.weinstein@dayrep.com</div>165      </div>166    </div>167  </div>168 169  <!-- Blank message area -->170  <div class="body-area"></div>171 172  <!-- Keyboard -->173  <div class="keyboard">174    <div class="kb-tools">175      <div class="tool">▦</div>176      <div class="tool">🙂</div>177      <div class="tool">GIF</div>178      <div class="tool">⚙️</div>179      <div class="tool">Gx</div>180      <div class="tool">🎨</div>181      <div class="tool">🎙</div>182    </div>183 184    <!-- Row 1 -->185    <div class="row">186      <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>187      <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>188    </div>189    <!-- Row 2 -->190    <div class="row">191      <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>192      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>193      <div class="key wide symbol">⌫</div>194    </div>195    <!-- Row 3 -->196    <div class="row">197      <div class="key wide symbol">↑</div>198      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>199      <div class="key">b</div><div class="key">n</div><div class="key">m</div>200      <div class="key wide symbol">⌫</div>201    </div>202    <!-- Row 4 -->203    <div class="row">204      <div class="key wide light">?123</div>205      <div class="key small">@</div>206      <div class="key small">☺</div>207      <div class="key xwide">space</div>208      <div class="key small">.</div>209      <div class="key wide enter symbol">→</div>210    </div>211    <div class="home-indicator"></div>212  </div>213</div>214</body>215</html>