GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15  }16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    color: #EDEDED;24    font-size: 36px;25    line-height: 100px;26    padding: 0 40px;27  }28  .status-right {29    position: absolute;30    right: 30px;31    top: 26px;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .dot { width: 18px; height: 18px; background:#EDEDED; border-radius:50%; opacity:.85; }37  .battery {38    width: 50px; height: 26px; border: 3px solid #EDEDED; border-radius:6px; position: relative;39  }40  .battery::after {41    content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#EDEDED; border-radius:2px;42  }43  .battery-fill { position:absolute; left:4px; top:4px; width:34px; height:16px; background:#EDEDED; }44 45  /* Top compose header */46  .compose-header {47    position: absolute;48    top: 100px;49    left: 0;50    width: 1080px;51    height: 130px;52    display: flex;53    align-items: center;54    padding: 0 24px;55  }56  .icon-btn {57    width: 80px;58    height: 80px;59    display: flex;60    align-items: center;61    justify-content: center;62    border-radius: 40px;63  }64  .header-actions {65    margin-left: auto;66    display: flex;67    gap: 30px;68  }69  .row {70    position: absolute;71    left: 0;72    width: 1080px;73    padding: 20px 40px;74    display: flex;75    align-items: center;76    box-sizing: border-box;77    border-bottom: 1px solid #272727;78  }79  .label {80    width: 140px;81    color: #B0B0B0;82    font-size: 40px;83  }84  .value {85    flex: 1;86    font-size: 44px;87    color: #EAEAEA;88  }89  .chev {90    width: 40px; height: 40px; margin-left: 16px;91  }92 93  /* Rows positions */94  #row-from { top: 230px; height: 150px; }95  #row-to   { top: 380px; height: 160px; }96 97  /* Suggestion card */98  .suggestion {99    position: absolute;100    top: 560px;101    left: 40px;102    width: 1000px;103    height: 170px;104    background: #1E1E1E;105    border: 1px solid #2A2A2A;106    border-radius: 16px;107    display: flex;108    align-items: center;109    padding: 24px;110    box-sizing: border-box;111    gap: 26px;112  }113  .avatar {114    width: 96px; height: 96px; border-radius: 48px; background: #4F6D7A;115    display: flex; align-items: center; justify-content: center; color:#DDE7EA; font-size: 32px;116  }117  .s-text .line1 { font-size: 44px; color: #F5F5F5; }118  .s-text .line2 { font-size: 34px; color: #B9B9B9; margin-top: 8px; }119 120  /* Blank compose area */121  .blank-area {122    position: absolute;123    top: 750px;124    left: 0;125    width: 1080px;126    bottom: 900px; /* leaves space for keyboard */127    background: #121212;128  }129 130  /* Keyboard mock */131  .keyboard {132    position: absolute;133    left: 0;134    bottom: 0;135    width: 1080px;136    height: 900px;137    background: #1A1A1A;138    border-top: 1px solid #2A2A2A;139    box-sizing: border-box;140    padding: 24px 20px;141  }142  .kb-topbar {143    display: flex;144    gap: 36px;145    padding: 10px 10px 20px 10px;146    color: #CFCFCF;147    align-items: center;148  }149  .kb-pill {150    width: 80px; height: 80px; background:#2A2A2A; border-radius:18px;151    display:flex; align-items:center; justify-content:center;152  }153  .keys-row {154    display: flex;155    justify-content: space-between;156    padding: 12px 6px;157  }158  .key {159    width: 90px; height: 100px; background:#2A2A2A; border-radius:20px;160    display:flex; align-items:center; justify-content:center; color:#E0E0E0;161    font-size: 40px;162  }163  .key.wide { width: 180px; }164  .key.xwide { width: 240px; }165  .kb-bottom {166    display: flex;167    align-items: center;168    justify-content: space-between;169    padding: 18px 6px;170  }171  .space { width: 460px; height: 110px; background:#2A2A2A; border-radius:20px; }172  .enter { width: 140px; height: 110px; background:#8AB4F8; border-radius:50px; display:flex; align-items:center; justify-content:center; color:#121212; font-weight:bold; }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    10:18181    <div class="status-right">182      <div class="dot"></div>183      <div class="dot" style="width:22px;height:22px;"></div>184      <div class="dot"></div>185      <div class="battery"><div class="battery-fill"></div></div>186    </div>187  </div>188 189  <!-- Compose header -->190  <div class="compose-header">191    <div class="icon-btn">192      <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED">193        <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5 15.5 5z"/>194      </svg>195    </div>196    <div class="header-actions">197      <div class="icon-btn">198        <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED">199          <path d="M21 7.5L12 16.5c-2 2-5 2-7 0s-2-5 0-7L14 2l1.5 1.5L6.5 12c-1 1-1 2.5 0 3.5s2.5 1 3.5 0L19.5 6 21 7.5z"/>200        </svg>201      </div>202      <div class="icon-btn">203        <svg width="48" height="48" viewBox="0 0 24 24" fill="#8AB4F8">204          <path d="M2 21l20-9-20-9v7l14 2-14 2v7z"/>205        </svg>206      </div>207      <div class="icon-btn">208        <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED">209          <circle cx="12" cy="5" r="2"/>210          <circle cx="12" cy="12" r="2"/>211          <circle cx="12" cy="19" r="2"/>212        </svg>213      </div>214    </div>215  </div>216 217  <!-- From row -->218  <div class="row" id="row-from">219    <div class="label">From</div>220    <div class="value">ffionh41@gmail.com</div>221    <svg class="chev" viewBox="0 0 24 24" fill="#B0B0B0">222      <path d="M7 10l5 5 5-5z"/>223    </svg>224  </div>225 226  <!-- To row -->227  <div class="row" id="row-to">228    <div class="label">To</div>229    <div class="value">maredharris@gmail.com</div>230    <svg class="chev" viewBox="0 0 24 24" fill="#B0B0B0">231      <path d="M7 10l5 5 5-5z"/>232    </svg>233  </div>234 235  <!-- Suggestion card -->236  <div class="suggestion">237    <div class="avatar">👤</div>238    <div class="s-text">239      <div class="line1">maredharris@gmail.com</div>240      <div class="line2">maredharris@gmail.com</div>241    </div>242  </div>243 244  <!-- Blank compose area -->245  <div class="blank-area"></div>246 247  <!-- Keyboard mock -->248  <div class="keyboard">249    <div class="kb-topbar">250      <div class="kb-pill">251        <svg width="36" height="36" viewBox="0 0 24 24" fill="#CFCFCF">252          <circle cx="12" cy="12" r="10"/>253        </svg>254      </div>255      <div style="color:#CFCFCF;font-size:42px;">GIF</div>256      <div class="kb-pill">257        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF">258          <path d="M12 2l4 8h8l-6 5 2 8-8-5-8 5 2-8-6-5h8z"/>259        </svg>260      </div>261      <div class="kb-pill">262        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF">263          <circle cx="12" cy="8" r="4"/>264          <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>265        </svg>266      </div>267      <div class="kb-pill">268        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF">269          <path d="M12 4a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V8a4 4 0 0 0-4-4zm2 10a2 2 0 0 1-4 0V8a2 2 0 0 1 4 0v6z"/>270        </svg>271      </div>272      <div class="kb-pill">273        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF">274          <path d="M12 3C7 3 3 7 3 12s4 9 9 9 9-4 9-9-4-9-9-9z" />275        </svg>276      </div>277    </div>278 279    <!-- Letter rows -->280    <div class="keys-row">281      <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>282    </div>283    <div class="keys-row" style="padding-left:50px;padding-right:50px;">284      <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>285    </div>286    <div class="keys-row" style="padding-left:120px;padding-right:120px;">287      <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>288    </div>289 290    <div class="kb-bottom">291      <div class="key wide">@</div>292      <div class="key wide">😊</div>293      <div class="space"></div>294      <div class="key wide">.</div>295      <div class="enter">296        <svg width="46" height="46" viewBox="0 0 24 24" fill="#121212">297          <path d="M21 12l-8 8V4z"/>298        </svg>299      </div>300    </div>301  </div>302 303</div>304</body>305</html>