GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Compose Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden; background:#FFFFFF;10    color:#222;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:90px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 30px; font-size:36px; color:#333;18  }19  .status-icons { display:flex; gap:24px; color:#666; font-size:30px; }20 21  /* Compose toolbar */22  .toolbar {23    position:absolute; top:90px; left:0; width:100%; height:150px;24    display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #e9e9e9;25  }26  .toolbar .title { font-size:54px; font-weight:500; margin-left:18px; }27  .toolbar .actions { margin-left:auto; display:flex; align-items:center; gap:36px; }28 29  .icon {30    width:72px; height:72px; display:inline-flex; align-items:center; justify-content:center;31  }32  .icon svg { width:60px; height:60px; fill:#444; }33 34  /* Fields */35  .content { position:absolute; left:0; top:240px; width:100%; }36  .row {37    display:flex; align-items:center; padding:30px 32px; border-bottom:1px solid #f0f0f0;38  }39  .label {40    width:120px; font-size:40px; color:#7a7a7a;41  }42  .value {43    font-size:40px; color:#222; flex:1;44  }45  .dropdown { margin-left:auto; }46  .dropdown svg { width:44px; height:44px; fill:#666; }47 48  /* Contact suggestion */49  .suggestion { padding:24px 32px; display:flex; align-items:center; gap:26px; }50  .avatar {51    width:96px; height:96px; border-radius:50%; background:#6C63D9; color:#fff;52    display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:500;53  }54  .suggestion .info { display:flex; flex-direction:column; }55  .suggestion .name { font-size:44px; color:#222; }56  .suggestion .email { font-size:34px; color:#6f6f6f; }57 58  /* Message area (blank space) */59  .message-area {60    height:800px; border-top:1px solid #fff; /* just to keep spacing clean */61  }62 63  /* Keyboard */64  .keyboard {65    position:absolute; bottom:0; left:0; width:100%; height:900px;66    background:#F3EEF7; border-top:1px solid #e1dfeb;67    padding:0 24px;68  }69  .kb-top {70    height:120px; display:flex; align-items:center; gap:36px; padding:0 10px;71  }72  .kb-top .tool {73    width:88px; height:88px; background:#EAE6F3; border:1px solid #ddd; border-radius:22px;74    display:flex; align-items:center; justify-content:center;75  }76  .kb-top svg { width:50px; height:50px; fill:#444; }77 78  .key-row { display:flex; justify-content:center; gap:16px; margin:22px 0; }79  .key {80    width:90px; height:120px; background:#FFFFFF; border:1px solid #E4E4E8; border-radius:26px;81    display:flex; align-items:center; justify-content:center; font-size:48px; color:#333;82  }83  .wide { width:130px; }84  .extra-wide { width:180px; }85  .space { width:480px; }86  .key.icon-key svg { width:56px; height:56px; fill:#333; }87 88  /* Misc */89  .muted { color:#777; }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status bar -->96  <div class="status-bar">97    <div>8:49</div>98    <div class="status-icons">99      <span>◦◦◦</span>100      <span>99▮</span>101      <span>•</span>102      <span>🔋</span>103    </div>104  </div>105 106  <!-- Compose toolbar -->107  <div class="toolbar">108    <div class="icon">109      <svg viewBox="0 0 100 100">110        <path d="M60 20 L30 50 L60 80" stroke="#444" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>111      </svg>112    </div>113    <div class="title">Compose</div>114    <div class="actions">115      <div class="icon">116        <svg viewBox="0 0 100 100">117          <path d="M60 25 c0 -15 -20 -15 -20 0 v45 c0 15 20 15 20 0 v-45" stroke="#444" stroke-width="10" fill="none" stroke-linecap="round"/>118          <path d="M40 45 c0 -20 35 -20 35 0 v35 c0 20 -35 20 -35 0 v-35" stroke="#444" stroke-width="8" fill="none" stroke-linecap="round"/>119        </svg>120      </div>121      <div class="icon">122        <svg viewBox="0 0 100 100">123          <path d="M15 50 L85 50 L50 85 Z" fill="#444"/>124          <path d="M15 50 L50 15 L85 50" fill="#444"/>125        </svg>126      </div>127      <div class="icon">128        <svg viewBox="0 0 100 100">129          <circle cx="50" cy="25" r="6" />130          <circle cx="50" cy="50" r="6" />131          <circle cx="50" cy="75" r="6" />132        </svg>133      </div>134    </div>135  </div>136 137  <!-- Content -->138  <div class="content">139    <div class="row">140      <div class="label">From</div>141      <div class="value">dbwscratch.test.id9@gmail.com</div>142    </div>143 144    <div class="row">145      <div class="label">To</div>146      <div class="value">dbwscratch.test.id4@gmail.com</div>147      <div class="dropdown">148        <svg viewBox="0 0 60 60">149          <path d="M12 22 L30 38 L48 22" />150        </svg>151      </div>152    </div>153 154    <div class="suggestion">155      <div class="avatar">d</div>156      <div class="info">157        <div class="name">dbwscratch.test.id4@gmail.com</div>158        <div class="email">dbwscratch.test.id4@gmail.com</div>159      </div>160    </div>161 162    <div class="message-area"></div>163  </div>164 165  <!-- Keyboard -->166  <div class="keyboard">167    <div class="kb-top">168      <div class="tool">169        <svg viewBox="0 0 100 100">170          <circle cx="30" cy="30" r="10"></circle>171          <circle cx="70" cy="30" r="10"></circle>172          <circle cx="30" cy="70" r="10"></circle>173          <circle cx="70" cy="70" r="10"></circle>174        </svg>175      </div>176      <div class="tool">177        <svg viewBox="0 0 100 100">178          <path d="M50 65 c20 0 20 -25 0 -25 c-20 0 -20 25 0 25 z" />179          <rect x="46" y="65" width="8" height="18" rx="4"></rect>180        </svg>181      </div>182      <div class="tool"><span style="font-size:34px; color:#333;">GIF</span></div>183      <div class="tool">184        <svg viewBox="0 0 100 100">185          <circle cx="50" cy="50" r="24" fill="none" stroke="#444" stroke-width="8"></circle>186          <circle cx="50" cy="50" r="6"></circle>187        </svg>188      </div>189      <div class="tool">190        <svg viewBox="0 0 100 100">191          <rect x="20" y="30" width="60" height="20" rx="10"></rect>192          <circle cx="35" cy="70" r="12"></circle>193          <circle cx="65" cy="70" r="12"></circle>194        </svg>195      </div>196      <div class="tool">197        <svg viewBox="0 0 100 100">198          <path d="M50 20 v45" stroke="#444" stroke-width="10" stroke-linecap="round" fill="none"/>199          <path d="M35 55 h30" stroke="#444" stroke-width="10" stroke-linecap="round" fill="none"/>200          <rect x="32" y="70" width="36" height="18" rx="9"></rect>201        </svg>202      </div>203    </div>204 205    <!-- Row 1 -->206    <div class="key-row">207      <div class="key">q</div>208      <div class="key">w</div>209      <div class="key">e</div>210      <div class="key">r</div>211      <div class="key">t</div>212      <div class="key">y</div>213      <div class="key">u</div>214      <div class="key">i</div>215      <div class="key">o</div>216      <div class="key">p</div>217    </div>218 219    <!-- Row 2 -->220    <div class="key-row">221      <div class="key">a</div>222      <div class="key">s</div>223      <div class="key">d</div>224      <div class="key">f</div>225      <div class="key">g</div>226      <div class="key">h</div>227      <div class="key">j</div>228      <div class="key">k</div>229      <div class="key">l</div>230    </div>231 232    <!-- Row 3 -->233    <div class="key-row">234      <div class="key wide">⇧</div>235      <div class="key">z</div>236      <div class="key">x</div>237      <div class="key">c</div>238      <div class="key">v</div>239      <div class="key">b</div>240      <div class="key">n</div>241      <div class="key">m</div>242      <div class="key wide icon-key">243        <svg viewBox="0 0 100 100">244          <path d="M30 30 L70 30 L70 70 L30 70 Z" fill="none" stroke="#333" stroke-width="8"/>245          <path d="M40 40 L60 60" stroke="#333" stroke-width="8"/>246          <path d="M60 40 L40 60" stroke="#333" stroke-width="8"/>247        </svg>248      </div>249    </div>250 251    <!-- Row 4 -->252    <div class="key-row">253      <div class="key extra-wide">?123</div>254      <div class="key wide">@</div>255      <div class="key wide">🙂</div>256      <div class="key space"></div>257      <div class="key wide">.</div>258      <div class="key extra-wide icon-key">259        <svg viewBox="0 0 100 100">260          <path d="M30 50 H75" stroke="#333" stroke-width="10" stroke-linecap="round"/>261          <path d="M60 35 L75 50 L60 65" stroke="#333" stroke-width="10" stroke-linecap="round" fill="none"/>262        </svg>263      </div>264    </div>265  </div>266 267</div>268</body>269</html>