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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1516;15    color: #e6eaea;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e6eaea;26    font-size: 38px;27    letter-spacing: 1px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 24px;33  }34  .notif-dot {35    width: 18px; height: 18px; background: #e6eaea; border-radius: 50%;36    opacity: 0.85;37  }38  .icon-wifi, .icon-battery {39    width: 44px; height: 28px; position: relative;40  }41  .icon-wifi::before {42    content: ""; position: absolute; inset: 0;43    border: 3px solid #e6eaea; border-top-color: transparent; border-left-color: transparent;44    transform: rotate(45deg); border-radius: 4px;45  }46  .icon-battery {47    border: 3px solid #e6eaea; border-radius: 3px;48  }49  .icon-battery::after {50    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 14px; background: #e6eaea; border-radius: 1px;51  }52 53  /* Top compose toolbar */54  .toolbar {55    height: 120px;56    display: flex;57    align-items: center;58    padding: 0 20px;59    border-top: 1px solid #162021;60    border-bottom: 1px solid #1b2627;61  }62  .toolbar-left, .toolbar-right { display: flex; align-items: center; }63  .toolbar-left { gap: 14px; }64  .toolbar-right { margin-left: auto; gap: 28px; }65  .icon-btn {66    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px;67  }68  .icon svg { width: 44px; height: 44px; fill: #c6d1d1; }69  .icon.send svg { fill: #4cd1c7; }70 71  /* Fields */72  .field { padding: 22px 28px; border-bottom: 1px solid #1b2627; }73  .row { display: flex; align-items: center; gap: 18px; }74  .label { color: #94a4a6; font-size: 34px; width: 110px; }75  .value { font-size: 36px; color: #e6eaea; flex: 1; }76  .dropdown svg { width: 28px; height: 28px; fill: #94a4a6; }77 78  /* Chip (recipient) */79  .chip {80    display: inline-flex;81    align-items: center;82    gap: 18px;83    background: #1a2324;84    border: 1px solid #2a3436;85    padding: 10px 18px 10px 10px;86    border-radius: 54px;87    color: #e6eaea;88    font-size: 34px;89  }90  .avatar {91    width: 64px; height: 64px; border-radius: 50%;92    background: #7c8c8e; color: #0f1516; display: flex; align-items: center; justify-content: center; font-weight: 700;93  }94 95  /* Subject & body */96  .subject {97    padding: 26px 28px 26px 28px;98    border-bottom: 1px solid #1b2627;99    color: #94a4a6; font-size: 36px;100  }101  .body-area {102    padding: 30px 28px 0 28px;103    font-size: 36px; line-height: 1.6; color: #e6eaea;104  }105  .url {106    color: #c8f2ef;107    text-decoration: none;108  }109 110  /* Spacer to push content above keyboard */111  .spacer { height: 720px; }112 113  /* Keyboard mock */114  .keyboard {115    position: absolute;116    left: 0; right: 0; bottom: 70px;117    height: 680px;118    background: #0f1415;119    border-top: 1px solid #1b2627;120    padding: 18px 18px 20px 18px;121    box-sizing: border-box;122  }123  .kb-row {124    display: flex; justify-content: center; gap: 14px;125    margin: 16px 0;126  }127  .key {128    flex: 0 0 84px; height: 110px; background: #1b2324; border-radius: 16px;129    display: flex; align-items: center; justify-content: center; color: #e6eaea; font-size: 40px;130    border: 1px solid #273032;131  }132  .key.wide { flex-basis: 128px; }133  .key.extra-wide { flex-basis: 620px; }134  .key.circle { width: 110px; height: 110px; border-radius: 55px; }135  .key.icon svg { width: 44px; height: 44px; fill: #c6d1d1; }136  .kb-toolbar {137    display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 0 6px;138  }139 140  /* Bottom nav pill */141  .nav-pill {142    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);143    width: 280px; height: 10px; background: #d7d7d7; opacity: 0.9; border-radius: 8px;144  }145</style>146</head>147<body>148<div id="render-target">149  <!-- Status Bar -->150  <div class="status-bar">151    <div class="status-left">6:21</div>152    <div class="status-right">153      <div class="notif-dot"></div>154      <div class="notif-dot"></div>155      <div class="notif-dot"></div>156      <div class="notif-dot"></div>157      <div class="icon-wifi"></div>158      <div class="icon-battery"></div>159    </div>160  </div>161 162  <!-- Compose Toolbar -->163  <div class="toolbar">164    <div class="toolbar-left">165      <div class="icon-btn icon">166        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>167      </div>168    </div>169    <div class="toolbar-right">170      <div class="icon-btn icon">171        <!-- Paperclip -->172        <svg viewBox="0 0 24 24"><path d="M16.5 6.5v8a4.5 4.5 0 1 1-9 0V6a3.5 3.5 0 0 1 7 0v8a2.5 2.5 0 1 1-5 0V7h2v7a.5.5 0 0 0 1 0V6a1.5 1.5 0 0 0-3 0v8a3.5 3.5 0 1 0 7 0v-7h-1z"/></svg>173      </div>174      <div class="icon-btn icon send">175        <!-- Send -->176        <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>177      </div>178      <div class="icon-btn icon">179        <!-- More (3 dots) -->180        <svg viewBox="0 0 24 24"><path d="M5 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>181      </div>182    </div>183  </div>184 185  <!-- From field -->186  <div class="field">187    <div class="row">188      <div class="label">From</div>189      <div class="value">maria.rossi199309@gmail.com</div>190      <div class="dropdown">191        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>192      </div>193    </div>194  </div>195 196  <!-- To field -->197  <div class="field">198    <div class="row">199      <div class="label">To</div>200      <div class="value">201        <span class="chip">202          <span class="avatar">F</span>203          <span>ffionh54@gmail.com</span>204        </span>205      </div>206      <div class="dropdown">207        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>208      </div>209    </div>210  </div>211 212  <!-- Subject -->213  <div class="subject">Subject</div>214 215  <!-- Body -->216  <div class="body-area">217    <div><a class="url" href="#">https://www.kitchenstories.com/en/recipes/classic-tiramisu</a></div>218  </div>219 220  <div class="spacer"></div>221 222  <!-- Keyboard Mock -->223  <div class="keyboard">224    <div class="kb-row">225      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>226    </div>227    <div class="kb-row">228      <div class="key wide icon">229        <!-- emoji -->230        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-3 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm6 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM7 15h10a4.5 4.5 0 0 1-10 0z"/></svg>231      </div>232      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>233    </div>234    <div class="kb-row">235      <div class="key wide icon">236        <!-- shift -->237        <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/></svg>238      </div>239      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>240      <div class="key wide icon">241        <!-- backspace -->242        <svg viewBox="0 0 24 24"><path d="M22 6H9L3 12l6 6h13V6zm-5.5 9.5l-1.41 1.41L13 14.83l-2.09 2.08L9.5 15.5 11.59 13 9.5 10.91 10.91 9.5 13 11.59l2.09-2.09 1.41 1.41L14.41 13l2.09 2.5z"/></svg>243      </div>244    </div>245    <div class="kb-row kb-toolbar">246      <div class="key circle icon">247        <!-- symbols -->248        <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 7h16v2H4zm0 7h16v2H4z"/></svg>249      </div>250      <div class="key circle">@</div>251      <div class="key circle icon">252        <!-- GIF -->253        <svg viewBox="0 0 24 24"><path d="M3 12a5 5 0 1 1 5 5H6v-2h2a3 3 0 1 0-3-3zM11 7h2v10h-2zM21 9h-4v2h2v2h-2v4h-2V7h6z"/></svg>254      </div>255      <div class="key extra-wide">space</div>256      <div class="key circle">.</div>257      <div class="key circle icon">258        <!-- enter -->259        <svg viewBox="0 0 24 24"><path d="M19 7v6H6.83l2.58-2.59L8 9l-5 5 5 5 1.41-1.41L6.83 15H21V7z"/></svg>260      </div>261    </div>262  </div>263 264  <!-- Bottom navigation pill -->265  <div class="nav-pill"></div>266</div>267</body>268</html>