GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Compose Mail UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width:1440px;9    height:3120px;10    position:relative;11    overflow:hidden;12    background:#0e0f0e;13    color:#e9e9e9;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute;19    top:0;20    left:0;21    width:100%;22    height:120px;23    color:#d9d9d9;24    font-size:48px;25    padding:0 60px;26    display:flex;27    align-items:center;28    justify-content:space-between;29    box-sizing:border-box;30  }31  .status-icons { display:flex; align-items:center; gap:32px; }32  .icon {33    width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center;34  }35  /* Toolbar with back + actions */36  .toolbar {37    position:absolute;38    top:120px;39    left:0;40    width:100%;41    height:120px;42    display:flex;43    align-items:center;44    justify-content:space-between;45    padding:0 40px 0 24px;46    box-sizing:border-box;47  }48  .back-wrap { width:120px; height:120px; display:flex; align-items:center; justify-content:center; }49  .actions { display:flex; align-items:center; gap:40px; padding-right:20px; }50 51  /* Fields */52  .field {53    position:relative;54    width:100%;55    padding:48px 60px;56    box-sizing:border-box;57    border-top:1px solid #1c1c1c;58  }59  .field-label {60    color:#9fa3a0;61    font-size:44px;62    width:180px;63    display:inline-block;64  }65  .field-value {66    font-size:54px;67    color:#eaeaea;68  }69  .field .right {70    position:absolute;71    right:40px;72    top:50%;73    transform:translateY(-50%);74  }75 76  /* Add recipient row */77  .recipient-row {78    padding:40px 60px 36px 60px;79    display:flex;80    align-items:center;81    gap:40px;82    border-top:1px solid #1c1c1c;83    border-bottom:1px solid #1c1c1c;84  }85  .avatar {86    width:120px; height:120px; border-radius:60px;87    background:#c74430; display:flex; align-items:center; justify-content:center;88    color:#fff; font-weight:700; font-size:48px;89  }90  .recip-texts { display:flex; flex-direction:column; }91  .recip-title { font-size:56px; }92  .recip-sub { font-size:42px; color:#a7aaa7; margin-top:8px; }93 94  /* Compose area */95  .compose-area {96    position:absolute;97    top:700px; /* below fields */98    left:0;99    width:100%;100    bottom:1200px; /* space for keyboard */101    background:#0e0f0e;102  }103 104  /* Keyboard */105  .keyboard {106    position:absolute;107    left:0;108    bottom:0;109    width:100%;110    height:1200px;111    background:#111211;112    border-top:1px solid #1f1f1f;113    box-sizing:border-box;114  }115  .kbd-top {116    height:140px;117    padding:0 60px;118    display:flex;119    align-items:center;120    gap:60px;121    color:#cfcfcf;122  }123  .kbd-badge {124    padding:10px 22px;125    border:1px solid #2c2c2c;126    border-radius:20px;127    font-size:46px;128    color:#cfcfcf;129  }130  .kbd-top .spacer { flex:1; }131  .kbd-top .round {132    width:100px; height:100px; border-radius:50%;133    background:#232323; display:flex; align-items:center; justify-content:center;134  }135  .keys {136    padding:20px 60px;137    display:flex; flex-direction:column; gap:24px;138  }139  .key-row { display:flex; gap:18px; justify-content:center; }140  .key {141    width:120px; height:160px; border-radius:40px;142    background:#1c1c1c; color:#ededed; font-size:56px; display:flex;143    align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px #252525;144  }145  .key.wide { width:200px; }146  .key.xwide { width:640px; }147  .key.tall { height:160px; }148  .key.icon { font-size:50px; }149  .key.dark { background:#181818; }150  .bottom-row { display:flex; align-items:center; justify-content:center; gap:18px; padding:10px 60px; }151 152  /* small caret/chevrons */153  .chev-down, .chev-right { width:56px; height:56px; }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>11:32</div>162    <div class="status-icons">163      <div class="icon">164        <!-- simple magnifier -->165        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">166          <circle cx="11" cy="11" r="7" stroke="#cfcfcf" stroke-width="2"/>167          <path d="M20 20l-4.5-4.5" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>168        </svg>169      </div>170      <div class="icon">171        <!-- wifi -->172        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">173          <path d="M3 8a13 13 0 0 1 18 0" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>174          <path d="M6 12a9 9 0 0 1 12 0" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>175          <path d="M9 16a5 5 0 0 1 6 0" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>176          <circle cx="12" cy="19" r="1.5" fill="#cfcfcf"/>177        </svg>178      </div>179      <div class="icon">180        <!-- battery -->181        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">182          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#cfcfcf" stroke-width="2"/>183          <rect x="4" y="8" width="12" height="8" fill="#cfcfcf"/>184          <rect x="20" y="10" width="2" height="4" fill="#cfcfcf"/>185        </svg>186      </div>187    </div>188  </div>189 190  <!-- Toolbar -->191  <div class="toolbar">192    <div class="back-wrap">193      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">194        <path d="M15 18l-6-6 6-6" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196    </div>197    <div class="actions">198      <!-- attachment -->199      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">200        <path d="M7 7v8a5 5 0 0 0 10 0V6a3 3 0 0 0-6 0v8a1 1 0 0 0 2 0V7" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>201      </svg>202      <!-- send -->203      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">204        <path d="M3 12l18-9-6 9 6 9-18-9z" fill="#eaeaea"/>205      </svg>206      <!-- menu -->207      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">208        <circle cx="12" cy="5" r="2" fill="#eaeaea"/>209        <circle cx="12" cy="12" r="2" fill="#eaeaea"/>210        <circle cx="12" cy="19" r="2" fill="#eaeaea"/>211      </svg>212    </div>213  </div>214 215  <!-- From field -->216  <div class="field" style="top:240px;">217    <span class="field-label">From</span>218    <span class="field-value">clarkquentin70@gmail.com</span>219    <div class="right chev-down">220      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">221        <path d="M6 9l6 6 6-6" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222      </svg>223    </div>224  </div>225 226  <!-- To field -->227  <div class="field" style="top:408px;">228    <span class="field-label">To</span>229    <span class="field-value">Thomas123@gmail.com</span>230    <div class="right chev-down">231      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">232        <path d="M6 9l6 6 6-6" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>233      </svg>234    </div>235  </div>236 237  <!-- Add recipient suggestion -->238  <div class="recipient-row" style="position:absolute; top:576px; left:0; width:100%;">239    <div class="avatar">•</div>240    <div class="recip-texts">241      <div class="recip-title">Add recipient</div>242      <div class="recip-sub">Thomas123@gmail.com</div>243    </div>244  </div>245 246  <!-- Compose body area -->247  <div class="compose-area"></div>248 249  <!-- Keyboard -->250  <div class="keyboard">251    <div class="kbd-top">252      <div class="kbd-badge">GIF</div>253      <div class="kbd-badge">G✕</div>254      <div class="kbd-badge">⚙︎</div>255      <div class="kbd-badge">🎨</div>256      <div class="spacer"></div>257      <div class="round">258        <!-- mic -->259        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">260          <rect x="9" y="4" width="6" height="10" rx="3" stroke="#d9d9d9" stroke-width="2"/>261          <path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>262        </svg>263      </div>264    </div>265 266    <div class="keys">267      <!-- Row 1 -->268      <div class="key-row">269        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>270        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>271        <div class="key">o</div><div class="key">p</div>272      </div>273      <!-- Row 2 -->274      <div class="key-row">275        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>276        <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>277        <div class="key">l</div>278      </div>279      <!-- Row 3 -->280      <div class="key-row">281        <div class="key wide">⇧</div>282        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>283        <div class="key">b</div><div class="key">n</div><div class="key">m</div>284        <div class="key wide">⌫</div>285      </div>286      <!-- Row 4 -->287      <div class="bottom-row">288        <div class="key wide">?123</div>289        <div class="key wide">@</div>290        <div class="key wide">☺</div>291        <div class="key xwide"> </div>292        <div class="key wide">.</div>293        <div class="key wide">294          <svg width="56" height="56" viewBox="0 0 24 24" fill="none">295            <path d="M5 12h12M12 5l7 7-7 7" stroke="#ededed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>296          </svg>297        </div>298      </div>299    </div>300  </div>301 302</div>303</body>304</html>