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;11    position: relative; overflow: hidden;12    background: #121212; color: #ECECEC;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 32px;19    display: flex; align-items: center; justify-content: space-between;20    color: #FFFFFF; font-size: 28px;21  }22  .status-left { display: flex; align-items: center; gap: 16px; }23  .status-right { display: flex; align-items: center; gap: 28px; }24  .status-icon svg { width: 36px; height: 36px; fill: #FFFFFF; }25 26  /* App bar */27  .app-bar {28    height: 150px;29    border-bottom: 1px solid #2A2A2A;30    display: flex; align-items: center;31    padding: 0 24px;32  }33  .app-left { display: flex; align-items: center; gap: 24px; }34  .app-title { font-size: 44px; font-weight: 500; color: #EDEDED; }35  .app-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }36  .app-icon svg { width: 44px; height: 44px; fill: #EDEDED; }37 38  /* Content area */39  .content { padding: 24px; }40  .field {41    padding: 18px 0;42    border-bottom: 1px solid #2A2A2A;43  }44  .label { font-size: 26px; color: #9E9E9E; margin-bottom: 8px; }45  .value { font-size: 32px; color: #EDEDED; }46  .to-row { display: flex; align-items: center; justify-content: space-between; }47  .caret svg { width: 30px; height: 30px; fill: #BDBDBD; }48 49  /* Suggestion card */50  .suggestion {51    display: flex; align-items: center;52    gap: 24px; padding: 26px 0;53    border-bottom: 1px solid #2A2A2A;54  }55  .avatar {56    width: 96px; height: 96px; border-radius: 50%;57    background: #E0E0E0; border: 1px solid #BDBDBD;58    display: flex; align-items: center; justify-content: center;59    color: #757575; font-size: 22px;60  }61  .s-text .name { font-size: 34px; color: #EDEDED; }62  .s-text .email { font-size: 26px; color: #A9A9A9; margin-top: 6px; }63 64  /* Spacer to mimic large empty area above keyboard */65  .spacer { height: 860px; }66 67  /* Keyboard */68  .keyboard {69    position: absolute; left: 0; bottom: 0;70    width: 100%; height: 930px;71    background: #1A1A1A; border-top: 1px solid #2A2A2A;72    box-sizing: border-box; padding: 24px;73  }74  .kb-tools {75    height: 110px; display: flex; align-items: center;76    justify-content: space-between; padding: 0 12px; color: #CFCFCF;77  }78  .tool { display: flex; align-items: center; gap: 10px; font-size: 26px; }79  .tool-icon {80    width: 48px; height: 48px; border-radius: 10px;81    background: #2C2C2C; display: flex; align-items: center; justify-content: center;82  }83  .tool-icon svg { width: 28px; height: 28px; fill: #CFCFCF; }84 85  .kb-row {86    margin-top: 16px;87    display: flex; justify-content: center; gap: 12px;88  }89  .key {90    width: 92px; height: 120px; border-radius: 18px;91    background: #2C2C2C; color: #E5E5E5; font-size: 34px;92    display: flex; align-items: center; justify-content: center;93  }94  .key.wide { width: 180px; }95  .space { flex: 1; height: 120px; background: #2C2C2C; border-radius: 18px; }96  .key.alt { background: #2F3A4B; color: #EAF2FF; } /* subtle bluish for special keys */97  .enter { width: 160px; height: 120px; border-radius: 28px; background: #5673FF; color: #FFFFFF; font-size: 34px; }98  .bottom-bar {99    position: absolute; left: 0; bottom: 22px;100    width: 100%; display: flex; justify-content: center;101  }102  .gesture {103    width: 320px; height: 12px; border-radius: 12px; background: #EDEDED; opacity: 0.85;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div class="status-left">113      <div style="font-weight: 500;">12:27</div>114    </div>115    <div class="status-right">116      <div class="status-icon" title="Signal">117        <svg viewBox="0 0 24 24"><path d="M2 20h2v-3H2v3zm4 0h2v-6H6v6zm4 0h2v-9h-2v9zm4 0h2v-12h-2v12zm4 0h2V4h-2v16z"/></svg>118      </div>119      <div class="status-icon" title="Wi‑Fi">120        <svg viewBox="0 0 24 24"><path d="M12 18.5l-1.8-1.8a3 3 0 014 0L12 18.5zM4.5 11.5a12 12 0 0115 0l-1.8 1.8a9 9 0 00-11.4 0L4.5 11.5zm2.9-3a16 16 0 0119.2 0l-1.8 1.8a13 13 0 00-15.6 0L7.4 8.5z" /></svg>121      </div>122      <div class="status-icon" title="Battery">123        <svg viewBox="0 0 24 24"><path d="M20 7h1v10h-1v2H4V5h16v2zm-2 0H6v10h12V7z"/></svg>124      </div>125    </div>126  </div>127 128  <!-- App bar -->129  <div class="app-bar">130    <div class="app-left">131      <div class="app-icon" title="Back">132        <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7 1.5-1.5L11.5 12l5.5-5.5L15.5 5z"/></svg>133      </div>134      <div class="app-title">Compose</div>135    </div>136    <div class="app-right">137      <div class="app-icon" title="Attach">138        <svg viewBox="0 0 24 24"><path d="M7 12a5 5 0 019.6-2.1l-6.1 6.1a3 3 0 11-4.2-4.2l7.8-7.8 1.4 1.4-7.8 7.8a1 1 0 101.4 1.4l6.1-6.1c1.6 2.4.8 5.7-1.6 7.3-2.4 1.6-5.7.8-7.3-1.6A5 5 0 017 12z"/></svg>139      </div>140      <div class="app-icon" title="Send">141        <svg viewBox="0 0 24 24"><path d="M3 12l18-8-5 8 5 8-18-8zm10.5-.5l-6.7 3.1 1.9-3.1-1.9-3.1 6.7 3.1z"/></svg>142      </div>143      <div class="app-icon" title="More">144        <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>145      </div>146    </div>147  </div>148 149  <!-- Content -->150  <div class="content">151    <div class="field">152      <div class="label">From</div>153      <div class="value">dbwscratch.test.id8@gmail.com</div>154    </div>155 156    <div class="field">157      <div class="label">To</div>158      <div class="to-row">159        <div class="value">akashgahlot@google.com</div>160        <div class="caret">161          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>162        </div>163      </div>164    </div>165 166    <div class="suggestion">167      <div class="avatar">[IMG: Avatar]</div>168      <div class="s-text">169        <div class="name">akashgahlot@google.com</div>170        <div class="email">akashgahlot@google.com</div>171      </div>172    </div>173 174    <div class="spacer"></div>175  </div>176 177  <!-- Keyboard -->178  <div class="keyboard">179    <div class="kb-tools">180      <div class="tool">181        <div class="tool-icon">182          <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>183        </div>184      </div>185      <div class="tool">186        <div class="tool-icon">187          <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5c0 3.5 5 9 5 9s5-5.5 5-9a5 5 0 00-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>188        </div>189        <span>GIF</span>190      </div>191      <div class="tool">192        <div class="tool-icon">193          <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7l3-7z"/></svg>194        </div>195      </div>196      <div class="tool">197        <div class="tool-icon">198          <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 16a7 7 0 110-14 7 7 0 010 14z"/></svg>199        </div>200      </div>201      <div class="tool">202        <div class="tool-icon">203          <svg viewBox="0 0 24 24"><path d="M4 4l16 8-16 8V4zm3 4.8v6.4L14.6 12 7 8.8z"/></svg>204        </div>205      </div>206    </div>207 208    <!-- Row 1 -->209    <div class="kb-row">210      <div class="key">q</div>211      <div class="key">w</div>212      <div class="key">e</div>213      <div class="key">r</div>214      <div class="key">t</div>215      <div class="key">y</div>216      <div class="key">u</div>217      <div class="key">i</div>218      <div class="key">o</div>219      <div class="key">p</div>220    </div>221    <!-- Row 2 -->222    <div class="kb-row">223      <div class="key">a</div>224      <div class="key">s</div>225      <div class="key">d</div>226      <div class="key">f</div>227      <div class="key">g</div>228      <div class="key">h</div>229      <div class="key">j</div>230      <div class="key">k</div>231      <div class="key">l</div>232    </div>233    <!-- Row 3 -->234    <div class="kb-row">235      <div class="key wide">⇧</div>236      <div class="key">z</div>237      <div class="key">x</div>238      <div class="key">c</div>239      <div class="key">v</div>240      <div class="key">b</div>241      <div class="key">n</div>242      <div class="key">m</div>243      <div class="key wide">⌫</div>244    </div>245    <!-- Row 4 -->246    <div class="kb-row">247      <div class="key alt">?123</div>248      <div class="key">@</div>249      <div class="key">☺</div>250      <div class="space"></div>251      <div class="key">.</div>252      <div class="enter">↩︎</div>253    </div>254 255    <div class="bottom-bar">256      <div class="gesture"></div>257    </div>258  </div>259 260</div>261</body>262</html>