GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Gmail Compose Mock</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:#111214;13    color:#eaeaea;14  }15  /* Status bar */16  .status-bar{17    position:absolute;top:0;left:0;right:0;18    height:90px;19    color:#cfcfcf;20    display:flex;align-items:center;justify-content:space-between;21    padding:0 36px;22    font-size:34px;letter-spacing:1px;23  }24  .status-right{display:flex;align-items:center;gap:28px;}25  .dot{width:10px;height:10px;background:#cfcfcf;border-radius:50%;}26  /* App bar */27  .app-bar{28    position:absolute;top:90px;left:0;right:0;29    height:150px;30    background:#1a1b1d;31    display:flex;align-items:center;32    padding:0 26px;33    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;34  }35  .app-left{display:flex;align-items:center;gap:26px;}36  .title{font-size:56px;font-weight:600;}37  .app-right{margin-left:auto;display:flex;align-items:center;gap:34px;}38  svg{display:block}39  .icon{width:54px;height:54px;fill:#cfcfcf}40  .send{fill:#e0e0e0}41  /* Content area */42  .content{43    position:absolute;top:240px;left:0;right:0;bottom:820px;44    overflow:hidden;45    padding:18px 36px;46  }47  .field{48    padding:28px 0;49    border-bottom:1px solid rgba(255,255,255,0.06);50  }51  .label{color:#9aa0a6;font-size:30px;margin-bottom:10px}52  .value{font-size:36px;color:#e5e5e5}53  .to-row{display:flex;align-items:center;justify-content:space-between}54  .subject{font-size:44px;line-height:1.3;color:#f2f2f2}55  .body{56    padding-top:24px;57    font-size:42px;line-height:1.42;color:#e6e6e6;58  }59  .link{color:#8ab4f8;text-decoration:underline;word-break:break-all}60  /* toolbar above keyboard */61  .quickbar{62    position:absolute;left:0;right:0;bottom:820px;63    height:88px;padding:0 24px;64    display:flex;align-items:center;gap:26px;65  }66  .qbtn{67    width:78px;height:78px;border-radius:18px;background:#2c2d31;68    color:#d8d8d8;font-size:28px;display:flex;align-items:center;justify-content:center;69    border:1px solid rgba(255,255,255,0.06);70  }71  .qbtn.small{width:120px}72  /* Keyboard */73  .keyboard{74    position:absolute;left:0;right:0;bottom:34px;height:786px;75    background:#181a1d;border-top:1px solid rgba(255,255,255,0.08);76    padding:24px 18px;77  }78  .key-row{display:flex;justify-content:space-between;margin:18px 6px;}79  .key{80    width:92px;height:122px;border-radius:16px;81    background:#2a2c31;border:1px solid rgba(255,255,255,0.05);82    color:#eee;display:flex;align-items:center;justify-content:center;83    font-size:44px;84  }85  .key.wide{width:140px}86  .key.space{width:520px;border-radius:20px;font-size:36px;color:#bcbcbc;background:#2a2c31}87  .key.dark{background:#25272b}88  .keyboard-top{89    display:flex;align-items:center;justify-content:space-between;90    padding:0 18px;margin-bottom:4px;91  }92  .suggest{display:flex;gap:18px}93  .pill{94    padding:14px 20px;border-radius:14px;background:#2a2c31;color:#d6d6d6;border:1px solid rgba(255,255,255,0.06);95    font-size:28px;96  }97  /* gesture bar */98  .gesture{99    position:absolute;left:340px;right:340px;bottom:10px;height:10px;border-radius:6px;background:#d9d9d9;opacity:0.65;100  }101  .down-chevron{width:40px;height:40px;fill:#9aa0a6}102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>12:33</div>110    <div class="status-right">111      <div class="dot"></div>112      <div class="dot"></div>113      <div style="width:18px;height:18px;border:2px solid #cfcfcf;border-radius:4px"></div>114    </div>115  </div>116 117  <!-- App bar -->118  <div class="app-bar">119    <div class="app-left">120      <!-- back -->121      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 5.5L8 12l7.5 6.5-1.8 2.1L4.5 12l9.2-8.6z"/></svg>122      <div class="title">Compose</div>123    </div>124    <div class="app-right">125      <!-- attach -->126      <svg class="icon" viewBox="0 0 24 24"><path d="M7 12.5V7.8A4.8 4.8 0 0 1 11.8 3c2.6 0 4.7 2.1 4.7 4.7v8a3.8 3.8 0 0 1-7.6 0V9.5h2v6.2a1.8 1.8 0 0 0 3.6 0v-8a2.7 2.7 0 0 0-5.4 0v4.8H7z"/></svg>127      <!-- send -->128      <svg class="icon send" viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2z"/></svg>129      <!-- more -->130      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>131    </div>132  </div>133 134  <!-- Content -->135  <div class="content">136    <div class="field">137      <div class="label">From</div>138      <div class="value">dbwscratch.test.id11@gmail.com</div>139    </div>140 141    <div class="field">142      <div class="to-row">143        <div class="label" style="font-size:36px;color:#9aa0a6">To</div>144        <svg class="down-chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>145      </div>146    </div>147 148    <div class="field">149      <div class="subject">150        Check out New Nike Air Deldon Legacy Easy On Basketball Court Shoes sz mens 13 wmns 14.5 on eBay!151      </div>152    </div>153 154    <div class="body">155      Check out New Nike Air Deldon Legacy Easy On Basketball Court Shoes sz mens 13 wmns 14.5 on eBay!156      <br><span class="link">https://www.ebay.com/itm/204473872479?mkcid=16&mkcvt=1&mkrid=711-127632-23570&ssspo=BQDLzihpTrm&sssrc=4429486&ssuid=kptu8_2frqm&var=&widget_ver=artemis&media=EMAIL</span>157    </div>158  </div>159 160  <!-- quick icons row (above keyboard) -->161  <div class="quickbar">162    <div class="qbtn">▦</div>163    <div class="qbtn">☺</div>164    <div class="qbtn">GIF</div>165    <div class="qbtn">⚙</div>166    <div style="flex:1"></div>167    <div class="qbtn">Gx</div>168    <div class="qbtn">🎨</div>169    <div class="qbtn">🎤</div>170  </div>171 172  <!-- Keyboard -->173  <div class="keyboard">174    <div class="keyboard-top">175      <div class="suggest">176        <div class="pill">qwerty</div>177        <div class="pill">typing</div>178        <div class="pill">English (US)</div>179      </div>180    </div>181 182    <div class="key-row">183      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>184      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>185      <div class="key">o</div><div class="key">p</div>186    </div>187 188    <div class="key-row">189      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>190      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>191      <div class="key">l</div>192    </div>193 194    <div class="key-row">195      <div class="key wide dark">⇧</div>196      <div class="key">z</div><div class="key">x</div><div class="key">c</div>197      <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>198      <div class="key wide dark">⌫</div>199    </div>200 201    <div class="key-row">202      <div class="key wide dark">?123</div>203      <div class="key wide dark">@</div>204      <div class="key space">space</div>205      <div class="key dark">.</div>206      <div class="key wide dark">↵</div>207    </div>208  </div>209 210  <!-- gesture bar -->211  <div class="gesture"></div>212 213</div>214</body>215</html>