GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Share Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #12181A; /* dark teal/black */14    color: #CFD8DC;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 36px;24    font-size: 34px;25    color: #E8ECEF;26  }27  .status-left, .status-right { display: flex; align-items: center; gap: 16px; }28  .icon-cloud, .icon-wifi, .icon-battery {29    width: 40px; height: 40px;30  }31 32  /* App bar */33  .app-bar {34    height: 160px;35    border-bottom: 1px solid #243036;36    display: flex;37    align-items: center;38    padding: 0 24px;39  }40  .app-left, .app-right { display: flex; align-items: center; }41  .app-title {42    flex: 1;43    text-align: left;44    font-size: 56px;45    font-weight: 600;46    padding-left: 18px;47  }48  .icon-btn {49    width: 96px;50    height: 96px;51    display: flex;52    align-items: center;53    justify-content: center;54    margin-right: 6px;55  }56  .icon-btn svg { fill: none; stroke: #E0E6EA; stroke-width: 5; }57 58  /* Content area above keyboard */59  .content {60    height: 1420px; /* remainder after keyboard */61    padding: 10px 24px 0 24px;62  }63 64  .add-row {65    height: 120px;66    display: flex;67    align-items: center;68    border-bottom: 1px solid #253138;69    gap: 24px;70  }71  .add-icon {72    width: 64px; height: 64px;73  }74  .add-text {75    font-size: 44px;76    color: #B9C3C8;77  }78 79  .spacer {80    height: 900px; /* big empty middle area */81  }82 83  .manage-label {84    font-size: 40px;85    margin: 24px 0 28px 6px;86    color: #B9C3C8;87    letter-spacing: 0.5px;88  }89  .access-row {90    display: flex;91    align-items: center;92    gap: 26px;93    padding: 22px 12px;94  }95  .lock-circle {96    width: 120px; height: 120px;97    border-radius: 60px;98    background: #223036;99    display: flex; align-items: center; justify-content: center;100  }101  .access-text {102    font-size: 44px; color: #CFD8DC;103  }104 105  /* Keyboard */106  .keyboard {107    position: absolute;108    bottom: 0;109    left: 0;110    width: 1080px;111    height: 980px;112    background: #0F1517;113    border-top: 1px solid #1f282d;114  }115  .kb-toolbar {116    height: 120px;117    display: flex;118    align-items: center;119    gap: 28px;120    padding: 0 24px;121    color: #C8D0D4;122    font-size: 36px;123  }124  .kb-pill {125    width: 84px; height: 84px; border-radius: 16px;126    background: #1E262A; display: flex; align-items: center; justify-content: center;127    border: 1px solid #2A3439;128  }129 130  .kb-rows { padding: 6px 20px 0 20px; }131  .kb-row {132    display: flex;133    justify-content: space-between;134    padding: 10px 8px;135  }136  .key {137    width: 92px; height: 130px;138    border-radius: 18px;139    background: #1E262A;140    border: 1px solid #2A3439;141    color: #E7EFF3;142    font-size: 46px;143    display: flex; align-items: center; justify-content: center;144  }145 146  .key.wide { width: 150px; }147  .space { flex: 1; height: 130px; margin: 0 12px; border-radius: 18px; background: #1E262A; border: 1px solid #2A3439; }148  .circle-key { width: 150px; height: 150px; border-radius: 75px; background: #27B78C; color: #0C1315; font-weight: 700; font-size: 48px; display: flex; align-items: center; justify-content: center; }149 150  /* Home indicator */151  .home-indicator {152    position: absolute;153    bottom: 16px;154    left: 50%;155    transform: translateX(-50%);156    width: 280px;157    height: 12px;158    background: #9FA7AA;159    border-radius: 6px;160    opacity: 0.6;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Status Bar -->168  <div class="status-bar">169    <div class="status-left">170      <div>11:04</div>171      <svg class="icon-cloud" viewBox="0 0 24 24">172        <path d="M6 16h10a4 4 0 0 0 0-8 5 5 0 0 0-9.8 1.6" stroke="#E8ECEF" stroke-width="2" fill="none" />173      </svg>174    </div>175    <div class="status-right">176      <svg class="icon-wifi" viewBox="0 0 24 24">177        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 7-2 10 0M12 20l2-2-2-2-2 2 2 2z" stroke="#E8ECEF" stroke-width="2" fill="none" />178      </svg>179      <svg class="icon-battery" viewBox="0 0 36 20">180        <rect x="1" y="3" width="30" height="14" rx="3" stroke="#E8ECEF" fill="none" stroke-width="2"></rect>181        <rect x="32" y="7" width="3" height="6" rx="1" fill="#E8ECEF"></rect>182      </svg>183      <div>100%</div>184    </div>185  </div>186 187  <!-- App Bar -->188  <div class="app-bar">189    <div class="app-left">190      <div class="icon-btn">191        <svg viewBox="0 0 24 24">192          <path d="M5 5l14 14M19 5L5 19" />193        </svg>194      </div>195      <div class="app-title">Share</div>196    </div>197    <div class="app-right" style="margin-left:auto; gap:10px;">198      <div class="icon-btn">199        <svg viewBox="0 0 24 24">200          <path d="M3 12l8-3 10-4-8 10-3 8-2-6-5-5z" />201        </svg>202      </div>203      <div class="icon-btn">204        <svg viewBox="0 0 24 24">205          <circle cx="12" cy="5" r="2" fill="#E0E6EA"></circle>206          <circle cx="12" cy="12" r="2" fill="#E0E6EA"></circle>207          <circle cx="12" cy="19" r="2" fill="#E0E6EA"></circle>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Content Area -->214  <div class="content">215    <div class="add-row">216      <svg class="add-icon" viewBox="0 0 24 24">217        <circle cx="12" cy="8" r="3" stroke="#B9C3C8" stroke-width="2" fill="none"></circle>218        <path d="M5 20c0-4 14-4 14 0" stroke="#B9C3C8" stroke-width="2" fill="none"></path>219        <path d="M19 8v4M21 10h-4" stroke="#B9C3C8" stroke-width="2"></path>220      </svg>221      <div class="add-text">Add people or groups</div>222    </div>223 224    <div class="spacer"></div>225 226    <div class="manage-label">Manage access</div>227 228    <div class="access-row">229      <div class="lock-circle">230        <svg viewBox="0 0 24 24" width="64" height="64">231          <rect x="6" y="11" width="12" height="9" rx="2" fill="#9FB3BA"></rect>232          <path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="#9FB3BA" stroke-width="2" fill="none"></path>233        </svg>234      </div>235      <div class="access-text">Not shared</div>236    </div>237  </div>238 239  <!-- Keyboard -->240  <div class="keyboard">241    <div class="kb-toolbar">242      <div class="kb-pill">◼︎</div>243      <div class="kb-pill">☺</div>244      <div class="kb-pill">GIF</div>245      <div class="kb-pill">⚙</div>246      <div class="kb-pill">G↔</div>247      <div class="kb-pill">🎨</div>248      <div class="kb-pill">🎤</div>249    </div>250 251    <div class="kb-rows">252      <div class="kb-row">253        <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>254      </div>255      <div class="kb-row">256        <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>257      </div>258      <div class="kb-row">259        <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>260        <div class="key wide">⌫</div>261      </div>262      <div class="kb-row" style="align-items:center;">263        <div class="key wide">?123</div>264        <div class="key">,</div>265        <div class="key">☺</div>266        <div class="space"></div>267        <div class="key">.</div>268        <div class="circle-key">✓</div>269      </div>270    </div>271  </div>272 273  <div class="home-indicator"></div>274</div>275</body>276</html>