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 UI</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; border-radius: 0; box-shadow: none;13    font-family: Roboto, Arial, Helvetica, sans-serif; color: #EDEDED;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 100px; padding: 0 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #FFFFFF; font-size: 34px; letter-spacing: 0.5px;20  }21  .status-icons { display: flex; align-items: center; gap: 24px; }22  .toolbar {23    position: absolute; top: 100px; left: 0; right: 0;24    height: 100px; padding: 0 20px;25    display: flex; align-items: center; justify-content: space-between;26  }27  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 28px; }28  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px; }29  .icon svg { width: 48px; height: 48px; }30  .icon.grey svg path, .icon.grey svg circle, .icon.grey svg rect { fill: #BDBDBD; stroke: #BDBDBD; }31  .icon.green svg path { fill: #64DD17; }32  .compose {33    position: absolute; top: 200px; left: 0; right: 0;34    padding: 0 32px;35  }36  .row {37    padding: 18px 0;38    border-bottom: 1px solid #2A2A2A;39  }40  .row.flex { display: flex; align-items: center; justify-content: space-between; }41  .label { color: #9E9E9E; font-size: 28px; margin-bottom: 10px; }42  .value { font-size: 34px; }43  .dropdown { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; margin-left: 16px; }44  .to-row { padding: 22px 0; border-bottom: 1px solid #2A2A2A; }45  .chip {46    display: inline-flex; align-items: center; gap: 16px;47    border: 1px solid #5D5D5D; border-radius: 40px;48    padding: 12px 20px; color: #EDEDED; font-size: 32px;49  }50  .avatar {51    width: 56px; height: 56px; border-radius: 50%;52    background: #26A69A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px;53  }54  .subject-row { padding: 28px 0; border-bottom: 1px solid #2A2A2A; }55  .subject-placeholder { color: #9E9E9E; font-size: 34px; }56  .body-area {57    padding: 28px 0 0 0;58    font-size: 34px; line-height: 1.5;59    min-height: 760px;60  }61  .link {62    color: #FFFFFF;63    word-break: break-all;64  }65 66  /* Keyboard */67  .keyboard {68    position: absolute; left: 0; right: 0; bottom: 72px;69    height: 830px; background: #0F0F0F; border-top: 1px solid #1F1F1F;70  }71  .kb-top {72    height: 100px; display: flex; align-items: center; gap: 36px;73    padding: 0 32px; color: #BDBDBD; font-size: 28px;74  }75  .kb-top .top-icon { width: 64px; height: 64px; border-radius: 10px; background: #1E1E1E; display: flex; align-items: center; justify-content: center; }76  .kb-rows { padding: 10px 20px; }77  .kb-row { display: flex; gap: 12px; justify-content: center; margin: 22px 0; }78  .key {79    height: 110px; min-width: 96px; padding: 0 8px;80    background: #1D1D1D; border-radius: 18px; color: #EDEDED;81    display: flex; align-items: center; justify-content: center;82    font-size: 42px; box-shadow: inset 0 0 0 1px #2A2A2A;83  }84  .key.wide { min-width: 200px; }85  .space { flex: 1; min-width: 500px; }86  .key.enter { background: #BAFFB4; color: #0A0A0A; min-width: 140px; border-radius: 36px; font-weight: 700; }87  .key.green { background: #C7D9C1; color: #1A1A1A; border-radius: 36px; }88  .gesture-bar {89    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);90    width: 360px; height: 12px; background: #FFFFFF; border-radius: 12px; opacity: 0.9;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div>8:43</div>100    <div class="status-icons">101      <div style="font-size:28px; color:#BDBDBD;">N</div>102      <div style="font-size:28px; color:#BDBDBD;">LR</div>103      <div style="font-size:28px; color:#BDBDBD;">Gm</div>104      <div style="font-size:28px; color:#BDBDBD;">•</div>105      <!-- WiFi -->106      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">107        <path d="M2 8c5-4 15-4 20 0" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>108        <path d="M5 12c3-3 11-3 14 0" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>109        <path d="M8 16c2-2 6-2 8 0" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>110        <circle cx="12" cy="19" r="2" fill="#BDBDBD"/>111      </svg>112      <!-- Battery -->113      <svg width="50" height="44" viewBox="0 0 26 24" fill="none">114        <rect x="1" y="5" width="20" height="14" rx="2" stroke="#BDBDBD" stroke-width="2"/>115        <rect x="3" y="7" width="12" height="10" fill="#BDBDBD"/>116        <rect x="22" y="9" width="3" height="6" rx="1" fill="#BDBDBD"/>117      </svg>118      <div style="font-size:28px;">71%</div>119    </div>120  </div>121 122  <!-- Toolbar -->123  <div class="toolbar">124    <div class="toolbar-left">125      <div class="icon-btn icon grey">126        <!-- Back arrow -->127        <svg viewBox="0 0 24 24">128          <path d="M15 6l-6 6 6 6" fill="#BDBDBD"/>129        </svg>130      </div>131    </div>132    <div class="toolbar-right">133      <div class="icon-btn icon grey" title="Attach">134        <!-- Paperclip -->135        <svg viewBox="0 0 24 24">136          <path d="M8 7c0-2 2-3 4-2l6 6c2 2 0 5-3 5-2 0-3-1-4-2l-5-5c-1-1-1-3 0-4s3-1 4 0l6 6" fill="#BDBDBD"/>137        </svg>138      </div>139      <div class="icon-btn icon green" title="Send">140        <!-- Send (paper plane) -->141        <svg viewBox="0 0 24 24">142          <path d="M2 21l20-9L2 3l5 7 9 2-9 2-5 7z"/>143        </svg>144      </div>145      <div class="icon-btn icon grey" title="More">146        <!-- Kebab vertical -->147        <svg viewBox="0 0 24 24">148          <circle cx="12" cy="5" r="2"/>149          <circle cx="12" cy="12" r="2"/>150          <circle cx="12" cy="19" r="2"/>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Compose Content -->157  <div class="compose">158 159    <div class="row flex">160      <div>161        <div class="label">From</div>162        <div class="value">dbwscratch.test.id10@gmail.com</div>163      </div>164      <div class="dropdown icon grey">165        <svg viewBox="0 0 24 24">166          <path d="M6 9l6 6 6-6" fill="#BDBDBD"/>167        </svg>168      </div>169    </div>170 171    <div class="to-row flex">172      <div style="display:flex; flex-direction:column; flex:1;">173        <div class="label">To</div>174        <div class="chip">175          <div class="avatar">n</div>176          <div>naomi.rousseau@example.com</div>177        </div>178      </div>179      <div class="dropdown icon grey">180        <svg viewBox="0 0 24 24">181          <path d="M6 9l6 6 6-6" fill="#BDBDBD"/>182        </svg>183      </div>184    </div>185 186    <div class="subject-row">187      <div class="subject-placeholder">Subject</div>188    </div>189 190    <div class="body-area">191      <div class="link">192        https://www.dropbox.com/scl/fi/mixlv4ok2sih5zfqboffm/the-diary-of-anne-frank-1.pdf?rlkey=7grzb3w0vwx98msjtdzmh9hm7&dl=0193      </div>194    </div>195 196  </div>197 198  <!-- Keyboard -->199  <div class="keyboard">200    <div class="kb-top">201      <div class="top-icon">⌗</div>202      <div class="top-icon">☺</div>203      <div class="top-icon">GIF</div>204      <div class="top-icon">⚙</div>205      <div class="top-icon">G↔️</div>206      <div class="top-icon">🎨</div>207      <div class="top-icon">🎤</div>208    </div>209 210    <div class="kb-rows">211      <div class="kb-row">212        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>213        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>214        <div class="key">o</div><div class="key">p</div>215      </div>216      <div class="kb-row">217        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>218        <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>219        <div class="key">l</div>220      </div>221      <div class="kb-row">222        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>223        <div class="key">b</div><div class="key">n</div><div class="key">m</div>224        <div class="key wide">⌫</div>225      </div>226      <div class="kb-row">227        <div class="key green">?123</div>228        <div class="key">@</div>229        <div class="key">☺</div>230        <div class="key space"> </div>231        <div class="key">.</div>232        <div class="key enter">↲</div>233      </div>234    </div>235  </div>236 237  <div class="gesture-bar"></div>238</div>239</body>240</html>