GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Compose Email - Dark UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121010;13    color: #EDEDED;14    font-family: "Segoe UI", Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #fff;29    font-weight: 600;30  }31  .sb-left, .sb-right {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .sb-icon {37    width: 28px; height: 28px;38    border-radius: 6px;39    background: #2A2624;40    border: 1px solid #3a3532;41  }42  .battery {43    width: 44px; height: 22px;44    border: 2px solid #ddd;45    border-radius: 4px;46    position: relative;47  }48  .battery::after {49    content: "";50    position: absolute;51    right: -6px; top: 6px;52    width: 6px; height: 10px; background: #ddd; border-radius: 2px;53  }54  .battery .level {55    position: absolute; left: 2px; top: 2px;56    width: 30px; height: 16px; background: #58d36a; border-radius: 2px;57  }58 59  /* Toolbar */60  .toolbar {61    position: absolute;62    top: 100px; left: 0;63    width: 1080px; height: 130px;64    display: flex;65    align-items: center;66    justify-content: space-between;67    padding: 0 28px;68    border-bottom: 1px solid #23201E;69    background: #161312;70  }71  .toolbar-left { display: flex; align-items: center; gap: 26px; }72  .toolbar-right { display: flex; align-items: center; gap: 34px; }73 74  .icon-btn {75    width: 58px; height: 58px;76    display: flex; align-items: center; justify-content: center;77    border-radius: 12px;78    color: #F4F4F4;79  }80  .icon-btn svg { width: 40px; height: 40px; fill: none; stroke: #F4F4F4; stroke-width: 2.5; }81 82  /* Rows */83  .row {84    position: absolute;85    left: 0; width: 1080px; height: 120px;86    display: flex; align-items: center;87    padding: 0 36px;88    border-bottom: 1px solid #262220;89    background: #121010;90    color: #DCDCDC;91    font-size: 42px;92  }93  .label { width: 120px; color: #B8B3AF; }94  .value { flex: 1; }95  .chev {96    width: 38px; height: 38px;97    display: flex; align-items: center; justify-content: center;98  }99  .chev svg { width: 30px; height: 30px; stroke: #B8B3AF; stroke-width: 2.5; fill: none; }100 101  /* Body text area */102  .body-area {103    position: absolute;104    top: 580px; left: 0;105    width: 1080px; height: 940px;106    padding: 36px;107    line-height: 1.6;108    font-size: 48px;109    color: #FFFFFF;110  }111  .link {112    color: #9fd0ff;113    text-decoration: underline;114    word-break: break-all;115  }116 117  /* Keyboard mock */118  .keyboard {119    position: absolute;120    bottom: 0; left: 0;121    width: 1080px; height: 880px;122    background: #1A1A1A;123    border-top: 1px solid #2A2A2A;124    box-shadow: 0 -8px 24px rgba(0,0,0,0.5) inset;125  }126  .kb-toolbar {127    height: 110px;128    display: flex; align-items: center; gap: 40px;129    padding: 0 30px;130  }131  .kb-tool {132    width: 72px; height: 72px; border-radius: 16px;133    background: #242424; border: 1px solid #343434;134    display: flex; align-items: center; justify-content: center;135    color: #D8D8D8; font-size: 28px;136  }137  .kb-rows { padding: 8px 22px; }138  .kb-row {139    height: 140px;140    display: flex; align-items: center; justify-content: center;141    gap: 16px;142  }143  .key {144    width: 92px; height: 110px;145    background: #2A2A2A;146    border: 1px solid #3A3A3A;147    border-radius: 22px;148    display: flex; align-items: center; justify-content: center;149    color: #EDEDED; font-size: 44px; font-weight: 500;150    box-shadow: 0 2px 0 rgba(0,0,0,0.4);151  }152  .key.wide { width: 160px; }153  .spacebar {154    width: 520px; height: 110px;155    background: #2A2A2A;156    border: 1px solid #3A3A3A;157    border-radius: 26px;158  }159  .key.icon { font-size: 40px; color: #D0C4BE; }160  .small-dot { font-size: 48px; }161 162  /* Subtle placeholders */163  .placeholder {164    color: #9F948C;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div class="sb-left">174      <div style="font-size:44px;">9:04</div>175      <div class="sb-icon"></div>176      <div class="sb-icon"></div>177      <div class="sb-icon"></div>178      <div class="sb-icon"></div>179      <div class="sb-icon"></div>180    </div>181    <div class="sb-right">182      <svg width="34" height="34" viewBox="0 0 24 24" style="fill:#fff">183        <circle cx="12" cy="12" r="10" fill="#fff"></circle>184      </svg>185      <div class="battery"><div class="level"></div></div>186    </div>187  </div>188 189  <!-- Top toolbar -->190  <div class="toolbar">191    <div class="toolbar-left">192      <div class="icon-btn">193        <svg viewBox="0 0 24 24">194          <path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"></path>195        </svg>196      </div>197    </div>198    <div class="toolbar-right">199      <div class="icon-btn">200        <svg viewBox="0 0 24 24">201          <path d="M4 8v8c4-3 8-5 12-8-4-3-8-5-12-8" stroke-linecap="round" stroke-linejoin="round"></path>202        </svg>203      </div>204      <div class="icon-btn">205        <svg viewBox="0 0 24 24">206          <path d="M4 20l16-8L4 4v6l10 2-10 2v6z" stroke-linecap="round" stroke-linejoin="round"></path>207        </svg>208      </div>209      <div class="icon-btn">210        <svg viewBox="0 0 24 24">211          <circle cx="12" cy="5" r="2"></circle>212          <circle cx="12" cy="12" r="2"></circle>213          <circle cx="12" cy="19" r="2"></circle>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- From row -->220  <div class="row" style="top: 230px;">221    <div class="label">From</div>222    <div class="value">naomirousseau5@gmail.com</div>223    <div class="chev">224      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path></svg>225    </div>226  </div>227 228  <!-- To row -->229  <div class="row" style="top: 350px;">230    <div class="label">To</div>231    <div class="value placeholder"> </div>232    <div class="chev">233      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path></svg>234    </div>235  </div>236 237  <!-- Subject row -->238  <div class="row" style="top: 470px;">239    <div class="label">Subject</div>240    <div class="value placeholder"></div>241  </div>242 243  <!-- Body area -->244  <div class="body-area">245    <div>My trip:</div>246    <div class="link">https://citymapper.com/eta/T891hqqx5oq</div>247  </div>248 249  <!-- Keyboard mock -->250  <div class="keyboard">251    <div class="kb-toolbar">252      <div class="kb-tool"></div>253      <div class="kb-tool">☺</div>254      <div class="kb-tool">GIF</div>255      <div class="kb-tool">⚙</div>256      <div class="kb-tool">G</div>257      <div class="kb-tool">🎨</div>258      <div class="kb-tool">🔇</div>259    </div>260 261    <div class="kb-rows">262      <div class="kb-row">263        <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><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>264      </div>265      <div class="kb-row">266        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>267      </div>268      <div class="kb-row">269        <div class="key wide">⇧</div>270        <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>271        <div class="key wide">⌫</div>272      </div>273      <div class="kb-row">274        <div class="key wide">?123</div>275        <div class="key icon">@</div>276        <div class="key icon">☺</div>277        <div class="spacebar"></div>278        <div class="key icon">.</div>279        <div class="key wide">↵</div>280      </div>281    </div>282  </div>283 284</div>285</body>286</html>