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>Gmail Compose Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #fff;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 100px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-size: 44px;30  }31  .status-icons {32    display: flex; align-items: center; gap: 28px;33  }34  .cloud {35    width: 48px; height: 32px; border-radius: 16px;36    background: #bbb;37  }38  /* App bar */39  .app-bar {40    position: absolute;41    top: 100px; left: 0; right: 0;42    height: 120px;43    display: flex; align-items: center;44    padding: 0 24px;45  }46  .app-left, .app-right {47    display: flex; align-items: center; gap: 28px;48  }49  .app-title {50    position: absolute;51    left: 140px;52    right: 140px;53    text-align: left;54    font-size: 54px;55    font-weight: 600;56    color: #eaeaea;57  }58  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #e0e0e0; stroke-width: 4; }59  .icon-fill svg { fill: #e0e0e0; stroke: none; }60 61  /* Content area */62  .content {63    position: absolute;64    top: 220px;65    left: 0; right: 0;66    bottom: 900px; /* leave room for keyboard */67    padding: 12px 32px 0 32px;68  }69  .field {70    border-bottom: 1px solid #2a2a2a;71    padding: 22px 0;72    display: flex; align-items: center;73    font-size: 40px;74  }75  .label {76    color: #bdbdbd; width: 140px;77  }78  .value {79    color: #fff; flex: 1;80  }81  .dropdown {82    width: 44px; height: 44px; display: flex;83    align-items: center; justify-content: center;84  }85  .hint-row {86    margin-top: 16px;87    padding: 16px 0;88    display: flex; align-items: center; gap: 24px;89  }90  .avatar {91    width: 84px; height: 84px; border-radius: 42px; background: #D8663C;92    display: flex; align-items: center; justify-content: center;93  }94  .avatar svg { width: 48px; height: 48px; fill: #fff; }95  .hint-text {96    display: flex; flex-direction: column;97  }98  .hint-title { color: #e0e0e0; font-size: 40px; }99  .hint-sub { color: #9e9e9e; font-size: 34px; margin-top: 6px; }100 101  /* Keyboard mock */102  .keyboard {103    position: absolute;104    left: 0; right: 0; bottom: 0;105    height: 900px;106    background: #1f1f1f;107    border-top: 1px solid #2a2a2a;108  }109  .kb-toolbar {110    height: 110px;111    display: flex; align-items: center;112    gap: 32px; padding: 0 24px;113  }114  .kb-tool {115    width: 80px; height: 80px; border-radius: 20px;116    background: #2a2a2a; display: flex; align-items: center; justify-content: center;117    color: #cfcfcf; font-size: 28px;118  }119  .kb-tool.wide { width: 120px; }120  .keys {121    padding: 18px 16px;122    display: grid;123    grid-template-columns: repeat(10, 1fr);124    grid-gap: 12px;125  }126  .key {127    background: #2a2a2a;128    border-radius: 28px;129    height: 120px;130    display: flex; align-items: center; justify-content: center;131    color: #e6e6e6; font-size: 44px;132  }133  .key.small { font-size: 34px; }134  .space-row {135    padding: 12px 16px;136    display: grid;137    grid-template-columns: 1.6fr 0.9fr 3.2fr 0.9fr 1.0fr;138    grid-gap: 12px;139  }140  .gesture {141    position: absolute; bottom: 26px; left: 50%;142    transform: translateX(-50%);143    width: 280px; height: 12px;144    background: #e6e6e6; border-radius: 12px; opacity: 0.8;145  }146 147  /* Utility icons */148  .dot { width: 10px; height: 10px; background: #e0e0e0; border-radius: 50%; margin: 5px 0; }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="status-bar">156    <div>11:14</div>157    <div class="status-icons">158      <!-- Cloud-ish indicator -->159      <div class="cloud"></div>160      <!-- WiFi -->161      <svg width="46" height="46" viewBox="0 0 24 24">162        <path d="M2 8c5-4 15-4 20 0" stroke="#e0e0e0" stroke-width="2" fill="none" />163        <path d="M5 12c4-3 10-3 14 0" stroke="#e0e0e0" stroke-width="2" fill="none" />164        <path d="M8 16c3-2 5-2 8 0" stroke="#e0e0e0" stroke-width="2" fill="none" />165        <circle cx="12" cy="19" r="1.5" fill="#e0e0e0"></circle>166      </svg>167      <!-- Battery -->168      <svg width="52" height="46" viewBox="0 0 28 24">169        <rect x="2" y="5" width="20" height="14" rx="3" stroke="#e0e0e0" stroke-width="2" fill="none"></rect>170        <rect x="4" y="7" width="14" height="10" rx="2" fill="#e0e0e0"></rect>171        <rect x="22" y="9" width="3" height="6" rx="1" fill="#e0e0e0"></rect>172      </svg>173    </div>174  </div>175 176  <!-- App bar -->177  <div class="app-bar">178    <div class="app-left">179      <div class="icon-btn">180        <!-- Back arrow -->181        <svg viewBox="0 0 24 24">182          <path d="M15 6l-6 6 6 6" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183        </svg>184      </div>185    </div>186    <div class="app-title">Compose</div>187    <div class="app-right" style="position:absolute; right:24px;">188      <!-- Attach -->189      <div class="icon-btn">190        <svg viewBox="0 0 24 24">191          <path d="M7 12l6-6a4 4 0 116 6l-8 8a6 6 0 11-8-8l7-7" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>192        </svg>193      </div>194      <!-- Send -->195      <div class="icon-fill">196        <svg viewBox="0 0 24 24">197          <path d="M2 21l20-9L2 3l4 8-4 10z"></path>198        </svg>199      </div>200      <!-- More (vertical dots) -->201      <div class="icon-fill" style="width:56px; height:56px; display:flex; align-items:center; justify-content:center;">202        <div class="dot"></div>203        <div class="dot"></div>204        <div class="dot"></div>205      </div>206    </div>207  </div>208 209  <!-- Content -->210  <div class="content">211    <div class="field">212      <div class="label">From</div>213      <div class="value">dbwscratch.test.id8@gmail.com</div>214    </div>215 216    <div class="field">217      <div class="label">To</div>218      <div class="value">andrewreed@dayrep.com</div>219      <div class="dropdown">220        <svg width="36" height="36" viewBox="0 0 24 24">221          <path d="M6 9l6 6 6-6" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>222        </svg>223      </div>224    </div>225 226    <div class="hint-row">227      <div class="avatar">228        <!-- Person icon -->229        <svg viewBox="0 0 24 24">230          <circle cx="12" cy="8" r="4"></circle>231          <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#fff"></path>232        </svg>233      </div>234      <div class="hint-text">235        <div class="hint-title">Add recipient</div>236        <div class="hint-sub">andrewreed@dayrep.com</div>237      </div>238    </div>239  </div>240 241  <!-- Keyboard -->242  <div class="keyboard">243    <div class="kb-toolbar">244      <div class="kb-tool">⌨️</div>245      <div class="kb-tool">🙂</div>246      <div class="kb-tool wide">GIF</div>247      <div class="kb-tool">⚙️</div>248      <div class="kb-tool">G</div>249      <div class="kb-tool">🎨</div>250      <div class="kb-tool">🔇</div>251    </div>252 253    <!-- Rows of keys -->254    <div class="keys">255      <!-- Row 1 -->256      <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>257      <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>258 259      <!-- Row 2 -->260      <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>261      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">⌫</div>262 263      <!-- Row 3 -->264      <div class="key small">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>265      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key small">↵</div>266    </div>267 268    <!-- Space row -->269    <div class="space-row">270      <div class="key small">?123</div>271      <div class="key small">@</div>272      <div class="key">space</div>273      <div class="key small">.</div>274      <div class="key small">➤</div>275    </div>276 277    <div class="gesture"></div>278  </div>279 280</div>281</body>282</html>