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:#FFFFFF;11    color:#222;12  }13 14  /* Status bar */15  .status-bar{16    height:90px; padding:0 32px;17    display:flex; align-items:center; justify-content:space-between;18    color:#444;19    border-bottom:1px solid #eee;20    font-weight:600;21  }22  .status-left{font-size:38px; letter-spacing:1px;}23  .status-right{display:flex; gap:18px; align-items:center;}24  .status-dot{25    width:26px; height:26px; border-radius:50%; background:#888;26    opacity:.7;27  }28  .signal{width:34px; height:26px; background:#777; border-radius:4px; opacity:.7;}29 30  /* Action bar */31  .action-bar{32    height:100px; display:flex; align-items:center;33    padding:0 20px; gap:16px;34  }35  .icon-btn{36    width:92px; height:92px; display:flex; align-items:center; justify-content:center;37  }38  .icon-right-group{margin-left:auto; display:flex; align-items:center; gap:8px;}39  .svg-ico{width:44px; height:44px; fill:#4b4b4b;}40  .send-ico{fill:#2e7d32;}41  .kebab{width:10px; height:10px; background:#4b4b4b; border-radius:50%; box-shadow:0 14px 0 #4b4b4b, 0 -14px 0 #4b4b4b;}42 43  /* Fields */44  .field{padding:24px 36px; border-bottom:1px solid #eee;}45  .field .label{color:#666; font-size:32px; width:120px;}46  .row{display:flex; align-items:center;}47  .value{font-size:38px; color:#111;}48  .dropdown{49    margin-left:auto; width:32px; height:32px;50    border:8px solid transparent; border-top-color:#777;51  }52 53  /* To chip */54  .chip-area .value{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}55  .chip{56    display:flex; align-items:center; gap:16px;57    background:#f0f5ef; border:1px solid #d5e6d0; color:#1a1a1a;58    padding:10px 18px 10px 10px; border-radius:34px; font-size:36px;59  }60  .avatar{61    width:56px; height:56px; border-radius:50%;62    background:#4caf50; color:#fff; display:flex; align-items:center; justify-content:center;63    font-weight:700; font-size:34px;64  }65 66  /* Message body */67  .message{68    padding:30px 36px 24px 36px; line-height:1.5; font-size:42px; color:#222;69  }70  .message p{margin:22px 0;}71  .link{color:#0b57d0;}72 73  /* Keyboard mock */74  .keyboard{75    position:absolute; left:0; right:0; bottom:0;76    height:860px; background:#f3eff6;77    border-top:1px solid #e0d6ea;78    box-shadow:0 -2px 0 #e9e0ef inset;79  }80  .kb-top{81    height:110px; display:flex; align-items:center; justify-content:space-between;82    padding:0 24px;83  }84  .kb-pill{width:220px; height:68px; background:#e7d8ef; border-radius:22px;}85  .kb-emoji{width:80px; height:80px; background:#e7d8ef; border-radius:18px;}86  .kb-keys{87    padding:10px 18px 0 18px;88    display:grid; grid-template-columns:repeat(10, 1fr);89    gap:16px 16px;90  }91  .key{92    height:110px; background:#fff; border:1px solid #e1e1e1; border-radius:26px;93    display:flex; align-items:center; justify-content:center;94    font-size:44px; color:#2c2c2c;95  }96  .row2{margin-top:16px; grid-column:1 / -1; display:grid; grid-template-columns:repeat(10, 1fr); gap:16px;}97  .row3{margin-top:16px; grid-column:1 / -1; display:grid; grid-template-columns:repeat(9, 1fr); gap:16px;}98  .row4{margin-top:16px; grid-column:1 / -1; display:grid; grid-template-columns:120px repeat(7, 1fr) 120px; gap:16px;}99  .space-row{margin:18px; display:grid; grid-template-columns:140px 140px 1fr 140px 140px; gap:18px;}100  .space{height:116px; background:#fff; border:1px solid #e1e1e1; border-radius:32px;}101  .go-btn{background:#cfe8cf; border-color:#b4d8b4;}102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div class="status-left">12:07</div>110    <div class="status-right">111      <div class="signal"></div>112      <div class="status-dot"></div>113      <div class="status-dot" style="width:18px; height:28px; border-radius:4px;"></div>114    </div>115  </div>116 117  <!-- Action bar with navigation and actions -->118  <div class="action-bar">119    <div class="icon-btn" title="Back">120      <svg class="svg-ico" viewBox="0 0 24 24">121        <path d="M15.5 5l-7 7 7 7" stroke="#4b4b4b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122      </svg>123    </div>124    <div style="flex:1"></div>125    <div class="icon-right-group">126      <div class="icon-btn" title="Attach">127        <svg class="svg-ico" viewBox="0 0 24 24">128          <path d="M7 13.5l6.5-6.5a3 3 0 1 1 4.2 4.2L10 18a5 5 0 1 1-7.1-7.1L12 1" stroke="#4b4b4b" stroke-width="2" fill="none" stroke-linecap="round"/>129        </svg>130      </div>131      <div class="icon-btn" title="Send">132        <svg class="svg-ico send-ico" viewBox="0 0 24 24">133          <path d="M2 21l20-9L2 3l3 7 9 2-9 2z"/>134        </svg>135      </div>136      <div class="icon-btn" title="More">137        <div class="kebab"></div>138      </div>139    </div>140  </div>141 142  <!-- From field -->143  <div class="field">144    <div class="row">145      <div class="label">From</div>146      <div class="value">natalie.larson1998@gmail.com</div>147      <div class="dropdown"></div>148    </div>149  </div>150 151  <!-- To field -->152  <div class="field chip-area">153    <div class="row">154      <div class="label">To</div>155      <div class="value">156        <div class="chip">157          <div class="avatar">A</div>158          Amelia miller159        </div>160      </div>161      <div class="dropdown" style="margin-left:auto;"></div>162    </div>163  </div>164 165  <!-- Message body -->166  <div class="message">167    <p>I am sharing "Into-the-Wild-Jon-Krakauer.pdf" with you from WPS Office</p>168 169    <p>Please check the attachment</p>170 171    <p>Get WPS Office for PC:<br>172      <span class="link">https://www.wps.com/d/?from=t</span>173    </p>174  </div>175 176  <!-- Keyboard mock -->177  <div class="keyboard">178    <div class="kb-top">179      <div class="kb-pill"></div>180      <div style="display:flex; gap:16px; align-items:center;">181        <div class="kb-emoji"></div>182        <div class="kb-emoji"></div>183        <div class="kb-emoji"></div>184      </div>185    </div>186 187    <div class="kb-keys">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><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>189 190      <div class="row2">191        <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><div class="key">;</div>192      </div>193 194      <div class="row3">195        <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><div class="key">,</div><div class="key">.</div>196      </div>197 198      <div class="row4">199        <div class="key">⇧</div>200        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>201        <div class="key"></div><div class="key"></div><div class="key"></div>202        <div class="key">⌫</div>203      </div>204    </div>205 206    <div class="space-row">207      <div class="space">@</div>208      <div class="space">😊</div>209      <div class="space"></div>210      <div class="space">.</div>211      <div class="space go-btn">→</div>212    </div>213  </div>214 215</div>216</body>217</html>