GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  :root{8    --bg:#121212;9    --surface:#1c1c1c;10    --surface-2:#171717;11    --border:#2a2a2a;12    --text:#ffffff;13    --muted:#9aa0a6;14    --chip:#2b2b2b;15    --key:#2e2e2e;16    --key-text:#e6e6e6;17  }18  body{ margin:0; padding:0; background:transparent; font-family:Arial, Helvetica, sans-serif; }19  #render-target{20    width:1080px; height:2400px;21    position:relative; overflow:hidden;22    background:var(--bg);23    color:var(--text);24  }25  /* Status bar */26  .status-bar{27    position:absolute; top:0; left:0; right:0;28    height:110px; padding:0 40px;29    display:flex; align-items:center; justify-content:space-between;30    color:#eaeaea; font-weight:600; font-size:40px;31  }32  .status-icons{ display:flex; align-items:center; gap:26px; }33  .status-icons .icon{ width:44px; height:44px; opacity:0.85; }34  /* App bar */35  .app-bar{36    position:absolute; top:110px; left:0; right:0;37    height:140px; padding:0 28px;38    display:flex; align-items:center; justify-content:space-between;39  }40  .app-left{ display:flex; align-items:center; gap:24px; }41  .app-right{ display:flex; align-items:center; gap:38px; }42  .icon-btn{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; }43  .icon-btn svg{ width:60px; height:60px; fill:#cfcfcf; }44  /* Content */45  .content{46    position:absolute; top:250px; left:0; right:0; bottom:920px;47    padding:10px 40px 0 40px;48  }49  .row{50    padding:38px 0;51    border-bottom:1px solid var(--border);52    display:flex; align-items:center; gap:28px;53  }54  .label{ color:var(--muted); font-size:36px; width:150px; }55  .value{ font-size:38px; color:#e9e9e9; }56  .to-chip{57    display:flex; align-items:center; gap:22px;58    background:var(--chip); border:1px solid #3a3a3a;59    padding:18px 26px; border-radius:999px; color:#eee; font-size:36px;60  }61  .avatar{62    width:70px; height:70px; border-radius:50%;63    background:#8b6a5a; display:flex; align-items:center; justify-content:center;64    font-weight:700; font-size:36px;65  }66  .caret{ width:30px; height:30px; margin-left:10px; }67  .subject{ font-size:56px; color:#fff; }68  .body-area{ padding-top:40px; font-size:46px; color:var(--muted); }69  /* Suggestions bar above keyboard */70  .suggestions{71    position:absolute; left:0; right:0; bottom:820px;72    height:100px; background:var(--surface);73    display:flex; align-items:center; gap:40px; padding:0 30px; border-top:1px solid var(--border);74  }75  .pill{ color:#eaeaea; font-size:38px; }76  .spacer{ flex:1; }77  /* Keyboard */78  .keyboard{79    position:absolute; left:0; right:0; bottom:0;80    height:820px; background:var(--surface-2);81    border-top:1px solid var(--border);82    display:flex; flex-direction:column; gap:26px; padding:26px 24px 80px 24px;83  }84  .key-row{ display:flex; gap:18px; justify-content:center; }85  .key{86    background:var(--key); color:var(--key-text);87    border-radius:24px; min-width:90px; height:120px;88    display:flex; align-items:center; justify-content:center;89    font-size:46px; box-shadow:inset 0 0 0 1px #3a3a3a;90  }91  .key.wide{ min-width:160px; }92  .space{ flex:1; min-width:420px; }93  .gesture-bar{94    position:absolute; left:300px; right:300px; bottom:20px; height:12px;95    background:#cfcfcf; border-radius:8px; opacity:0.8;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div class="time">9:30</div>105    <div class="status-icons">106      <!-- simple status icons -->107      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="8" width="3" height="8" fill="#e0e0e0"/><rect x="7" y="6" width="3" height="10" fill="#e0e0e0"/><rect x="12" y="4" width="3" height="12" fill="#e0e0e0"/><rect x="17" y="2" width="3" height="14" fill="#e0e0e0"/></svg>108      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18l9-9 9 9" stroke="#e0e0e0" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="2" fill="#e0e0e0"/></svg>109      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="none" stroke="#e0e0e0" stroke-width="2"/><rect x="16" y="8" width="4" height="8" rx="1" fill="#e0e0e0"/></svg>110    </div>111  </div>112 113  <!-- App bar -->114  <div class="app-bar">115    <div class="app-left">116      <div class="icon-btn">117        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="#cfcfcf"/></svg>118      </div>119    </div>120    <div class="app-right">121      <div class="icon-btn">122        <!-- paperclip -->123        <svg viewBox="0 0 24 24"><path d="M7 12l6-6a4 4 0 0 1 6 6l-7 7a5 5 0 0 1-7-7l7-7" fill="none" stroke="#cfcfcf" stroke-width="2"/></svg>124      </div>125      <div class="icon-btn">126        <!-- send -->127        <svg viewBox="0 0 24 24"><path d="M2 12l20-9-7 9 7 9-20-9z" fill="#cfcfcf"/></svg>128      </div>129      <div class="icon-btn">130        <!-- kebab -->131        <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2" fill="#cfcfcf"/><circle cx="12" cy="12" r="2" fill="#cfcfcf"/><circle cx="12" cy="20" r="2" fill="#cfcfcf"/></svg>132      </div>133    </div>134  </div>135 136  <!-- Content -->137  <div class="content">138    <div class="row">139      <div class="label">From</div>140      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>141    </div>142 143    <div class="row">144      <div class="label">To</div>145      <div class="to-chip">146        <div class="avatar">m</div>147        <div>maria.rossi1993@gmail.com</div>148        <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#cfcfcf"/></svg>149      </div>150    </div>151 152    <div class="row">153      <div class="subject">Thank you for the Support</div>154    </div>155 156    <div class="body-area">Compose email</div>157  </div>158 159  <!-- Suggestions bar -->160  <div class="suggestions">161    <div class="pill">Support</div>162    <div class="pill">Supporting</div>163    <div class="pill">Supporters</div>164    <div class="spacer"></div>165    <svg viewBox="0 0 24 24" width="54" height="54">166      <path d="M12 3a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4z" fill="#cfcfcf"/>167      <rect x="10" y="15" width="4" height="6" fill="#cfcfcf"/>168    </svg>169  </div>170 171  <!-- Keyboard -->172  <div class="keyboard">173    <div class="key-row">174      <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><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>175    </div>176    <div class="key-row">177      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>178    </div>179    <div class="key-row">180      <div class="key wide">⇧</div>181      <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><div class="key">n</div><div class="key">m</div>182      <div class="key wide">183        <svg viewBox="0 0 24 24" width="50" height="50">184          <path d="M3 12h13" stroke="#e6e6e6" stroke-width="2" fill="none"/>185          <path d="M16 7l5 5-5 5" fill="#e6e6e6"/>186        </svg>187      </div>188    </div>189    <div class="key-row">190      <div class="key wide">?123</div>191      <div class="key wide">,</div>192      <div class="key wide">☺</div>193      <div class="key space"> </div>194      <div class="key wide">.</div>195      <div class="key wide">196        <svg viewBox="0 0 24 24" width="50" height="50">197          <path d="M8 5l8 7-8 7" fill="#e6e6e6"/>198        </svg>199      </div>200    </div>201  </div>202 203  <div class="gesture-bar"></div>204</div>205</body>206</html>