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>Email Compose UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#121212; color:#E5E5E5;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; right:0;19    height:110px; padding:0 36px;20    display:flex; align-items:center; justify-content:space-between;21    color:#D8D8D8; font-size:40px; letter-spacing:0.5px;22  }23  .status-right { display:flex; align-items:center; gap:28px; }24  .status-dot { width:14px; height:14px; background:#D8D8D8; border-radius:50%; display:inline-block; }25  .status-icon { width:42px; height:42px; opacity:0.9; }26  .icon-svg { width:42px; height:42px; fill:#D8D8D8; }27 28  /* App bar */29  .app-bar {30    position:absolute; top:110px; left:0; right:0;31    height:140px; display:flex; align-items:center;32    padding:0 24px; gap:30px;33    border-bottom:1px solid #2A2A2A;34  }35  .app-spacer { flex:1; }36  .app-actions { display:flex; align-items:center; gap:40px; }37  .icon-large { width:54px; height:54px; fill:#E0E0E0; opacity:0.95; }38 39  /* Content area */40  .content {41    position:absolute; top:250px; left:0; right:0;42    bottom:900px; /* reserve keyboard space */43    padding:24px 32px;44  }45  .row { display:flex; align-items:center; gap:22px; }46  .label { color:#B0B0B0; font-size:34px; }47  .value { color:#FFFFFF; font-size:36px; }48  .divider { height:1px; background:#2C2C2C; margin:26px 0; }49  .subject { font-size:48px; color:#FFFFFF; margin-top:10px; }50  .compose-placeholder { color:#B7B7B7; font-size:42px; margin-top:46px; }51  .ellipsis { color:#A5A5A5; font-size:64px; margin-top:36px; letter-spacing:10px; }52 53  /* Keyboard */54  .keyboard {55    position:absolute; left:0; right:0; bottom:0;56    height:900px; background:#1D1F22;57    border-top:1px solid #2B2B2B;58    padding:26px 24px 80px;59    box-sizing:border-box;60  }61  .kb-topbar {62    display:flex; align-items:center; gap:36px; padding-bottom:16px; color:#CFCFCF;63  }64  .kb-pill {65    width:72px; height:72px; border-radius:16px; background:#2B2E32; display:flex; align-items:center; justify-content:center;66    border:1px solid #3A3A3A; font-size:34px;67  }68  .kb-toptext { color:#8E8E8E; font-weight:bold; }69  .key-row { display:flex; justify-content:center; gap:16px; margin-top:20px; }70  .key {71    width:86px; height:120px; border-radius:24px;72    background:#2B2E32; border:1px solid #3A3A3A;73    display:flex; align-items:center; justify-content:center;74    color:#EDEDED; font-size:44px;75    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);76  }77  .key-wide { width:150px; }78  .key-back { width:160px; }79  .spacebar {80    flex:1; height:120px; border-radius:28px;81    background:#2B2E32; border:1px solid #3A3A3A; color:#EDEDED;82    display:flex; align-items:center; justify-content:center;83    font-size:34px;84  }85  .key-send { width:160px; background:#A9C6E8; border-color:#A9C6E8; color:#0F0F10; font-weight:bold; }86  .kb-bottom-row {87    display:flex; align-items:center; gap:16px; margin-top:24px; padding:0 10px;88  }89 90  /* Navigation handle */91  .nav-handle {92    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);93    width:360px; height:10px; background:#F0F0F0; border-radius:10px; opacity:0.9;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div>9:07</div>103    <div class="status-right">104      <span class="status-dot"></span>105      <span class="status-dot"></span>106      <span class="status-dot"></span>107      <span class="status-dot"></span>108      <svg class="status-icon icon-svg viewBox" viewBox="0 0 24 24">109        <path d="M3 18l9-12 9 12z"></path>110      </svg>111      <svg class="status-icon icon-svg" viewBox="0 0 24 24">112        <path d="M3 8h18v2H3zm0 6h13v2H3z"></path>113      </svg>114      <svg class="status-icon icon-svg" viewBox="0 0 24 24">115        <path d="M6 7h12a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2zm6 11a3 3 0 003-3h-6a3 3 0 003 3z"></path>116      </svg>117    </div>118  </div>119 120  <!-- App bar -->121  <div class="app-bar">122    <svg class="icon-large" viewBox="0 0 24 24">123      <path d="M15 6l-6 6 6 6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>124    </svg>125    <div class="app-spacer"></div>126    <div class="app-actions">127      <svg class="icon-large" viewBox="0 0 24 24">128        <path d="M7 3c2 0 3 2 3 3s-1 3-3 3-3-2-3-3 1-3 3-3zm1 6l9 9c1 1 1 3 0 4s-3 1-4 0l-9-9" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/>129      </svg>130      <svg class="icon-large" viewBox="0 0 24 24">131        <path d="M3 12l18-9-7 18-3-7-8-2z" fill="#E0E0E0"/>132      </svg>133      <svg class="icon-large" viewBox="0 0 24 24">134        <circle cx="12" cy="5" r="2" fill="#E0E0E0"/><circle cx="12" cy="12" r="2" fill="#E0E0E0"/><circle cx="12" cy="19" r="2" fill="#E0E0E0"/>135      </svg>136    </div>137  </div>138 139  <!-- Content -->140  <div class="content">141    <div class="row">142      <div class="label">From</div>143      <div class="value">dbwscratch.test.id2@gmail.com</div>144    </div>145 146    <div class="divider"></div>147 148    <div class="row" style="justify-content:space-between;">149      <div class="row" style="gap:16px;">150        <svg class="icon-svg" viewBox="0 0 24 24" style="width:44px; height:44px;">151          <path d="M19 12H7l5-5-1.4-1.4L3.2 12l7.4 6.4L12 17l-5-5h12v-2z" fill="#CFCFCF"/>152        </svg>153      </div>154      <svg class="icon-svg" viewBox="0 0 24 24" style="width:44px; height:44px;">155        <path d="M7 10l5 5 5-5z" fill="#CFCFCF"/>156      </svg>157    </div>158 159    <div class="divider"></div>160 161    <div class="subject">Fwd: upcoming events</div>162 163    <div class="compose-placeholder">Compose email</div>164 165    <div class="ellipsis">...</div>166  </div>167 168  <!-- Keyboard -->169  <div class="keyboard">170    <div class="kb-topbar">171      <div class="kb-pill">▦</div>172      <div class="kb-pill">☺</div>173      <div class="kb-toptext">GIF</div>174      <div class="kb-pill">⚙</div>175      <div class="kb-pill">G⟲</div>176      <div class="kb-pill">🎨</div>177      <div class="kb-pill">🎤</div>178    </div>179 180    <div class="key-row">181      <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>182      <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>183    </div>184    <div class="key-row">185      <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>186      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>187    </div>188    <div class="key-row">189      <div class="key-wide">⇧</div>190      <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>191      <div class="key-back">⌫</div>192    </div>193    <div class="kb-bottom-row">194      <div class="key-wide">?123</div>195      <div class="key-wide">@</div>196      <div class="key-wide">☺</div>197      <div class="spacebar">space</div>198      <div class="key-wide">.</div>199      <div class="key-send">↗</div>200    </div>201  </div>202 203  <!-- Navigation handle -->204  <div class="nav-handle"></div>205</div>206</body>207</html>