GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Forward Compose - Mock</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: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    box-sizing: border-box;28    color: #eaeaea;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon {38    width: 40px;39    height: 40px;40    fill: #eaeaea;41  }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 90px;47    left: 0;48    width: 1080px;49    height: 170px;50    display: flex;51    align-items: center;52    padding: 0 32px;53    box-sizing: border-box;54    border-bottom: 1px solid #2b2b2b;55  }56  .app-left {57    display: flex;58    align-items: center;59    gap: 24px;60    flex: 1;61  }62  .title {63    font-size: 58px;64    font-weight: 600;65  }66  .title-caret {67    width: 28px;68    height: 28px;69    margin-left: 8px;70    border-left: 10px solid transparent;71    border-right: 10px solid transparent;72    border-top: 12px solid #bdbdbd;73    transform: translateY(8px);74  }75  .app-right {76    display: flex;77    align-items: center;78    gap: 40px;79  }80  .icon-lg {81    width: 60px;82    height: 60px;83    fill: #d9d9d9;84  }85 86  /* Form area */87  .content {88    position: absolute;89    top: 260px; /* 90 + 170 */90    left: 0;91    width: 1080px;92  }93  .row {94    width: 100%;95    padding: 26px 36px;96    box-sizing: border-box;97    border-bottom: 1px solid #2a2a2a;98    display: flex;99    align-items: center;100  }101  .label {102    width: 150px;103    color: #b5b5b5;104    font-size: 36px;105  }106  .value {107    flex: 1;108    font-size: 40px;109    color: #eaeaea;110  }111  .caret-down {112    width: 0; height: 0;113    border-left: 10px solid transparent;114    border-right: 10px solid transparent;115    border-top: 14px solid #bdbdbd;116    margin-left: 10px;117  }118  .subject {119    font-size: 42px;120    color: #eaeaea;121  }122  .compose-area {123    width: 100%;124    height: 800px;125    box-sizing: border-box;126    padding: 30px 36px;127    color: #bdbdbd;128    font-size: 44px;129  }130  .dots {131    padding: 0 36px;132    color: #9e9e9e;133    font-size: 64px;134  }135 136  /* Keyboard mock */137  .keyboard {138    position: absolute;139    bottom: 0;140    left: 0;141    width: 1080px;142    height: 920px;143    background: #1a1a1a;144    box-shadow: 0 -2px 0 #2a2a2a inset;145  }146  .kb-toolbar {147    height: 120px;148    display: flex;149    align-items: center;150    gap: 32px;151    padding: 0 32px;152    box-sizing: border-box;153  }154  .tool-btn {155    width: 86px;156    height: 86px;157    border-radius: 22px;158    background: #2a2a2a;159    display: flex; align-items: center; justify-content: center;160    color: #eaeaea;161    font-size: 32px;162    border: 1px solid #3a3a3a;163  }164  .gif-btn { width: 120px; }165 166  .kb-row {167    display: flex;168    justify-content: center;169    gap: 16px;170    padding: 12px 20px;171    box-sizing: border-box;172  }173  .key {174    background: #2a2a2a;175    border: 1px solid #3a3a3a;176    color: #f5f5f5;177    height: 110px;178    border-radius: 18px;179    width: 90px;180    font-size: 44px;181    display: flex;182    align-items: center;183    justify-content: center;184  }185  .key-wide { width: 160px; }186  .space { flex: 1; height: 110px; min-width: 420px; border-radius: 24px; }187  .enter { width: 160px; }188 189  .nav-pill {190    position: absolute;191    bottom: 18px;192    left: 50%;193    transform: translateX(-50%);194    width: 300px;195    height: 12px;196    background: #d7d7d7;197    border-radius: 8px;198    opacity: 0.7;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="status-bar">207    <div>10:42</div>208    <div class="status-icons">209      <!-- Wi-Fi -->210      <svg class="icon" viewBox="0 0 48 48"><path d="M24 36l-4-4c2.2-2.2 5.8-2.2 8 0l-4 4zm-10-10c7-7 19-7 26 0l-3 3c-5.8-5.8-14.2-5.8-20 0l-3-3zm-8-8c12-12 32-12 44 0l-3 3c-10.5-10.5-27.5-10.5-38 0l-3-3z"/></svg>211      <!-- Signal -->212      <svg class="icon" viewBox="0 0 48 48"><path d="M10 36h4V24h-4v12zm8 0h4V18h-4v18zm8 0h4V12h-4v24zm8 0h4V6h-4v30z"/></svg>213      <!-- Battery -->214      <svg class="icon" viewBox="0 0 48 48"><path d="M4 16h34v16H4V16zm38 6h4v4h-4v-4z"/></svg>215    </div>216  </div>217 218  <!-- App bar -->219  <div class="app-bar">220    <div class="app-left">221      <!-- Back arrow -->222      <svg class="icon-lg" viewBox="0 0 48 48"><path d="M28 8L12 24l16 16v-10h16V18H28V8z"/></svg>223      <div class="title">Forward</div>224      <div class="title-caret"></div>225    </div>226    <div class="app-right">227      <!-- Attachment -->228      <svg class="icon-lg" viewBox="0 0 48 48"><path d="M34 14c-4.4 0-8 3.6-8 8v12c0 3.3-2.7 6-6 6s-6-2.7-6-6V18c0-6.6 5.4-12 12-12s12 5.4 12 12v16h-4V18c0-4.4-3.6-8-8-8s-8 3.6-8 8v16a4 4 0 0 0 8 0V22h4v12c0 6.6-5.4 12-12 12S8 40.6 8 34V18C8 9.2 15.2 2 24 2s16 7.2 16 16v16"/></svg>229      <!-- Send -->230      <svg class="icon-lg" viewBox="0 0 48 48"><path d="M4 24l40-16-10 16 10 16-40-16zm18 2l14-10-8 10 8 10-14-10z"/></svg>231      <!-- Menu dots -->232      <svg class="icon-lg" viewBox="0 0 48 48"><circle cx="12" cy="24" r="4"/><circle cx="24" cy="24" r="4"/><circle cx="36" cy="24" r="4"/></svg>233    </div>234  </div>235 236  <!-- Content area -->237  <div class="content">238    <div class="row">239      <div class="label">From</div>240      <div class="value">lucaskramer733@gmail.com</div>241    </div>242    <div class="row">243      <div class="label">To</div>244      <div class="value"></div>245      <div class="caret-down"></div>246    </div>247    <div class="row">248      <div class="subject">Fwd: Shopping list</div>249    </div>250    <div class="compose-area">Compose email</div>251    <div class="dots">...</div>252  </div>253 254  <!-- Keyboard -->255  <div class="keyboard">256    <div class="kb-toolbar">257      <div class="tool-btn">◧</div>258      <div class="tool-btn">🙂</div>259      <div class="tool-btn gif-btn">GIF</div>260      <div class="tool-btn">⚙️</div>261      <div class="tool-btn">G↔</div>262      <div class="tool-btn">🎨</div>263      <div class="tool-btn">🎤</div>264    </div>265 266    <div class="kb-row">267      <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>268      <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>269    </div>270    <div class="kb-row">271      <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>272      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>273    </div>274    <div class="kb-row">275      <div class="key-wide">⇧</div>276      <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>277      <div class="key-wide">⌫</div>278    </div>279    <div class="kb-row">280      <div class="key-wide">?123</div>281      <div class="key">@</div>282      <div class="key">🙂</div>283      <div class="space key"> </div>284      <div class="key">.</div>285      <div class="enter key">↩︎</div>286    </div>287 288    <div class="nav-pill"></div>289  </div>290 291</div>292</body>293</html>