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 Email - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #E5E7EB;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #FFFFFF;26    font-size: 42px;27    box-sizing: border-box;28  }29  .sb-right { display: flex; align-items: center; gap: 28px; }30  .sb-icon { width: 42px; height: 42px; opacity: 0.9; }31 32  /* Top app bar */33  .top-bar {34    height: 120px;35    display: flex;36    align-items: center;37    padding: 0 24px 0 12px;38    box-sizing: border-box;39    border-bottom: 1px solid #232323;40  }41  .top-left, .top-right { display: flex; align-items: center; }42  .top-left { gap: 8px; }43  .top-right { margin-left: auto; gap: 12px; }44  .icon-btn {45    width: 96px;46    height: 96px;47    display: flex;48    align-items: center;49    justify-content: center;50    border-radius: 16px;51  }52  .icon-light { stroke: #E5E7EB; fill: none; }53  .icon-muted { stroke: #AAB0BC; fill: none; }54  .icon-send { fill: #90A4FF; }55 56  /* Fields */57  .content { padding: 18px 36px 0 36px; box-sizing: border-box; }58  .row { display: flex; align-items: center; gap: 24px; }59  .label {60    width: 140px;61    color: #9AA0A6;62    font-size: 36px;63  }64  .value {65    color: #E5E7EB;66    font-size: 38px;67  }68  .divider { height: 1px; background: #232323; margin: 22px 0; }69 70  /* Recipient chip */71  .chip {72    display: inline-flex;73    align-items: center;74    padding: 12px 18px 12px 12px;75    border: 2px solid #5C6675;76    border-radius: 40px;77    gap: 14px;78  }79  .avatar {80    width: 72px;81    height: 72px;82    border-radius: 50%;83    background: #59C3E3;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #0B3C4A;88    font-weight: 700;89    font-size: 36px;90  }91  .chip-text { font-size: 36px; color: #E5E7EB; }92  .caret { width: 28px; height: 28px; margin-left: 8px; }93 94  /* Placeholders */95  .placeholder {96    color: #8B9098;97    font-size: 40px;98    padding: 18px 0 14px 180px;99  }100  .subject {101    color: #9AA0A6;102    font-size: 40px;103    padding: 22px 0 24px 180px;104    border-top: 1px solid #232323;105  }106 107  /* Attachment card */108  .attachment {109    margin: 38px 36px 0 36px;110    background: #2E3343;111    border-radius: 16px;112    padding: 26px;113    display: flex;114    align-items: center;115    gap: 22px;116  }117  .att-icon {118    width: 96px;119    height: 96px;120    border-radius: 12px;121    background: #EF534F;122    display: flex;123    align-items: center;124    justify-content: center;125  }126  .att-texts { display: flex; flex-direction: column; }127  .att-name { font-size: 40px; color: #E5E7EB; }128  .att-size { font-size: 30px; color: #A2A7B3; margin-top: 6px; }129  .att-close {130    margin-left: auto;131    width: 56px;132    height: 56px;133    border-radius: 28px;134    display: flex;135    align-items: center;136    justify-content: center;137  }138 139  /* Gesture bar */140  .gesture {141    position: absolute;142    bottom: 36px;143    left: 50%;144    transform: translateX(-50%);145    width: 420px;146    height: 12px;147    background: #E6E6E6;148    border-radius: 8px;149    opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div class="sb-left">9:21</div>159    <div class="sb-right">160      <!-- Simple status glyphs -->161      <svg class="sb-icon" viewBox="0 0 24 24">162        <circle cx="12" cy="12" r="10" fill="#FFFFFF" opacity="0.15"></circle>163        <path d="M3 15 L12 6 L21 15" stroke="#FFFFFF" stroke-width="2.2" fill="none" />164        <circle cx="12" cy="15" r="2" fill="#FFFFFF"/>165      </svg>166      <svg class="sb-icon" viewBox="0 0 24 24">167        <rect x="3" y="8" width="14" height="10" rx="2" ry="2" stroke="#FFFFFF" stroke-width="2.2" fill="none"/>168        <rect x="18.5" y="10" width="3" height="6" fill="#FFFFFF"/>169      </svg>170    </div>171  </div>172 173  <!-- Top App Bar -->174  <div class="top-bar">175    <div class="top-left">176      <div class="icon-btn">177        <svg width="48" height="48" viewBox="0 0 24 24">178          <path d="M15 5 L7 12 L15 19" class="icon-light" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>179        </svg>180      </div>181    </div>182    <div class="top-right">183      <div class="icon-btn">184        <!-- Attachment (clip) -->185        <svg width="48" height="48" viewBox="0 0 24 24">186          <path d="M7 12 v-4 a5 5 0 0 1 8-3 l2 2 a5 5 0 0 1 0 7 l-5 5 a3 3 0 0 1-4-4 l6-6" class="icon-muted" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>187        </svg>188      </div>189      <div class="icon-btn">190        <!-- Send -->191        <svg width="52" height="52" viewBox="0 0 24 24">192          <path d="M3 12 L21 3 L15 21 L12 14 L3 12 Z" class="icon-send"></path>193        </svg>194      </div>195      <div class="icon-btn">196        <!-- More (kebab) -->197        <svg width="44" height="44" viewBox="0 0 24 24" fill="#E5E7EB">198          <circle cx="12" cy="5" r="2.2"></circle>199          <circle cx="12" cy="12" r="2.2"></circle>200          <circle cx="12" cy="19" r="2.2"></circle>201        </svg>202      </div>203    </div>204  </div>205 206  <!-- Fields -->207  <div class="content">208    <div class="row">209      <div class="label">From</div>210      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>211    </div>212    <div class="divider"></div>213 214    <div class="row">215      <div class="label">To</div>216      <div class="chip">217        <div class="avatar">218          <svg width="44" height="44" viewBox="0 0 24 24" fill="#0B3C4A">219            <circle cx="12" cy="8" r="4" fill="#0B3C4A" opacity="0.5"></circle>220            <path d="M4 20 a8 6 0 0 1 16 0" fill="#0B3C4A" opacity="0.5"></path>221          </svg>222        </div>223        <div class="chip-text">colepersondbwtest@gmail.com</div>224        <svg class="caret" viewBox="0 0 24 24">225          <path d="M6 9 L12 15 L18 9" stroke="#AAB0BC" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226        </svg>227      </div>228    </div>229 230    <div style="height: 60px;"></div>231 232    <div class="subject">Subject</div>233    <div class="divider"></div>234    <div class="placeholder">Compose email</div>235  </div>236 237  <!-- Attachment card -->238  <div class="attachment">239    <div class="att-icon">240      <svg width="56" height="56" viewBox="0 0 24 24">241        <!-- Headphones simplified -->242        <path d="M4 13 a8 8 0 0 1 16 0" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round"/>243        <rect x="3" y="13" width="5" height="7" rx="2" fill="#ffffff"></rect>244        <rect x="16" y="13" width="5" height="7" rx="2" fill="#ffffff"></rect>245      </svg>246    </div>247    <div class="att-texts">248      <div class="att-name">audio file.mp3</div>249      <div class="att-size">198 KB</div>250    </div>251    <div class="att-close">252      <svg width="44" height="44" viewBox="0 0 24 24">253        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#C9CEDA" stroke-width="2.2" stroke-linecap="round"></path>254      </svg>255    </div>256  </div>257 258  <!-- Gesture bar -->259  <div class="gesture"></div>260</div>261</body>262</html>