GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 28px;24    box-sizing: border-box;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .status-left { font-size: 38px; letter-spacing: 1px; }31  .status-right { display: flex; gap: 22px; align-items: center; }32  .status-icon {33    width: 36px; height: 36px; border-radius: 6px;34    background: #2A2A2A;35  }36  .battery {37    width: 64px; height: 32px; border: 2px solid #8C8C8C; border-radius: 6px; position: relative;38  }39  .battery::after {40    content: ""; position: absolute; right: -10px; top: 8px;41    width: 8px; height: 16px; background: #8C8C8C; border-radius: 2px;42  }43  .battery-fill {44    position: absolute; left: 4px; top: 4px; height: 22px; width: 42px; background: #BFBFBF; border-radius: 3px;45  }46 47  /* Header (compose toolbar) */48  .header {49    position: absolute;50    top: 120px;51    left: 0;52    width: 1080px;53    height: 150px;54    border-bottom: 1px solid #2C2C2C;55    display: flex;56    align-items: center;57    padding: 0 26px;58    box-sizing: border-box;59  }60  .left-actions { display: flex; align-items: center; gap: 30px; }61  .right-actions { margin-left: auto; display: flex; gap: 36px; align-items: center; }62  .icon-btn { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; }63  .icon svg { width: 54px; height: 54px; fill: #BDBDBD; }64  .icon.send svg { fill: #80A7FF; }65 66  /* Fields area */67  .fields {68    position: absolute;69    top: 270px;70    left: 0;71    width: 1080px;72    color: #EDEDED;73  }74  .field {75    display: flex;76    align-items: center;77    padding: 26px 30px;78    border-bottom: 1px solid #2C2C2C;79    box-sizing: border-box;80  }81  .label {82    width: 130px;83    font-size: 36px;84    color: #BDBDBD;85  }86  .value {87    font-size: 36px;88    color: #EDEDED;89  }90 91  /* To chip */92  .chip {93    display: inline-flex;94    align-items: center;95    padding: 16px 24px;96    border: 1px solid #4A4A4A;97    border-radius: 46px;98    background: #1A1A1A;99    gap: 18px;100  }101  .avatar {102    width: 68px; height: 68px; border-radius: 50%;103    background: #9B7B6B; color: #ffffff;104    display: flex; justify-content: center; align-items: center;105    font-weight: bold; font-size: 36px;106  }107  .email {108    font-size: 34px; color: #EDEDED; white-space: nowrap;109  }110  .dropdown { margin-left: 18px; }111  .dropdown svg { width: 34px; height: 34px; fill: #BDBDBD; }112 113  /* Subject + compose placeholder */114  .placeholder .label { color: #BDBDBD; }115  .compose {116    height: 830px;117    padding: 26px 30px;118    box-sizing: border-box;119    border-bottom: 1px solid #2C2C2C;120    color: #BDBDBD;121    font-size: 44px;122  }123 124  /* Keyboard */125  .keyboard {126    position: absolute;127    left: 0;128    bottom: 30px; /* leave space for home indicator */129    width: 1080px;130    height: 900px;131    background: #1A1A1A;132    border-top: 1px solid #2C2C2C;133    box-sizing: border-box;134    padding: 26px 26px 20px;135  }136  .kb-top-icons {137    height: 100px;138    display: flex;139    align-items: center;140    gap: 38px;141  }142  .kb-icon,143  .kb-icon-grid {144    width: 80px; height: 80px; background: #2B2B2B; border-radius: 18px;145    color: #D0D0D0; display: flex; align-items: center; justify-content: center;146    font-size: 30px;147    border: 1px solid #3A3A3A;148  }149  .kb-icon-grid {150    position: relative;151  }152  .kb-icon-grid::before,153  .kb-icon-grid::after {154    content:""; position:absolute; background:#D0D0D0;155  }156  .kb-icon-grid::before { width: 26px; height: 26px; left: 16px; top: 16px; border-radius:6px; box-shadow: 40px 0 0 #D0D0D0, 0 40px 0 #D0D0D0, 40px 40px 0 #D0D0D0; }157  .kb-mic {158    margin-left: auto;159    width: 86px; height: 86px; background: #2B2B2B; border-radius: 50%;160    border: 1px solid #3A3A3A; display: flex; align-items: center; justify-content: center;161  }162  .kb-mic svg { width: 44px; height: 44px; fill: #D0D0D0; }163 164  .kb-row { display: flex; gap: 14px; margin-top: 20px; }165  .key {166    height: 120px; flex: 1;167    background: #2B2B2B; border-radius: 20px; border: 1px solid #3A3A3A;168    display: flex; align-items: center; justify-content: center;169    font-size: 42px; color: #EDEDED;170  }171  .key.small { flex: 0 0 92px; }172  .key.wide { flex: 0 0 440px; }173  .key.medium { flex: 0 0 160px; }174  .key.backspace { flex: 0 0 170px; }175  .key.enter { flex: 0 0 170px; }176  .key .sub { font-size: 26px; color: #AFAFAF; position: absolute; top: 8px; left: 14px; }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    bottom: 0;182    left: 50%;183    transform: translateX(-50%);184    width: 340px;185    height: 10px;186    background: #CFCFCF;187    border-radius: 6px;188    opacity: 0.6;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div class="status-left">9:30</div>198    <div class="status-right">199      <div class="status-icon"></div>200      <div class="status-icon"></div>201      <div class="status-icon"></div>202      <div class="battery"><div class="battery-fill"></div></div>203    </div>204  </div>205 206  <!-- Compose header -->207  <div class="header">208    <div class="left-actions">209      <div class="icon-btn icon">210        <svg viewBox="0 0 24 24"><path d="M15.5 4l-9 8 9 8 1.5-1.8-6.3-5.2 6.3-5.2L15.5 4z"/></svg>211      </div>212    </div>213    <div class="right-actions">214      <div class="icon-btn icon">215        <svg viewBox="0 0 24 24"><path d="M6 6c6 0 9 6 12 9l-1.4 1.4C13.8 13 10.5 9.5 6 9.5V6z"/></svg>216      </div>217      <div class="icon-btn icon send">218        <svg viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v6l11 2-11 2v6z"/></svg>219      </div>220      <div class="icon-btn icon">221        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>222      </div>223    </div>224  </div>225 226  <!-- Fields -->227  <div class="fields">228    <div class="field">229      <div class="label">From</div>230      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>231    </div>232 233    <div class="field">234      <div class="label">To</div>235      <div class="chip">236        <div class="avatar">m</div>237        <div class="email">maria.rossi1993@gmail.com</div>238      </div>239      <div class="dropdown">240        <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>241      </div>242    </div>243 244    <div class="field placeholder">245      <div class="label">Subject</div>246    </div>247 248    <div class="compose">Compose email</div>249  </div>250 251  <!-- Keyboard -->252  <div class="keyboard">253 254    <div class="kb-top-icons">255      <div class="kb-icon-grid"></div>256      <div class="kb-icon">🙂</div>257      <div class="kb-icon">GIF</div>258      <div class="kb-icon">⚙</div>259      <div class="kb-icon">Gx</div>260      <div class="kb-icon">🎨</div>261      <div class="kb-mic">262        <svg viewBox="0 0 24 24"><path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3s-3 1.3-3 3v5c0 1.7 1.3 3 3 3zm5-3c0 3-2.5 5.5-5 5.5S7 14 7 11H5c0 3.7 2.8 6.8 6.3 7.4V22h1.5v-3.6C16.2 17.8 19 14.7 19 11h-2z"/></svg>263      </div>264    </div>265 266    <!-- Row 1 -->267    <div class="kb-row">268      <div class="key">Q</div>269      <div class="key">W</div>270      <div class="key">E</div>271      <div class="key">R</div>272      <div class="key">T</div>273      <div class="key">Y</div>274      <div class="key">U</div>275      <div class="key">I</div>276      <div class="key">O</div>277      <div class="key">P</div>278    </div>279 280    <!-- Row 2 -->281    <div class="kb-row" style="padding: 0 40px;">282      <div class="key">A</div>283      <div class="key">S</div>284      <div class="key">D</div>285      <div class="key">F</div>286      <div class="key">G</div>287      <div class="key">H</div>288      <div class="key">J</div>289      <div class="key">K</div>290      <div class="key">L</div>291    </div>292 293    <!-- Row 3 -->294    <div class="kb-row" style="padding: 0 100px;">295      <div class="key">Z</div>296      <div class="key">X</div>297      <div class="key">C</div>298      <div class="key">V</div>299      <div class="key">B</div>300      <div class="key">N</div>301      <div class="key">M</div>302      <div class="key backspace">303        <svg viewBox="0 0 24 24" style="width:44px;height:44px;fill:#EDEDED;">304          <path d="M22 7v10H8l-6-5 6-5h14zm-7.5 3.5l-2 2 2 2 1.5-1.5-1.5-1.5z"/>305        </svg>306      </div>307    </div>308 309    <!-- Row 4 -->310    <div class="kb-row" style="padding: 0 14px;">311      <div class="key medium">?123</div>312      <div class="key medium">,</div>313      <div class="key medium">🙂</div>314      <div class="key wide"></div>315      <div class="key medium">.</div>316      <div class="key enter">317        <svg viewBox="0 0 24 24" style="width:46px;height:46px;fill:#EDEDED;">318          <path d="M19 7h-2v5H6.8l3.6-3.6L9 7l-6 6 6 6 1.4-1.4-3.6-3.6H21V7z"/>319        </svg>320      </div>321    </div>322 323  </div>324 325  <!-- Home indicator -->326  <div class="home-indicator"></div>327 328</div>329</body>330</html>