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; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    height: 100px;17    padding: 0 32px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #E0E0E0;22    font-size: 36px;23  }24  .status-icons { display: flex; align-items: center; gap: 24px; }25  .status-dot { width: 18px; height: 18px; background: #BDBDBD; border-radius: 50%; }26  .battery {27    width: 48px; height: 28px; border: 3px solid #BDBDBD; border-radius: 6px; position: relative;28  }29  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #BDBDBD; border-radius: 2px; }30  .battery-fill { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 26px; background: #BDBDBD; border-radius: 3px; }31 32  /* Header */33  .header {34    height: 140px; padding: 0 24px;35    display: flex; align-items: center; justify-content: space-between;36    color: #FFFFFF;37  }38  .header-left { display: flex; align-items: center; gap: 24px; }39  .header-title { font-size: 52px; font-weight: 600; }40  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }41  .icon { width: 48px; height: 48px; }42 43  /* Share input */44  .share-input {45    padding: 24px;46    display: flex;47    align-items: center;48    gap: 20px;49    border-bottom: 1px solid #2A2A2A;50  }51  .person-add { width: 56px; height: 56px; }52  .input-placeholder {53    font-size: 42px; color: #BDBDBD;54  }55 56  /* Content area */57  .content {58    height: 820px; /* large empty area */59    padding: 24px;60    color: #9E9E9E;61  }62 63  /* Manage access section */64  .manage {65    padding: 24px;66    height: 240px;67    color: #E0E0E0;68  }69  .manage-title { font-size: 36px; margin-bottom: 24px; }70  .avatars { display: flex; align-items: center; gap: 24px; }71  .divider-vert { width: 2px; height: 72px; background: #2A2A2A; }72 73  .img-placeholder {74    width: 72px; height: 72px; background: #E0E0E0; border: 1px solid #BDBDBD;75    display: flex; align-items: center; justify-content: center; color: #424242; font-size: 22px; border-radius: 50%;76  }77 78  /* Keyboard mock */79  .keyboard {80    position: absolute; bottom: 80px; left: 0; right: 0;81    height: 900px; background: #1A1A1A; border-top: 1px solid #2A2A2A;82  }83  .kb-top-row {84    height: 100px; display: flex; align-items: center; gap: 40px; padding: 0 40px; color: #E0E0E0;85  }86  .kb-tool { width: 66px; height: 66px; background: #2A2A2A; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; }87 88  .kb-rows { padding: 10px 16px; display: flex; flex-direction: column; gap: 16px; }89  .kb-row { display: flex; gap: 10px; justify-content: center; }90  .key {91    height: 118px; min-width: 88px;92    background: #2A2A2A; color: #FAFAFA; border-radius: 20px;93    display: flex; align-items: center; justify-content: center;94    font-size: 42px; font-weight: 500;95  }96  .key-wide { min-width: 140px; }97  .space { flex: 1; min-width: 420px; }98  .key-secondary { background: #3B3B3B; font-size: 34px; }99  .key-accent { background: #D2C2E8; color: #1A1A1A; }100 101  /* Gesture bar */102  .gesture-bar {103    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);104    width: 360px; height: 10px; background: #E0E0E0; border-radius: 6px; opacity: 0.8;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div>3:05</div>114    <div class="status-icons">115      <div class="status-dot"></div>116      <svg class="icon" viewBox="0 0 24 24" fill="none">117        <circle cx="12" cy="12" r="8" stroke="#BDBDBD" stroke-width="2"></circle>118        <path d="M12 6v6l4 2" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"></path>119      </svg>120      <div class="status-dot"></div>121      <div class="status-dot"></div>122      <div class="battery"><div class="battery-fill"></div></div>123    </div>124  </div>125 126  <!-- Header -->127  <div class="header">128    <div class="header-left">129      <div class="icon-btn">130        <svg class="icon" viewBox="0 0 24 24">131          <path d="M5 5L19 19M19 5L5 19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>132        </svg>133      </div>134      <div class="header-title">Share</div>135    </div>136    <div style="display:flex; align-items:center; gap:16px;">137      <div class="icon-btn">138        <svg class="icon" viewBox="0 0 24 24">139          <path d="M3 12l8-5v10l-8-5zM13 7l8 5-8 5V7z" fill="#FFFFFF"></path>140        </svg>141      </div>142      <div class="icon-btn">143        <svg class="icon" viewBox="0 0 24 24">144          <circle cx="12" cy="5" r="2" fill="#FFFFFF"></circle>145          <circle cx="12" cy="12" r="2" fill="#FFFFFF"></circle>146          <circle cx="12" cy="19" r="2" fill="#FFFFFF"></circle>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Add people input -->153  <div class="share-input">154    <svg class="person-add" viewBox="0 0 24 24">155      <circle cx="9" cy="8" r="4" stroke="#E0E0E0" stroke-width="2" fill="none"></circle>156      <path d="M2 20c0-4 6-4 7-4s7 0 7 4" stroke="#E0E0E0" stroke-width="2" fill="none"></path>157      <path d="M18 7v6M15 10h6" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"></path>158    </svg>159    <div class="input-placeholder">Add people or groups</div>160  </div>161 162  <!-- Empty content area -->163  <div class="content">164    <!-- Intentionally empty dark area to match screenshot -->165  </div>166 167  <!-- Manage access section -->168  <div class="manage">169    <div class="manage-title">Manage access</div>170    <div class="avatars">171      <div class="img-placeholder">[IMG: Avatar F]</div>172      <div class="divider-vert"></div>173      <div class="img-placeholder">[IMG: Avatar]</div>174    </div>175  </div>176 177  <!-- Keyboard mock -->178  <div class="keyboard">179    <div class="kb-top-row">180      <div class="kb-tool">▦</div>181      <div class="kb-tool">☺</div>182      <div class="kb-tool">GIF</div>183      <div class="kb-tool">⚙</div>184      <div class="kb-tool">Gx</div>185      <div class="kb-tool">🎨</div>186      <div class="kb-tool">🎤</div>187    </div>188 189    <div class="kb-rows">190      <!-- Row 1 -->191      <div class="kb-row">192        <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>193        <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>194      </div>195      <!-- Row 2 -->196      <div class="kb-row">197        <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>198        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>199      </div>200      <!-- Row 3 -->201      <div class="kb-row">202        <div class="key key-secondary">⇧</div>203        <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>204        <div class="key key-secondary">⌫</div>205      </div>206      <!-- Row 4 -->207      <div class="kb-row">208        <div class="key key-accent key-wide">?123</div>209        <div class="key key-secondary">,</div>210        <div class="key key-secondary">☺</div>211        <div class="key space">space</div>212        <div class="key key-secondary">.</div>213        <div class="key key-accent key-wide">✓</div>214      </div>215    </div>216  </div>217 218  <!-- Gesture bar -->219  <div class="gesture-bar"></div>220 221</div>222</body>223</html>