GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Compose - Dark</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #121212; color: #FFFFFF;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 90px;16    color: #DADADA; font-weight: 500; font-size: 42px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 32px;19  }20  .status-icons { display: flex; gap: 22px; align-items: center; }21  .status-dot {22    width: 22px; height: 22px; border-radius: 50%; background:#BDBDBD;23  }24  .battery {25    width: 50px; height: 28px; border: 3px solid #DADADA; border-radius: 6px; position: relative;26  }27  .battery::after {28    content: ''; position: absolute; right: -10px; top: 7px; width: 6px; height: 12px; background:#DADADA; border-radius: 2px;29  }30  .battery .level {31    position: absolute; left: 3px; top: 3px; height: 18px; width: 32px; background:#DADADA; border-radius: 3px;32  }33 34  /* Action bar (Gmail compose header) */35  .action-bar {36    position: absolute; top: 90px; left: 0; width: 100%; height: 110px;37    display: flex; align-items: center; justify-content: space-between;38    padding: 0 24px;39  }40  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }41  .icon-btn svg { fill: #DADADA; width: 48px; height: 48px; }42 43  /* Form area */44  .compose-container {45    position: absolute; top: 200px; left: 0; width: 100%;46    padding: 0 40px;47  }48  .field {49    padding: 28px 0;50    border-bottom: 1px solid #2A2A2A;51    display: flex; align-items: center; gap: 24px;52  }53  .label {54    min-width: 120px; color: #9E9E9E; font-size: 36px;55  }56  .value {57    flex: 1; font-size: 40px; color: #FFFFFF;58  }59  .value.muted { color: #CFCFCF; }60  .caret {61    width: 40px; height: 40px;62  }63  .caret svg { fill: #CFCFCF; width: 36px; height: 36px; }64 65  /* Suggestions list */66  .suggestions { margin-top: 26px; }67  .suggestion {68    display: flex; align-items: center; gap: 26px;69    padding: 26px 0;70  }71  .avatar {72    width: 96px; height: 96px; border-radius: 50%;73    background: #6D4C41; color:#fff; display:flex; align-items:center; justify-content:center;74    font-size: 44px; font-weight: 600;75  }76  .avatar.alt {77    background: #C5A3FF; color: #3A2C63;78  }79  .s-texts { display: flex; flex-direction: column; }80  .primary { font-size: 40px; color: #FFFFFF; }81  .secondary { font-size: 34px; color: #9E9E9E; margin-top: 6px; }82 83  /* Keyboard placeholder */84  .keyboard {85    position: absolute; left: 0; bottom: 0; width: 100%; height: 900px;86    background: #1A1A1A; border-top: 1px solid #2A2A2A; padding: 24px 24px 40px;87  }88  .keys {89    display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 16px;90  }91  .key {92    height: 120px; background: #2A2A2A; border-radius: 18px; color: #E0E0E0;93    display:flex; align-items:center; justify-content:center; font-size: 44px;94  }95  .space-row { margin-top: 28px; display:flex; align-items:center; gap:16px; }96  .space { flex: 1; height: 120px; background:#2A2A2A; border-radius:18px; }97  .round { width: 120px; height: 120px; border-radius: 24px; background:#2A2A2A; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>9:29</div>106    <div class="status-icons">107      <div class="status-dot"></div>108      <div class="status-dot"></div>109      <div class="status-dot"></div>110      <div class="battery"><div class="level"></div></div>111    </div>112  </div>113 114  <!-- Action bar with back, attach, send, menu -->115  <div class="action-bar">116    <div class="icon-btn">117      <svg viewBox="0 0 24 24">118        <path d="M20 11H7.83l4.59-4.59L11 5l-7 7 7 7 1.41-1.41L7.83 13H20v-2z"/>119      </svg>120    </div>121    <div style="display:flex; align-items:center; gap:20px;">122      <div class="icon-btn">123        <svg viewBox="0 0 24 24">124          <path d="M21 10V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v6c0 1.1.9 2 2 2h8l4 4v-4h2c1.1 0 2-.9 2-2v-2h-2zM5 7h14v6H5V7z"/>125        </svg>126      </div>127      <div class="icon-btn">128        <svg viewBox="0 0 24 24">129          <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>130        </svg>131      </div>132      <div class="icon-btn">133        <svg viewBox="0 0 24 24">134          <path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Compose content -->141  <div class="compose-container">142    <div class="field">143      <div class="label">From</div>144      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>145    </div>146 147    <div class="field">148      <div class="label">To</div>149      <div class="value">Maria.rossi1993@gmail.com</div>150      <div class="caret">151        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>152      </div>153    </div>154 155    <!-- Suggestions -->156    <div class="suggestions">157      <div class="suggestion">158        <div class="avatar">m</div>159        <div class="s-texts">160          <div class="primary">maria.rossi1993@gmail.com</div>161          <div class="secondary">maria.rossi1993@gmail.com</div>162        </div>163      </div>164 165      <div class="suggestion">166        <div class="avatar alt">167          <span style="font-size:58px; font-weight:700; color:#F5F5F5;">•</span>168        </div>169        <div class="s-texts">170          <div class="primary">mariarossi1993@gmail.com</div>171          <div class="secondary">mariarossi1993@gmail.com</div>172        </div>173      </div>174    </div>175  </div>176 177  <!-- Keyboard representation -->178  <div class="keyboard">179    <div class="keys">180      <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>181      <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>182 183      <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>184      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>185 186      <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>187      <div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key">↵</div>188    </div>189    <div class="space-row">190      <div class="round">?123</div>191      <div class="round">@</div>192      <div class="round">☺</div>193      <div class="space"></div>194      <div class="round">•</div>195      <div class="round">→</div>196    </div>197  </div>198 199</div>200</body>201</html>