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>Share Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }10 11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #121212;17    color: #EAEAEA;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 90px;27    padding: 0 28px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #EAEAEA;32    font-size: 28px;33    letter-spacing: 1px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .icon-dot {41    width: 16px;42    height: 16px;43    background: #EAEAEA;44    border-radius: 50%;45    opacity: 0.9;46  }47  .battery {48    width: 40px; height: 20px; border: 2px solid #EAEAEA; border-radius: 3px; position: relative;49  }50  .battery::after { content: ""; position: absolute; right: -6px; top: 5px; width: 6px; height: 10px; background: #EAEAEA; border-radius: 1px; }51  .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 70%; background: #EAEAEA; }52 53  /* App bar */54  .app-bar {55    position: absolute;56    top: 90px;57    left: 0;58    width: 1080px;59    height: 120px;60    border-bottom: 1px solid #2A2A2A;61    display: flex;62    align-items: center;63    padding: 0 24px;64  }65  .app-title {66    flex: 1;67    text-align: left;68    font-size: 42px;69    font-weight: 600;70    color: #EDEDED;71  }72  .app-actions { display: flex; align-items: center; gap: 28px; }73  .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: default; }74  .icon { fill: #EAEAEA; }75 76  /* Content area */77  .content {78    position: absolute;79    top: 210px;80    left: 0;81    right: 0;82    bottom: 780px; /* leave space for keyboard and gesture bar */83    padding: 24px;84    overflow: hidden;85  }86 87  .chip-row {88    display: flex;89    align-items: center;90    gap: 20px;91    padding: 22px 8px;92    border-bottom: 1px solid #2A2A2A;93  }94  .avatar-circle {95    width: 60px; height: 60px; border-radius: 50%;96    border: 2px solid #3A3A3A;97    display: flex; align-items: center; justify-content: center;98    color: #BDBDBD; font-size: 28px;99  }100  .email-text {101    font-size: 34px;102    color: #DADADA;103    letter-spacing: 0.2px;104  }105 106  .dropdown-row {107    display: flex;108    align-items: center;109    justify-content: space-between;110    padding: 26px 8px;111    border-bottom: 1px solid #2A2A2A;112  }113  .dropdown-row .label {114    font-size: 30px;115    color: #CFCFCF;116  }117  .dropdown-row .caret {118    width: 34px; height: 34px;119  }120 121  .checkbox-row {122    display: flex;123    align-items: center;124    gap: 18px;125    padding: 26px 8px;126  }127  .checkbox {128    width: 38px; height: 38px; border-radius: 6px; background: #27C3C3; display: flex; align-items: center; justify-content: center;129  }130  .checkbox svg { width: 24px; height: 24px; fill: #0B2C2C; }131  .checkbox-row .label {132    font-size: 32px; color: #DADADA;133  }134 135  .message-area {136    margin-top: 28px;137    padding: 18px 8px;138    color: #8E8E8E;139    font-size: 30px;140    border-top: 1px solid transparent;141  }142 143  /* Keyboard mock */144  .keyboard {145    position: absolute;146    left: 0;147    right: 0;148    bottom: 60px;149    height: 780px;150    background: #1B1C1D;151    border-top: 1px solid #2A2A2A;152    padding: 16px 18px 12px;153  }154  .kb-tools {155    display: flex; align-items: center; gap: 26px; margin-bottom: 10px;156  }157  .tool {158    width: 64px; height: 64px;159    background: #2A2A2A; border-radius: 14px;160    display: flex; align-items: center; justify-content: center;161    color: #D0D0D0; font-size: 22px;162  }163  .key-row {164    display: flex; gap: 12px; margin: 10px 0;165  }166  .key {167    flex: 1; height: 120px; background: #2A2A2A; border-radius: 18px;168    display: flex; align-items: center; justify-content: center;169    color: #EAEAEA; font-size: 40px; font-weight: 600;170  }171  .key.sm { flex: 1.3; }172  .key.lg { flex: 1.8; }173  .key.icon {174    background: #2A2A2A;175  }176  .enter-key {177    width: 120px; height: 120px; background: #7CF0EA;178    border-radius: 26px; display: flex; align-items: center; justify-content: center;179  }180  .enter-key svg { width: 46px; height: 46px; fill: #0E1D1B; }181 182  /* Gesture bar */183  .gesture {184    position: absolute; bottom: 18px; left: 50%;185    transform: translateX(-50%);186    width: 336px; height: 12px; background: #EAEAEA; border-radius: 12px; opacity: 0.9;187  }188 189  /* Small helpers */190  .x-icon svg, .send-icon svg, .menu-icon svg { width: 44px; height: 44px; }191  .x-icon svg { stroke: #EAEAEA; fill: none; stroke-width: 6; }192  .send-icon svg { fill: #EAEAEA; }193  .menu-icon svg { fill: #EAEAEA; }194</style>195</head>196<body>197<div id="render-target">198  <!-- Status Bar -->199  <div class="status-bar">200    <div class="time">10:53</div>201    <div class="status-icons">202      <div class="icon-dot"></div>203      <div class="icon-dot"></div>204      <div class="icon-dot"></div>205      <div class="battery"><div class="level"></div></div>206    </div>207  </div>208 209  <!-- App Bar -->210  <div class="app-bar">211    <div class="icon-btn x-icon" title="Close">212      <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"/></svg>213    </div>214    <div class="app-title">Share</div>215    <div class="app-actions">216      <div class="icon-btn send-icon" title="Send">217        <svg viewBox="0 0 24 24"><path d="M2 21L23 12L2 3L2 10L16 12L2 14Z"/></svg>218      </div>219      <div class="icon-btn menu-icon" title="More">220        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>221      </div>222    </div>223  </div>224 225  <!-- Content -->226  <div class="content">227    <div class="chip-row">228      <div class="avatar-circle">229        <svg width="28" height="28" viewBox="0 0 24 24" class="icon"><path d="M12 12a4 4 0 1 0-0.01 0zM4 20c0-3.3 3.6-6 8-6s8 2.7 8 6" fill="#BDBDBD"/></svg>230      </div>231      <div class="email-text">colepersonatest@gmail.com</div>232    </div>233 234    <div class="dropdown-row">235      <div class="label">Editor</div>236      <svg viewBox="0 0 24 24" class="caret icon"><path d="M7 10l5 5 5-5z"/></svg>237    </div>238 239    <div class="checkbox-row">240      <div class="checkbox">241        <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" /></svg>242      </div>243      <div class="label">Notify people</div>244    </div>245 246    <div class="message-area">Add a message</div>247  </div>248 249  <!-- Keyboard Mock -->250  <div class="keyboard">251    <div class="kb-tools">252      <div class="tool">▦</div>253      <div class="tool">☺</div>254      <div class="tool">GIF</div>255      <div class="tool">G↔︎</div>256      <div class="tool">⚙</div>257      <div class="tool">🎨</div>258      <div style="margin-left:auto;" class="tool">🎤</div>259    </div>260 261    <div class="key-row">262      <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>263    </div>264    <div class="key-row">265      <div class="key sm">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 sm">l</div>266    </div>267    <div class="key-row">268      <div class="key lg">⇧</div><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>269      <div class="key lg icon">270        <svg viewBox="0 0 24 24" class="icon" width="36" height="36"><path d="M6 19l12-7L6 5v14z"/></svg>271      </div>272    </div>273    <div class="key-row" style="align-items:center;">274      <div class="key sm">?123</div>275      <div class="key icon"><svg viewBox="0 0 24 24" class="icon" width="34" height="34"><path d="M12 22a4 4 0 0 0 4-4h-8a4 4 0 0 0 4 4zm6-9a6 6 0 1 0-12 0v3h12v-3z"/></svg></div>276      <div class="key" style="flex: 4;">space</div>277      <div class="key icon"><svg viewBox="0 0 24 24" class="icon" width="34" height="34"><path d="M17.7 15.3L12.4 10l5.3-5.3-1.4-1.4L11 8.6 5.7 3.3 4.3 4.7 9.6 10l-5.3 5.3 1.4 1.4L11 11.4l5.3 5.3z"/></svg></div>278      <div class="enter-key">279        <svg viewBox="0 0 24 24"><path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6l-10 10z"/></svg>280      </div>281    </div>282  </div>283 284  <div class="gesture"></div>285</div>286</body>287</html>