GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose - Dark UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1f1a18; /* warm dark */14    color: #f3eee9;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 90px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #f7f2ee;27    font-size: 36px;28    letter-spacing: 0.5px;29  }30  .status-icons {31    display: flex; gap: 26px; align-items: center;32    color: #e9dfd8;33  }34  .battery {35    width: 56px; height: 28px; border: 3px solid #e9dfd8; border-radius: 6px; position: relative;36  }37  .battery::after {38    content: "";39    position: absolute; right: -12px; top: 8px;40    width: 8px; height: 12px; background: #e9dfd8; border-radius: 2px;41  }42  .battery .level { position: absolute; left: 4px; top: 4px; height: 18px; width: 36px; background: #e9dfd8; border-radius: 3px; }43 44  /* Header */45  .header {46    position: absolute;47    top: 90px; left: 0; right: 0;48    height: 160px;49    display: flex;50    align-items: center;51    padding: 0 32px;52    border-bottom: 1px solid #3a302d;53  }54  .header .title {55    font-size: 64px; font-weight: 600; margin-left: 18px;56  }57  .header .actions {58    margin-left: auto; display: flex; gap: 40px; align-items: center;59  }60  .icon-btn svg { fill: none; stroke: #f3eee9; stroke-width: 4; }61  .icon-dot svg { fill: #f3eee9; }62 63  /* Fields */64  .content {65    position: absolute;66    top: 250px; left: 0; right: 0;67    padding: 0 40px;68    font-size: 40px;69  }70  .field {71    padding: 28px 0 24px;72    border-bottom: 1px solid #3a302d;73  }74  .label {75    color: #cfc3bb;76    font-size: 34px;77    margin-bottom: 12px;78  }79  .value {80    display: flex; align-items: center; justify-content: space-between;81    font-size: 40px;82  }83  .chevron {84    width: 40px; height: 40px;85  }86  .subject { font-size: 42px; }87 88  /* Body */89  .body-area {90    padding-top: 60px;91  }92  .body-title {93    font-size: 50px; margin-bottom: 40px; font-weight: 600;94  }95  .task {96    display: flex; align-items: center; gap: 26px; font-size: 44px;97  }98  .checkbox {99    width: 42px; height: 42px; border: 3px solid #d8c9c1; border-radius: 6px;100  }101 102  /* Keyboard mock */103  .keyboard {104    position: absolute;105    left: 0; right: 0; bottom: 80px;106    height: 760px;107    background: #292422;108    border-top: 1px solid #3a302d;109    padding: 22px 28px;110  }111  .kb-toolbar {112    display: flex; align-items: center; justify-content: center; gap: 64px;113    margin-bottom: 18px;114    color: #bfb3ac;115  }116  .kb-row { display: flex; gap: 18px; justify-content: center; margin: 20px 0; }117  .key {118    height: 116px; min-width: 80px;119    padding: 0 26px;120    background: #3a3533;121    color: #f3eee9;122    border-radius: 24px;123    display: flex; align-items: center; justify-content: center;124    font-size: 44px;125  }126  .key.wide { min-width: 160px; }127  .space { flex: 1; height: 116px; border-radius: 28px; background: #3a3533; }128  .enter { background: #e5c8c1; color: #2a2220; }129  .accent { background: #d6b5ad; color: #2b2321; }130  .home-indicator {131    position: absolute; left: 50%; transform: translateX(-50%);132    bottom: 20px; width: 380px; height: 10px; background: #e9e6e3; border-radius: 8px; opacity: 0.75;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status bar -->139  <div class="status-bar">140    <div>8:22</div>141    <div class="status-icons">142      <div title="signal">📶</div>143      <div title="wifi">🛜</div>144      <div class="battery"><div class="level"></div></div>145    </div>146  </div>147 148  <!-- Header -->149  <div class="header">150    <div class="icon-btn">151      <svg width="72" height="72" viewBox="0 0 72 72">152        <path d="M42 18 L24 36 L42 54" stroke-linecap="round" stroke-linejoin="round"></path>153      </svg>154    </div>155    <div class="title">Compose</div>156    <div class="actions">157      <div class="icon-btn" title="Attach">158        <svg width="62" height="62" viewBox="0 0 62 62">159          <path d="M20 26 v16 a12 12 0 0 0 24 0 V22 a8 8 0 0 0 -16 0 v18 a4 4 0 0 0 8 0 V26" stroke-linecap="round" stroke-linejoin="round"></path>160        </svg>161      </div>162      <div class="icon-btn" title="Send">163        <svg width="62" height="62" viewBox="0 0 62 62">164          <path d="M10 30 L52 16 L38 52 L30 36 L10 30 Z" stroke-linejoin="round"></path>165        </svg>166      </div>167      <div class="icon-dot" title="More">168        <svg width="14" height="62" viewBox="0 0 14 62">169          <circle cx="7" cy="16" r="5"></circle>170          <circle cx="7" cy="31" r="5"></circle>171          <circle cx="7" cy="46" r="5"></circle>172        </svg>173      </div>174    </div>175  </div>176 177  <!-- Content -->178  <div class="content">179    <div class="field">180      <div class="label">From</div>181      <div class="value">182        <div>dbwscratch.test.id6@gmail.com</div>183      </div>184    </div>185 186    <div class="field">187      <div class="label">To</div>188      <div class="value">189        <div style="color:#9f918a"> </div>190        <svg class="chevron" viewBox="0 0 24 24">191          <path d="M5 9 L12 16 L19 9" fill="none" stroke="#cfc3bb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>192        </svg>193      </div>194    </div>195 196    <div class="field subject">197      <div>To Do - Tasks</div>198    </div>199 200    <div class="body-area">201      <div class="body-title">Tasks</div>202      <div class="task">203        <div class="checkbox"></div>204        <div>Fun time (Yesterday)</div>205      </div>206    </div>207  </div>208 209  <!-- Keyboard mock -->210  <div class="keyboard">211    <div class="kb-toolbar">212      <div>GIF</div>213      <div>Translate</div>214      <div>Settings</div>215      <div>Palette</div>216      <div>🎤</div>217    </div>218    <div class="kb-row">219      <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><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>220    </div>221    <div class="kb-row">222      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>223    </div>224    <div class="kb-row">225      <div class="key accent">⇧</div>226      <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>227      <div class="key accent">⌫</div>228    </div>229    <div class="kb-row">230      <div class="key wide accent">?123</div>231      <div class="key wide">@</div>232      <div class="key wide">😊</div>233      <div class="space"></div>234      <div class="key wide">.</div>235      <div class="key wide enter">↵</div>236    </div>237  </div>238 239  <div class="home-indicator"></div>240</div>241</body>242</html>