GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose Email - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EDEDED;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;17  }18 19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-left { display: flex; align-items: center; gap: 14px; }30  .status-right { display: flex; align-items: center; gap: 22px; opacity: 0.9; }31 32  .toolbar {33    height: 110px;34    padding: 0 22px 0 18px;35    display: flex;36    align-items: center;37    justify-content: space-between;38  }39  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 28px; }40  .icon-btn svg { width: 50px; height: 50px; fill: #EDEDED; opacity: 0.85; }41  .icon-btn.more svg { width: 10px; height: 10px; }42  .divider { height: 2px; background: #2A2A2A; margin: 0 0; }43 44  .row {45    padding: 26px 36px;46    display: flex;47    align-items: center;48    font-size: 36px;49  }50  .row.from { gap: 22px; }51  .label { color: #B0B0B0; width: 130px; }52  .value { color: #EDEDED; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }53  .row.to { justify-content: space-between; }54  .row.to .value { color: #8F8F8F; }55  .chev svg { width: 36px; height: 36px; fill: #B0B0B0; }56 57  .subject {58    padding: 28px 36px 30px 36px;59    font-size: 44px;60    color: #EDEDED;61  }62 63  .body-area {64    padding: 34px 36px 16px 36px;65    font-size: 38px;66    line-height: 1.5;67    color: #EDEDED;68  }69  .link { color: #9EC9FF; }70 71  /* Keyboard mock */72  .keyboard {73    position: absolute;74    left: 0; right: 0; bottom: 0;75    height: 860px;76    background: #1A1B1F;77    box-shadow: 0 -2px 0 #2a2b30 inset;78  }79  .kb-toolbar {80    height: 96px;81    display: flex;82    align-items: center;83    gap: 28px;84    padding: 0 26px;85    border-bottom: 1px solid #2B2C31;86  }87  .kb-tool {88    width: 68px; height: 68px; border-radius: 16px;89    background: #2A2B30; display: flex; align-items: center; justify-content: center;90    color: #CFCFCF; font-size: 26px;91  }92 93  .keys { padding: 22px 18px 16px 18px; }94  .row-keys { display: flex; justify-content: center; gap: 14px; margin-bottom: 18px; }95  .key {96    background: #2B2C31; color: #EDEDED; border-radius: 16px;97    height: 110px; min-width: 86px;98    display: flex; align-items: center; justify-content: center;99    font-size: 40px;100  }101  .key.wide { min-width: 120px; }102  .key.back { min-width: 150px; }103  .key.space { flex: 1; min-width: 420px; }104  .key.primary {105    background: #98A8FF; color: #101010;106  }107 108  /* Home indicator */109  .home-indicator {110    position: absolute;111    bottom: 18px;112    left: 50%;113    transform: translateX(-50%);114    width: 360px;115    height: 10px;116    border-radius: 6px;117    background: #EDEDED;118    opacity: 0.95;119  }120</style>121</head>122<body>123<div id="render-target">124  <!-- Status bar -->125  <div class="status-bar">126    <div class="status-left">127      <span>9:08</span>128      <!-- tiny cloud icon -->129      <svg viewBox="0 0 24 24" width="36" height="36" style="fill:#EDEDED;opacity:.9;">130        <path d="M6 18h11a4 4 0 0 0 0-8h-.3A6 6 0 0 0 5 11c-2.2 0-4 1.8-4 4s1.8 3 5 3z"/>131      </svg>132    </div>133    <div class="status-right">134      <!-- WiFi -->135      <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>136      <!-- Battery -->137      <svg viewBox="0 0 24 24"><path d="M16 6h1a1 1 0 0 1 1 1v1h1v8h-1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h9zM8 8v8h8V8H8z"/></svg>138    </div>139  </div>140 141  <!-- Toolbar -->142  <div class="toolbar">143    <div class="toolbar-left">144      <div class="icon-btn">145        <!-- Back arrow -->146        <svg viewBox="0 0 24 24"><path d="M14 6l-6 6 6 6 2-2-4-4 4-4-2-2z"/></svg>147      </div>148    </div>149    <div class="toolbar-right">150      <div class="icon-btn" title="Attach">151        <svg viewBox="0 0 24 24"><path d="M7 13.5l5.5-5.5a3 3 0 1 1 4.2 4.2L9.8 18.1a5 5 0 0 1-7.1-7.1L12 1.7l1.4 1.4L4 12.5a3 3 0 0 0 4.2 4.2L16.7 8.2a1 1 0 1 0-1.4-1.4L8.5 13.6l-1.5-1.5z"/></svg>152      </div>153      <div class="icon-btn" title="Send">154        <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>155      </div>156      <div class="icon-btn more" title="More">157        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>158      </div>159    </div>160  </div>161 162  <!-- From -->163  <div class="row from">164    <div class="label">From</div>165    <div class="value">dbwscratch.test.id8@gmail.com</div>166  </div>167  <div class="divider"></div>168 169  <!-- To -->170  <div class="row to">171    <div class="value">To</div>172    <div class="chev">173      <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5H7z"/></svg>174    </div>175  </div>176  <div class="divider"></div>177 178  <!-- Subject -->179  <div class="subject">Check out this book – "The Art of War"</div>180  <div class="divider"></div>181 182  <!-- Message body -->183  <div class="body-area">184    <p>Hi - I think you should check out this book, "The Art of War" by Sun Tzu.</p>185    <p>Start reading it for free:<br>186      <span class="link">https://amzn.in/eGzfnSO</span>187    </p>188    <p>--------------</p>189    <p>Read on the go for free – download Kindle for Android, iOS, PC, Mac and more<br>190      <span class="link">http://amzn.to/1VDAcDO</span>191    </p>192  </div>193 194  <!-- Keyboard -->195  <div class="keyboard">196    <div class="kb-toolbar">197      <div class="kb-tool">▦</div>198      <div class="kb-tool">😊</div>199      <div class="kb-tool">GIF</div>200      <div class="kb-tool">⚙</div>201      <div class="kb-tool">Gx</div>202      <div class="kb-tool">🎨</div>203      <div class="kb-tool">🔇</div>204    </div>205 206    <div class="keys">207      <div class="row-keys">208        <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>209        <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>210      </div>211      <div class="row-keys" style="padding: 0 40px;">212        <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>213        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>214      </div>215      <div class="row-keys">216        <div class="key wide">⇧</div>217        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>218        <div class="key">b</div><div class="key">n</div><div class="key">m</div>219        <div class="key back">⌫</div>220      </div>221      <div class="row-keys">222        <div class="key wide">?123</div>223        <div class="key wide">@</div>224        <div class="key wide">☺</div>225        <div class="key space">space</div>226        <div class="key wide">.</div>227        <div class="key primary wide">↩</div>228      </div>229    </div>230    <div class="home-indicator"></div>231  </div>232</div>233</body>234</html>