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 UI</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: #1a120c; /* deep dark brown */15    color: #e9dfd3;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #f5efe8;26    font-weight: 600;27    letter-spacing: 1px;28    box-sizing: border-box;29  }30  .status-left { font-size: 42px; }31  .status-right { display: flex; align-items: center; gap: 30px; }32 33  /* App bar */34  .app-bar {35    height: 110px;36    padding: 0 28px;37    display: flex;38    align-items: center;39    justify-content: space-between;40    color: #d9c2af;41    box-sizing: border-box;42  }43  .app-left, .app-right { display: flex; align-items: center; gap: 34px; }44  .icon {45    width: 56px; height: 56px;46    display: inline-flex; align-items: center; justify-content: center;47  }48  .icon svg { width: 56px; height: 56px; fill: none; stroke: #d9c2af; stroke-width: 2.5; }49 50  /* Fields */51  .fields { padding: 12px 36px 0 36px; }52  .field-row {53    display: flex;54    align-items: center;55    border-bottom: 1px solid #30241c;56    height: 120px;57    box-sizing: border-box;58  }59  .label {60    width: 130px;61    color: #a7978a;62    font-size: 38px;63  }64  .value {65    flex: 1;66    font-size: 40px;67    color: #f3e8dc;68  }69  .placeholder { color: #9e8f83; }70  .dropdown {71    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;72  }73  .dropdown svg { width: 44px; height: 44px; fill: #cdb8a7; }74 75  .caret {76    width: 4px; height: 42px; background: #d9a066; border-radius: 2px; margin-left: 8px;77  }78 79  /* Attachment chip */80  .attachment-wrap {81    position: absolute;82    left: 36px;83    top: 980px;84    right: 36px;85  }86  .attachment {87    width: 900px;88    background: #6b4f3b;89    border-radius: 18px;90    padding: 26px 26px;91    display: flex;92    align-items: center;93    gap: 26px;94    box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;95    color: #f1e6dc;96  }97  .file-thumb {98    width: 84px; height: 84px;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    display: flex; align-items: center; justify-content: center;102    color: #757575; font-size: 24px; border-radius: 10px;103  }104  .file-info { flex: 1; display: flex; flex-direction: column; }105  .file-name { font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 650px; }106  .file-size { font-size: 26px; color: #e0d2c6; opacity: 0.85; margin-top: 6px; }107  .chip-close { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }108  .chip-close svg { width: 40px; height: 40px; stroke: #f1dfd1; stroke-width: 3; }109 110  /* Bottom gesture bar */111  .gesture {112    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);113    width: 420px; height: 12px; background: #e9e3df; border-radius: 12px; opacity: 0.9;114  }115 116  /* Thin divider between fields and content area for spacing realism */117  .spacer { height: 16px; }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div class="status-left">11:11</div>126    <div class="status-right">127      <!-- Simple Wi‑Fi icon -->128      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#f5efe8" stroke-width="2">129        <path d="M2 8c6-5 14-5 20 0" />130        <path d="M5 12c4-3 10-3 14 0" />131        <path d="M8 16c3-2 5-2 8 0" />132        <circle cx="12" cy="20" r="1.8" fill="#f5efe8" stroke="none"/>133      </svg>134      <!-- Battery icon -->135      <svg viewBox="0 0 28 16" width="60" height="38">136        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#f5efe8" fill="none" stroke-width="2"/>137        <rect x="3" y="5" width="16" height="6" rx="1" fill="#f5efe8"/>138        <rect x="24" y="6" width="3" height="4" rx="1" fill="#f5efe8"/>139      </svg>140    </div>141  </div>142 143  <!-- App bar with actions -->144  <div class="app-bar">145    <div class="app-left">146      <div class="icon">147        <!-- Back Arrow -->148        <svg viewBox="0 0 24 24">149          <path d="M15 4L7 12l8 8" />150        </svg>151      </div>152    </div>153    <div class="app-right">154      <div class="icon" title="Attach">155        <!-- Paperclip -->156        <svg viewBox="0 0 24 24">157          <path d="M7 13V7a5 5 0 0 1 10 0v8a3 3 0 0 1-6 0V8" />158        </svg>159      </div>160      <div class="icon" title="Send">161        <!-- Send / paper plane -->162        <svg viewBox="0 0 24 24">163          <path d="M3 11l18-8-8 18-2-6-6-2z" />164        </svg>165      </div>166      <div class="icon" title="More">167        <!-- Kebab menu -->168        <svg viewBox="0 0 24 24" fill="#d9c2af" stroke="none">169          <circle cx="12" cy="5" r="2.2"/>170          <circle cx="12" cy="12" r="2.2"/>171          <circle cx="12" cy="19" r="2.2"/>172        </svg>173      </div>174    </div>175  </div>176 177  <!-- Fields -->178  <div class="fields">179    <div class="field-row">180      <div class="label">From</div>181      <div class="value">naomirousseau5@gmail.com</div>182      <div class="dropdown">183        <svg viewBox="0 0 24 24">184          <path d="M6 9l6 6 6-6" fill="#cdb8a7"/>185        </svg>186      </div>187    </div>188 189    <div class="field-row">190      <div class="label">To</div>191      <div class="value" style="display:flex; align-items:center;">192        <div class="caret"></div>193      </div>194      <div class="dropdown">195        <svg viewBox="0 0 24 24">196          <path d="M6 9l6 6 6-6" fill="#cdb8a7"/>197        </svg>198      </div>199    </div>200 201    <div class="field-row">202      <div class="label">Subject</div>203      <div class="value placeholder"> </div>204    </div>205  </div>206 207  <!-- Attachment chip -->208  <div class="attachment-wrap">209    <div class="attachment">210      <div class="file-thumb">[IMG: File]</div>211      <div class="file-info">212        <div class="file-name">Romeo and Juli...re William.epub</div>213        <div class="file-size">147 KB</div>214      </div>215      <div class="chip-close" title="Remove">216        <svg viewBox="0 0 24 24" fill="none">217          <path d="M6 6l12 12M18 6L6 18" />218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Bottom gesture bar -->224  <div class="gesture"></div>225 226</div>227</body>228</html>