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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1d1e;15    color: #e9f2f2;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 90px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #cfe3e3;28    font-size: 34px;29    letter-spacing: 1px;30  }31  .status-icons { display: flex; align-items: center; gap: 18px; }32  .icon { width: 36px; height: 36px; }33  .pct { font-size: 28px; color: #e9f2f2; }34 35  /* App bar */36  .app-bar {37    position: absolute;38    top: 90px;39    left: 0; right: 0;40    height: 130px;41    padding: 0 20px 0 10px;42    display: flex;43    align-items: center;44    border-bottom: 1px solid #213031;45  }46  .icon-btn {47    width: 96px; height: 96px;48    border: none; background: transparent; color: #e9f2f2; padding: 0;49    display: flex; align-items: center; justify-content: center;50  }51  .title {52    font-size: 48px; font-weight: 600; flex: 1; color: #e9f2f2;53  }54  .actions { display: flex; align-items: center; gap: 2px; }55 56  /* Content */57  .content {58    position: absolute;59    top: 220px;60    left: 0; right: 0;61    padding: 10px 36px 0 36px;62    color: #e9f2f2;63  }64  .field {65    display: grid;66    grid-template-columns: 110px 1fr 70px;67    align-items: center;68    gap: 18px;69    padding: 18px 0;70  }71  .label { color: #8fb0b1; font-size: 30px; }72  .value { font-size: 34px; color: #e7f0f1; }73  .editable { border-bottom: 2px solid #243537; padding-bottom: 10px; }74  .divider { height: 1px; background: #223334; margin: 6px 0 18px 110px; }75 76  .contact-row {77    margin-top: 22px;78    display: flex; align-items: center;79    gap: 28px;80  }81  .avatar-ph {82    width: 96px; height: 96px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    border-radius: 50%;86    color: #757575;87    display: flex; align-items: center; justify-content: center;88    font-size: 20px;89  }90  .contact-text .name { font-size: 36px; color: #d8e8e9; }91  .contact-text .sub  { font-size: 26px; color: #8fb0b1; margin-top: 4px; }92 93  /* Keyboard mock */94  .keyboard {95    position: absolute;96    left: 0; right: 0;97    bottom: 70px;98    height: 850px;99    background: #121f20;100    border-top: 1px solid #1f2d2e;101    padding: 16px 18px 28px 18px;102    box-sizing: border-box;103  }104  .kb-toolbar {105    height: 88px;106    display: flex; align-items: center; gap: 18px;107  }108  .tool {109    width: 80px; height: 80px; border-radius: 20px;110    background: #1d2a2b; display: flex; align-items: center; justify-content: center;111    color: #bcd5d6; font-size: 26px;112  }113 114  .row { display: flex; gap: 10px; margin-top: 18px; }115  .key {116    flex: 1;117    height: 120px;118    background: #243133;119    border-radius: 22px;120    display: flex; align-items: center; justify-content: center;121    color: #dfe9ea; font-size: 40px; box-shadow: inset 0 -2px 0 #1a2425;122  }123  .key.small { flex: 1.1; }124  .key.wide { flex: 6; }125  .key.action { background: #2f3b3d; color: #dfe9ea; }126  .key.accent { background: #76c7a5; color: #0a1718; }127  .key.back { position: relative; }128  .key.back svg, .key.shift svg { width: 40px; height: 40px; }129  .kb-hint { color: #9fb9ba; font-size: 22px; margin-top: 8px; text-align: center; }130 131  /* Bottom gesture bar */132  .gesture {133    position: absolute;134    bottom: 16px; left: 50%;135    transform: translateX(-50%);136    width: 320px; height: 10px; border-radius: 8px;137    background: #e6e6e6; opacity: 0.9;138  }139 140  /* Helpers */141  .chev { width: 44px; height: 44px; }142  .muted { color: #8fb0b1; }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div class="time">12:04</div>151    <div class="status-icons">152      <!-- simple mail, calendar icons as placeholders -->153      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#b9d1d1" stroke-width="2">154        <rect x="3" y="5" width="18" height="14" rx="2"></rect>155        <path d="M3 7l9 6 9-6"></path>156      </svg>157      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#b9d1d1" stroke-width="2">158        <rect x="4" y="4" width="16" height="16" rx="2"></rect>159        <path d="M8 2v4M16 2v4M4 10h16"></path>160      </svg>161      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#b9d1d1" stroke-width="2">162        <path d="M3 11a9 9 0 0 1 18 0"></path>163        <path d="M5 11a7 7 0 0 1 14 0"></path>164        <circle cx="12" cy="18" r="1.5" fill="#b9d1d1"></circle>165      </svg>166      <!-- WiFi -->167      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#d6ebec" stroke-width="2">168        <path d="M2 8a16 16 0 0 1 20 0"></path>169        <path d="M5 11a11 11 0 0 1 14 0"></path>170        <path d="M8 14a6 6 0 0 1 8 0"></path>171        <circle cx="12" cy="18" r="1.5" fill="#d6ebec"></circle>172      </svg>173      <!-- Battery -->174      <svg class="icon" viewBox="0 0 26 24" fill="none" stroke="#d6ebec" stroke-width="2">175        <rect x="1" y="6" width="20" height="12" rx="2"></rect>176        <rect x="1" y="6" width="16" height="12" rx="2" fill="#d6ebec"></rect>177        <rect x="22" y="9" width="3" height="6" rx="1" stroke="#d6ebec"></rect>178      </svg>179      <span class="pct">100%</span>180    </div>181  </div>182 183  <!-- App bar -->184  <div class="app-bar">185    <button class="icon-btn" aria-label="Back">186      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#e9f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">187        <path d="M15 18l-6-6 6-6"></path>188      </svg>189    </button>190    <div class="title">Compose</div>191    <div class="actions">192      <button class="icon-btn" aria-label="Attach">193        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#cfe3e3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">194          <path d="M7 7v8a5 5 0 0 0 10 0V6a3 3 0 0 0-6 0v9"></path>195        </svg>196      </button>197      <button class="icon-btn" aria-label="Send">198        <svg class="icon" viewBox="0 0 24 24" fill="#8fe6c2">199          <path d="M2 12l20-9-6 9 6 9-20-9z"></path>200        </svg>201      </button>202      <button class="icon-btn" aria-label="More">203        <svg class="icon" viewBox="0 0 24 24" fill="#cfe3e3">204          <circle cx="12" cy="5" r="2"></circle>205          <circle cx="12" cy="12" r="2"></circle>206          <circle cx="12" cy="19" r="2"></circle>207        </svg>208      </button>209    </div>210  </div>211 212  <!-- Fields -->213  <div class="content">214    <div class="field">215      <div class="label">From</div>216      <div class="value">dbwscratch.test.id4@gmail.com</div>217      <div class="expand">218        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#90b9ba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">219          <path d="M6 9l6 6 6-6"></path>220        </svg>221      </div>222    </div>223    <div class="divider"></div>224 225    <div class="field to-field">226      <div class="label">To</div>227      <div class="value editable">clarawagner@gmail.com</div>228      <div class="expand">229        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#90b9ba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">230          <path d="M6 9l6 6 6-6"></path>231        </svg>232      </div>233    </div>234 235    <div class="contact-row">236      <div class="avatar-ph">[IMG: Avatar]</div>237      <div class="contact-text">238        <div class="name">clarawagner@gmail.com</div>239        <div class="sub">clarawagner@gmail.com</div>240      </div>241    </div>242  </div>243 244  <!-- Keyboard mock -->245  <div class="keyboard">246    <div class="kb-toolbar">247      <div class="tool">▦</div>248      <div class="tool">☺</div>249      <div class="tool">GIF</div>250      <div class="tool">251        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#bcd5d6" stroke-width="2">252          <circle cx="12" cy="12" r="9"></circle>253          <path d="M2.5 12h19"></path>254          <path d="M12 3a12 12 0 0 0 0 18"></path>255        </svg>256      </div>257      <div class="tool">🎨</div>258      <div class="tool">259        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#bcd5d6" stroke-width="2">260          <path d="M12 19l9-7-9-7v14z"></path>261          <path d="M3 5v14"></path>262        </svg>263      </div>264    </div>265 266    <div class="row">267      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>268      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>269      <div class="key">o</div><div class="key">p</div>270    </div>271    <div class="row">272      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>273      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>274      <div class="key">l</div>275    </div>276    <div class="row">277      <div class="key shift">278        <svg viewBox="0 0 24 24" fill="none" stroke="#dfe9ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">279          <path d="M4 14l8-8 8 8"></path>280          <path d="M12 6v12"></path>281        </svg>282      </div>283      <div class="key">z</div><div class="key">x</div><div class="key">c</div>284      <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>285      <div class="key back">286        <svg viewBox="0 0 24 24" fill="none" stroke="#dfe9ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">287          <path d="M22 12H8"></path>288          <path d="M12 8l-4 4 4 4"></path>289        </svg>290      </div>291    </div>292    <div class="row">293      <div class="key accent">?123</div>294      <div class="key">@</div>295      <div class="key">☺</div>296      <div class="key wide action"></div>297      <div class="key">.</div>298      <div class="key accent">299        <svg viewBox="0 0 24 24" width="36" height="36" fill="#0a1718">300          <path d="M2 12l18-9v18z"></path>301        </svg>302      </div>303    </div>304    <div class="kb-hint">English (US)</div>305  </div>306 307  <div class="gesture"></div>308</div>309</body>310</html>