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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0d1008; /* deep olive black */15    color: #E8E8E8;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 38px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 28px;32  }33  .status-dot { width: 12px; height: 12px; background:#C7CC89; border-radius:50%; opacity:.9; }34  .battery {35    width: 48px; height: 24px; border: 3px solid #C7CC89; border-radius:6px; position: relative;36  }37  .battery::after {38    content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#C7CC89; border-radius:2px;39  }40  .battery-level { position:absolute; left:3px; top:3px; height:16px; width:28px; background:#C7CC89; }41 42  /* App bar */43  .app-bar {44    height: 150px;45    padding: 0 24px;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .app-left { display: flex; align-items: center; gap: 24px; }51  .app-right { display: flex; align-items: center; gap: 38px; }52  .icon-btn svg { width: 60px; height: 60px; stroke: #C7CC89; fill: none; stroke-width: 5; }53  .icon-fill svg { fill: #C7CC89; stroke: none; }54 55  /* Content */56  .content { padding: 0 32px; }57  .row { display: flex; align-items: center; gap: 22px; padding: 26px 0; }58  .label { color: #AAB0A6; font-size: 34px; }59  .value { font-size: 36px; color: #EDEDED; }60  .dropdown {61    width: 36px; height: 36px; margin-left: 12px;62  }63  .dropdown svg {64    width: 100%; height: 100%; fill: none; stroke: #AAB0A6; stroke-width: 6;65  }66 67  /* Recipient pill */68  .pill {69    display: inline-flex;70    align-items: center;71    gap: 18px;72    padding: 14px 26px;73    border: 3px solid #7f866f;74    border-radius: 999px;75    color: #EDEDED;76    font-size: 36px;77  }78  .avatar {79    width: 72px; height: 72px;80    background: #f04d2f;81    color: #fff;82    border-radius: 50%;83    display: flex;84    align-items: center; justify-content: center;85    font-weight: 600;86    text-transform: lowercase;87    font-size: 38px;88  }89 90  .caret {91    width: 2px; height: 46px; background: #C7CC89; margin: 22px 0 18px 82px;92  }93 94  .divider {95    height: 2px; background: #2a2f21; margin: 24px 0;96  }97 98  .placeholder {99    color: #8f9586;100    font-size: 42px;101    margin: 18px 0;102  }103 104  /* Attachment chip */105  .attachment {106    margin: 36px 0 0 24px;107    width: 960px; height: 160px;108    background: #3e472a;109    border-radius: 20px;110    display: flex; align-items: center; justify-content: space-between;111    padding: 0 28px;112  }113  .attach-left { display: flex; align-items: center; gap: 28px; }114  .pdf-icon {115    width: 110px; height: 110px; background: #f04d2f; border-radius: 12px;116    display: flex; align-items: center; justify-content: center;117    color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 32px;118  }119  .attach-text { display: flex; flex-direction: column; }120  .attach-title { font-size: 40px; color: #F2F2F2; }121  .attach-sub { font-size: 32px; color: #b9bfb0; margin-top: 8px; }122  .attach-close {123    width: 54px; height: 54px; position: relative;124  }125  .attach-close::before, .attach-close::after {126    content:""; position:absolute; left:50%; top:50%; width:48px; height:4px; background:#D7DE9B;127    transform-origin:center;128  }129  .attach-close::before { transform: translate(-50%,-50%) rotate(45deg); }130  .attach-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }131 132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status bar -->138  <div class="status-bar">139    <div class="status-left">2:18</div>140    <div class="status-right">141      <div class="status-dot"></div>142      <div class="status-dot"></div>143      <div class="status-dot"></div>144      <div class="battery"><div class="battery-level"></div></div>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="app-bar">150    <div class="app-left">151      <div class="icon-btn">152        <svg viewBox="0 0 24 24">153          <path d="M15 6 L9 12 L15 18"></path>154          <path d="M9 12 H22"></path>155        </svg>156      </div>157    </div>158    <div class="app-right">159      <div class="icon-btn">160        <svg viewBox="0 0 24 24">161          <path d="M7 7 c4-4 10-1 10 4 v6 c0 3-3 5-6 3 l-6-6 c-3-3 0-7 2-7"></path>162        </svg>163      </div>164      <div class="icon-fill">165        <svg viewBox="0 0 24 24">166          <path d="M2 12 L21 3 L14 12 L21 21 Z"></path>167        </svg>168      </div>169      <div class="icon-fill">170        <svg viewBox="0 0 24 24">171          <circle cx="12" cy="4" r="2"></circle>172          <circle cx="12" cy="12" r="2"></circle>173          <circle cx="12" cy="20" r="2"></circle>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Content -->180  <div class="content">181    <!-- From row -->182    <div class="row">183      <span class="label">From</span>184      <span class="value">thomas.blanc1978@gmail.com</span>185      <span class="dropdown">186        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>187      </span>188    </div>189 190    <!-- To row -->191    <div class="row">192      <span class="label" style="color:#EDEDED;">To</span>193      <div class="pill">194        <div class="avatar">r</div>195        <div>rick.weinstein@dayrep.com</div>196      </div>197      <span class="dropdown">198        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>199      </span>200    </div>201 202    <div class="caret"></div>203 204    <div class="divider"></div>205    <div class="placeholder">Subject</div>206    <div class="divider"></div>207    <div class="placeholder">Compose email</div>208 209    <!-- Attachment chip -->210    <div class="attachment">211      <div class="attach-left">212        <div class="pdf-icon">PDF</div>213        <div class="attach-text">214          <div class="attach-title">Report.pdf</div>215          <div class="attach-sub">22 KB</div>216        </div>217      </div>218      <div class="attach-close"></div>219    </div>220  </div>221 222</div>223</body>224</html>