GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Compose Email UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #ECECEC;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29    color: #FFFFFF;30    font-size: 40px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 30px;36  }37  .status-icon { width: 46px; height: 46px; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 110px;43    left: 0;44    width: 1080px;45    height: 120px;46    display: flex;47    align-items: center;48    padding: 0 28px;49    box-sizing: border-box;50    border-bottom: 1px solid #2A2A2A;51  }52  .back-icon { width: 72px; height: 72px; margin-right: 6px; }53  .app-actions {54    margin-left: auto;55    display: flex;56    align-items: center;57    gap: 40px;58  }59  .action-icon { width: 64px; height: 64px; }60 61  /* Fields */62  .content {63    position: absolute;64    top: 230px;65    left: 0;66    width: 1080px;67    box-sizing: border-box;68  }69  .field {70    display: flex;71    align-items: center;72    padding: 28px 40px;73    border-bottom: 1px solid #2A2A2A;74    font-size: 38px;75    letter-spacing: 0.2px;76  }77  .label {78    width: 160px;79    color: #A9A9A9;80  }81  .value {82    flex: 1;83    color: #E6E6E6;84  }85  .caret {86    width: 2px;87    height: 40px;88    background: #6AB0FF;89    margin-left: 10px;90  }91  .dropdown {92    width: 44px; height: 44px;93    margin-left: 16px;94  }95 96  /* Placeholder rows (Subject and Compose email) */97  .placeholder {98    color: #A9A9A9;99  }100 101  /* Attachment card */102  .attachment-wrap {103    padding: 40px;104  }105  .attachment-card {106    width: 1000px;107    height: 160px;108    background: #3B3F4A;109    border-radius: 16px;110    margin-left: 20px;111    display: flex;112    align-items: center;113    padding: 20px 28px;114    box-sizing: border-box;115  }116  .file-icon {117    width: 96px;118    height: 96px;119    border-radius: 12px;120    background: #E64A19;121    display: flex;122    align-items: center;123    justify-content: center;124    margin-right: 28px;125  }126  .file-meta {127    display: flex;128    flex-direction: column;129    gap: 8px;130    font-size: 36px;131  }132  .file-size {133    font-size: 30px;134    color: #B0B0B0;135  }136  .close-btn {137    margin-left: auto;138    width: 56px; height: 56px;139  }140 141  /* Gesture bar */142  .gesture {143    position: absolute;144    bottom: 34px;145    left: 50%;146    transform: translateX(-50%);147    width: 220px;148    height: 10px;149    background: #E0E0E0;150    border-radius: 6px;151    opacity: 0.9;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div>9:18</div>161    <div class="status-right">162      <!-- simple round icons to mimic status indicators -->163      <svg class="status-icon" viewBox="0 0 48 48">164        <circle cx="24" cy="24" r="20" fill="#FFFFFF" opacity="0.15"></circle>165        <circle cx="24" cy="24" r="8" fill="#FFFFFF" opacity="0.6"></circle>166      </svg>167      <svg class="status-icon" viewBox="0 0 48 48">168        <path d="M6 32c6-8 18-16 36-18" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.7"/>169        <path d="M12 32c6-6 14-10 28-12" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.9"/>170      </svg>171      <svg class="status-icon" viewBox="0 0 48 48">172        <rect x="6" y="12" width="34" height="24" rx="4" ry="4" stroke="#FFFFFF" stroke-width="3" fill="none"/>173        <rect x="8" y="14" width="24" height="20" rx="3" fill="#FFFFFF"/>174        <rect x="42" y="18" width="4" height="12" rx="2" fill="#FFFFFF"/>175      </svg>176    </div>177  </div>178 179  <!-- App bar -->180  <div class="app-bar">181    <!-- Back arrow -->182    <svg class="back-icon" viewBox="0 0 48 48">183      <path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184    </svg>185 186    <div class="app-actions">187      <!-- Paperclip -->188      <svg class="action-icon" viewBox="0 0 48 48">189        <path d="M18 16v18c0 6 8 6 8 0V16c0-8-12-8-12 0v20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>190      </svg>191      <!-- Send triangle -->192      <svg class="action-icon" viewBox="0 0 48 48">193        <path d="M6 24 L42 12 L32 26 L42 36 Z" fill="#FFFFFF"/>194      </svg>195      <!-- More vertical -->196      <svg class="action-icon" viewBox="0 0 48 48">197        <circle cx="24" cy="12" r="4" fill="#FFFFFF"/>198        <circle cx="24" cy="24" r="4" fill="#FFFFFF"/>199        <circle cx="24" cy="36" r="4" fill="#FFFFFF"/>200      </svg>201    </div>202  </div>203 204  <!-- Content -->205  <div class="content">206    <div class="field">207      <div class="label">From</div>208      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>209    </div>210 211    <div class="field">212      <div class="label">To</div>213      <div class="value" style="display:flex; align-items:center;">214        <span style="color:#6B9DE6;"> </span>215        <div class="caret"></div>216      </div>217      <!-- dropdown icon -->218      <svg class="dropdown" viewBox="0 0 48 48">219        <path d="M12 18 L24 30 L36 18" stroke="#BDBDBD" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220      </svg>221    </div>222 223    <div class="field">224      <div class="label">Subject</div>225      <div class="value placeholder"> </div>226    </div>227 228    <div class="field" style="height: 200px;">229      <div class="label"> </div>230      <div class="value placeholder" style="font-size: 38px;">Compose email</div>231    </div>232 233    <!-- Attachment card -->234    <div class="attachment-wrap">235      <div class="attachment-card">236        <div class="file-icon">237          <!-- Headphones icon -->238          <svg viewBox="0 0 64 64" width="64" height="64">239            <path d="M12 36c0-12 10-22 20-22s20 10 20 22" stroke="#FFFFFF" stroke-width="4" fill="none"/>240            <rect x="8" y="36" width="12" height="18" rx="6" fill="#FFFFFF"/>241            <rect x="44" y="36" width="12" height="18" rx="6" fill="#FFFFFF"/>242          </svg>243        </div>244        <div class="file-meta">245          <div>audio file.mp3</div>246          <div class="file-size">198 KB</div>247        </div>248        <svg class="close-btn" viewBox="0 0 48 48">249          <path d="M12 12 L36 36 M36 12 L12 36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>250        </svg>251      </div>252    </div>253  </div>254 255  <div class="gesture"></div>256</div>257</body>258</html>