GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Share Screen Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1440px; height:3120px; position:relative; overflow:hidden;9    background:#0f1110; color:#eaeaea;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:90px;15    padding:0 40px; display:flex; align-items:center; justify-content:space-between;16    color:#d9d9d9; font-size:42px; letter-spacing:1px;17  }18  .status-right { display:flex; align-items:center; gap:26px; }19  .dot { width:10px; height:10px; background:#d9d9d9; border-radius:50%; display:inline-block; }20 21  /* App bar */22  .appbar {23    position:absolute; top:90px; left:0; right:0; height:180px;24    display:flex; align-items:center; padding:0 50px; gap:36px;25  }26  .title { font-size:82px; font-weight:600; color:#e8e8e8; }27  .appbar-right { margin-left:auto; display:flex; align-items:center; gap:50px; }28  .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; }29  .icon-btn svg { width:72px; height:72px; fill:#cfcfcf; }30 31  /* Input row */32  .share-input {33    position:absolute; top:320px; left:0; right:0; height:160px;34    border-bottom:2px solid #2d2d2d; display:flex; align-items:center; gap:26px;35    padding:0 50px;36  }37  .share-input .left-icon { width:86px; height:86px; display:flex; align-items:center; justify-content:center; }38  .share-input svg { width:70px; height:70px; fill:#bdbdbd; }39  .placeholder {40    font-size:60px; color:#a7a7a7;41  }42 43  /* Content spacer */44  .spacer {45    position:absolute; top:480px; left:0; right:0; bottom:1200px;46  }47 48  /* Manage access section */49  .manage {50    position:absolute; left:50px; right:50px; top:2050px;51    color:#cfcfcf;52  }53  .manage .label { font-size:54px; color:#bdbdbd; margin-bottom:40px; }54  .manage-row { display:flex; align-items:center; gap:36px; }55  .lock-circle {56    width:120px; height:120px; border-radius:60px; background:#2a2a2a;57    display:flex; align-items:center; justify-content:center;58    border:2px solid #3b3b3b;59  }60  .lock-circle svg { width:64px; height:64px; fill:#d7d7d7; }61  .manage-text { font-size:64px; color:#e6e6e6; }62 63  /* Keyboard */64  .keyboard {65    position:absolute; left:0; right:0; bottom:0; height:1100px;66    background:#161716; border-top:1px solid #2b2b2b; padding:26px 24px 34px;67  }68  .kb-toolbar {69    display:flex; align-items:center; gap:36px; padding:8px 8px 20px 8px;70  }71  .kb-tool {72    width:110px; height:110px; border-radius:26px; background:#222; border:1px solid #333;73    display:flex; align-items:center; justify-content:center; color:#e1e1e1; font-size:36px;74  }75  .keys { margin:0 auto; width:1340px; }76  .row { display:flex; gap:18px; justify-content:center; margin:18px 0; }77  .key {78    background:#262626; color:#f3f3f3; border-radius:24px; border:1px solid #3a3a3a;79    height:134px; min-width:118px; display:flex; align-items:center; justify-content:center;80    font-size:58px;81  }82  .key.small { min-width:140px; }83  .key.shift { min-width:170px; }84  .key.space { flex:1; min-width:520px; }85  .key.extra { min-width:180px; }86  .enter {87    position:absolute; right:32px; bottom:40px; width:180px; height:180px; background:#b5edb8;88    color:#0b0b0b; border-radius:100px; display:flex; align-items:center; justify-content:center;89    font-size:70px; font-weight:bold;90  }91  .home-pill {92    position:absolute; left:50%; transform:translateX(-50%);93    bottom:18px; width:420px; height:14px; background:#dcdcdc22; border-radius:8px;94  }95 96  /* Simple helpers */97  .svg-icon { fill:#cfcfcf; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status Bar -->104  <div class="status-bar">105    <div>9:05</div>106    <div class="status-right">107      <span>◌</span>108      <span class="dot"></span>109      <span style="font-size:40px;">🔔</span>110      <span style="font-size:40px;">📶</span>111      <span style="font-size:40px;">🔋</span>112    </div>113  </div>114 115  <!-- App Bar -->116  <div class="appbar">117    <div class="icon-btn">118      <!-- Close X -->119      <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>120    </div>121    <div class="title">Share</div>122    <div class="appbar-right">123      <!-- Paper plane / send -->124      <div class="icon-btn">125        <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2z"/></svg>126      </div>127      <!-- More vertical -->128      <div class="icon-btn">129        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>130      </div>131    </div>132  </div>133 134  <!-- Input Area -->135  <div class="share-input">136    <div class="left-icon">137      <!-- Person add -->138      <svg viewBox="0 0 24 24"><path d="M15 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm-9 2c-3.3 0-6 2.7-6 6v2h12v-2c0-3.3-2.7-6-6-6zm16 0v-3h-3v-2h3V6h2v3h3v2h-3v3z"/></svg>139    </div>140    <div class="placeholder">Add people or groups</div>141  </div>142 143  <!-- Big empty area filler -->144  <div class="spacer"></div>145 146  <!-- Manage access -->147  <div class="manage">148    <div class="label">Manage access</div>149    <div class="manage-row">150      <div class="lock-circle">151        <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2v-8a2 2 0 00-2-2h-2V6a5 5 0 00-5-5zm0 2a3 3 0 013 3v3H9V6a3 3 0 013-3z"/></svg>152      </div>153      <div class="manage-text">Not shared</div>154    </div>155  </div>156 157  <!-- Keyboard -->158  <div class="keyboard">159    <div class="kb-toolbar">160      <div class="kb-tool">◻︎◻︎</div>161      <div class="kb-tool">😊</div>162      <div class="kb-tool">GIF</div>163      <div class="kb-tool">G↔︎</div>164      <div class="kb-tool">⚙️</div>165      <div class="kb-tool">🎨</div>166      <div class="kb-tool">🎤</div>167    </div>168 169    <div class="keys">170      <div class="row">171        <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>172      </div>173      <div class="row">174        <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>175      </div>176      <div class="row">177        <div class="key shift">⇧</div>178        <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>179        <div class="key shift">⌫</div>180      </div>181      <div class="row">182        <div class="key extra">?123</div>183        <div class="key">,</div>184        <div class="key extra">😊</div>185        <div class="key space"></div>186        <div class="key">.</div>187      </div>188    </div>189 190    <div class="enter">✓</div>191  </div>192 193  <div class="home-pill"></div>194</div>195</body>196</html>