GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Gmail Compose - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0f1b1e; /* dark Gmail-like background */14    color: #d7e3e6;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #cfe2e6;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 28px;32  }33  .dot { width: 10px; height: 10px; background: #cfe2e6; border-radius: 50%; display: inline-block; opacity: .9; }34 35  /* App bar */36  .app-bar {37    height: 120px;38    border-bottom: 1px solid #22343a;39    display: flex;40    align-items: center;41    padding: 0 24px;42  }43  .app-left, .app-right {44    display: flex; align-items: center;45  }46  .app-title { flex: 1; text-align: center; color: #c8d7da; font-size: 34px; opacity: 0.0; } /* invisible center title to space things */47  .icon-btn {48    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%;49  }50  .icon-btn svg { fill: #b7c6c9; width: 42px; height: 42px; }51 52  /* Compose fields */53  .content {54    padding: 0;55  }56  .field {57    padding: 26px 34px 18px 34px;58    border-bottom: 1px solid #1f3136;59  }60  .label {61    color: #8fa3a8;62    font-size: 28px;63    margin-bottom: 8px;64  }65  .input-row {66    display: flex;67    align-items: center;68    justify-content: space-between;69  }70  .input-text {71    font-size: 38px;72    color: #d7e3e6;73    white-space: nowrap;74    overflow: hidden;75    text-overflow: ellipsis;76    max-width: 920px;77  }78  .dropdown svg { width: 34px; height: 34px; fill: #8fa3a8; }79 80  .subject {81    padding: 30px 34px;82    font-size: 40px;83    border-bottom: 1px solid #1f3136;84  }85 86  .body-area {87    padding: 28px 34px 60px 34px;88    font-size: 38px;89    line-height: 1.5;90    color: #cfe2ff;91  }92 93  /* Keyboard mock */94  .keyboard {95    position: absolute;96    left: 0;97    bottom: 0;98    width: 1080px;99    height: 860px;100    background: #10171a;101    border-top: 2px solid #22343a;102    padding: 18px 22px 22px;103    box-sizing: border-box;104  }105  .kb-toolbar {106    display: flex;107    align-items: center;108    gap: 26px;109    padding: 10px 10px 22px 10px;110  }111  .tool {112    width: 70px; height: 70px; background: #0d1316; border: 2px solid #283a40; border-radius: 16px;113    display: flex; align-items: center; justify-content: center; color: #9bb0b5; font-size: 26px;114  }115  .keys {116    display: grid;117    grid-template-columns: repeat(10, 1fr);118    gap: 14px;119    padding: 6px 6px 18px;120  }121  .key {122    height: 108px;123    background: #1a2428;124    border-radius: 18px;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #d7e3e6;129    font-size: 38px;130    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);131  }132  .row {133    display: grid;134    grid-template-columns: repeat(9, 1fr);135    gap: 14px;136    padding: 6px 6px 18px;137  }138  .row .key { height: 110px; }139  .row2 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }140  .row3 { grid-template-columns: 1.3fr repeat(5, 1fr) 1.3fr 1.3fr; }141  .bottom-row {142    display: grid;143    grid-template-columns: 1.7fr 1.1fr 1.1fr 4.5fr 1.1fr 1.6fr;144    gap: 14px;145    padding: 6px;146  }147  .key.dark { background: #141d20; color: #b7c6c9; }148  .enter-btn {149    position: absolute;150    right: 22px;151    bottom: 26px;152    width: 150px;153    height: 150px;154    background: #9be2bf;155    border-radius: 50%;156    display: flex; align-items: center; justify-content: center;157    box-shadow: 0 6px 0 rgba(0,0,0,0.4) inset;158  }159  .enter-btn svg { width: 60px; height: 60px; fill: #0c2416; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="time">8:41</div>168    <div class="status-icons">169      <span class="dot"></span>170      <span class="dot"></span>171      <span class="dot"></span>172      <span class="dot"></span>173      <span style="font-size:28px;">95%</span>174    </div>175  </div>176 177  <!-- App Bar -->178  <div class="app-bar">179    <div class="app-left">180      <div class="icon-btn">181        <svg viewBox="0 0 24 24">182          <path d="M15.5 3.5L7 12l8.5 8.5-2 2L3 12 13.5 1.5z"></path>183        </svg>184      </div>185    </div>186    <div class="app-title">Compose</div>187    <div class="app-right" style="margin-left:auto; gap:8px;">188      <div class="icon-btn">189        <!-- paperclip -->190        <svg viewBox="0 0 24 24">191          <path d="M7 13.5l7-7a4 4 0 015.7 5.6l-8.3 8.3a6 6 0 01-8.5-8.5L12 3l1.4 1.4L4.6 13.2a4 4 0 005.6 5.6l8.3-8.3a2 2 0 10-2.8-2.8l-7 7z"></path>192        </svg>193      </div>194      <div class="icon-btn">195        <!-- send triangle -->196        <svg viewBox="0 0 24 24">197          <path d="M3 12l18-9-6 9 6 9z"></path>198        </svg>199      </div>200      <div class="icon-btn">201        <!-- kebab -->202        <svg viewBox="0 0 24 24">203          <circle cx="12" cy="5" r="2.2"></circle>204          <circle cx="12" cy="12" r="2.2"></circle>205          <circle cx="12" cy="19" r="2.2"></circle>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Compose Content -->212  <div class="content">213    <div class="field">214      <div class="label">From</div>215      <div class="input-row">216        <div class="input-text">richardwegnar@gmail.com</div>217        <div class="dropdown">218          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>219        </div>220      </div>221    </div>222 223    <div class="field">224      <div class="label">To</div>225      <div class="input-row">226        <div class="input-text" style="color:#7c8f94;"> </div>227        <div class="dropdown">228          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>229        </div>230      </div>231    </div>232 233    <div class="subject">Check out "The Pillars of the Earth"</div>234 235    <div class="body-area">236      https://play.google.com/store/books/details?id=CiCYALkUTaIC<br>237      id=CiCYALkUTaIC238    </div>239  </div>240 241  <!-- Keyboard Mock -->242  <div class="keyboard">243    <div class="kb-toolbar">244      <div class="tool">▦</div>245      <div class="tool">☺</div>246      <div class="tool">GIF</div>247      <div class="tool">⚙</div>248      <div class="tool">G</div>249      <div class="tool">🎨</div>250      <div class="tool">🎙</div>251    </div>252 253    <!-- Row 1 -->254    <div class="keys">255      <div class="key">q</div><div class="key">w</div><div class="key">e</div>256      <div class="key">r</div><div class="key">t</div><div class="key">y</div>257      <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>258    </div>259 260    <!-- Row 2 -->261    <div class="row row2">262      <div class="key dark">⇧</div>263      <div class="key">a</div><div class="key">s</div><div class="key">d</div>264      <div class="key">f</div><div class="key">g</div><div class="key">h</div>265      <div class="key">j</div>266      <div class="key dark">l</div>267    </div>268 269    <!-- Row 3 -->270    <div class="row row3">271      <div class="key dark">⌃</div>272      <div class="key">z</div><div class="key">x</div><div class="key">c</div>273      <div class="key">v</div><div class="key">b</div>274      <div class="key">n</div>275      <div class="key">m</div>276      <div class="key dark">⌫</div>277    </div>278 279    <!-- Bottom Row -->280    <div class="bottom-row">281      <div class="key dark">?123</div>282      <div class="key">@</div>283      <div class="key">☺</div>284      <div class="key">space</div>285      <div class="key">.</div>286      <div class="key dark">↵</div>287    </div>288 289    <!-- Floating green enter/send -->290    <div class="enter-btn">291      <svg viewBox="0 0 24 24">292        <path d="M5 3l14 9-14 9 3-9z"></path>293      </svg>294    </div>295  </div>296 297</div>298</body>299</html>