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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #EDEDED;29    font-size: 42px;30    letter-spacing: 0.5px;31  }32  .sb-icons {33    display: flex; align-items: center; gap: 26px;34  }35  .icon {36    width: 48px; height: 48px; display: inline-block;37  }38  .battery { width: 72px; height: 36px; }39  .battery svg { width: 72px; height: 36px; }40  .signal svg { width: 50px; height: 40px; }41 42  /* Top app bar */43  .app-bar {44    position: absolute;45    top: 120px; left: 0;46    width: 100%; height: 120px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    padding: 0 24px 0 12px;51    color: #fff;52  }53  .app-left { display: flex; align-items: center; gap: 12px; }54  .app-right { display: flex; align-items: center; gap: 28px; }55  .app-bar .icon svg { width: 56px; height: 56px; }56  .divider {57    position: absolute; left: 0; width: 100%; height: 1px;58    background: #2A2A2A;59  }60 61  /* Fields */62  .field {63    position: absolute; left: 32px; right: 32px;64    display: flex; align-items: center;65    font-size: 40px;66    color: #EDEDED;67  }68  .label {69    color: #9AA0A6; margin-right: 18px;70    font-size: 36px;71  }72  .arrow-down svg { width: 40px; height: 40px; }73  .suggestion {74    position: absolute; left: 32px; right: 32px;75    display: flex; align-items: center;76    gap: 26px;77    height: 170px;78  }79  .avatar {80    width: 88px; height: 88px; border-radius: 50%;81    background: #7E57C2; display: flex; align-items: center; justify-content: center;82    font-weight: bold; font-size: 44px;83  }84  .s-texts { display: flex; flex-direction: column; }85  .primary { font-size: 42px; color: #fff; }86  .secondary { font-size: 34px; color: #9AA0A6; margin-top: 8px; }87 88  /* Keyboard */89  .keyboard {90    position: absolute; left: 0; right: 0; bottom: 96px;91    height: 900px; background: #1A1A1A; border-top: 1px solid #2A2A2A;92    padding: 24px 24px 36px 24px;93    box-sizing: border-box;94  }95  .kb-topicons { display: flex; align-items: center; gap: 36px; margin-bottom: 18px; }96  .kb-small-icon {97    width: 66px; height: 66px; border-radius: 18px; background: #262626;98    display: flex; align-items: center; justify-content: center; color: #BDBDBD; font-size: 28px;99  }100  .keys-row { display: flex; justify-content: space-between; margin: 18px 6px; }101  .key {102    width: 94px; height: 120px; border-radius: 22px;103    background: #2A2A2A; color: #EDEDED; font-size: 40px;104    display: flex; align-items: center; justify-content: center;105  }106  .key-wide { width: 640px; }107  .key-mid { width: 140px; }108  .key-gray { background: #242424; color: #CFCFCF; }109  .key-blue {110    width: 120px; height: 120px; border-radius: 40px;111    background: #BBD0FF; color: #0C1A33; font-weight: bold;112  }113 114  /* Home indicator bar */115  .home-indicator {116    position: absolute; bottom: 24px; left: 50%;117    width: 240px; height: 12px; background: #EAEAEA; border-radius: 6px;118    transform: translateX(-50%);119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar -->126  <div class="status-bar">127    <div>3:45</div>128    <div class="sb-icons">129      <div class="signal icon">130        <svg viewBox="0 0 50 40" fill="#EDEDED">131          <rect x="4" y="22" width="6" height="14" rx="1"></rect>132          <rect x="14" y="18" width="6" height="18" rx="1"></rect>133          <rect x="24" y="12" width="6" height="24" rx="1"></rect>134          <rect x="34" y="6" width="6" height="30" rx="1"></rect>135        </svg>136      </div>137      <div class="battery">138        <svg viewBox="0 0 72 36">139          <rect x="2" y="6" width="60" height="24" rx="5" stroke="#EDEDED" fill="none" stroke-width="3"></rect>140          <rect x="64" y="12" width="6" height="12" rx="2" fill="#EDEDED"></rect>141          <rect x="6" y="10" width="42" height="16" rx="3" fill="#EDEDED"></rect>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Top app bar with actions -->148  <div class="app-bar">149    <div class="app-left">150      <div class="icon">151        <svg viewBox="0 0 56 56" stroke="#EDEDED" fill="none" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">152          <path d="M36 12 L18 28 L36 44"></path>153        </svg>154      </div>155    </div>156    <div class="app-right">157      <div class="icon">158        <svg viewBox="0 0 56 56" stroke="#EDEDED" fill="none" stroke-width="4" stroke-linecap="round">159          <path d="M20 16 c8 -2 16 4 16 12 0 8 -6 14 -14 14 -7 0 -12 -6 -12 -12" />160          <path d="M18 20 v14" />161        </svg>162      </div>163      <div class="icon">164        <svg viewBox="0 0 56 56" fill="#EDEDED">165          <path d="M8 28 L48 12 L36 28 L48 44 Z"></path>166        </svg>167      </div>168      <div class="icon">169        <svg viewBox="0 0 56 56" fill="#EDEDED">170          <circle cx="28" cy="14" r="5"></circle>171          <circle cx="28" cy="28" r="5"></circle>172          <circle cx="28" cy="42" r="5"></circle>173        </svg>174      </div>175    </div>176  </div>177  <div class="divider" style="top: 240px;"></div>178 179  <!-- From row -->180  <div class="field" style="top: 260px; height: 120px;">181    <span class="label">From</span>182    <span>levivanloon93@gmail.com</span>183  </div>184  <div class="divider" style="top: 380px;"></div>185 186  <!-- To row -->187  <div class="field" style="top: 400px; height: 120px; justify-content: space-between;">188    <div style="display:flex; align-items:center;">189      <span class="label">To</span>190      <span>violetvanloon67@gmail.com</span>191    </div>192    <div class="arrow-down icon">193      <svg viewBox="0 0 40 40" stroke="#9AA0A6" fill="none" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">194        <path d="M10 14 L20 24 L30 14"></path>195      </svg>196    </div>197  </div>198 199  <!-- Contact suggestion -->200  <div class="suggestion" style="top: 560px;">201    <div class="avatar">v</div>202    <div class="s-texts">203      <div class="primary">violetvanloon67@gmail.com</div>204      <div class="secondary">violetvanloon67@gmail.com</div>205    </div>206  </div>207 208  <!-- Large empty composing area -->209  <div class="divider" style="top: 730px;"></div>210 211  <!-- Keyboard -->212  <div class="keyboard">213    <!-- top icons row -->214    <div class="kb-topicons">215      <div class="kb-small-icon">▦</div>216      <div class="kb-small-icon">☺</div>217      <div class="kb-small-icon">GIF</div>218      <div class="kb-small-icon">⚙</div>219      <div class="kb-small-icon">Gᵀ</div>220      <div class="kb-small-icon">🎨</div>221      <div class="kb-small-icon">🎙</div>222    </div>223 224    <!-- keys -->225    <div class="keys-row">226      <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>227      <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>228    </div>229    <div class="keys-row">230      <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>231      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>232      <div class="key key-gray">@</div>233    </div>234    <div class="keys-row">235      <div class="key key-gray">⇧</div>236      <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>237      <div class="key">n</div><div class="key">m</div>238      <div class="key key-gray">239        <svg viewBox="0 0 56 56" fill="#CFCFCF" width="36" height="36">240          <path d="M18 18 L40 18 L40 22 L26 22 L40 36 L36 40 L22 26 L22 40 L18 40 Z"></path>241        </svg>242      </div>243      <div class="key key-gray">.</div>244    </div>245    <div class="keys-row" style="align-items:center;">246      <div class="key key-mid key-gray">?123</div>247      <div class="key key-mid key-gray">@</div>248      <div class="key key-mid key-gray">☺</div>249      <div class="key key-wide">space</div>250      <div class="key key-mid key-gray">.</div>251      <div class="key key-blue">252        <svg viewBox="0 0 56 56" fill="#0C1A33" width="36" height="36">253          <path d="M10 28 L42 12 L34 28 L42 44 Z"></path>254        </svg>255      </div>256    </div>257  </div>258 259  <!-- Home indicator -->260  <div class="home-indicator"></div>261</div>262</body>263</html>