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;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 110px;21    padding: 0 36px;22    display: flex; align-items: center; justify-content: space-between;23    color: #EAEAEA;24    font-size: 44px; letter-spacing: 1px;25  }26  .sb-right { display: flex; gap: 28px; align-items: center; color: #DADADA; }27  .icon {28    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #CFCFCF;29  }30  .icon svg { width: 48px; height: 48px; fill: none; stroke: #CFCFCF; stroke-width: 4; }31 32  /* App bar */33  .app-bar {34    position: absolute; top: 110px; left: 0; right: 0;35    height: 170px;36    display: flex; align-items: center;37    padding: 0 28px 0 20px;38    border-bottom: 1px solid #222;39  }40  .app-left { display: flex; align-items: center; gap: 20px; }41  .back-btn { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }42  .title { font-size: 60px; font-weight: 600; color: #EDEDED; margin-left: 8px; }43  .app-right { margin-left: auto; display: flex; gap: 34px; align-items: center; }44  .app-right svg { stroke: #CFCFCF; }45 46  /* Fields */47  .fields { position: absolute; top: 280px; left: 0; right: 0; padding: 26px 36px 0 36px; }48  .field {49    padding: 26px 0;50    border-bottom: 1px solid #1E1E1E;51  }52  .label { color: #9E9E9E; font-size: 40px; margin-bottom: 10px; }53  .value { color: #EDEDED; font-size: 46px; }54  .to-row { display: flex; align-items: center; gap: 16px; }55  .to-input { flex: 1; color: #EDEDED; font-size: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }56  .chev { width: 50px; height: 50px; }57  .suggestion {58    display: flex; align-items: center; gap: 28px;59    padding: 34px 0 26px 0;60  }61  .avatar {62    width: 110px; height: 110px; border-radius: 55px; background: #5C78FF;63    display:flex; align-items:center; justify-content:center; color:#DDE4FF; font-weight:700;64  }65  .sug-col { display: flex; flex-direction: column; }66  .sug-name { font-size: 48px; color: #FFFFFF; }67  .sug-email { font-size: 38px; color: #A7A7A7; margin-top: 8px; }68 69  /* Message body placeholder */70  .body-area {71    position: absolute;72    top: 640px; left: 0; right: 0;73    bottom: 880px; /* space for keyboard */74    padding: 20px 36px;75    color: #888;76    font-size: 44px;77  }78  .body-placeholder {79    width: 100%;80    height: 100%;81    border: 1px dashed #2a2a2a;82    border-radius: 8px;83    display: flex; align-items: center; justify-content: center;84    color: #555;85  }86 87  /* Keyboard */88  .keyboard {89    position: absolute; left: 0; right: 0; bottom: 70px;90    height: 810px;91    background: #1B1B1B;92    border-top: 1px solid #222;93  }94  .kb-toolbar {95    height: 120px; display: flex; align-items: center; gap: 40px; padding: 0 36px; color:#CFCFCF;96    border-bottom: 1px solid #242424;97  }98  .kb-tool {99    width: 88px; height: 88px; border-radius: 20px; background: #2A2A2A;100    display: flex; align-items: center; justify-content: center;101    color:#BDBDBD; font-size: 36px;102  }103 104  .kb-rows { padding: 24px 24px; }105  .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin-bottom: 18px; }106  .key {107    background: #2C2C2C; color: #D8D8D8;108    height: 110px; border-radius: 22px;109    display: flex; align-items: center; justify-content: center;110    font-size: 46px; font-weight: 500;111  }112  .key.wide { grid-column: span 2; }113  .space { grid-column: span 5; }114  .enter { background:#2C2C2C; }115  .delete { background:#2C2C2C; }116  .bottom-nav {117    position: absolute; left: 0; right: 0; bottom: 22px;118    display:flex; justify-content:center;119  }120  .pill {121    width: 320px; height: 10px; background:#CFCFCF; border-radius: 8px; opacity: .85;122  }123 124  /* Simple utility icons */125  .dots-vert { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }126  .dots-vert span { display:block; width:10px; height:10px; background:#CFCFCF; border-radius:50%; margin:5px 0; }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- STATUS BAR -->133  <div class="status-bar">134    <div class="sb-left">8:16</div>135    <div class="sb-right">136      <div class="icon">137        <svg viewBox="0 0 24 24"><path d="M4 18h16"></path><path d="M8 18v-6"></path><path d="M12 18v-10"></path><path d="M16 18v-14"></path></svg>138      </div>139      <div class="icon">140        <svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 18 0"></path><path d="M6 12a6 6 0 0 1 12 0"></path><circle cx="12" cy="19" r="2" fill="#CFCFCF" stroke="none"></circle></svg>141      </div>142    </div>143  </div>144 145  <!-- APP BAR -->146  <div class="app-bar">147    <div class="app-left">148      <div class="back-btn">149        <svg viewBox="0 0 24 24">150          <path d="M15 19L8 12l7-7" stroke="#E0E0E0" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>151        </svg>152      </div>153      <div class="title">Compose</div>154    </div>155    <div class="app-right">156      <div class="icon">157        <svg viewBox="0 0 24 24"><path d="M7 7l10 10" stroke-linecap="round"></path><path d="M7 17V7h10" stroke-linecap="round"></path></svg>158      </div>159      <div class="icon">160        <svg viewBox="0 0 24 24"><path d="M3 20l18-8-18-8v6l12 2-12 2z" fill="#CFCFCF" stroke="none"></path></svg>161      </div>162      <div class="dots-vert">163        <span></span><span></span><span></span>164      </div>165    </div>166  </div>167 168  <!-- FIELDS -->169  <div class="fields">170    <div class="field">171      <div class="label">From</div>172      <div class="value">dbwscratch.test.id7@gmail.com</div>173    </div>174 175    <div class="field">176      <div class="label">To</div>177      <div class="to-row">178        <div class="to-input">dbwscratch.test.id9@gmail.com</div>179        <svg class="chev" viewBox="0 0 24 24">180          <path d="M6 9l6 6 6-6" stroke="#BEBEBE" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>181        </svg>182      </div>183      <div class="suggestion">184        <div class="avatar">•</div>185        <div class="sug-col">186          <div class="sug-name">dbwscratch.test.id9@gmail.com</div>187          <div class="sug-email">dbwscratch.test.id9@gmail.com</div>188        </div>189      </div>190    </div>191  </div>192 193  <!-- BODY AREA -->194  <div class="body-area">195    <div class="body-placeholder">Message body</div>196  </div>197 198  <!-- KEYBOARD -->199  <div class="keyboard">200    <div class="kb-toolbar">201      <div class="kb-tool">‹</div>202      <div class="kb-tool">⚙</div>203      <div class="kb-tool">G</div>204      <div class="kb-tool">🎨</div>205      <div class="kb-tool">📋</div>206      <div class="kb-tool">⋯</div>207      <div class="kb-tool">🔇</div>208    </div>209 210    <div class="kb-rows">211      <div class="row" style="grid-template-columns: repeat(10, 1fr);">212        <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>213        <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>214      </div>215 216      <div class="row" style="grid-template-columns: repeat(9, 1fr); padding: 0 36px;">217        <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>218        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>219      </div>220 221      <div class="row" style="grid-template-columns: repeat(9, 1fr);">222        <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>223        <div class="key">n</div><div class="key">m</div>224        <div class="key delete">⌫</div>225        <div class="key">⟲</div>226      </div>227 228      <div class="row" style="grid-template-columns: repeat(10, 1fr);">229        <div class="key wide">?123</div>230        <div class="key">@</div>231        <div class="key">😊</div>232        <div class="key space"> </div>233        <div class="key">.</div>234        <div class="key enter">↵</div>235      </div>236    </div>237  </div>238 239  <!-- Bottom navigation pill -->240  <div class="bottom-nav"><div class="pill"></div></div>241 242</div>243</body>244</html>