GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8" />4<meta name="viewport" content="width=1080, initial-scale=1.0" />5<title>Gmail Compose Dark - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #101216;14    color: #EDEFF2;15  }16 17  /* Status bar */18  .statusbar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEFF2;25    font-size: 44px;26    letter-spacing: 1px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .ico {34    width: 46px;35    height: 46px;36  }37 38  /* Toolbar */39  .toolbar {40    height: 120px;41    padding: 0 28px;42    display: flex;43    align-items: center;44    justify-content: space-between;45  }46  .toolbar-left, .toolbar-right {47    display: flex; align-items: center; gap: 32px;48  }49 50  /* Fields */51  .sheet {52    padding: 0 34px;53  }54  .row {55    display: flex;56    align-items: center;57    gap: 26px;58    height: 130px;59    border-bottom: 1px solid #22262C;60  }61  .label {62    color: #A7ABB2;63    width: 130px;64    font-size: 44px;65  }66  .value {67    flex: 1;68    font-size: 44px;69    white-space: nowrap;70    overflow: hidden;71    text-overflow: ellipsis;72  }73  .placeholder {74    color: #9AA0A6;75  }76  .compose-area {77    height: 1080px;78    padding: 34px 0;79    font-size: 48px;80    color: #A7ABB2;81  }82 83  /* Keyboard mock */84  .keyboard {85    position: absolute;86    left: 0;87    right: 0;88    bottom: 0;89    height: 850px;90    background: #15181D;91    border-top: 1px solid #21262C;92    padding: 36px 30px 120px;93    box-sizing: border-box;94  }95  .kb-row {96    display: grid;97    grid-template-columns: repeat(10, 1fr);98    gap: 18px;99    margin-bottom: 22px;100  }101  .key {102    background: #23272F;103    color: #E5E7EB;104    height: 120px;105    border-radius: 20px;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 44px;110  }111  .key.wide { grid-column: span 2; }112  .key.xwide { grid-column: span 3; }113  .kb-bottom {114    margin-top: 16px;115    display: grid;116    grid-template-columns: 130px 130px 1fr 130px 130px;117    gap: 18px;118    align-items: center;119  }120  .home-indicator {121    position: absolute;122    bottom: 30px;123    left: 50%;124    transform: translateX(-50%);125    width: 520px;126    height: 12px;127    background: #E5E7EB;128    opacity: .35;129    border-radius: 8px;130  }131 132  /* Small chevron in To row */133  .chev {134    width: 28px; height: 28px; margin-left: auto; opacity: .8;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status bar -->142  <div class="statusbar">143    <div>9:28</div>144    <div class="status-icons">145      <!-- cell -->146      <svg class="ico" viewBox="0 0 24 24" fill="#EDEFF2">147        <rect x="2" y="14" width="3" height="8" rx="1"></rect>148        <rect x="7" y="11" width="3" height="11" rx="1" opacity=".85"></rect>149        <rect x="12" y="8" width="3" height="14" rx="1" opacity=".7"></rect>150        <rect x="17" y="5" width="3" height="17" rx="1" opacity=".55"></rect>151      </svg>152      <!-- wifi -->153      <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="#EDEFF2" stroke-width="2">154        <path d="M2 8c5-4 15-4 20 0"></path>155        <path d="M5 12c3-3 11-3 14 0"></path>156        <path d="M8 16c2-2 6-2 8 0"></path>157        <circle cx="12" cy="19" r="1.5" fill="#EDEFF2"></circle>158      </svg>159      <!-- battery -->160      <svg class="ico" viewBox="0 0 28 24" fill="none" stroke="#EDEFF2" stroke-width="2">161        <rect x="1" y="6" width="22" height="12" rx="2"></rect>162        <rect x="3" y="8" width="18" height="8" rx="1" fill="#EDEFF2"></rect>163        <rect x="23.5" y="9" width="3" height="6" rx="1" fill="#EDEFF2" stroke="none"></rect>164      </svg>165    </div>166  </div>167 168  <!-- Toolbar with back, attach, send, more -->169  <div class="toolbar">170    <div class="toolbar-left">171      <!-- back arrow -->172      <svg class="ico" viewBox="0 0 24 24" fill="#EDEFF2">173        <path d="M14 6 8 12l6 6V6Z"></path>174      </svg>175    </div>176    <div class="toolbar-right">177      <!-- attach -->178      <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="#EDEFF2" stroke-width="2">179        <path d="M7 12v5a5 5 0 0 0 10 0V8a3 3 0 0 0-6 0v9a1 1 0 0 0 2 0V9"></path>180      </svg>181      <!-- send -->182      <svg class="ico" viewBox="0 0 24 24" fill="#EDEFF2">183        <path d="M2 21 23 12 2 3l3 7 10 2-10 2-3 7Z"></path>184      </svg>185      <!-- more (kebab) -->186      <svg class="ico" viewBox="0 0 24 24" fill="#EDEFF2">187        <circle cx="12" cy="5" r="2"></circle>188        <circle cx="12" cy="12" r="2"></circle>189        <circle cx="12" cy="19" r="2"></circle>190      </svg>191    </div>192  </div>193 194  <!-- Fields -->195  <div class="sheet">196    <div class="row">197      <div class="label">From</div>198      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>199    </div>200    <div class="row">201      <div class="label">To</div>202      <div class="value placeholder">Add recipients</div>203      <svg class="chev" viewBox="0 0 24 24" fill="#B0B6BC">204        <path d="M7 10l5 5 5-5H7z"></path>205      </svg>206    </div>207    <div class="row">208      <div class="label">Subject</div>209      <div class="value placeholder">Subject</div>210    </div>211    <div class="compose-area placeholder">212      Compose email213    </div>214  </div>215 216  <!-- Keyboard mock -->217  <div class="keyboard">218    <div class="kb-row">219      <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>220      <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>221    </div>222    <div class="kb-row">223      <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>224      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>225    </div>226    <div class="kb-row">227      <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>228      <div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key">↵</div>229    </div>230    <div class="kb-bottom">231      <div class="key">?123</div>232      <div class="key">@</div>233      <div class="key xwide">space</div>234      <div class="key">.</div>235      <div class="key">→</div>236    </div>237    <div class="home-indicator"></div>238  </div>239 240</div>241</body>242</html>