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; font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #ECECEC;16  }17 18  /* Status bar */19  .status-bar {20    height: 88px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EAEAEA;26    font-size: 30px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .status-dot {35    width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%;36  }37  .status-icon {38    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;39  }40  /* Header */41  .app-bar {42    height: 120px;43    display: flex;44    align-items: center;45    padding: 0 20px;46    position: relative;47  }48  .app-title {49    flex: 1;50    text-align: left;51    font-size: 54px;52    color: #EDEDED;53    margin-left: 12px;54  }55  .app-actions { display: flex; align-items: center; gap: 26px; }56  .icon-btn {57    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;58    color: #EAEAEA;59  }60  /* Content */61  .content {62    padding: 12px 20px 0 20px;63  }64  .add-row {65    display: flex; align-items: center; gap: 22px;66    padding: 22px 4px 26px 4px;67    border-bottom: 1px solid #2A2A2A;68  }69  .add-text {70    font-size: 36px; color: #EDEDED;71  }72  .person-icon {73    width: 72px; height: 72px; border-radius: 36px; background: #2A2A2A; display: flex; align-items: center; justify-content: center;74  }75  .section-title {76    margin-top: 36px; margin-bottom: 18px;77    font-size: 30px; color: #B9B9B9;78  }79  .access-row {80    display: flex; align-items: center; gap: 22px; padding: 12px 4px;81  }82  .circle-icon {83    width: 90px; height: 90px; border-radius: 50%; background: #2D2F31;84    display: flex; align-items: center; justify-content: center;85  }86  .access-text { font-size: 36px; color: #DADADA; }87 88  /* Big blank area mimicking the empty list space */89  .spacer {90    height: 860px;91  }92 93  /* Keyboard */94  .keyboard {95    position: absolute;96    left: 0; right: 0; bottom: 70px;97    background: #1C1E1F;98    border-top: 1px solid #2B2B2B;99    padding: 14px 16px 24px 16px;100  }101  .suggestions {102    display: flex; align-items: center; gap: 22px;103    padding: 6px 8px 16px 8px;104  }105  .suggest-btn {106    width: 84px; height: 84px; background: #2A2D2F; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #E0E0E0;107  }108  .keys-row {109    display: flex; justify-content: center; gap: 12px;110    padding: 6px 8px;111  }112  .key {113    width: 90px; height: 120px; background: #2B2D2E; border-radius: 18px; display: flex; align-items: center; justify-content: center;114    color: #F1F1F1; font-size: 42px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);115  }116  .row2 { padding-left: 44px; padding-right: 44px; }117  .key.backspace {118    width: 132px;119  }120  .bottom-row {121    display: flex; align-items: center; gap: 12px; padding: 8px 12px 0 12px;122  }123  .pill {124    background: #2B2D2E; color: #EDEDED; height: 112px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 36px;125  }126  .pill.small { width: 160px; }127  .pill.medium { width: 120px; }128  .pill.emoji { width: 112px; }129  .space { flex: 1; height: 112px; background: #2B2D2E; border-radius: 28px; }130  .enter {131    width: 140px; height: 112px; border-radius: 28px; background: #7CF0EA; color: #0D2C2A; display: flex; align-items: center; justify-content: center; font-weight: 700;132  }133 134  /* Home indicator */135  .home-indicator {136    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);137    width: 320px; height: 10px; border-radius: 10px; background: rgba(255,255,255,0.8);138  }139 140  /* Utility: center svg paths */141  svg { display: block; }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    <div class="status-left">10:51</div>150    <div class="status-right">151      <div class="status-icon">152        <svg width="30" height="30" viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="12" r="10" opacity="0.2"/><path d="M12 4a8 8 0 1 0 8 8" stroke="#E0E0E0" stroke-width="2" fill="none"/></svg>153      </div>154      <div class="status-icon">155        <svg width="30" height="30" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M3 12h18" stroke="#E0E0E0" stroke-width="2"/></svg>156      </div>157      <div class="status-icon">158        <svg width="30" height="30" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M3 11h14l4 4V7l-4 4H3z"/></svg>159      </div>160      <div class="status-icon">161        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><path d="M3 7h18v10H3z"/><path d="M21 7v10"/><rect x="4" y="8" width="12" height="8" fill="#E0E0E0"/></svg>162      </div>163    </div>164  </div>165 166  <!-- App bar -->167  <div class="app-bar">168    <div class="icon-btn" aria-label="Close">169      <svg width="36" height="36" viewBox="0 0 24 24" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round">170        <path d="M4 4L20 20M20 4L4 20"></path>171      </svg>172    </div>173    <div class="app-title">Share</div>174    <div class="app-actions">175      <div class="icon-btn" aria-label="Send">176        <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED">177          <path d="M3 12l18-9-7 9 7 9-18-9z"></path>178        </svg>179      </div>180      <div class="icon-btn" aria-label="More">181        <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED">182          <circle cx="12" cy="5" r="2"></circle>183          <circle cx="12" cy="12" r="2"></circle>184          <circle cx="12" cy="19" r="2"></circle>185        </svg>186      </div>187    </div>188  </div>189 190  <!-- Content -->191  <div class="content">192    <div class="add-row">193      <div class="person-icon">194        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round">195          <circle cx="8" cy="8" r="3"></circle>196          <path d="M2 20c0-3.5 3.5-6 6-6"></path>197          <path d="M16 8v6M13 11h6"></path>198        </svg>199      </div>200      <div class="add-text">Add people or groups</div>201    </div>202 203    <div class="section-title">Manage access</div>204 205    <div class="access-row">206      <div class="circle-icon">207        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">208          <rect x="6" y="10" width="12" height="9" rx="2" fill="none"></rect>209          <path d="M8 10V8a4 4 0 0 1 8 0v2" />210        </svg>211      </div>212      <div class="access-text">Not shared</div>213    </div>214 215    <div class="spacer"></div>216  </div>217 218  <!-- Keyboard -->219  <div class="keyboard">220    <div class="suggestions">221      <div class="suggest-btn" title="Apps">222        <svg width="32" height="32" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"></path></svg>223      </div>224      <div class="suggest-btn" title="Emoji">225        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">226          <circle cx="12" cy="12" r="9"></circle>227          <circle cx="9" cy="10" r="1.2" fill="#E0E0E0"></circle>228          <circle cx="15" cy="10" r="1.2" fill="#E0E0E0"></circle>229          <path d="M8 15c1.5 1 6.5 1 8 0"></path>230        </svg>231      </div>232      <div class="suggest-btn" title="GIF"><span style="font-weight:700;">GIF</span></div>233      <div class="suggest-btn" title="Translate">234        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">235          <path d="M4 4h8v8H4zM14 4h6v6h-6zM4 16h8v4H4z"></path>236        </svg>237      </div>238      <div class="suggest-btn" title="Settings">239        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">240          <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>241          <path d="M3 12h3M18 12h3M12 3v3M12 18v3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>242        </svg>243      </div>244      <div class="suggest-btn" title="Theme">245        <svg width="32" height="32" viewBox="0 0 24 24" fill="#E0E0E0">246          <path d="M12 2a10 10 0 1 0 10 10A7 7 0 0 1 12 2z"></path>247        </svg>248      </div>249      <div style="margin-left:auto;" class="suggest-btn" title="Mic">250        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">251          <rect x="9" y="4" width="6" height="10" rx="3"></rect>252          <path d="M5 11a7 7 0 0 0 14 0M12 18v3"></path>253        </svg>254      </div>255    </div>256 257    <div class="keys-row">258      <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>259    </div>260    <div class="keys-row row2">261      <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>262    </div>263    <div class="keys-row">264      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div clas