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>Compose - Dark Email UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #121212;20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    height: 90px;26    padding: 0 30px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    font-size: 32px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37    color: #ffffff;38  }39  .svg-icon {40    width: 40px;41    height: 40px;42    fill: none;43    stroke: #ffffff;44    stroke-width: 2.5;45  }46  .svg-icon.fill {47    fill: #ffffff;48    stroke: none;49  }50 51  /* Toolbar */52  .toolbar {53    height: 120px;54    border-bottom: 1px solid #2A2A2A;55    display: flex;56    align-items: center;57    padding: 0 28px;58  }59  .toolbar .left {60    display: flex;61    align-items: center;62    gap: 24px;63    flex: 1;64  }65  .toolbar .title {66    font-size: 56px;67    font-weight: 500;68    color: #FAFAFA;69  }70  .toolbar .right {71    display: flex;72    align-items: center;73    gap: 40px;74  }75  .icon-btn {76    width: 64px;77    height: 64px;78    display: inline-flex;79    align-items: center;80    justify-content: center;81  }82 83  /* Fields */84  .field-row {85    display: flex;86    align-items: center;87    padding: 32px 32px;88    border-bottom: 1px solid #2A2A2A;89    font-size: 34px;90    color: #DADADA;91  }92  .field-row .label {93    width: 120px;94    color: #B0B0B0;95  }96  .field-row .value {97    flex: 1;98    color: #EDEDED;99  }100  .field-row .chevron {101    width: 40px;102    height: 40px;103    margin-left: 12px;104  }105 106  /* Subject */107  .subject {108    padding: 36px 32px;109    border-bottom: 1px solid #2A2A2A;110    font-size: 52px;111    color: #EDEDED;112  }113 114  /* Body content */115  .body-content {116    padding: 40px 32px 0 32px;117    font-size: 44px;118    line-height: 62px;119    color: #EDEDED;120  }121 122  /* Inline screenshot placeholder */123  .image-placeholder {124    margin: 36px 32px 24px 32px;125    width: 1016px;126    height: 520px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    border-radius: 20px;130    display: flex;131    align-items: center;132    justify-content: center;133    color: #757575;134    font-size: 38px;135    text-align: center;136  }137 138  /* Attachment tile */139  .attachment {140    margin: 12px 24px;141    height: 180px;142    background: #4C5A45;143    border-radius: 18px;144    display: flex;145    align-items: center;146    padding: 0 26px;147    gap: 26px;148    color: #FFFFFF;149  }150  .att-thumb {151    width: 92px;152    height: 92px;153    background: #D4473E;154    border-radius: 8px;155    display: flex;156    align-items: center;157    justify-content: center;158  }159  .att-info {160    flex: 1;161    display: flex;162    flex-direction: column;163    gap: 8px;164  }165  .att-info .name {166    font-size: 40px;167    color: #FFFFFF;168  }169  .att-info .size {170    font-size: 30px;171    color: #D0D0D0;172  }173  .att-close {174    width: 56px;175    height: 56px;176    display: inline-flex;177    align-items: center;178    justify-content: center;179  }180 181  /* Bottom gesture bar */182  .gesture-bar {183    position: absolute;184    bottom: 36px;185    left: 50%;186    transform: translateX(-50%);187    width: 320px;188    height: 14px;189    background: #EDEDED;190    border-radius: 8px;191    opacity: 0.9;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status Bar -->199  <div class="status-bar">200    <div class="status-left">2:58</div>201    <div class="status-right">202      <!-- Weather dot (simplified) -->203      <svg class="svg-icon fill" viewBox="0 0 24 24">204        <circle cx="12" cy="12" r="6"></circle>205      </svg>206      <span style="font-size:28px;color:#DADADA;">0°</span>207      <!-- Do not disturb icon -->208      <svg class="svg-icon" viewBox="0 0 24 24">209        <circle cx="12" cy="12" r="9"></circle>210        <line x1="7" y1="12" x2="17" y2="12"></line>211      </svg>212      <!-- Signal -->213      <svg class="svg-icon" viewBox="0 0 24 24">214        <path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2"></path>215      </svg>216      <!-- Wi-Fi -->217      <svg class="svg-icon" viewBox="0 0 24 24">218        <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 16c2-1 6-1 8 0"></path>219        <circle cx="12" cy="19" r="1.6"></circle>220      </svg>221      <!-- Battery -->222      <svg class="svg-icon" viewBox="0 0 24 24">223        <rect x="2" y="6" width="18" height="12" rx="2"></rect>224        <rect x="20" y="10" width="2" height="4"></rect>225      </svg>226      <span style="font-size:28px;color:#DADADA;">100%</span>227    </div>228  </div>229 230  <!-- Toolbar -->231  <div class="toolbar">232    <div class="left">233      <div class="icon-btn">234        <svg class="svg-icon" viewBox="0 0 24 24">235          <path d="M15 6l-6 6 6 6"></path>236        </svg>237      </div>238      <div class="title">Compose</div>239    </div>240    <div class="right">241      <div class="icon-btn">242        <svg class="svg-icon" viewBox="0 0 24 24">243          <path d="M7 7l10 10M17 7L7 17"></path>244        </svg>245      </div>246      <div class="icon-btn">247        <svg class="svg-icon" viewBox="0 0 24 24">248          <path d="M2 21l20-9L2 3v7l14 2-14 2z"></path>249        </svg>250      </div>251      <div class="icon-btn">252        <svg class="svg-icon fill" viewBox="0 0 24 24">253          <circle cx="12" cy="4" r="2.2"></circle>254          <circle cx="12" cy="12" r="2.2"></circle>255          <circle cx="12" cy="20" r="2.2"></circle>256        </svg>257      </div>258    </div>259  </div>260 261  <!-- From -->262  <div class="field-row">263    <div class="label">From</div>264    <div class="value">dbwscratch.test.id10@gmail.com</div>265  </div>266 267  <!-- To -->268  <div class="field-row">269    <div class="label">To</div>270    <div class="value"></div>271    <svg class="chevron svg-icon" viewBox="0 0 24 24">272      <path d="M6 9l6 6 6-6"></path>273    </svg>274  </div>275 276  <!-- Subject -->277  <div class="subject">Download CARROT Weather!</div>278 279  <!-- Message body -->280  <div class="body-content">281    <div>CARROT Weather's forecast for Madrid, Spain</div>282    <div style="color:#9EC7FF;">http://carrotweather.app</div>283  </div>284 285  <!-- Inline screenshot placeholder -->286  <div class="image-placeholder">[IMG: Weather forecast screenshot]</div>287 288  <!-- Attachment tile -->289  <div class="attachment">290    <div class="att-thumb">291      <svg class="svg-icon fill" viewBox="0 0 24 24">292        <rect x="3" y="4" width="18" height="16" rx="2" fill="#D4473E"></rect>293        <path d="M4 17l6-6 4 4 3-2 4 4" stroke="#FFFFFF" stroke-width="2" fill="none"></path>294        <circle cx="8" cy="9" r="2" fill="#FFFFFF"></circle>295      </svg>296    </div>297    <div class="att-info">298      <div class="name">image.png</div>299      <div class="size">264 KB</div>300    </div>301    <div class="att-close">302      <svg class="svg-icon" viewBox="0 0 24 24">303        <path d="M5 5l14 14M19 5L5 19"></path>304      </svg>305    </div>306  </div>307 308  <!-- Bottom gesture bar -->309  <div class="gesture-bar"></div>310</div>311</body>312</html>