GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Compose UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #0d1518; color: #d7e3ea;11  }12 13  /* Status bar */14  .statusbar {15    position: absolute; top: 0; left: 0; width: 1080px; height: 110px;16    background: #0b1316;17    color: #cfe0e6; font-weight: 500;18  }19  .status-time { position: absolute; left: 36px; top: 28px; font-size: 40px; }20  .status-icons { position: absolute; right: 36px; top: 26px; display: flex; align-items: center; gap: 26px; }21  .status-icons svg { width: 50px; height: 50px; fill: #cfe0e6; opacity: 0.9; }22  .battery {23    width: 90px; height: 40px; border: 3px solid #cfe0e6; border-radius: 6px; position: relative;24    display: flex; align-items: center; justify-content: center; font-size: 26px;25  }26  .battery:after {27    content: ""; position: absolute; right: -14px; top: 10px; width: 10px; height: 20px; background: #cfe0e6; border-radius: 2px;28  }29 30  /* Header app bar */31  .appbar {32    position: absolute; top: 110px; left: 0; width: 1080px; height: 120px;33    background: #0b1417;34    border-bottom: 1px solid #263238;35  }36  .icon-btn {37    position: absolute; top: 30px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;38    border-radius: 40px;39  }40  .icon-btn svg { width: 54px; height: 54px; }41  .back { left: 24px; }42  .attach { right: 250px; }43  .send { right: 150px; }44  .more { right: 50px; }45  .send svg { fill: #6FE1A6; }46 47  /* Form rows */48  .row {49    position: absolute; left: 0; width: 1080px; background: #0e181b;50    border-bottom: 1px solid #1f2a2e;51  }52  .row .label {53    position: absolute; left: 36px; top: 34px; font-size: 34px; color: #9FB0B7;54  }55  .row .value {56    position: absolute; left: 190px; right: 120px; top: 24px;57    font-size: 38px; color: #e6f2f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;58  }59  .row .chev {60    position: absolute; right: 36px; top: 30px;61  }62  .row.from { top: 230px; height: 100px; }63  .row.to   { top: 330px; height: 120px; }64 65  /* To chips */66  .chip {67    display: inline-flex; align-items: center; border: 1px solid #324248; border-radius: 60px; padding: 14px 26px; gap: 18px;68    background: #122026; color: #cfe0e6; font-size: 36px;69  }70  .avatar {71    width: 64px; height: 64px; border-radius: 50%; background: #8b6b5a; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;72  }73 74  /* Subject and body */75  .subject {76    position: absolute; top: 470px; left: 36px; right: 36px; height: 120px;77    display: flex; align-items: center; font-size: 42px; color: #e8f3f7;78    border-bottom: 1px solid #1f2a2e;79  }80  .body {81    position: absolute; top: 600px; left: 36px; right: 36px; bottom: 950px;82    font-size: 40px; line-height: 1.6; color: #e2eef3;83  }84  .link { color: #9bd6ff; text-decoration: none; }85 86  /* Keyboard mock */87  .keyboard {88    position: absolute; left: 0; right: 0; bottom: 0; height: 840px;89    background: #101b1e; border-top: 1px solid #263238;90  }91  .kb-toolbar {92    height: 120px; display: flex; align-items: center; gap: 60px; padding: 0 40px; color: #cfe0e6; font-size: 42px;93  }94  .kb-row { display: flex; justify-content: center; gap: 24px; padding: 22px 26px; }95  .key {96    width: 86px; height: 120px; background: #182428; border-radius: 16px; border: 1px solid #253239;97    color: #d4e6ec; font-size: 54px; display: flex; align-items: center; justify-content: center;98    box-shadow: inset 0 0 0 1px #1e2b31;99  }100  .key.wide { width: 170px; }101  .key.space { width: 540px; }102  .key.green { background: #7ad9b1; color: #0c1a16; font-weight: 700; }103  .key.icon { font-size: 48px; }104  .mic {105    position: absolute; right: 40px; bottom: 360px; width: 90px; height: 90px; background: #182428; border: 1px solid #253239; border-radius: 45px;106    display: flex; align-items: center; justify-content: center; color: #cfe0e6; font-size: 48px;107  }108 109  /* small helper icons */110  .chev svg, .row svg { width: 42px; height: 42px; fill: #9FB0B7; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="statusbar">118    <div class="status-time">8:42</div>119    <div class="status-icons">120      <!-- Wi-Fi -->121      <svg viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm8-10c-4.4-3.9-11.6-3.9-16 0l1.7 1.7c3.5-3 9.1-3 12.6 0L20 10zm-4 4c-2.7-2.4-7.3-2.4-10 0l1.6 1.6c2-1.8 4.9-1.8 6.8 0L16 14z"/></svg>122      <!-- Notifications (simple bell) -->123      <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm8-6V11c0-4.1-3.1-7.4-7-8V2h-2v1c-3.9.6-7 3.9-7 8v5L2 18v2h20v-2l-2-2z"/></svg>124      <!-- Battery -->125      <div class="battery">95%</div>126    </div>127  </div>128 129  <!-- App bar with actions -->130  <div class="appbar">131    <div class="icon-btn back">132      <svg viewBox="0 0 24 24"><path d="M20 11H7.8l4.6-4.6L11 4 4 11l7 7 1.4-1.4L7.8 13H20z" fill="#cfe0e6"/></svg>133    </div>134    <div class="icon-btn attach">135      <svg viewBox="0 0 24 24"><path d="M7 7v8a5 5 0 0 0 10 0V7a3 3 0 0 0-6 0v8a1 1 0 0 0 2 0V7h2v8a3 3 0 0 1-6 0V7a5 5 0 0 1 10 0v8a7 7 0 0 1-14 0V7h2z" fill="#cfe0e6"/></svg>136    </div>137    <div class="icon-btn send">138      <svg viewBox="0 0 24 24"><path d="M3 12l18-9-5 18-4-7-9-2z"/></svg>139    </div>140    <div class="icon-btn more">141      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>142    </div>143  </div>144 145  <!-- From row -->146  <div class="row from">147    <div class="label">From</div>148    <div class="value">richardwegnar@gmail.com</div>149    <div class="chev">150      <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>151    </div>152  </div>153 154  <!-- To row -->155  <div class="row to">156    <div class="label">To</div>157    <div class="value">158      <span class="chip">159        <span class="avatar">C</span>160        clarawagner98b@gmail.com161      </span>162    </div>163    <div class="chev">164      <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>165    </div>166  </div>167 168  <!-- Subject -->169  <div class="subject">Check out "The Pillars of the Earth"</div>170 171  <!-- Body -->172  <div class="body">173    <div>https://play.google.com/store/books/details?id=CiCYALKkUTaIC</div>174    <div style="margin-top: 22px;">175      <a class="link" href="#">https://play.google.com/store/books/details?id=CiCYALKkUTaIC</a>176    </div>177  </div>178 179  <!-- Keyboard mock -->180  <div class="keyboard">181    <div class="kb-toolbar">182      <div style="display:flex;align-items:center;gap:22px;">183        <div style="width:72px;height:72px;background:#182428;border:1px solid #253239;border-radius:14px;display:flex;align-items:center;justify-content:center;">GIF</div>184      </div>185      <div style="width:72px;height:72px;background:#182428;border:1px solid #253239;border-radius:14px;display:flex;align-items:center;justify-content:center;">🙂</div>186      <div style="width:72px;height:72px;background:#182428;border:1px solid #253239;border-radius:14px;display:flex;align-items:center;justify-content:center;">G</div>187      <div style="width:72px;height:72px;background:#182428;border:1px solid #253239;border-radius:14px;display:flex;align-items:center;justify-content:center;">⚙</div>188      <div style="width:72px;height:72px;background:#182428;border:1px solid #253239;border-radius:14px;display:flex;align-items:center;justify-content:center;">🎨</div>189    </div>190 191    <div class="kb-row">192      <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>193      <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>194    </div>195    <div class="kb-row">196      <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>197      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>198    </div>199    <div class="kb-row">200      <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>201      <div class="key">n</div><div class="key">m</div>202      <div class="key wide icon">⌫</div>203    </div>204    <div class="kb-row">205      <div class="key wide">?123</div>206      <div class="key wide">@</div>207      <div class="key wide">☺</div>208      <div class="key space"></div>209      <div class="key">.</div>210      <div class="key wide green">↵</div>211    </div>212 213    <div class="mic">🎙</div>214  </div>215 216</div>217</body>218</html>