GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #1f191d; /* deep dark theme */15    color: #e7d5da;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 120px;24    padding: 18px 28px 0 28px;25    box-sizing: border-box;26    color: #f1e6ea;27    font-weight: 600;28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .status-left { font-size: 40px; letter-spacing: 0.5px; }33  .status-right {34    display: flex; align-items: center; gap: 26px;35  }36  .status-dot {37    width: 16px; height: 16px; border-radius: 50%;38    background: #cab0b7; opacity: 0.9;39  }40  .status-shape {41    width: 34px; height: 20px; border-radius: 4px;42    border: 3px solid #cab0b7; opacity: 0.8;43  }44  .status-battery {45    width: 44px; height: 24px; border-radius: 6px;46    border: 3px solid #cab0b7; position: relative;47  }48  .status-battery::after {49    content: "";50    position: absolute; right: -10px; top: 8px;51    width: 6px; height: 8px; background: #cab0b7; border-radius: 2px;52  }53 54  /* Header / toolbar */55  .toolbar {56    position: absolute;57    top: 120px; left: 0; right: 0;58    height: 220px;59    padding: 18px 28px;60    box-sizing: border-box;61    display: flex; align-items: center; justify-content: space-between;62  }63  .toolbar-left { display: flex; align-items: center; gap: 30px; }64  .toolbar-title { font-size: 72px; font-weight: 600; letter-spacing: 0.2px; }65  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }66  .icon svg { width: 56px; height: 56px; fill: none; stroke: #e9cbd2; stroke-width: 6; }67 68  .toolbar-right { display: flex; align-items: center; gap: 36px; }69  .menu-dots { display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px; align-items: center; justify-items: center; }70  .menu-dots span { width: 10px; height: 10px; background: #e9cbd2; border-radius: 50%; display: block; }71 72  /* Add people row */73  .share-content {74    position: absolute;75    top: 320px; left: 0; right: 0;76    padding: 20px 32px 0 32px;77    box-sizing: border-box;78  }79  .add-row {80    display: flex; align-items: center; gap: 24px;81    padding: 36px 0;82  }83  .add-icon {84    width: 68px; height: 68px; border-radius: 50%;85    background: #30272b; display: flex; align-items: center; justify-content: center;86    border: 2px solid #4a3b41;87  }88  .add-icon svg { width: 40px; height: 40px; stroke: #e9cbd2; stroke-width: 5; fill: none; }89  .add-text { font-size: 44px; color: #e9cbd2; }90 91  .divider {92    height: 2px; background: #3b2f34; width: 100%;93    margin-top: 8px;94  }95 96  /* Manage access section */97  .manage-label {98    position: absolute;99    left: 32px;100    top: 1260px;101    font-size: 34px; color: #d6bec5;102  }103  .access-row {104    position: absolute;105    left: 32px; top: 1330px; right: 32px;106    display: flex; align-items: center; gap: 30px;107  }108  .lock-circle {109    width: 120px; height: 120px; border-radius: 60px;110    background: #3a3035; border: 2px solid #4a3b41;111    display: flex; align-items: center; justify-content: center;112  }113  .lock-circle svg { width: 60px; height: 60px; stroke: #e9cbd2; stroke-width: 5; fill: none; }114  .access-text {115    font-size: 48px; color: #e9cbd2;116  }117 118  /* Suggestion bar above keyboard */119  .kb-suggest {120    position: absolute; left: 24px; right: 24px; bottom: 970px;121    height: 90px; display: flex; align-items: center; gap: 24px;122  }123  .suggest-btn {124    width: 88px; height: 88px; border-radius: 20px;125    background: #33292e; border: 2px solid #4a3b41;126    display: flex; align-items: center; justify-content: center;127    color: #e9cbd2; font-size: 30px; font-weight: 700;128  }129 130  /* Keyboard */131  .keyboard {132    position: absolute; left: 0; right: 0; bottom: 120px;133    height: 850px; padding: 16px 24px 24px 24px; box-sizing: border-box;134    background: #241c21;135  }136  .kb-row {137    display: grid; grid-template-columns: repeat(10, 1fr);138    gap: 16px; margin-top: 18px;139  }140  .kb-key {141    height: 120px; border-radius: 24px;142    background: #3a2f34; color: #f0d9df;143    display: flex; align-items: center; justify-content: center;144    font-size: 44px; font-weight: 600;145  }146  .kb-row2 { grid-template-columns: repeat(9, 1fr); }147  .kb-row3 { grid-template-columns: repeat(7, 1fr); }148  .kb-wide { grid-column: span 2; }149  .kb-extra {150    display: flex; align-items: center; justify-content: space-between;151    margin-top: 24px;152  }153  .circle-btn {154    width: 140px; height: 140px; border-radius: 70px;155    background: #e3b8c2; color: #3a2f34; font-size: 42px; font-weight: 800;156    display: flex; align-items: center; justify-content: center;157  }158  .return-btn { width: 140px; height: 140px; border-radius: 70px; background: #e3b8c2; display: flex; align-items: center; justify-content: center; }159  .return-btn svg { width: 60px; height: 60px; stroke: #3a2f34; stroke-width: 6; fill: none; }160  .kb-space {161    flex: 1; height: 140px; margin: 0 18px; border-radius: 28px;162    background: #3a2f34;163  }164 165  /* Home indicator */166  .home-indicator {167    position: absolute; bottom: 28px; left: 50%;168    width: 240px; height: 14px; margin-left: -120px;169    border-radius: 7px; background: #d9d9d9; opacity: 0.9;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status Bar -->177  <div class="status-bar">178    <div class="status-left">7:53</div>179    <div class="status-right">180      <div class="status-dot"></div>181      <div class="status-dot"></div>182      <div class="status-shape"></div>183      <div class="status-dot"></div>184      <div class="status-battery"></div>185    </div>186  </div>187 188  <!-- Toolbar -->189  <div class="toolbar">190    <div class="toolbar-left">191      <div class="icon-btn icon">192        <svg viewBox="0 0 24 24">193          <path d="M4 4 L20 20"></path>194          <path d="M20 4 L4 20"></path>195        </svg>196      </div>197      <div class="toolbar-title">Share</div>198    </div>199    <div class="toolbar-right">200      <div class="icon-btn icon">201        <svg viewBox="0 0 24 24">202          <path d="M3 21 L21 12 L3 3 L8 12 Z"></path>203        </svg>204      </div>205      <div class="menu-dots">206        <span></span>207        <span></span>208        <span></span>209      </div>210    </div>211  </div>212 213  <!-- Content -->214  <div class="share-content">215    <div class="add-row">216      <div class="add-icon">217        <svg viewBox="0 0 24 24">218          <circle cx="12" cy="9" r="4"></circle>219          <path d="M4 21 C4 16 20 16 20 21"></path>220          <path d="M19 5 L19 11"></path>221          <path d="M16 8 L22 8"></path>222        </svg>223      </div>224      <div class="add-text">Add people or groups</div>225    </div>226    <div class="divider"></div>227  </div>228 229  <!-- Manage Access -->230  <div class="manage-label">Manage access</div>231  <div class="access-row">232    <div class="lock-circle">233      <svg viewBox="0 0 24 24">234        <path d="M7 11 V8 a5 5 0 0 1 10 0 v3"></path>235        <rect x="6" y="11" width="12" height="9" rx="2"></rect>236      </svg>237    </div>238    <div class="access-text">Not shared</div>239  </div>240 241  <!-- Suggestion bar above keyboard -->242  <div class="kb-suggest">243    <div class="suggest-btn">◻◻</div>244    <div class="suggest-btn">😊</div>245    <div class="suggest-btn">GIF</div>246    <div class="suggest-btn">⚙</div>247    <div class="suggest-btn">Gᵀ</div>248    <div class="suggest-btn">🎨</div>249    <div class="suggest-btn">🎤</div>250  </div>251 252  <!-- Keyboard -->253  <div class="keyboard">254    <div class="kb-row">255      <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div>256      <div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>257    </div>258    <div class="kb-row kb-row2">259      <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div>260      <div class="kb-key">g</div><div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div>261    </div>262    <div class="kb-row kb-row3">263      <div class="kb-key kb-wide">⇧</div>264      <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div>265      <div class="kb-key kb-wide">⌫</div>266    </div>267    <div class="kb-extra">268      <div class="circle-btn">?123</div>269      <div class="kb-space"></div>270      <div class="return-btn">271        <svg viewBox="0 0 24 24">272          <path d="M20 12 H6"></path>273          <path d="M10 8 L6 12 L10 16"></path>274        </svg>275      </div>276    </div>277  </div>278 279  <!-- Home indicator -->280  <div class="home-indicator"></div>281</div>282</body>283</html>