GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Forward Email UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-size: 36px;25  }26  .status-right { display:flex; gap:24px; align-items:center; opacity:0.9; }27  .dot { width:10px; height:10px; background:#EDEDED; border-radius:50%; display:inline-block; }28 29  /* App bar */30  .app-bar {31    height: 120px;32    display: flex;33    align-items: center;34    padding: 0 24px;35    border-bottom: 1px solid #2A2A2A;36  }37  .app-title {38    font-size: 48px;39    font-weight: 600;40    margin-left: 18px;41    display:flex;42    align-items:center;43    gap:14px;44  }45  .app-actions {46    margin-left: auto;47    display: flex;48    gap: 34px;49    align-items: center;50  }51  .icon {52    width: 52px;53    height: 52px;54    fill: #EDEDED;55    opacity: 0.9;56  }57 58  /* Form area */59  .content {60    position: absolute;61    left: 0;62    right: 0;63    top: 210px;64    bottom: 880px; /* leave space for keyboard */65    overflow: hidden;66  }67  .row {68    padding: 26px 32px;69    border-bottom: 1px solid #2A2A2A;70  }71  .label {72    color: #9AA0A6;73    font-size: 34px;74    margin-bottom: 8px;75  }76  .value {77    font-size: 40px;78    color: #EDEDED;79    display:flex;80    align-items:center;81    justify-content: space-between;82  }83  .dropdown {84    width: 36px; height: 36px; fill: #9AA0A6;85  }86  .subject {87    font-size: 44px;88    padding: 32px;89    border-bottom: 1px solid #2A2A2A;90  }91  .compose-area {92    padding: 32px;93    color: #C9C9C9;94    font-size: 44px;95  }96  .ellipsis {97    padding: 28px 32px;98    color: #9AA0A6;99    letter-spacing: 6px;100    font-size: 46px;101  }102 103  /* Keyboard mock */104  .keyboard {105    position: absolute;106    left: 0; right: 0; bottom: 0;107    height: 880px;108    background: #181818;109    border-top: 1px solid #2A2A2A;110  }111  .kb-top {112    height: 120px;113    display:flex;114    align-items:center;115    justify-content: space-between;116    padding: 0 28px;117  }118  .kb-badge {119    width: 86px; height: 86px;120    border-radius: 22px;121    background:#242424;122    border:1px solid #2F2F2F;123    color:#CFCFCF;124    display:flex; align-items:center; justify-content:center;125    font-size: 34px;126  }127  .keys { padding: 10px 16px 0; }128  .row-keys {129    display:flex;130    justify-content: space-between;131    padding: 14px 12px;132  }133  .key {134    height: 120px;135    min-width: 88px;136    border-radius: 22px;137    background:#2A2A2A;138    color:#EDEDED;139    display:flex; align-items:center; justify-content:center;140    font-size: 44px;141    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);142  }143  .key.wide { min-width: 150px; }144  .key.space { flex: 1; margin: 0 16px; }145  .key.small { min-width: 110px; }146  .kb-bottom {147    position:absolute; left:0; right:0; bottom:0;148    height: 120px;149    display:flex; align-items:center; justify-content:center;150  }151  .home-indicator {152    width: 520px; height: 10px; background:#E0E0E0; opacity:0.35; border-radius: 8px;153  }154  .time {155    font-weight: 600;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status Bar -->163  <div class="status-bar">164    <div class="time">2:43</div>165    <div class="status-right">166      <span class="dot"></span>167      <span class="dot"></span>168      <span class="dot"></span>169      <svg class="icon" viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 16h16v-3l-5-5-4 4-3-3-4 4v3z"/></svg>170      <svg class="icon" viewBox="0 0 24 24"><path d="M16 4h2v2h-2zM11 4h2v2h-2zM6 4h2v2H6zM4 8h16v12H4z"/></svg>171    </div>172  </div>173 174  <!-- App Bar -->175  <div class="app-bar">176    <!-- back arrow -->177    <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/></svg>178    <div class="app-title">179      <span>Forward</span>180      <svg class="dropdown" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>181    </div>182    <div class="app-actions">183      <!-- attach -->184      <svg class="icon" viewBox="0 0 24 24"><path d="M7 17a5 5 0 0 0 8 0l4-5a3 3 0 1 0-5-3l-4 5a1 1 0 0 0 2 1l4-5 1.5 1.3-4 5a3 3 0 0 1-5-3l4-5 1.6 1.2-4 5A1 1 0 0 0 7 17z"/></svg>185      <!-- send -->186      <svg class="icon" viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>187      <!-- more -->188      <svg class="icon" viewBox="0 0 24 24"><path d="M12 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>189    </div>190  </div>191 192  <!-- Content Area -->193  <div class="content">194    <div class="row">195      <div class="label">From</div>196      <div class="value">dbwscratch.test.id8@gmail.com</div>197    </div>198 199    <div class="row">200      <div class="label">To</div>201      <div class="value">202        <span style="color:#555;"> </span>203        <svg class="dropdown" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>204      </div>205    </div>206 207    <div class="subject">Fwd: OFFICIAL WEEKEND PARTY</div>208 209    <div class="compose-area">Compose email</div>210    <div class="ellipsis">...</div>211  </div>212 213  <!-- Keyboard Mock -->214  <div class="keyboard">215    <div class="kb-top">216      <div class="kb-badge">▦</div>217      <div style="display:flex; gap:22px;">218        <div class="kb-badge">☺</div>219        <div class="kb-badge">GIF</div>220        <div class="kb-badge">⚙</div>221        <div class="kb-badge">G↔︎</div>222        <div class="kb-badge">🎨</div>223        <div class="kb-badge">🎤</div>224      </div>225    </div>226 227    <div class="keys">228      <div class="row-keys">229        <div class="key">q</div><div class="key">w</div><div class="key">e</div>230        <div class="key">r</div><div class="key">t</div><div class="key">y</div>231        <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>232      </div>233      <div class="row-keys">234        <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>235        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>236      </div>237      <div class="row-keys">238        <div class="key wide">⇧</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">⌫</div>241      </div>242      <div class="row-keys">243        <div class="key small">?123</div>244        <div class="key small">@</div>245        <div class="key small">☺</div>246        <div class="key space"></div>247        <div class="key small">.</div>248        <div class="key small">↵</div>249      </div>250    </div>251 252    <div class="kb-bottom">253      <div class="home-indicator"></div>254    </div>255  </div>256 257</div>258</body>259</html>