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; position:relative; overflow:hidden;9    background:#FAFBF7;10    border:1px solid #e5e5e5;11  }12  /* Status bar */13  .statusbar {14    height:110px; padding:0 36px; box-sizing:border-box;15    display:flex; align-items:center; justify-content:space-between;16    color:#3d3d3d; font-size:40px;17  }18  .status-icons { display:flex; align-items:center; gap:22px; }19  .dot { width:14px; height:14px; background:#5c5c5c; border-radius:50%; opacity:.9; }20  /* App bar */21  .appbar {22    height:160px; background:#ffffff; border-bottom:1px solid #ececec;23    display:flex; align-items:center; justify-content:space-between;24    padding:0 32px; box-sizing:border-box;25  }26  .app-left { display:flex; align-items:center; gap:24px; }27  .title { font-size:56px; color:#1f1f1f; }28  .icon-btn { width:96px; height:96px; display:flex; align-items:center; justify-content:center; }29  .icon { width:52px; height:52px; fill:#3b3b3b; }30  /* Fields */31  .field { background:#ffffff; display:flex; align-items:center; padding:0 36px; height:150px; border-bottom:1px solid #efefef; box-sizing:border-box; }32  .label { width:130px; color:#8e8e8e; font-size:38px; }33  .value { flex:1; color:#232323; font-size:40px; }34  .placeholder { color:#b3b3b3; }35  .dropdown { width:50px; height:50px; }36  /* Compose area */37  .compose-label { height:100px; display:flex; align-items:center; padding:0 36px; color:#8e8e8e; font-size:42px; }38  /* Attachment chip */39  .attach-wrap { padding:0 36px; }40  .chip {41    height:160px; border-radius:18px; background:#dfeedd; display:flex; align-items:center;42    padding:0 26px; gap:26px; box-sizing:border-box; border:1px solid #cfe0cc;43    width:100%; max-width:1010px;44  }45  .pdf-badge {46    width:86px; height:86px; background:#e74b3b; color:#fff; border-radius:12px;47    display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:34px;48    box-shadow:inset 0 0 0 2px rgba(0,0,0,0.06);49  }50  .file-meta { display:flex; flex-direction:column; }51  .file-name { font-size:42px; color:#203020; }52  .file-size { font-size:32px; color:#4f6a4e; margin-top:6px; }53  .chip .close { margin-left:auto; width:56px; height:56px; }54  /* Spacer for body text area */55  .spacer { height:620px; }56  /* Keyboard mock */57  .keyboard {58    position:absolute; left:0; right:0; bottom:0;59    height:800px; background:#F1F3EE; border-top:1px solid #e0e3dc;60    padding:26px 26px 22px; box-sizing:border-box;61  }62  .kb-row { display:flex; gap:18px; margin-bottom:22px; justify-content:center; }63  .key {64    background:#ffffff; border:1px solid #e3e7de; border-radius:22px;65    width:86px; height:112px; display:flex; align-items:center; justify-content:center;66    font-size:48px; color:#303030; box-shadow:0 1px 0 #e7e7e7 inset;67  }68  .key-wide { width:130px; }69  .key-verywide { flex:1; min-width:280px; }70  .key-accent { background:#d7e7cf; }71  .gesture-bar { position:absolute; left:0; right:0; bottom:0; height:14px; background:#c8cdc3; border-radius:8px; width:360px; margin:0 auto 10px; }72</style>73</head>74<body>75<div id="render-target">76 77  <!-- Status bar -->78  <div class="statusbar">79    <div>11:25</div>80    <div class="status-icons">81      <div class="dot"></div>82      <div class="dot" style="width:18px;height:18px;"></div>83      <div class="dot" style="width:24px;height:24px;"></div>84      <div class="dot" style="width:28px;height:18px;border-radius:6px;"></div>85    </div>86  </div>87 88  <!-- App bar -->89  <div class="appbar">90    <div class="app-left">91      <div class="icon-btn">92        <svg class="icon" viewBox="0 0 24 24">93          <path d="M15.5 19.5L8 12l7.5-7.5-1.4-1.4L5.2 12l8.9 8.9z"/>94        </svg>95      </div>96      <div class="title">Compose</div>97    </div>98    <div style="display:flex; align-items:center;">99      <div class="icon-btn">100        <svg class="icon" viewBox="0 0 24 24">101          <path d="M21 7l-9.5 9.5a3 3 0 11-4.2-4.2L17 3l1.4 1.4-9.7 9.7a1.5 1.5 0 102.1 2.1L21 8.4V7z"/>102        </svg>103      </div>104      <div class="icon-btn">105        <svg class="icon" viewBox="0 0 24 24">106          <path d="M3 20l18-8L3 4v6l12 2L3 14v6z"/>107        </svg>108      </div>109      <div class="icon-btn">110        <svg class="icon" viewBox="0 0 24 24">111          <circle cx="12" cy="5" r="2.2"></circle>112          <circle cx="12" cy="12" r="2.2"></circle>113          <circle cx="12" cy="19" r="2.2"></circle>114        </svg>115      </div>116    </div>117  </div>118 119  <!-- From -->120  <div class="field">121    <div class="label">From</div>122    <div class="value">dbwscratch.test.id2@gmail.com</div>123  </div>124 125  <!-- To -->126  <div class="field">127    <div class="label">To</div>128    <div class="value placeholder"> </div>129    <svg class="dropdown" viewBox="0 0 24 24">130      <path fill="#5c5c5c" d="M7 9l5 5 5-5z"></path>131    </svg>132  </div>133 134  <!-- Subject -->135  <div class="field">136    <div class="label">Subject</div>137    <div class="value placeholder"></div>138  </div>139 140  <!-- Compose label -->141  <div class="compose-label">Compose email</div>142 143  <!-- Attachment chip -->144  <div class="attach-wrap">145    <div class="chip">146      <div class="pdf-badge">PDF</div>147      <div class="file-meta">148        <div class="file-name">ESIC -COVID-19.pdf</div>149        <div class="file-size">9.4 MB</div>150      </div>151      <svg class="close" viewBox="0 0 24 24">152        <path fill="#2a2a2a" d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>153      </svg>154    </div>155  </div>156 157  <!-- Spacer to mimic email body area -->158  <div class="spacer"></div>159 160  <!-- Keyboard mock -->161  <div class="keyboard">162    <div class="kb-row">163      <div class="key">q</div><div class="key">w</div><div class="key">e</div>164      <div class="key">r</div><div class="key">t</div><div class="key">y</div>165      <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>166    </div>167    <div class="kb-row">168      <div class="key">a</div><div class="key">s</div><div class="key">d</div>169      <div class="key">f</div><div class="key">g</div><div class="key">h</div>170      <div class="key">j</div><div class="key">k</div><div class="key">l</div>171    </div>172    <div class="kb-row">173      <div class="key key-wide key-accent">⇧</div>174      <div class="key">z</div><div class="key">x</div><div class="key">c</div>175      <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>176      <div class="key key-wide key-accent">⌫</div>177    </div>178    <div class="kb-row">179      <div class="key key-wide">@</div>180      <div class="key key-wide">😊</div>181      <div class="key key-verywide"></div>182      <div class="key key-wide key-accent">.</div>183      <div class="key key-wide key-accent">↵</div>184    </div>185    <div class="gesture-bar"></div>186  </div>187 188</div>189</body>190</html>