GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose Email - Dark UI with Keyboard</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #1b170c; color: #e8e1c6;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; font-weight: 500; font-size: 40px;19    color: #efe8cf;20  }21  .status-icons { display: flex; align-items: center; gap: 28px; }22  .status-icons svg { width: 48px; height: 48px; fill: none; stroke: #efe8cf; stroke-width: 3; }23 24  /* Top toolbar */25  .toolbar {26    position: absolute; top: 96px; left: 0; width: 100%; height: 140px;27    display: flex; align-items: center; justify-content: space-between;28    padding: 0 24px;29  }30  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 32px; }31  .icon-btn {32    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;33  }34  .icon-btn svg { width: 60px; height: 60px; stroke: #d9cfa8; fill: none; stroke-width: 4; }35 36  /* Content area */37  .content {38    position: absolute; top: 236px; left: 0; width: 100%;39    padding: 0 40px;40  }41  .field {42    margin-bottom: 36px;43  }44  .label {45    font-size: 36px; color: #d0c7a5; margin-bottom: 10px;46  }47  .row {48    display: flex; align-items: center; justify-content: space-between;49    border-bottom: 2px solid #2a2414; padding: 22px 0;50  }51  .row .value {52    font-size: 42px; color: #efe8cf;53  }54  .chevron {55    width: 40px; height: 40px;56  }57  .chevron svg { width: 40px; height: 40px; stroke: #cfc6a3; stroke-width: 4; fill: none; }58 59  /* Suggestion list */60  .suggestions {61    margin-top: 24px;62  }63  .suggestion-item {64    display: flex; align-items: center; gap: 24px;65    padding: 20px 0;66  }67  .avatar {68    width: 88px; height: 88px; border-radius: 50%;69    background: #00897b; display: flex; align-items: center; justify-content: center;70    color: #ffffff; font-weight: 700; font-size: 44px;71  }72  .suggestion-texts { display: flex; flex-direction: column; }73  .primary-text { font-size: 44px; color: #e9e2c7; }74  .secondary-text { font-size: 34px; color: #b8b096; margin-top: 6px; }75 76  /* Spacer area */77  .spacer {78    height: 900px; /* blank area above keyboard */79  }80 81  /* Keyboard */82  .keyboard {83    position: absolute; bottom: 96px; left: 0; width: 100%;84    background: #231f13; border-top: 2px solid #2e2817;85    padding: 18px 24px 26px 24px;86  }87  .kb-top-icons {88    display: flex; align-items: center; gap: 36px; margin-bottom: 18px;89    color: #cfc6a3; font-size: 34px;90  }91  .kb-icon {92    width: 72px; height: 56px; display: flex; align-items: center; justify-content: center;93    border-radius: 14px; background: #2a2517;94  }95  .kb-row { display: flex; gap: 16px; margin: 16px 0; justify-content: center; }96  .key {97    min-width: 84px; height: 120px; border-radius: 28px;98    background: #2b2618; color: #efe8cf; font-size: 48px; font-weight: 500;99    display: flex; align-items: center; justify-content: center;100    box-shadow: inset 0 0 0 1px #3a3320;101  }102  .key.wide { min-width: 160px; }103  .key.space { min-width: 520px; }104  .key.circle {105    min-width: 120px; height: 120px; border-radius: 60px; background: #e2a382; color: #1f1a10;106    box-shadow: none; font-weight: 700;107  }108  .key.icon svg { width: 46px; height: 46px; stroke: #e9e2c7; fill: none; stroke-width: 4; }109  .key.icon.dark svg { stroke: #1f1a10; }110  .key.backspace svg { stroke: #efe8cf; }111  .kb-bottom-helpers {112    display: flex; justify-content: center; gap: 16px;113  }114 115  /* Home indicator */116  .home-indicator {117    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);118    width: 300px; height: 10px; border-radius: 6px; background: #e6e0cb; opacity: 0.8;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar -->126  <div class="status-bar">127    <div class="time">9:19</div>128    <div class="status-icons">129      <!-- Cloud -->130      <svg viewBox="0 0 24 24">131        <path d="M7 16h10a4 4 0 0 0 0-8h-.6A6 6 0 0 0 6 9.5 3.5 3.5 0 0 0 7 16z"></path>132      </svg>133      <!-- WiFi -->134      <svg viewBox="0 0 24 24">135        <path d="M2 8c5-4 15-4 20 0"></path>136        <path d="M5 12c3-2.5 11-2.5 14 0"></path>137        <path d="M8 16c2-1.5 6-1.5 8 0"></path>138        <circle cx="12" cy="19" r="1.5" fill="#efe8cf"></circle>139      </svg>140      <!-- Battery -->141      <svg viewBox="0 0 28 24">142        <rect x="2" y="6" width="20" height="12" rx="2"></rect>143        <rect x="23" y="9" width="3" height="6" rx="1"></rect>144        <rect x="4" y="8" width="14" height="8" fill="#efe8cf" stroke="none"></rect>145      </svg>146    </div>147  </div>148 149  <!-- Toolbar -->150  <div class="toolbar">151    <div class="toolbar-left">152      <div class="icon-btn">153        <!-- Back Arrow -->154        <svg viewBox="0 0 24 24">155          <path d="M15 5l-7 7 7 7"></path>156        </svg>157      </div>158    </div>159    <div class="toolbar-right">160      <div class="icon-btn">161        <!-- Paperclip -->162        <svg viewBox="0 0 24 24">163          <path d="M8 13l6-6a4 4 0 1 1 6 6l-8 8a6 6 0 1 1-8-8l9-9"></path>164        </svg>165      </div>166      <div class="icon-btn">167        <!-- Send -->168        <svg viewBox="0 0 24 24">169          <path d="M3 12l18-9-7 9 7 9z"></path>170        </svg>171      </div>172      <div class="icon-btn">173        <!-- More (kebab) -->174        <svg viewBox="0 0 24 24">175          <circle cx="12" cy="5" r="2" stroke="none" fill="#d9cfa8"></circle>176          <circle cx="12" cy="12" r="2" stroke="none" fill="#d9cfa8"></circle>177          <circle cx="12" cy="19" r="2" stroke="none" fill="#d9cfa8"></circle>178        </svg>179      </div>180    </div>181  </div>182 183  <!-- Content -->184  <div class="content">185    <!-- From field -->186    <div class="field">187      <div class="label">From</div>188      <div class="row">189        <div class="value">dbwscratch.test.id10@gmail.com</div>190        <div class="chevron">191          <svg viewBox="0 0 24 24">192            <path d="M6 9l6 6 6-6"></path>193          </svg>194        </div>195      </div>196    </div>197 198    <!-- To field -->199    <div class="field">200      <div class="label">To</div>201      <div class="row">202        <div class="value">naomi.rousseau@example.com</div>203        <div class="chevron">204          <svg viewBox="0 0 24 24">205            <path d="M6 9l6 6 6-6"></path>206          </svg>207        </div>208      </div>209    </div>210 211    <!-- Suggestion contact -->212    <div class="suggestions">213      <div class="suggestion-item">214        <div class="avatar">n</div>215        <div class="suggestion-texts">216          <div class="primary-text">naomi.rousseau@example.com</div>217          <div class="secondary-text">naomi.rousseau@example.com</div>218        </div>219      </div>220    </div>221 222    <div class="spacer"></div>223  </div>224 225  <!-- Keyboard -->226  <div class="keyboard">227    <div class="kb-top-icons">228      <div class="kb-icon">▦</div>229      <div class="kb-icon">🙂</div>230      <div class="kb-icon">GIF</div>231      <div class="kb-icon">⚙︎</div>232      <div class="kb-icon">G↔︎</div>233      <div class="kb-icon">🎨</div>234      <div class="kb-icon">🎤</div>235    </div>236 237    <div class="kb-row">238      <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>239      <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>240    </div>241    <div class="kb-row">242      <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>243      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>244    </div>245    <div class="kb-row">246      <div class="key icon">247        <!-- Shift -->248        <svg viewBox="0 0 24 24"><path d="M12 4l7 7h-4v9H9v-9H5z"></path></svg>249      </div>250      <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>251      <div class="key">n</div><div class="key">m</div>252      <div class="key backspace icon">253        <!-- Backspace -->254        <svg viewBox="0 0 24 24">255          <path d="M3 12l6-6h10v12H9z"></path>256          <path d="M13 9l4 4m0-4l-4 4"></path>257        </svg>258      </div>259    </div>260    <div class="kb-bottom-helpers">261      <div class="key circle">?123</div>262      <div class="key">@</div>263      <div class="key">☺</div>264      <div class="key space"></div>265      <div class="key">.</div>266      <div class="key circle icon dark">267        <!-- Enter -->268        <svg viewBox="0 0 24 24">269          <path d="M6 12h8v-4l4 4-4 4v-4H6z"></path>270        </svg>271      </div>272    </div>273  </div>274 275  <!-- Home indicator -->276  <div class="home-indicator"></div>277 278</div>279</body>280</html>