GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EAEAEA;16    font-family: Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 96px;26    background: #121212;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31    color: #CFCFCF;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-bar .time { flex: 1; }36  .status-icons { display: flex; gap: 26px; align-items: center; }37  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #CFCFCF; stroke-width: 3; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 96px;43    left: 0;44    width: 1080px;45    height: 124px;46    border-bottom: 1px solid #2A2A2A;47    display: flex;48    align-items: center;49    box-sizing: border-box;50    padding: 0 24px;51  }52  .app-left, .app-right { width: 220px; display: flex; align-items: center; gap: 36px; }53  .app-title {54    flex: 1;55    text-align: center;56    font-size: 44px;57    font-weight: 500;58    color: #EDEDED;59  }60  .icon-btn svg { width: 56px; height: 56px; }61  .icon-btn svg path, .icon-btn svg circle, .icon-btn svg rect { stroke: #EAEAEA; fill: none; stroke-width: 4; }62 63  /* Content area */64  .content {65    position: absolute;66    top: 220px;67    left: 0;68    width: 1080px;69    height: 2180px;70    box-sizing: border-box;71    padding: 0 40px;72  }73  .row {74    width: 100%;75    box-sizing: border-box;76    color: #EAEAEA;77  }78 79  /* People input */80  .people-row {81    display: flex;82    align-items: center;83    padding: 28px 0 22px 0;84    border-bottom: 1px solid #2A2A2A;85    position: relative;86  }87  .people-row .avatar {88    width: 72px;89    height: 72px;90    border-radius: 36px;91    border: 2px solid #3A3A3A;92    display: flex;93    align-items: center;94    justify-content: center;95    margin-right: 28px;96  }97  .people-row .avatar svg { width: 44px; height: 44px; stroke: #CFCFCF; }98  .people-row .email {99    font-size: 36px;100    line-height: 46px;101    color: #EAEAEA;102    flex: 1;103  }104  .people-row::after {105    content: "";106    position: absolute;107    left: 0;108    bottom: -3px;109    width: 100%;110    height: 4px;111    background: #4285F4;112  }113 114  /* Editor dropdown */115  .editor-row {116    height: 120px;117    display: flex;118    align-items: center;119    border-bottom: 1px solid #2A2A2A;120  }121  .editor-row .label {122    font-size: 36px;123    color: #DDDDDD;124  }125  .editor-row .spacer { flex: 1; }126  .editor-row .dropdown svg { width: 40px; height: 40px; stroke: #CFCFCF; }127 128  /* Notify people */129  .notify-row {130    height: 128px;131    display: flex;132    align-items: center;133    gap: 28px;134    border-bottom: 1px solid #2A2A2A;135  }136  .checkbox {137    width: 48px;138    height: 48px;139    border-radius: 8px;140    background: #4285F4;141    display: flex;142    align-items: center;143    justify-content: center;144  }145  .checkbox svg { width: 34px; height: 34px; stroke: #FFFFFF; stroke-width: 5; fill: none; }146  .notify-row .text { font-size: 36px; color: #EAEAEA; }147 148  /* Message box area */149  .message-area {150    padding-top: 28px;151    color: #9E9E9E;152    font-size: 36px;153  }154  .message-box {155    margin-top: 12px;156    height: 1420px;157    border-top: 1px solid #2A2A2A;158  }159 160  /* Bottom gesture pill */161  .gesture-bar {162    position: absolute;163    bottom: 34px;164    left: 50%;165    transform: translateX(-50%);166    width: 360px;167    height: 14px;168    border-radius: 12px;169    background: #E6E6E6;170    opacity: 0.9;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status bar -->178  <div class="status-bar">179    <div class="time">3:06</div>180    <div class="status-icons">181      <!-- Signal bars -->182      <svg viewBox="0 0 24 24">183        <rect x="2" y="10" width="3" height="10" />184        <rect x="7" y="6" width="3" height="14" />185        <rect x="12" y="3" width="3" height="17" />186        <rect x="17" y="1" width="3" height="19" />187      </svg>188      <!-- Wi-Fi -->189      <svg viewBox="0 0 24 24">190        <path d="M2 8c5-4 15-4 20 0" />191        <path d="M5 11c3-3 11-3 14 0" />192        <path d="M8 14c2-2 6-2 8 0" />193        <circle cx="12" cy="18" r="2" fill="#CFCFCF" stroke="none"/>194      </svg>195      <!-- Battery -->196      <svg viewBox="0 0 28 24">197        <rect x="1" y="5" width="22" height="14" rx="2" />198        <rect x="24" y="9" width="3" height="6" rx="1" />199        <rect x="4" y="8" width="16" height="8" fill="#CFCFCF" stroke="none"/>200      </svg>201    </div>202  </div>203 204  <!-- App bar -->205  <div class="app-bar">206    <div class="app-left">207      <!-- Close (X) -->208      <div class="icon-btn">209        <svg viewBox="0 0 24 24">210          <path d="M4 4L20 20M20 4L4 20"></path>211        </svg>212      </div>213    </div>214    <div class="app-title">Share</div>215    <div class="app-right">216      <!-- Send (paper plane) -->217      <div class="icon-btn">218        <svg viewBox="0 0 24 24">219          <path d="M3 20L21 12L3 4L6 12L3 20Z"></path>220        </svg>221      </div>222      <!-- More (vertical dots) -->223      <div class="icon-btn">224        <svg viewBox="0 0 24 24">225          <circle cx="12" cy="5" r="2" fill="#EAEAEA" stroke="none"></circle>226          <circle cx="12" cy="12" r="2" fill="#EAEAEA" stroke="none"></circle>227          <circle cx="12" cy="19" r="2" fill="#EAEAEA" stroke="none"></circle>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Content -->234  <div class="content">235 236    <!-- People input row -->237    <div class="row people-row">238      <div class="avatar">239        <!-- Person add icon -->240        <svg viewBox="0 0 24 24">241          <circle cx="12" cy="7" r="4"></circle>242          <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>243          <path d="M19 6h4M21 4v4"></path>244        </svg>245      </div>246      <div class="email">dbwscratch.test.id4@gmail.com</div>247    </div>248 249    <!-- Editor dropdown row -->250    <div class="row editor-row">251      <div class="label">Editor</div>252      <div class="spacer"></div>253      <div class="dropdown">254        <svg viewBox="0 0 24 24">255          <path d="M5 9l7 7l7-7"></path>256        </svg>257      </div>258    </div>259 260    <!-- Notify people -->261    <div class="row notify-row">262      <div class="checkbox">263        <svg viewBox="0 0 24 24">264          <path d="M4 12l5 5l11-11"></path>265        </svg>266      </div>267      <div class="text">Notify people</div>268    </div>269 270    <!-- Message area -->271    <div class="message-area">272      Add a message273      <div class="message-box"></div>274    </div>275  </div>276 277  <!-- Bottom gesture bar -->278  <div class="gesture-bar"></div>279 280</div>281</body>282</html>