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 - Dark UI</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: #1F1A1A; color: #E9D9D5;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 32px; box-sizing: border-box; color: #EED4D0; font-size: 42px;19  }20  .status-icons { display: flex; align-items: center; gap: 24px; }21  .status-icons svg { width: 40px; height: 40px; stroke: #EED4D0; fill: none; }22 23  /* App bar */24  .app-bar {25    position: absolute; top: 96px; left: 0; width: 100%; height: 160px;26    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;27    border-bottom: 1px solid rgba(255,255,255,0.08);28  }29  .app-title { font-size: 64px; margin-left: 18px; flex: 1; }30  .app-actions { display: flex; align-items: center; gap: 32px; }31  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }32  .icon-btn svg { width: 48px; height: 48px; stroke: #E8C2BC; fill: none; }33  .icon-btn .send { stroke: none; fill: #E8C2BC; }34 35  /* Fields area */36  .fields {37    position: absolute; top: 256px; left: 0; width: 100%;38    padding: 0 36px; box-sizing: border-box;39  }40  .field-row {41    padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.08);42  }43  .label { font-size: 36px; color: #B9AAA7; margin-bottom: 12px; }44  .value { font-size: 40px; color: #F1E4E2; }45  .to-row { display: flex; align-items: center; justify-content: space-between; }46  .to-value { font-size: 40px; }47  .dropdown svg { width: 40px; height: 40px; stroke: #E8C2BC; }48  .recipient-suggestion {49    display: flex; align-items: center; gap: 24px; padding: 24px 0;50    border-bottom: 1px solid rgba(255,255,255,0.08);51  }52  .avatar {53    width: 84px; height: 84px; border-radius: 42px;54    background: #E0E0E0; border: 1px solid #BDBDBD;55    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;56  }57  .suggest-text { display: flex; flex-direction: column; }58  .suggest-title { font-size: 40px; }59  .suggest-sub { font-size: 32px; color: #B9AAA7; }60 61  /* Message body placeholder */62  .body-area {63    padding: 36px; font-size: 40px; color: #B9AAA7;64  }65 66  /* Keyboard */67  .keyboard {68    position: absolute; left: 0; bottom: 88px; width: 100%; height: 820px;69    background: #221C1C; border-top: 1px solid rgba(255,255,255,0.08);70    box-sizing: border-box;71  }72  .kb-toolbar {73    height: 120px; display: flex; align-items: center; gap: 44px; padding: 0 32px;74    color: #E8C2BC;75  }76  .kb-tool {77    width: 84px; height: 84px; border-radius: 22px; background: #2C2424;78    display: flex; align-items: center; justify-content: center; font-size: 38px;79    border: 1px solid rgba(255,255,255,0.06);80  }81  .kb-keys { padding: 0 24px; }82  .kb-row { display: flex; justify-content: center; gap: 16px; margin: 22px 0; }83  .key {84    background: #2E2727; color: #E9D9D5; border-radius: 22px;85    width: 86px; height: 120px; display: flex; align-items: center; justify-content: center;86    font-size: 44px; border: 1px solid rgba(255,255,255,0.06);87  }88  .key-wide { width: 132px; }89  .key-backspace svg, .key-home svg { width: 48px; height: 48px; stroke: #E9D9D5; }90  .space { width: 520px; }91  .special-pill {92    width: 132px; height: 120px; border-radius: 60px; background: #E1B4AE; color: #2A2323;93    font-weight: 600; border: none;94  }95  .enter-pill {96    width: 132px; height: 120px; border-radius: 60px; background: #E1B4AE; border: none;97    display: flex; align-items: center; justify-content: center;98  }99  .enter-pill svg { width: 50px; height: 50px; fill: #2A2323; }100  .gesture-pill {101    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);102    width: 320px; height: 12px; background: #EDEDED; border-radius: 12px; opacity: 0.9;103  }104 105  /* Back button circle at bottom toolbar */106  .soft-back {107    width: 84px; height: 84px; border-radius: 42px; background: #E1B4AE; color: #2A2323;108    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700;109  }110 111  /* Back arrow in app bar */112  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }113  .back-btn svg { width: 54px; height: 54px; stroke: #E8C2BC; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div>3:57</div>122    <div class="status-icons">123      <svg viewBox="0 0 24 24"><path d="M3 10a9 9 0 0 1 18 0" stroke-width="2"/><path d="M6 10a6 6 0 0 1 12 0" stroke-width="2"/><circle cx="12" cy="17" r="2" fill="#EED4D0"/></svg>124      <svg viewBox="0 0 24 24"><path d="M3 8h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8z" stroke-width="2"/><rect x="6" y="11" width="12" height="5" fill="#EED4D0"/></svg>125    </div>126  </div>127 128  <!-- App Bar -->129  <div class="app-bar">130    <div class="back-btn">131      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>132    </div>133    <div class="app-title">Compose</div>134    <div class="app-actions">135      <div class="icon-btn" title="Attach">136        <svg viewBox="0 0 24 24">137          <path d="M8 12l6-6a3 3 0 1 1 4 4l-8 8a5 5 0 1 1-7-7l6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>138        </svg>139      </div>140      <div class="icon-btn" title="Send">141        <svg class="send" viewBox="0 0 24 24">142          <path d="M2 21l20-9-20-9 5 9-5 9z"/>143        </svg>144      </div>145      <div class="icon-btn" title="More">146        <svg viewBox="0 0 24 24">147          <circle cx="12" cy="5" r="2" fill="#E8C2BC"/>148          <circle cx="12" cy="12" r="2" fill="#E8C2BC"/>149          <circle cx="12" cy="19" r="2" fill="#E8C2BC"/>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Fields -->156  <div class="fields">157    <div class="field-row">158      <div class="label">From</div>159      <div class="value">dbwscratch.test.id6@gmail.com</div>160    </div>161    <div class="field-row">162      <div class="to-row">163        <div class="to-value">dwbscratch.test.id5@gmail.com</div>164        <div class="dropdown">165          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>166        </div>167      </div>168    </div>169    <div class="recipient-suggestion">170      <div class="avatar">[IMG: Contact Avatar]</div>171      <div class="suggest-text">172        <div class="suggest-title">Add recipient</div>173        <div class="suggest-sub">dwbscratch.test.id5@gmail.com</div>174      </div>175    </div>176    <div class="body-area">177      <!-- Message body area (empty in screenshot) -->178    </div>179  </div>180 181  <!-- Keyboard -->182  <div class="keyboard">183    <div class="kb-toolbar">184      <div class="soft-back">←</div>185      <div class="kb-tool">Gx</div>186      <div class="kb-tool">187        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" stroke="#E8C2BC" fill="none"/><path d="M12 5v2M12 17v2M5 12h2M17 12h2" stroke="#E8C2BC"/></svg>188      </div>189      <div class="kb-tool">190        <svg viewBox="0 0 24 24"><path d="M3 21h18" stroke="#E8C2BC"/><circle cx="6" cy="9" r="3" fill="#E8C2BC"/><circle cx="12" cy="9" r="3" fill="#D79A94"/><circle cx="18" cy="9" r="3" fill="#C8746B"/></svg>191      </div>192      <div class="kb-tool">193        <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2" stroke="#E8C2BC"/><rect x="9" y="8" width="6" height="8" fill="#E8C2BC"/></svg>194      </div>195      <div style="flex:1"></div>196      <div class="kb-tool">⋯</div>197      <div class="kb-tool">198        <svg viewBox="0 0 24 24"><path d="M6 18v-6a6 6 0 1 1 12 0v6" stroke="#E8C2BC"/><circle cx="12" cy="19" r="1.8" fill="#E8C2BC"/></svg>199      </div>200    </div>201 202    <div class="kb-keys">203      <div class="kb-row">204        <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>205        <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>206      </div>207      <div class="kb-row" style="padding-left: 40px;">208        <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>209        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>210      </div>211      <div class="kb-row" style="padding-left: 84px;">212        <div class="key key-home">213          <svg viewBox="0 0 24 24"><path d="M3 12l9-8 9 8" stroke-width="2"/><path d="M7 12v7h10v-7" stroke-width="2"/></svg>214        </div>215        <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>216        <div class="key key-backspace">217          <svg viewBox="0 0 24 24"><path d="M3 12l6-6h10v12H9z" stroke-width="2"/><path d="M12 9l4 4m0-4l-4 4" stroke-width="2"/></svg>218        </div>219      </div>220      <div class="kb-row">221        <div class="special-pill">?123</div>222        <div class="key-wide">@</div>223        <div class="key-wide">☺</div>224        <div class="key space"></div>225        <div class="key-wide">.</div>226        <div class="enter-pill">227          <svg viewBox="0 0 24 24"><path d="M5 12h11v4l4-4-4-4v4H5z"/></svg>228        </div>229      </div>230    </div>231  </div>232 233  <div class="gesture-pill"></div>234</div>235</body>236</html>