GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    height: 84px; padding: 0 32px;17    display: flex; align-items: center; justify-content: space-between;18    color: #F5F5F5; font-size: 34px; letter-spacing: 0.5px;19  }20  .status-left { display: flex; align-items: center; gap: 14px; }21  .status-right { display: flex; align-items: center; gap: 18px; opacity: 0.9; }22  .status-dot { width: 14px; height: 14px; border-radius: 50%; background:#F5F5F5; display:inline-block; }23 24  /* Header with actions */25  .header {26    height: 120px; border-bottom: 1px solid #272727;27    display: flex; align-items: center;28    padding: 0 24px;29  }30  .header .left { width: 80px; display:flex; align-items:center; justify-content:flex-start; }31  .header .actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }32  .icon { width: 48px; height: 48px; }33  .icon svg { width: 100%; height: 100%; }34 35  /* Fields */36  .content { padding: 10px 24px 0 24px; }37  .field {38    height: 120px; border-bottom: 1px solid #242424;39    display: flex; align-items: center;40    color: #DADADA;41  }42  .field .label {43    width: 140px; font-size: 36px; color: #B7BDC6;44  }45  .field .value, .field .placeholder {46    flex: 1; font-size: 38px; color: #E1E1E1;47  }48  .field .placeholder { color: #888; }49  .field .chevron {50    width: 48px; height: 48px; display:flex; align-items:center; justify-content:center;51  }52  .field .chevron svg { width: 36px; height: 36px; }53 54  /* Compose area */55  .compose-area {56    height: 956px; padding: 24px; font-size: 44px; color: #CFCFCF;57  }58  .compose-placeholder {59    margin-top: 12px; color: #B9B9B9;60  }61 62  /* Attachment card */63  .attachment-card {64    margin-top: 60px;65    height: 150px; background: #3b4c5b; border-radius: 18px;66    display: flex; align-items: center; padding: 22px 24px;67    color: #FFFFFF;68  }69  .pdf-square {70    width: 76px; height: 76px; border-radius: 12px; background: #E53935;71    display:flex; align-items:center; justify-content:center; font-weight: 700; letter-spacing: 0.5px;72  }73  .att-text { margin-left: 22px; }74  .att-text .title { font-size: 40px; }75  .att-text .size { font-size: 30px; color: #D1D9E0; margin-top: 6px; }76  .att-close {77    margin-left: auto; width: 64px; height: 64px;78    border-radius: 50%; display:flex; align-items:center; justify-content:center;79    color:#FFFFFF; font-size: 42px; opacity: 0.9;80  }81 82  /* Keyboard mock */83  .keyboard {84    position: absolute; bottom: 0; left: 0; right: 0;85    height: 850px; background: #181818; border-top: 1px solid #2a2a2a;86    padding: 30px 24px;87  }88  .keys-row { display: flex; gap: 18px; justify-content: space-between; margin-bottom: 32px; }89  .key {90    flex: 1; height: 120px; background: #2B2B2B; color: #EAEAEA;91    border-radius: 22px; display:flex; align-items:center; justify-content:center;92    font-size: 46px;93  }94  .key.small { flex: 0 0 110px; }95  .key.mid { flex: 0 0 140px; }96  .spacebar-row { display:flex; gap:18px; align-items:center; }97  .space { flex: 1; height: 140px; background:#2B2B2B; border-radius: 26px; }98  .func { flex: 0 0 140px; height: 140px; background:#2B2B2B; border-radius: 26px; }99  .enter { flex: 0 0 180px; height: 140px; background:#A7B8C9; color:#111; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:600; }100 101  /* Helper icons styling */102  .stroke-icon path, .stroke-icon polyline, .stroke-icon line {103    stroke: #EDEDED; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- STATUS BAR -->111  <div class="status-bar">112    <div class="status-left">113      <div>10:17</div>114    </div>115    <div class="status-right">116      <span class="status-dot"></span>117      <span class="status-dot" style="background:#9E9E9E;"></span>118      <span class="status-dot" style="background:#BDBDBD;"></span>119    </div>120  </div>121 122  <!-- HEADER -->123  <div class="header">124    <div class="left icon">125      <!-- Back Arrow -->126      <svg viewBox="0 0 48 48" class="stroke-icon">127        <polyline points="30,8 14,24 30,40"></polyline>128      </svg>129    </div>130 131    <div class="actions">132      <!-- Paperclip -->133      <div class="icon">134        <svg viewBox="0 0 48 48" class="stroke-icon">135          <path d="M18 18 l14 14 c5 5 -2 12 -7 7 l-15 -15 c-6 -6 3 -15 9 -9 l12 12"></path>136        </svg>137      </div>138      <!-- Send -->139      <div class="icon">140        <svg viewBox="0 0 48 48" class="stroke-icon">141          <polygon points="6,24 42,12 26,24 42,36" fill="#EDEDED"></polygon>142        </svg>143      </div>144      <!-- Vertical menu -->145      <div class="icon">146        <svg viewBox="0 0 48 48">147          <circle cx="24" cy="10" r="4" fill="#EDEDED"></circle>148          <circle cx="24" cy="24" r="4" fill="#EDEDED"></circle>149          <circle cx="24" cy="38" r="4" fill="#EDEDED"></circle>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- CONTENT FIELDS -->156  <div class="content">157    <div class="field">158      <div class="label">From</div>159      <div class="value">ffionh41@gmail.com</div>160      <div class="chevron">161        <svg viewBox="0 0 48 48" class="stroke-icon">162          <polyline points="12,18 24,30 36,18"></polyline>163        </svg>164      </div>165    </div>166 167    <div class="field">168      <div class="label">To</div>169      <div class="placeholder"></div>170      <div class="chevron">171        <svg viewBox="0 0 48 48" class="stroke-icon">172          <polyline points="12,18 24,30 36,18"></polyline>173        </svg>174      </div>175    </div>176 177    <div class="field">178      <div class="label">Subject</div>179      <div class="placeholder"></div>180    </div>181 182    <div class="compose-area">183      <div class="compose-placeholder">Compose email</div>184 185      <!-- Attachment -->186      <div class="attachment-card">187        <div class="pdf-square">PDF</div>188        <div class="att-text">189          <div class="title">Upcoming Events .pdf</div>190          <div class="size">18 KB</div>191        </div>192        <div class="att-close">×</div>193      </div>194    </div>195  </div>196 197  <!-- KEYBOARD MOCK -->198  <div class="keyboard">199    <!-- row 1 -->200    <div class="keys-row">201      <div class="key">q</div>202      <div class="key">w</div>203      <div class="key">e</div>204      <div class="key">r</div>205      <div class="key">t</div>206      <div class="key">y</div>207      <div class="key">u</div>208      <div class="key">i</div>209      <div class="key">o</div>210      <div class="key">p</div>211    </div>212    <!-- row 2 -->213    <div class="keys-row">214      <div class="key">a</div>215      <div class="key">s</div>216      <div class="key">d</div>217      <div class="key">f</div>218      <div class="key">g</div>219      <div class="key">h</div>220      <div class="key">j</div>221      <div class="key">k</div>222      <div class="key">l</div>223    </div>224    <!-- row 3 -->225    <div class="keys-row">226      <div class="key small">⬆</div>227      <div class="key">z</div>228      <div class="key">x</div>229      <div class="key">c</div>230      <div class="key">v</div>231      <div class="key">b</div>232      <div class="key">n</div>233      <div class="key">m</div>234      <div class="key mid">⌫</div>235    </div>236    <!-- bottom row -->237    <div class="spacebar-row">238      <div class="func">@</div>239      <div class="func">😊</div>240      <div class="space"></div>241      <div class="func">.</div>242      <div class="enter">↵</div>243    </div>244  </div>245 246</div>247</body>248</html>