GD-ML/AndroidCode

1<html lang="en">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;color:#1f1f1f;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#f7f6fb;10  }11 12  /* Status bar */13  .statusbar{14    position:absolute;left:0;top:0;width:1080px;height:96px;15    padding:0 32px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;16    color:#222;font-size:40px;17  }18  .status-icons{display:flex;gap:22px;align-items:center;}19  .icon-dot{width:16px;height:16px;background:#6d6d6d;border-radius:50%;}20  .icon-battery{width:34px;height:18px;border:2px solid #5b5b5b;border-radius:3px;position:relative;}21  .icon-battery:after{content:"";position:absolute;right:-8px;top:4px;width:6px;height:8px;background:#5b5b5b;border-radius:1px;}22 23  /* Top action bar */24  .topbar{25    position:absolute;left:0;top:96px;width:1080px;height:120px;26    display:flex;align-items:center;justify-content:space-between;27    padding:0 32px;box-sizing:border-box;28  }29  .icon-btn{width:84px;height:84px;display:flex;align-items:center;justify-content:center;}30  .svg{width:44px;height:44px;fill:#3b3b3b}31 32  /* Content area */33  .content{34    position:absolute;left:0;top:216px;right:0;bottom:830px; /* leave space for keyboard */35    overflow:hidden;36    padding:0 32px;37    box-sizing:border-box;38  }39  .field{40    padding:26px 0;border-bottom:1px solid #e9e8ef;41    display:flex;align-items:center;gap:26px;42  }43  .label{color:#6b6b6b;font-size:36px;width:120px}44  .value{flex:1;font-size:36px;color:#222;display:flex;align-items:center;gap:10px;}45  .chip-email{46    font-size:36px;background:#f0eef6;border:1px solid #d9d5e4;border-radius:26px;padding:10px 18px;color:#303030;47  }48  .dropdown{49    width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #6b6b6b;50    margin-left:8px;51  }52 53  .subject{54    padding:30px 0 22px 0;border-bottom:1px solid #e9e8ef;55    font-size:46px;line-height:60px;color:#222;56  }57 58  .bodytext{59    padding:28px 0;font-size:40px;line-height:58px;color:#2c2c2c;60  }61 62  /* Attachment chip */63  .attachment{64    margin-top:16px;65    background:#f3c8d3;border:1px solid #e6aab7;border-radius:22px;66    padding:22px;display:flex;align-items:center;gap:24px;67    width:1016px;box-sizing:border-box;68  }69  .pdf-icon{70    width:72px;height:72px;background:#e74c3c;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:bold;71  }72  .att-title{font-size:38px;color:#1f1f1f;}73  .att-sub{font-size:30px;color:#4e4e4e;margin-top:6px;}74  .att-wrap{flex:1;}75  .att-close{font-size:54px;color:#5a5a5a;margin-left:auto;}76 77  /* Keyboard mock */78  .keyboard{79    position:absolute;left:0;bottom:0;width:1080px;height:830px;background:#efeaf6;80    border-top:1px solid #ddd;box-sizing:border-box;padding:20px 24px 26px 24px;81  }82  .suggestions{83    height:92px;display:flex;align-items:center;gap:28px;margin-bottom:18px;84  }85  .sugg-icon{86    width:80px;height:80px;background:#ffffff;border:1px solid #d9d9e6;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#6b6b6b;font-size:28px;87  }88  .keys-row{display:flex;justify-content:center;gap:18px;margin:14px 0;}89  .key{90    width:88px;height:110px;background:#ffffff;border:1px solid #d9d9e6;border-radius:22px;91    display:flex;align-items:center;justify-content:center;font-size:44px;color:#222;92    box-shadow:0 1px 0 rgba(0,0,0,0.04) inset;93  }94  .row2{padding-left:46px;}95  .key.shift,.key.back{width:130px;}96  .space{flex:1;height:110px;min-width:200px;border-radius:28px;}97  .key.small{width:120px;}98  .enter{width:120px;background:#dfe3ff;border-color:#c8ceff;}99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="statusbar">106    <div style="display:flex;align-items:center;gap:22px;">107      <div style="font-weight:600;">12:04</div>108      <div class="icon-dot"></div>109    </div>110    <div class="status-icons">111      <div class="icon-dot"></div>112      <div class="icon-battery"></div>113    </div>114  </div>115 116  <!-- Top bar with actions -->117  <div class="topbar">118    <div style="display:flex;align-items:center;gap:8px;">119      <div class="icon-btn">120        <svg class="svg" viewBox="0 0 24 24">121          <path d="M15.5 3.5 7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"></path>122        </svg>123      </div>124    </div>125    <div style="display:flex;align-items:center;gap:6px;">126      <div class="icon-btn">127        <svg class="svg" viewBox="0 0 24 24">128          <path d="M7 7.5c0-2 2.5-3.5 5-3.5s5 1.5 5 3.5v8a2.5 2.5 0 0 1-5 0V8h2v7.5a.5.5 0 0 0 1 0v-8c0-.9-1.6-1.5-3-1.5s-3 .6-3 1.5v8a4.5 4.5 0 0 0 9 0V8h2v7.5a6.5 6.5 0 0 1-13 0v-8z"/>129        </svg>130      </div>131      <div class="icon-btn">132        <svg class="svg" viewBox="0 0 24 24">133          <path d="M3 12l18-9-6 9 6 9-18-9z"></path>134        </svg>135      </div>136      <div class="icon-btn">137        <svg class="svg" viewBox="0 0 24 24">138          <circle cx="5" cy="12" r="2.2"></circle>139          <circle cx="12" cy="12" r="2.2"></circle>140          <circle cx="19" cy="12" r="2.2"></circle>141        </svg>142      </div>143    </div>144  </div>145 146  <!-- Main content -->147  <div class="content">148    <div class="field">149      <div class="label">From</div>150      <div class="value">151        <div class="chip-email">natalie.larson1998@gmail.com</div>152        <div class="dropdown"></div>153      </div>154    </div>155 156    <div class="field">157      <div class="label">To</div>158      <div class="value">159        <!-- empty recipient placeholder -->160        <div style="color:#b5b5b5;"> </div>161        <div class="dropdown"></div>162      </div>163    </div>164 165    <div class="subject">166      I am sharing "Into-the-Wild-Jon-Krakauer.pdf"167      with you from WPS Office168    </div>169 170    <div class="bodytext">171      Please check the attachment<br><br>172      Get WPS Office for PC:<br>173      https://www.wps.com/d/?from=t174    </div>175 176    <div class="attachment">177      <div class="pdf-icon">PDF</div>178      <div class="att-wrap">179        <div class="att-title">Into-the-Wild-Jon-Krakauer.pdf</div>180        <div class="att-sub">1.9 MB</div>181      </div>182      <div class="att-close">✕</div>183    </div>184  </div>185 186  <!-- Keyboard mock -->187  <div class="keyboard">188    <div class="suggestions">189      <div class="sugg-icon">⠿</div>190      <div class="sugg-icon">🙂</div>191      <div class="sugg-icon">GIF</div>192      <div class="sugg-icon">⚙</div>193      <div class="sugg-icon">G✱</div>194      <div class="sugg-icon">🎨</div>195      <div class="sugg-icon">🎙</div>196    </div>197 198    <div class="keys-row">199      <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>200      <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>201    </div>202    <div class="keys-row row2">203      <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>204      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>205    </div>206    <div class="keys-row">207      <div class="key shift">⇧</div>208      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>209      <div class="key">b</div><div class="key">n</div><div class="key">m</div>210      <div class="key back">⌫</div>211    </div>212    <div class="keys-row" style="padding:0 14px;">213      <div class="key small">?123</div>214      <div class="key small">@</div>215      <div class="key small">🙂</div>216      <div class="key space"></div>217      <div class="key small">.</div>218      <div class="key enter">↵</div>219    </div>220  </div>221 222</div>223</body>224</html>