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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #ECEFF1;16    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 80px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E0E0E0;27    font-size: 30px;28    letter-spacing: 0.5px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .icon-dot {36    width: 14px;37    height: 14px;38    background: #E0E0E0;39    border-radius: 50%;40    opacity: 0.85;41  }42  .battery {43    width: 28px;44    height: 16px;45    border: 2px solid #E0E0E0;46    border-radius: 3px;47    position: relative;48  }49  .battery::after {50    content: '';51    position: absolute;52    right: -6px;53    top: 4px;54    width: 4px;55    height: 8px;56    background: #E0E0E0;57    border-radius: 1px;58  }59  .battery .fill {60    position: absolute;61    left: 2px;62    top: 2px;63    bottom: 2px;64    width: 18px;65    background: #E0E0E0;66  }67 68  /* App bar */69  .app-bar {70    height: 120px;71    display: flex;72    align-items: center;73    padding: 0 24px;74    gap: 16px;75    border-bottom: 1px solid #1F1F1F;76  }77  .app-title {78    font-size: 44px;79    font-weight: 500;80    letter-spacing: 0.2px;81    margin-right: auto;82  }83  .icon-btn {84    width: 72px;85    height: 72px;86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .icon-btn svg { fill: none; stroke: #E0E0E0; stroke-width: 2.5; }91 92  .progress {93    height: 6px;94    background: #1E1E1E;95  }96  .progress .bar {97    height: 100%;98    width: 62%;99    background: #4db6ac;100  }101 102  .section {103    padding: 24px;104    border-bottom: 1px solid #1F1F1F;105  }106  .row {107    display: flex;108    align-items: center;109    gap: 22px;110  }111  .person-icon {112    width: 72px;113    height: 72px;114    display: flex;115    align-items: center;116    justify-content: center;117    border-radius: 36px;118    background: #1E1E1E;119  }120  .email-text {121    font-size: 36px;122    color: #E0E0E0;123  }124  .muted {125    color: #9AA0A6;126  }127 128  .dropdown {129    padding: 26px 24px;130    display: flex;131    align-items: center;132    justify-content: space-between;133    font-size: 36px;134    border-bottom: 1px solid #1F1F1F;135  }136  .checkbox-row {137    padding: 24px;138    display: flex;139    align-items: center;140    gap: 20px;141    font-size: 36px;142    color: #E0E0E0;143    border-bottom: 1px solid #1F1F1F;144  }145  .checkbox {146    width: 42px;147    height: 42px;148    border-radius: 6px;149    border: 2px solid #4db6ac;150    position: relative;151    background: rgba(77,182,172,0.15);152  }153  .checkbox svg {154    position: absolute;155    left: 2px;156    top: 2px;157  }158 159  .add-message {160    padding: 26px 24px;161    color: #9AA0A6;162    font-size: 34px;163  }164 165  /* Modal card */166  .modal {167    position: absolute;168    left: 60px;169    right: 60px;170    top: 920px;171    background: #253238;172    border-radius: 36px;173    box-shadow: 0 20px 60px rgba(0,0,0,0.6);174    color: #DDE3E6;175    overflow: hidden;176  }177  .modal-content {178    padding: 40px 42px 30px 42px;179  }180  .modal-title {181    font-size: 48px;182    font-weight: 600;183    margin-bottom: 18px;184    color: #E6F0F2;185  }186  .modal-text {187    font-size: 34px;188    line-height: 1.5;189    color: #C2CDD1;190  }191  .modal-actions {192    display: flex;193    justify-content: flex-end;194    gap: 42px;195    padding: 10px 42px 32px;196  }197  .action {198    font-size: 38px;199    color: #4db6ac;200  }201 202  /* Gesture bar */203  .gesture {204    position: absolute;205    bottom: 26px;206    left: 50%;207    transform: translateX(-50%);208    width: 320px;209    height: 10px;210    background: #E3E3E3;211    border-radius: 8px;212    opacity: 0.9;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="status-bar">221    <div class="time">10:54</div>222    <div class="status-icons">223      <div class="icon-dot"></div>224      <div class="icon-dot"></div>225      <div class="icon-dot"></div>226      <div class="battery"><div class="fill"></div></div>227    </div>228  </div>229 230  <!-- App bar -->231  <div class="app-bar">232    <div class="icon-btn" aria-label="Close">233      <svg width="40" height="40" viewBox="0 0 24 24">234        <line x1="4" y1="4" x2="20" y2="20" stroke="#E0E0E0" stroke-width="2.5"/>235        <line x1="20" y1="4" x2="4" y2="20" stroke="#E0E0E0" stroke-width="2.5"/>236      </svg>237    </div>238    <div class="app-title">Share</div>239    <div class="icon-btn" aria-label="Send">240      <svg width="44" height="44" viewBox="0 0 24 24">241        <path d="M3 12l17-8-4 8 4 8-17-8z" fill="#E0E0E0"/>242      </svg>243    </div>244    <div class="icon-btn" aria-label="More">245      <svg width="8" height="40" viewBox="0 0 8 24">246        <circle cx="4" cy="5" r="3" fill="#E0E0E0"/>247        <circle cx="4" cy="12" r="3" fill="#E0E0E0"/>248        <circle cx="4" cy="19" r="3" fill="#E0E0E0"/>249      </svg>250    </div>251  </div>252 253  <!-- Progress bar -->254  <div class="progress"><div class="bar"></div></div>255 256  <!-- Email input row -->257  <div class="section">258    <div class="row">259      <div class="person-icon">260        <svg width="40" height="40" viewBox="0 0 24 24">261          <circle cx="9" cy="8" r="3.5" fill="#90A4AE"/>262          <path d="M14 18c-1.6-3-8.4-3-10 0" stroke="#90A4AE" stroke-width="2" fill="none" stroke-linecap="round"/>263          <path d="M17 8v-3M15.5 6.5h3" stroke="#90A4AE" stroke-width="2" stroke-linecap="round"/>264        </svg>265      </div>266      <div class="email-text">colepersonatest@gmail.com</div>267    </div>268  </div>269 270  <!-- Role dropdown -->271  <div class="dropdown">272    <div>Editor</div>273    <svg width="34" height="34" viewBox="0 0 24 24">274      <path d="M6 9l6 6 6-6" stroke="#9AA0A6" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275    </svg>276  </div>277 278  <!-- Notify people -->279  <div class="checkbox-row">280    <div class="checkbox">281      <svg width="38" height="38" viewBox="0 0 24 24">282        <path d="M4 12l4 4 12-12" stroke="#4db6ac" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283      </svg>284    </div>285    <div>Notify people</div>286  </div>287 288  <!-- Add a message -->289  <div class="add-message">Add a message</div>290 291  <!-- Confirmation Modal -->292  <div class="modal">293    <div class="modal-content">294      <div class="modal-title">Are you sure?</div>295      <div class="modal-text">296        You are sending an invitation to colepersonatest@gmail.com. Since there is no Google account associated with this email address, anyone holding this invitation will have access without signing in.297      </div>298    </div>299    <div class="modal-actions">300      <div class="action">Cancel</div>301      <div class="action">Share</div>302    </div>303  </div>304 305  <!-- Gesture bar -->306  <div class="gesture"></div>307</div>308</body>309</html>