GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Share Screen Mock</title>6<style>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: #121212;14    font-family: Arial, Helvetica, sans-serif;15    color: #FFFFFF;16  }17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 42px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 26px;31  }32  .status-icons div {33    width: 30px; height: 30px; border-radius: 50%; background: #BDBDBD;34  }35  .battery {36    width: 64px; height: 34px; border: 3px solid #BDBDBD; border-radius: 6px; position: relative;37  }38  .battery::after {39    content: ""; position: absolute; right: -10px; top: 10px; width: 8px; height: 14px; background: #BDBDBD; border-radius: 2px;40  }41  .battery .level { position: absolute; left: 4px; top: 4px; height: 22px; width: 40px; background: #BDBDBD; border-radius: 3px; }42 43  /* App bar */44  .app-bar {45    height: 140px;46    display: flex;47    align-items: center;48    padding: 0 24px;49    gap: 24px;50  }51  .app-title {52    font-size: 56px;53    font-weight: 600;54    letter-spacing: 0.5px;55  }56  .icon-btn {57    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 40px;58  }59  .icon-svg { width: 54px; height: 54px; fill: none; stroke: #EDEDED; stroke-width: 6px; }60 61  /* Recipient row */62  .to-row {63    height: 140px;64    display: flex;65    align-items: center;66    padding: 0 24px;67    gap: 22px;68  }69  .to-field {70    flex: 1;71    display: flex;72    align-items: center;73    gap: 20px;74    background: #1A1A1A;75    border-radius: 16px;76    padding: 22px 26px;77  }78  .person-svg { width: 46px; height: 46px; stroke: #CFCFCF; stroke-width: 5px; fill: none; }79  .to-text {80    font-size: 42px;81    color: #EDEDED;82    letter-spacing: 0.2px;83    white-space: nowrap;84  }85  .caret {86    width: 2px; height: 46px; background: #6FA9FF;87  }88  .action-right {89    display: flex; align-items: center; gap: 16px;90  }91  .send-svg { width: 56px; height: 56px; fill: #EDEDED; }92  .kebab {93    width: 16px; height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-right: 8px;94  }95  .kebab span { width: 10px; height: 10px; background: #EDEDED; border-radius: 50%; display: block; margin-left: 3px; }96 97  .divider { height: 2px; background: #2A2A2A; margin: 8px 24px 0; }98 99  /* Contact suggestion */100  .suggestion {101    height: 160px;102    padding: 26px 24px;103    display: flex; align-items: center; justify-content: space-between;104  }105  .suggestion .texts { display: flex; flex-direction: column; gap: 8px; }106  .suggestion .name { font-size: 48px; color: #FFFFFF; }107  .suggestion .email { font-size: 34px; color: #BDBDBD; }108  .avatar {109    width: 96px; height: 96px; background: #76A75A; border-radius: 50%;110    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 50px; color: #fff;111  }112 113  /* Content filler (empty area) */114  .content-area {115    height: 908px; /* will balance total height before keyboard */116  }117 118  /* Keyboard */119  .keyboard {120    position: absolute;121    left: 0; right: 0;122    bottom: 0;123    width: 1080px;124    height: 900px;125    background: #1A1A1A;126    border-top: 2px solid #2A2A2A;127    padding: 24px 30px 30px;128    box-sizing: border-box;129  }130  .kb-top {131    height: 100px;132    display: flex; align-items: center; gap: 36px;133  }134  .kb-top .top-icon {135    width: 70px; height: 70px; border-radius: 18px; background: #2A2A2A;136    display: flex; align-items: center; justify-content: center;137  }138  .kb-top .gif-pill {139    padding: 0 22px; height: 70px; border-radius: 18px; background: #2A2A2A; color: #fff;140    display: flex; align-items: center; font-weight: 700; letter-spacing: 2px;141  }142 143  .kb-row {144    margin-top: 24px;145    display: flex; justify-content: space-between;146  }147  .key {148    width: 92px;149    height: 120px;150    border-radius: 24px;151    background: #2B2B2B;152    color: #FFFFFF;153    font-size: 48px;154    display: flex; align-items: center; justify-content: center;155  }156  .key.small { width: 120px; }157  .key.wide { width: 540px; font-size: 40px; color: #CFCFCF; }158  .key.medium { width: 170px; }159  .key.icon { font-size: 38px; color: #CFCFCF; }160  .shift-svg, .backspace-svg, .enter-svg {161    width: 54px; height: 54px; stroke: #EDEDED; stroke-width: 6px; fill: none;162  }163  .enter-svg { stroke: none; fill: #EDEDED; }164  .emoji-face {165    width: 40px; height: 40px; border-radius: 50%; border: 3px solid #DADADA; position: relative;166  }167  .emoji-face::before, .emoji-face::after {168    content: ""; position: absolute; top: 12px; width: 7px; height: 7px; background: #DADADA; border-radius: 50%;169  }170  .emoji-face::before { left: 10px; }171  .emoji-face::after { right: 10px; }172  .emoji-mouth { position: absolute; bottom: 8px; left: 11px; right: 11px; height: 8px; background: #DADADA; border-radius: 6px; }173 174  /* Gesture bar */175  .gesture-bar {176    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);177    width: 440px; height: 10px; background: #E0E0E0; border-radius: 10px; opacity: 0.7;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div>3:05</div>187    <div class="status-icons">188      <div></div>189      <div></div>190      <div class="battery"><div class="level"></div></div>191    </div>192  </div>193 194  <!-- App bar -->195  <div class="app-bar">196    <div class="icon-btn">197      <svg class="icon-svg" viewBox="0 0 24 24">198        <path d="M3 3 L21 21 M21 3 L3 21" />199      </svg>200    </div>201    <div class="app-title">Share</div>202  </div>203 204  <!-- Recipient row -->205  <div class="to-row">206    <div class="to-field">207      <svg class="person-svg" viewBox="0 0 24 24">208        <circle cx="9" cy="8" r="4"></circle>209        <path d="M2 21c2-4 14-4 16 0"></path>210        <path d="M20 7v6M17 10h6"></path>211      </svg>212      <div class="to-text">dbwscratch.test.id4@gmail.com</div>213      <div class="caret"></div>214    </div>215    <div class="action-right">216      <svg class="send-svg" viewBox="0 0 24 24">217        <path d="M2 21L23 12 2 3l4 8-4 10z"/>218      </svg>219      <div class="kebab"><span></span><span></span><span></span></div>220    </div>221  </div>222 223  <div class="divider"></div>224 225  <!-- Contact suggestion -->226  <div class="suggestion">227    <div class="texts">228      <div class="name">Cerebra Research</div>229      <div class="email">dbwscratch.test.id4@gmail.com</div>230    </div>231    <div class="avatar">C</div>232  </div>233 234  <!-- Content filler -->235  <div class="content-area"></div>236 237  <!-- Keyboard -->238  <div class="keyboard">239    <!-- top shortcut row -->240    <div class="kb-top">241      <div class="top-icon">242        <svg class="icon-svg" viewBox="0 0 24 24">243          <rect x="3" y="3" width="7" height="7" />244          <rect x="14" y="3" width="7" height="7" />245          <rect x="3" y="14" width="7" height="7" />246          <rect x="14" y="14" width="7" height="7" />247        </svg>248      </div>249      <div class="top-icon">250        <div class="emoji-face"><div class="emoji-mouth"></div></div>251      </div>252      <div class="gif-pill">GIF</div>253      <div class="top-icon">254        <svg class="icon-svg" viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="8"></circle>256          <path d="M12 8v8M8 12h8"></path>257        </svg>258      </div>259      <div class="top-icon">260        <svg class="icon-svg" viewBox="0 0 24 24">261          <path d="M4 4h16v6H4zM7 14h10M9 18h6"/>262        </svg>263      </div>264      <div class="top-icon">265        <svg class="icon-svg" viewBox="0 0 24 24">266          <circle cx="12" cy="12" r="9"></circle>267          <path d="M6 12h12"></path>268        </svg>269      </div>270      <div class="top-icon">271        <svg class="icon-svg" viewBox="0 0 24 24">272          <path d="M6 9v6c0 3 12 3 12 0V9"></path>273          <path d="M10 6v3M14 6v3"></path>274        </svg>275      </div>276    </div>277 278    <!-- keys -->279    <div class="kb-row">280      <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>281      <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>282    </div>283    <div class="kb-row" style="padding: 0 60px;">284      <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>285      <d