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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #23160F; color: #E9D2C0;12  }13 14  /* Status bar */15  .statusbar {16    height: 100px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;17    color: #EAD4C4; font-size: 36px;18  }19  .status-right { display: flex; align-items: center; gap: 24px; }20  .icon { display: inline-flex; align-items: center; justify-content: center; }21  .icon svg { width: 42px; height: 42px; fill: #EAD4C4; }22 23  /* Header */24  .header {25    height: 150px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;26    border-bottom: 1px solid #3C2C23;27  }28  .header-left { display: flex; align-items: center; gap: 28px; }29  .header-left .title { font-size: 56px; font-weight: 600; color: #EAD4C4; }30  .header-right { display: flex; align-items: center; gap: 36px; }31  .header .icon svg { width: 54px; height: 54px; fill: #CBB19C; }32 33  /* Add people input row */34  .input-row {35    height: 120px; display: flex; align-items: center; gap: 24px;36    padding: 0 32px; border-bottom: 1px solid #3C2C23;37  }38  .caret { width: 3px; height: 48px; background: #E2A777; border-radius: 2px; }39  .input-placeholder { font-size: 44px; color: #CEB39E; }40 41  /* Content area */42  .content { position: relative; height: 1230px; }43  .manage-section {44    position: absolute; left: 32px; right: 32px; bottom: 900px;45  }46  .manage-title { font-size: 42px; color: #DCC1AE; margin-bottom: 24px; }47  .avatars { display: flex; align-items: center; gap: 26px; }48  .avatar {49    width: 92px; height: 92px; border-radius: 50%;50    display: flex; align-items: center; justify-content: center;51    color: #23160F; font-weight: 700; font-size: 44px;52  }53  .avatar.pink { background: #D81B60; color: #FBE8E1; }54  .avatar.teal { background: #0EA5A7; color: #EAF6F6; }55  .divider-vert { width: 2px; height: 60px; background: #5A463B; }56 57  /* Keyboard */58  .keyboard {59    position: absolute; left: 0; right: 0; bottom: 0;60    height: 900px; background: #1E1814; border-top: 1px solid #3C2C23;61    display: flex; flex-direction: column;62  }63  .kb-topbar {64    height: 120px; display: flex; align-items: center; gap: 48px; padding: 0 36px; color: #EAD4C4;65  }66  .kb-topbar .icon svg { width: 48px; height: 48px; fill: #EAD4C4; }67  .kb-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 24px; }68  .kb-row { display: flex; justify-content: center; align-items: center; gap: 18px; }69  .key {70    height: 120px; min-width: 86px; padding: 0 8px; border-radius: 28px;71    background: #2A2420; color: #EAD4C4; font-size: 48px; display: flex; align-items: center; justify-content: center;72    box-shadow: inset 0 0 0 1px #3A302A;73  }74  .key.wide { min-width: 160px; }75  .space { flex: 1; height: 120px; border-radius: 28px; background: #2A2420; box-shadow: inset 0 0 0 1px #3A302A; }76  .key.special { background: #E9C7A9; color: #2A2420; }77  .key.circle { border-radius: 50%; min-width: 120px; height: 120px; }78 79  /* Gesture bar */80  .gesture {81    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);82    width: 300px; height: 10px; background: #D9D9D9; border-radius: 10px; opacity: 0.85;83  }84</style>85</head>86<body>87<div id="render-target">88 89  <!-- Status bar -->90  <div class="statusbar">91    <div>9:13</div>92    <div class="status-right">93      <!-- Wi-Fi -->94      <span class="icon">95        <svg viewBox="0 0 24 24">96          <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zM6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z"/>97          <circle cx="12" cy="17" r="2"/>98        </svg>99      </span>100      <!-- Battery -->101      <span class="icon">102        <svg viewBox="0 0 24 24">103          <rect x="2" y="6" width="18" height="12" rx="2"></rect>104          <rect x="21" y="10" width="2" height="4"></rect>105          <rect x="4" y="8" width="14" height="8" fill="#EAD4C4"></rect>106        </svg>107      </span>108    </div>109  </div>110 111  <!-- Header -->112  <div class="header">113    <div class="header-left">114      <!-- Close X -->115      <span class="icon">116        <svg viewBox="0 0 24 24">117          <path d="M5 5l14 14M19 5L5 19" stroke="#CBB19C" stroke-width="2" fill="none" stroke-linecap="round"/>118        </svg>119      </span>120      <div class="title">Share</div>121    </div>122    <div class="header-right">123      <!-- Send -->124      <span class="icon">125        <svg viewBox="0 0 24 24">126          <path d="M3 12l18-9-6 18-4-7-8-2z" />127        </svg>128      </span>129      <!-- More vertical -->130      <span class="icon">131        <svg viewBox="0 0 24 24">132          <circle cx="12" cy="5" r="2"></circle>133          <circle cx="12" cy="12" r="2"></circle>134          <circle cx="12" cy="19" r="2"></circle>135        </svg>136      </span>137    </div>138  </div>139 140  <!-- Add people row -->141  <div class="input-row">142    <!-- Person add icon -->143    <span class="icon">144      <svg viewBox="0 0 24 24">145        <circle cx="9" cy="8" r="3" fill="#CBB19C"></circle>146        <path d="M2 20c1-4 12-4 14 0" stroke="#CBB19C" stroke-width="2" fill="none" stroke-linecap="round"/>147        <path d="M18 7v3M16.5 8.5h3" stroke="#CBB19C" stroke-width="2" stroke-linecap="round"/>148      </svg>149    </span>150    <div class="caret"></div>151    <div class="input-placeholder">Add people or groups</div>152  </div>153 154  <!-- Content -->155  <div class="content">156    <div class="manage-section">157      <div class="manage-title">Manage access</div>158      <div class="avatars">159        <div class="avatar pink">C</div>160        <div class="divider-vert"></div>161        <div class="avatar teal">162          <!-- simple user silhouette -->163          <svg viewBox="0 0 24 24" width="48" height="48">164            <circle cx="12" cy="8" r="4" fill="#EAF6F6"></circle>165            <path d="M4 20c0-4 16-4 16 0" fill="#EAF6F6"></path>166          </svg>167        </div>168      </div>169    </div>170  </div>171 172  <!-- Keyboard -->173  <div class="keyboard">174    <div class="kb-topbar">175      <span class="icon">176        <!-- grid icon -->177        <svg viewBox="0 0 24 24">178          <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"></path>179        </svg>180      </span>181      <span class="icon">182        <!-- emoji -->183        <svg viewBox="0 0 24 24">184          <circle cx="12" cy="12" r="10"></circle>185          <circle cx="9" cy="10" r="1.5" fill="#23160F"></circle>186          <circle cx="15" cy="10" r="1.5" fill="#23160F"></circle>187          <path d="M7 14c2 3 8 3 10 0" fill="none" stroke="#23160F" stroke-width="2" stroke-linecap="round"/>188        </svg>189      </span>190      <span style="font-size: 42px; color:#EAD4C4;">GIF</span>191      <span class="icon">192        <!-- gear -->193        <svg viewBox="0 0 24 24">194          <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8 4l-2 1.2.3 2.3-2.3.3L14.8 18 13 16.8 11.2 18l-1.2-2.2-2.3-.3.3-2.3L6 12l2-1.2-.3-2.3 2.3-.3L12 6l1.8 1.2 2.3-.3-.3 2.3L20 12z"></path>195        </svg>196      </span>197      <span class="icon">198        <!-- translate simple -->199        <svg viewBox="0 0 24 24">200          <path d="M4 4h8v8H4zM13 13h7v7h-7zM7 7h2M15 16l2 4M17 16l-2 4" stroke="#EAD4C4" fill="none" stroke-width="2" stroke-linecap="round"/>201        </svg>202      </span>203      <span class="icon">204        <!-- palette -->205        <svg viewBox="0 0 24 24">206          <path d="M12 3c5 0 9 3 9 7 0 3-3 3-4 3-1 0-1 2 0 3 1 1 1 5-5 5-6 0-9-5-9-9 0-4 4-9 9-9z"></path>207        </svg>208      </span>209      <span class="icon">210        <!-- mic -->211        <svg viewBox="0 0 24 24">212          <rect x="9" y="5" width="6" height="10" rx="3"></rect>213          <path d="M5 12c0 4 14 4 14 0M12 16v4M9 20h6" stroke="#EAD4C4" stroke-width="2" fill="none" stroke-linecap="round"/>214        </svg>215      </span>216    </div>217 218    <div class="kb-rows">219      <div class="kb-row">220        <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>221        <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>222      </div>223      <div class="kb-row">224        <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>225        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>226      </div>227      <div class="kb-row">228        <div class="key wide">shift</div>229        <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>230        <div class="key">n</div><div class="key">m</div>231        <div class="key wide">⌫</div>232      </div>233      <div class="kb-row">234        <div class="key special wide">?123</div>235        <div class="key">,</div>236        <div class="space"></div>237        <div class="key">.</div>238        <div class="key special circle">✓</div>239      </div>240    </div>241  </div>242 243  <div class="gesture"></div>244</div>245</body>246</html>