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 UI</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: #1A1A1A;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    padding: 0 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-size: 36px;30    color: #FFFFFF;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-icons svg { fill: none; stroke: #FFFFFF; stroke-width: 3; }38 39  /* Header */40  .header {41    position: absolute;42    top: 96px;43    left: 0;44    width: 1080px;45    height: 160px;46    border-bottom: 1px solid #2A2A2A;47    display: flex;48    align-items: center;49    padding: 0 24px;50    gap: 24px;51  }52  .header-title {53    font-size: 48px;54    font-weight: 600;55    flex: 1;56  }57  .header-actions {58    display: flex;59    align-items: center;60    gap: 30px;61  }62  .icon-button {63    width: 72px;64    height: 72px;65    display: inline-flex;66    align-items: center;67    justify-content: center;68    border-radius: 36px;69  }70  .icon-button svg { stroke: #EDEDED; fill: none; stroke-width: 4; }71 72  /* Fields */73  .fields {74    position: absolute;75    top: 256px;76    left: 0;77    width: 1080px;78    padding: 0 32px;79  }80  .row {81    padding: 28px 0;82    border-bottom: 1px solid #2A2A2A;83    display: flex;84    align-items: center;85  }86  .label {87    width: 140px;88    font-size: 34px;89    color: #B0B0B0;90  }91  .value {92    font-size: 36px;93    color: #EDEDED;94    flex: 1;95  }96  .dropdown {97    width: 48px;98    height: 48px;99  }100  .subject {101    font-size: 40px;102    padding: 32px 0;103    border-bottom: 1px solid #2A2A2A;104  }105  .body-text {106    font-size: 36px;107    line-height: 1.5;108    color: #EDEDED;109    padding: 32px 0 24px 0;110    white-space: pre-wrap;111  }112 113  /* Keyboard */114  .keyboard {115    position: absolute;116    left: 0;117    bottom: 96px; /* leave space for gesture pill */118    width: 1080px;119    height: 880px;120    background: #2B2B2B;121    border-top: 1px solid #3A3A3A;122  }123  .kbd-topbar {124    height: 110px;125    display: flex;126    align-items: center;127    gap: 24px;128    padding: 0 24px;129  }130  .kbd-top-icon {131    width: 84px;132    height: 84px;133    background: #3A3A3A;134    border-radius: 20px;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #DADADA;139    font-size: 28px;140  }141  .keys {142    padding: 12px 18px 18px 18px;143    display: flex;144    flex-direction: column;145    gap: 18px;146  }147  .row-keys {148    display: grid;149    grid-template-columns: repeat(10, 1fr);150    gap: 16px;151  }152  .row-keys.nine { grid-template-columns: repeat(9, 1fr); }153  .row-keys.bottom { grid-template-columns: 1.4fr 1fr 1fr 6fr 1fr 1.6fr; }154  .key {155    height: 120px;156    border-radius: 18px;157    background: #3A3A3A;158    color: #EDEDED;159    font-size: 44px;160    display: flex;161    align-items: center;162    justify-content: center;163  }164  .key.special { background: #4A4A4A; color: #FFFFFF; }165  .key.space { background: #3A3A3A; color: #D0D0D0; font-size: 36px; }166  .key svg { stroke: #EDEDED; fill: none; stroke-width: 4; }167 168  /* Gesture pill */169  .gesture-pill {170    position: absolute;171    bottom: 24px;172    left: 50%;173    transform: translateX(-50%);174    width: 220px;175    height: 12px;176    border-radius: 12px;177    background: #E6E6E6;178    opacity: 0.85;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status bar -->186  <div class="status-bar">187    <div>12:25</div>188    <div class="status-icons">189      <!-- Signal -->190      <svg width="40" height="40" viewBox="0 0 40 40">191        <path d="M6 30h4M12 26h4M18 22h4M24 18h4M30 14h4"></path>192      </svg>193      <!-- Wifi -->194      <svg width="40" height="40" viewBox="0 0 40 40">195        <path d="M6 14c8-6 20-6 28 0"></path>196        <path d="M10 20c6-4 14-4 20 0"></path>197        <path d="M14 26c4-3 8-3 12 0"></path>198        <circle cx="20" cy="30" r="2"></circle>199      </svg>200      <!-- Battery -->201      <svg width="56" height="40" viewBox="0 0 56 40">202        <rect x="4" y="8" width="42" height="24" rx="4" stroke="#FFFFFF"></rect>203        <rect x="46" y="14" width="6" height="12" rx="2" stroke="#FFFFFF"></rect>204        <rect x="8" y="12" width="32" height="16" fill="#FFFFFF" stroke="none"></rect>205      </svg>206    </div>207  </div>208 209  <!-- Header -->210  <div class="header">211    <!-- Back -->212    <div class="icon-button">213      <svg width="60" height="60" viewBox="0 0 60 60">214        <path d="M36 12 L18 30 L36 48"></path>215      </svg>216    </div>217    <div class="header-title">Compose</div>218    <div class="header-actions">219      <!-- Attach -->220      <div class="icon-button">221        <svg width="60" height="60" viewBox="0 0 60 60">222          <path d="M20 34c0 8 6 12 12 12s12-4 12-12V22c0-6-4-10-10-10s-10 4-10 10v16"></path>223        </svg>224      </div>225      <!-- Send -->226      <div class="icon-button">227        <svg width="60" height="60" viewBox="0 0 60 60">228          <path d="M10 30 L50 14 L40 30 L50 46 Z"></path>229        </svg>230      </div>231      <!-- Kebab -->232      <div class="icon-button">233        <svg width="16" height="60" viewBox="0 0 16 60">234          <circle cx="8" cy="14" r="4" fill="#EDEDED" stroke="none"></circle>235          <circle cx="8" cy="30" r="4" fill="#EDEDED" stroke="none"></circle>236          <circle cx="8" cy="46" r="4" fill="#EDEDED" stroke="none"></circle>237        </svg>238      </div>239    </div>240  </div>241 242  <!-- Fields -->243  <div class="fields">244    <div class="row">245      <div class="label">From</div>246      <div class="value">dbwscratch.test.id8@gmail.com</div>247    </div>248    <div class="row">249      <div class="label">To</div>250      <div class="value"></div>251      <svg class="dropdown" viewBox="0 0 24 24">252        <path d="M4 9 L12 15 L20 9" stroke="#B0B0B0" stroke-width="3" fill="none"></path>253      </svg>254    </div>255    <div class="subject">Check out 'Chill List' on JioSaavn!</div>256    <div class="body-text">257Listen to 'Chill List' on JioSaavn at258https://www.saavn.com/s/playlist/afd8554d0e2a42a63cf0e911da93fb28/chill_list/OA1Bzp2RN99zUTe4uMO3Gg__?referrer=svn_source=share&svn_medium=system&utm_source=share&utm_medium=system259    </div>260  </div>261 262  <!-- Keyboard -->263  <div class="keyboard">264    <div class="kbd-topbar">265      <div class="kbd-top-icon">▦</div>266      <div class="kbd-top-icon">☺</div>267      <div class="kbd-top-icon">GIF</div>268      <div class="kbd-top-icon">⚙</div>269      <div class="kbd-top-icon">G↔︎</div>270      <div class="kbd-top-icon">🎨</div>271      <div class="kbd-top-icon">🎤</div>272    </div>273    <div class="keys">274      <div class="row-keys">275        <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>276      </div>277      <div class="row-keys nine">278        <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>279      </div>280      <div class="row-keys">281        <div class="key special">282          <svg width="40" height="40" viewBox="0 0 40 40">283            <path d="M20 30 V10 M10 20 L20 10 L30 20"></path>284          </svg>285        </div>286        <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>287        <div class="key special">288          <svg width="40" height="40" viewBox="0 0 40 40">289            <path d="M10 12 L30 28"></path>290            <path d="M30 12 L10 28"></path>291          </svg>292        </div>293      </div>294      <div class="row-keys bottom">295        <div class="key special">?123</div>296        <div class="key">@</div>297        <div class="key">☺</div>298        <div class="key space">space</div>299        <div class="key">.</div>300        <div class="key special">301          <svg width="48" height="48" viewBox="0 0 48 48">302            <path d="M14 10 L30 24 L14 38"></path>303          </svg>304        </div>305      </div>306    </div>307  </div>308 309  <!-- Gesture pill -->310  <div class="gesture-pill"></div>311 312</div>313</body>314</html>