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; height:2400px;9    position:relative; overflow:hidden;10    background:#F9FAF7;11    color:#222;12  }13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:110px; background:#FFFFFF;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; box-sizing:border-box;19    border-bottom:1px solid #eee;20    font-size:36px; color:#333;21  }22  .status-icons { display:flex; align-items:center; gap:26px; color:#777; }23  .dot { width:22px; height:22px; background:#777; border-radius:50%; }24  /* App bar */25  .app-bar {26    position:absolute; top:110px; left:0; right:0;27    height:140px; background:#FFFFFF;28    display:flex; align-items:center; justify-content:space-between;29    padding:0 36px; box-sizing:border-box;30    border-bottom:1px solid #e9e9e9;31  }32  .title { font-size:54px; font-weight:600; color:#111; }33  .icon-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }34  .icon-btn svg { width:46px; height:46px; fill:#4b4b4b; }35  .bar-left { display:flex; align-items:center; gap:28px; }36  .bar-right { display:flex; align-items:center; gap:30px; }37  /* Content area */38  .content {39    position:absolute; top:250px; left:0; right:0; bottom:900px;40    background:#FFFFFF;41    padding:28px 40px 20px 40px; box-sizing:border-box;42    overflow:hidden;43  }44  .row {45    display:flex; align-items:flex-start;46    padding:24px 0; border-bottom:1px solid #f0f0f0;47  }48  .label {49    width:140px; color:#6f6f6f; font-size:38px;50    padding-top:6px;51  }52  .value {53    flex:1; font-size:40px; color:#212121;54  }55  .recipient-line {56    display:flex; align-items:center; justify-content:space-between;57  }58  .chip {59    display:inline-block; font-size:42px; color:#111;60  }61  .chevron { width:40px; height:40px; margin-left:10px; }62  .suggestion {63    display:flex; align-items:center; gap:26px;64    padding:30px 0 6px 0;65  }66  .avatar {67    width:86px; height:86px; border-radius:50%;68    background:#D85A4A; display:flex; align-items:center; justify-content:center;69    color:#fff; font-size:32px; font-weight:700;70  }71  .suggest-text { font-size:42px; color:#222; }72  .suggest-sub { font-size:34px; color:#777; margin-top:8px; }73  .editor-space {74    margin-top:32px; height:100%;75    border-radius:12px; border:1px dashed #ddd; background:#FAFAFA;76    display:flex; align-items:center; justify-content:center; color:#b5b5b5; font-size:38px;77  }78 79  /* Keyboard mock */80  .keyboard {81    position:absolute; left:0; right:0; bottom:0;82    height:900px; background:#F3F4EF; border-top:1px solid #dcdcdc;83    box-sizing:border-box;84  }85  .kb-toolbar {86    height:120px; display:flex; align-items:center; gap:60px;87    padding:0 28px; box-sizing:border-box; color:#666;88  }89  .kb-toolbar .tool { width:80px; height:80px; border-radius:18px; background:#E9EAE5; display:flex; align-items:center; justify-content:center; }90  .kb-rows { padding:16px 20px; box-sizing:border-box; }91  .kb-row { display:flex; gap:12px; justify-content:space-between; margin-bottom:16px; }92  .key {93    flex:0 0 94px; height:110px; background:#FFFFFF; border-radius:26px;94    box-shadow:0 1px 0 #d8d8d8 inset; border:1px solid #e1e1e1;95    display:flex; align-items:center; justify-content:center;96    font-size:48px; color:#222;97  }98  .key.wide { flex:0 0 160px; }99  .key.space { flex:1; height:110px; }100  .key.action { background:#DCE8D8; }101  .key.green { background:#B7D7AA; }102  .kb-bottom { display:flex; gap:14px; padding:8px 20px 24px 20px; box-sizing:border-box; align-items:center; }103  .handle {104    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);105    width:480px; height:12px; background:#C7C7C7; border-radius:8px;106  }107 108  /* Small helper for inline SVG color */109  svg { display:block; }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status Bar -->116  <div class="status-bar">117    <div>11:25</div>118    <div class="status-icons">119      <div class="dot"></div>120      <div class="dot" style="background:#9e9e9e;"></div>121      <div class="dot" style="background:#bdbdbd;"></div>122      <div class="dot" style="background:#8e8e8e;"></div>123      <div style="width:36px; height:24px; border:2px solid #777; border-radius:4px; position:relative;">124        <div style="position:absolute; right:-10px; top:6px; width:10px; height:12px; background:#777;"></div>125      </div>126    </div>127  </div>128 129  <!-- App Bar -->130  <div class="app-bar">131    <div class="bar-left">132      <div class="icon-btn">133        <svg viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/></svg>134      </div>135      <div class="title">Compose</div>136    </div>137    <div class="bar-right">138      <div class="icon-btn">139        <svg viewBox="0 0 24 24"><path d="M3 17.25V7.75a1 1 0 0 1 1.55-.84l13.5 4.75a1 1 0 0 1 0 1.88L4.55 18.3A1 1 0 0 1 3 17.25z"/></svg>140      </div>141      <div class="icon-btn">142        <svg viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v6l12 2-12 2z"/></svg>143      </div>144      <div class="icon-btn">145        <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>146      </div>147    </div>148  </div>149 150  <!-- Content -->151  <div class="content">152    <div class="row">153      <div class="label">From</div>154      <div class="value">dbwscratch.test.id2@gmail.com</div>155    </div>156 157    <div class="row recipient-line" style="border-bottom:none;">158      <div style="display:flex; align-items:center; flex:1;">159        <div class="label">To</div>160        <div class="value chip">EvaCook@dayrep.com</div>161      </div>162      <svg class="chevron" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#6f6f6f"/></svg>163    </div>164 165    <div class="suggestion">166      <div class="avatar">•</div>167      <div>168        <div class="suggest-text">Add recipient</div>169        <div class="suggest-sub">EvaCook@dayrep.com</div>170      </div>171    </div>172 173    <div class="editor-space">Message Body</div>174  </div>175 176  <!-- Keyboard -->177  <div class="keyboard">178    <div class="kb-toolbar">179      <div class="tool"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#8b8b8b"/></svg></div>180      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#8b8b8b"/></svg></div>181      <div class="tool"><svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18" stroke="#8b8b8b" stroke-width="2" fill="none"/></svg></div>182      <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 2l10 6-10 6L2 8z" fill="#8b8b8b"/></svg></div>183      <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3" fill="#8b8b8b"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#8b8b8b"/></svg></div>184    </div>185 186    <div class="kb-rows">187      <div class="kb-row">188        <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>189        <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>190      </div>191      <div class="kb-row">192        <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>193        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>194      </div>195      <div class="kb-row">196        <div class="key action wide">⇧</div>197        <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>198        <div class="key action wide">⌫</div>199      </div>200      <div class="kb-bottom">201        <div class="key action wide">?123</div>202        <div class="key action wide">@</div>203        <div class="key action wide">☺</div>204        <div class="key space"> </div>205        <div class="key action wide">.</div>206        <div class="key green wide">↵</div>207      </div>208    </div>209    <div class="handle"></div>210  </div>211 212</div>213</body>214</html>