GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Forward UI - 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: 96px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #E0E0E0;28    font-size: 36px;29  }30  .status-right {31    display: flex;32    gap: 24px;33    align-items: center;34  }35  .icon {36    width: 40px; height: 40px;37    display: inline-flex; align-items: center; justify-content: center;38  }39  .app-bar {40    position: absolute;41    top: 96px;42    left: 0;43    width: 1080px;44    height: 140px;45    display: flex;46    align-items: center;47    padding: 0 32px;48    border-bottom: 1px solid #1F1F1F;49    gap: 24px;50  }51  .title { font-size: 52px; font-weight: 600; }52  .spacer { flex: 1; }53  .app-actions { display: flex; gap: 28px; align-items: center; }54 55  /* Fields */56  .content-area {57    position: absolute;58    top: 236px; /* status + app bar */59    left: 0;60    width: 1080px;61    bottom: 880px; /* leave room for keyboard */62    overflow-y: auto;63  }64  .field {65    padding: 28px 40px;66    border-bottom: 1px solid #1E1E1E;67  }68  .label {69    color: #9E9E9E; font-size: 32px; margin-bottom: 8px;70  }71  .value-row {72    display: flex; align-items: center; gap: 18px;73    font-size: 38px;74  }75  .chev {76    margin-left: auto;77    width: 40px; height: 40px;78  }79  .suggestion {80    padding: 24px 40px;81    display: flex; gap: 24px; align-items: center;82    border-bottom: 1px solid #1E1E1E;83  }84  .avatar {85    width: 96px; height: 96px; border-radius: 48px;86    background: #E0E0E0; border: 1px solid #BDBDBD;87    color: #757575; display: flex; align-items: center; justify-content: center;88    font-size: 20px;89  }90  .suggest-text { display: flex; flex-direction: column; }91  .suggest-name { font-size: 40px; }92  .suggest-email { font-size: 30px; color: #B0BEC5; }93 94  .blank-body {95    height: 800px; /* empty compose area */96    border-bottom: 1px solid #1E1E1E;97  }98 99  /* Keyboard */100  .keyboard {101    position: absolute;102    bottom: 0;103    left: 0;104    width: 1080px;105    height: 880px;106    background: #181818;107    border-top: 1px solid #272727;108  }109  .kb-top {110    height: 120px;111    display: flex; align-items: center; justify-content: space-around;112    color: #D0D0D0; font-size: 36px;113  }114  .kb-rows { padding: 10px 24px; }115  .kb-row {116    display: flex; justify-content: space-between;117    margin: 18px 0;118  }119  .key {120    width: 88px; height: 120px;121    background: #2A2A2A; border-radius: 22px;122    display: flex; align-items: center; justify-content: center;123    color: #FAFAFA; font-size: 44px;124  }125  .key.wide { width: 220px; }126  .key.space { width: 520px; }127  .kb-bottom {128    display: flex; align-items: center; justify-content: space-between;129    padding: 12px 24px;130  }131  .round-btn {132    width: 120px; height: 120px; border-radius: 60px;133    background: #2A2A2A; display: flex; align-items: center; justify-content: center;134    color: #FAFAFA; font-size: 40px;135  }136  .send-round { background: #4A7AFE; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div>10:43</div>145    <div class="status-right">146      <!-- WiFi -->147      <svg class="icon" viewBox="0 0 24 24">148        <path fill="#E0E0E0" d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l2 2 4-4 4 4 2-2-6-6-6 6z"/>149      </svg>150      <!-- Signal -->151      <svg class="icon" viewBox="0 0 24 24">152        <path fill="#E0E0E0" d="M3 19h2v-6H3v6zm4 0h2v-9H7v9zm4 0h2v-12h-2v12zm4 0h2v-15h-2v15z"/>153      </svg>154      <!-- Battery -->155      <svg class="icon" viewBox="0 0 24 24">156        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#E0E0E0" stroke-width="2"/>157        <rect x="4" y="8" width="12" height="8" fill="#E0E0E0"/>158        <rect x="20" y="10" width="2" height="4" fill="#E0E0E0"/>159      </svg>160    </div>161  </div>162 163  <!-- App bar -->164  <div class="app-bar">165    <!-- Back arrow -->166    <svg class="icon" viewBox="0 0 24 24">167      <path fill="#FFFFFF" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>168    </svg>169    <div class="title">Forward</div>170    <!-- Dropdown next to title -->171    <svg class="icon" viewBox="0 0 24 24">172      <path fill="#B0BEC5" d="M7 10l5 5 5-5z"/>173    </svg>174    <div class="spacer"></div>175    <div class="app-actions">176      <!-- Attach -->177      <svg class="icon" viewBox="0 0 24 24">178        <path fill="#FFFFFF" d="M7 7a5 5 0 0 1 8.66-3.54l5.18 5.18a4 4 0 1 1-5.66 5.66L9.9 9.9a2 2 0 1 1 2.83-2.83l4.24 4.24 1.41-1.41-4.24-4.24A4 4 0 0 0 7 7z"/>179      </svg>180      <!-- Send -->181      <svg class="icon" viewBox="0 0 24 24">182        <path fill="#FFFFFF" d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>183      </svg>184      <!-- More -->185      <svg class="icon" viewBox="0 0 24 24">186        <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>187        <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>188        <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>189      </svg>190    </div>191  </div>192 193  <!-- Content area -->194  <div class="content-area">195    <div class="field">196      <div class="label">From</div>197      <div class="value-row">198        <div>lucaskramer733@gmail.com</div>199      </div>200    </div>201 202    <div class="field">203      <div class="label">To</div>204      <div class="value-row">205        <div>evankramer@gmail.com</div>206        <svg class="chev" viewBox="0 0 24 24">207          <path fill="#B0BEC5" d="M7 10l5 5 5-5z"/>208        </svg>209      </div>210    </div>211 212    <div class="suggestion">213      <div class="avatar">[IMG: Avatar]</div>214      <div class="suggest-text">215        <div class="suggest-name">evankramer@gmail.com</div>216        <div class="suggest-email">evankramer@gmail.com</div>217      </div>218    </div>219 220    <div class="blank-body"></div>221  </div>222 223  <!-- Keyboard -->224  <div class="keyboard">225    <div class="kb-top">226      <div class="round-btn">⬛</div>227      <div class="round-btn">😊</div>228      <div style="color:#9E9E9E; font-size:34px;">GIF</div>229      <div class="round-btn">⚙️</div>230      <div class="round-btn">G</div>231      <div class="round-btn">🎨</div>232      <div class="round-btn">🎤</div>233    </div>234    <div class="kb-rows">235      <div class="kb-row">236        <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>237      </div>238      <div class="kb-row">239        <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>240      </div>241      <div class="kb-row">242        <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>243        <div class="key">⌫</div>244      </div>245      <div class="kb-bottom">246        <div class="key wide">?123</div>247        <div class="key wide">@</div>248        <div class="key wide">☺</div>249        <div class="key space"></div>250        <div class="key">.</div>251        <div class="round-btn send-round">252          <svg viewBox="0 0 24 24" width="48" height="48">253            <path fill="#FFFFFF" d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>254          </svg>255        </div>256      </div>257    </div>258  </div>259 260</div>261</body>262</html>