GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Forward - Email Compose</title>5<style>6  * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111315;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    height: 95px;20    padding: 20px 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #ffffff;25    font-size: 40px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .icon svg { display: block; }33  .icon { width: 48px; height: 48px; }34 35  /* App bar */36  .app-bar {37    height: 120px;38    display: flex;39    align-items: center;40    justify-content: space-between;41    padding: 0 28px;42    border-bottom: 1px solid #24272B;43  }44  .title-area {45    display: flex;46    align-items: center;47    gap: 24px;48    color: #eaeaea;49  }50  .title-area .title { font-size: 48px; font-weight: 600; }51  .actions {52    display: flex;53    align-items: center;54    gap: 36px;55  }56  .app-icon { width: 56px; height: 56px; }57 58  /* Content */59  .content { padding: 16px 28px; }60  .row {61    padding: 26px 0;62    border-bottom: 1px solid #24272B;63    display: flex;64    align-items: center;65    gap: 24px;66    font-size: 38px;67    color: #cfcfcf;68  }69  .label {70    width: 80px;71    color: #9aa0a6;72    font-size: 34px;73  }74  .from-text { font-size: 38px; color: #e6e6e6; }75 76  .chip {77    display: inline-flex;78    align-items: center;79    gap: 18px;80    background: #1d2226;81    border: 1px solid #2a2f34;82    border-radius: 40px;83    padding: 14px 22px;84  }85  .avatar {86    width: 70px;87    height: 70px;88    border-radius: 50%;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    justify-content: center;93    align-items: center;94    color: #555;95    font-size: 20px;96  }97  .email-text { font-size: 36px; color: #eaeaea; white-space: nowrap; }98  .subject {99    font-size: 44px;100    color: #eaeaea;101    padding: 26px 0;102    border-bottom: 1px solid #24272B;103  }104  .compose-area {105    padding: 30px 0 10px;106    min-height: 900px;107    color: #9aa0a6;108    font-size: 44px;109  }110  .dots {111    margin-top: 40px;112    color: #8b8f94;113    letter-spacing: 10px;114    font-size: 60px;115  }116 117  /* Keyboard mock */118  .keyboard {119    position: absolute;120    left: 0;121    bottom: 0;122    width: 1080px;123    height: 940px;124    background: #1a1d1f;125    border-top: 1px solid #2b2f33;126    padding: 26px 24px;127  }128  .kbd-top {129    display: flex;130    align-items: center;131    gap: 38px;132    margin-bottom: 26px;133  }134  .kbd-top .round {135    width: 90px; height: 90px;136    background: #2a2e33;137    border-radius: 22px;138  }139  .kbd-top .label {140    width: auto;141    color: #bfc3c7;142    font-size: 34px;143  }144  .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 20px; }145  .key {146    height: 120px;147    background: #2a2e33;148    border-radius: 18px;149    display: flex;150    justify-content: center;151    align-items: center;152    color: #e9e9e9;153    font-size: 44px;154  }155  .row-gap { margin-top: 20px; }156  .space-row {157    display: grid;158    grid-template-columns: 180px 140px 1fr 140px 180px 180px;159    gap: 20px;160    margin-top: 24px;161  }162  .space { height: 120px; background: #2a2e33; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #dcdcdc; font-size: 40px; }163  .send-key {164    background: #4a5a78;165    color: #ffffff;166  }167 168  /* Small dropdown arrow in "To" row */169  .small-arrow { margin-left: auto; }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div>10:44</div>178    <div class="status-icons">179      <div class="icon">180        <svg viewBox="0 0 24 24" width="48" height="48" fill="#ffffff">181          <rect x="1" y="8" width="6" height="8" rx="1"></rect>182          <rect x="9" y="6" width="6" height="12" rx="1"></rect>183          <rect x="17" y="3" width="6" height="18" rx="1"></rect>184        </svg>185      </div>186      <div class="icon">187        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#ffffff" stroke-width="2">188          <path d="M3 18c0-6 5-11 11-11h4"></path>189          <circle cx="20" cy="5" r="2" fill="#ffffff"></circle>190        </svg>191      </div>192      <div class="icon">193        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#ffffff" stroke-width="2">194          <rect x="3" y="6" width="18" height="12" rx="3"></rect>195          <rect x="6" y="9" width="12" height="6" fill="#ffffff" stroke="none"></rect>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- App Bar -->202  <div class="app-bar">203    <div class="title-area">204      <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">205        <path d="M15 5 L7 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>206      </svg>207      <div class="title">Forward</div>208      <svg class="app-icon" viewBox="0 0 24 24" fill="#eaeaea">209        <path d="M6 9 L12 15 L18 9 Z"></path>210      </svg>211    </div>212 213    <div class="actions">214      <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">215        <path d="M8 7c0-2 2-3 3-3s3 1 3 3c0 3-6 6-6 9 0 2 2 3 3 3s3-1 3-3"></path>216      </svg>217      <svg class="app-icon" viewBox="0 0 24 24" fill="#66a7ff">218        <path d="M2 4 L22 12 L2 20 Z"></path>219      </svg>220      <svg class="app-icon" viewBox="0 0 24 24" fill="#eaeaea">221        <circle cx="12" cy="5" r="2"></circle>222        <circle cx="12" cy="12" r="2"></circle>223        <circle cx="12" cy="19" r="2"></circle>224      </svg>225    </div>226  </div>227 228  <!-- Content area -->229  <div class="content">230    <div class="row">231      <div class="label">From</div>232      <div class="from-text">lucaskramer733@gmail.com</div>233    </div>234 235    <div class="row">236      <div class="label">To</div>237      <div class="chip">238        <div class="avatar">IMG</div>239        <div class="email-text">evankramer@gmail.com</div>240      </div>241      <div class="small-arrow">242        <svg width="44" height="44" viewBox="0 0 24 24" fill="#b9c1c7">243          <path d="M6 9 L12 15 L18 9 Z"></path>244        </svg>245      </div>246    </div>247 248    <div class="subject">Fwd: Shopping list</div>249 250    <div class="compose-area">Compose email251      <div class="dots">...</div>252    </div>253  </div>254 255  <!-- Keyboard mock -->256  <div class="keyboard">257    <div class="kbd-top">258      <div class="round"></div>259      <div class="round"></div>260      <div class="label">GIF</div>261      <div class="round"></div>262      <div class="round"></div>263      <div class="round"></div>264      <div class="round"></div>265    </div>266 267    <div class="keys">268      <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>269    </div>270    <div class="keys row-gap">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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>272    </div>273    <div class="keys row-gap">274      <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><div class="key">.</div><div class="key">.</div><div class="key">.</div>275    </div>276 277    <div class="space-row">278      <div class="space">?123</div>279      <div class="space">@</div>280      <div class="space">space</div>281      <div class="space">.</div>282      <div class="space">mic</div>283      <div class="space send-key">284        <svg viewBox="0 0 24 24" width="64" height="64" fill="#ffffff">285          <path d="M2 4 L22 12 L2 20 Z"></path>286        </svg>287      </div>288    </div>289  </div>290 291</div>292</body>293</html>