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; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    font-size: 34px;25    color: #EDEDED;26  }27  .status-left {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .icon {39    display: inline-flex;40    width: 56px;41    height: 56px;42    align-items: center;43    justify-content: center;44  }45  .icon svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 3; }46 47  /* Header */48  .header {49    height: 150px;50    padding: 0 24px 0 24px;51    display: flex;52    align-items: center;53    border-bottom: 1px solid #1f1f1f;54  }55  .header .title {56    font-size: 56px;57    font-weight: 500;58    margin-left: 8px;59  }60  .header .spacer { flex: 1; }61  .header .action svg { stroke: #EDEDED; }62 63  /* Accent line */64  .accent {65    height: 6px;66    width: 470px;67    background: #00C9A8; /* teal/cyan accent */68    margin: 0 0 8px 40px;69    border-radius: 3px;70  }71 72  /* Content */73  .content {74    padding: 12px 40px 0 40px;75    color: #E6E6E6;76  }77  .row {78    display: flex;79    align-items: center;80    gap: 24px;81    min-height: 120px;82  }83  .person-icon svg { stroke: #B9B9B9; }84  .email-input {85    font-size: 44px;86    border: none;87    background: transparent;88    color: #EDEDED;89    outline: none;90    flex: 1;91    padding: 22px 0;92    border-bottom: 1px solid #2A2A2A;93  }94  .divider {95    height: 1px;96    background: #1f1f1f;97    margin: 10px 0 0 0;98  }99 100  .permission-row {101    display: flex;102    align-items: center;103    justify-content: space-between;104    padding: 26px 0;105    font-size: 42px;106    color: #EDEDED;107  }108  .permission-row .chev svg { stroke: #BFBFBF; }109 110  .checkbox-row {111    display: flex;112    align-items: center;113    gap: 24px;114    padding: 26px 0;115    font-size: 42px;116    color: #EDEDED;117  }118  .checkbox {119    width: 52px; height: 52px; border-radius: 8px;120    background: #00C9A8;121    display: inline-flex; align-items: center; justify-content: center;122  }123  .checkbox svg { width: 34px; height: 34px; fill: none; stroke: #0B2; stroke: white; stroke-width: 6; }124 125  .message {126    margin-top: 16px;127    font-size: 42px;128    color: #8F8F8F;129    padding: 26px 0;130    border-top: 1px solid #1f1f1f;131  }132 133  /* Gesture bar */134  .gesture {135    position: absolute;136    bottom: 28px;137    left: 50%;138    transform: translateX(-50%);139    width: 260px;140    height: 10px;141    border-radius: 8px;142    background: #EDEDED;143    opacity: 0.9;144  }145</style>146</head>147<body>148<div id="render-target">149  <!-- Status Bar -->150  <div class="status-bar">151    <div class="status-left">152      <div style="font-weight:600;">10:54</div>153      <div class="icon">154        <svg viewBox="0 0 24 24">155          <circle cx="12" cy="12" r="3"></circle>156        </svg>157      </div>158      <div class="icon">159        <svg viewBox="0 0 24 24">160          <path d="M2 12c4-7 16-7 20 0"></path>161          <path d="M5 12c3-4 11-4 14 0"></path>162          <path d="M8 12c2-1 6-1 8 0"></path>163        </svg>164      </div>165      <div class="icon">166        <svg viewBox="0 0 24 24">167          <circle cx="10" cy="12" r="2"></circle>168          <circle cx="16" cy="12" r="2"></circle>169        </svg>170      </div>171    </div>172    <div class="status-right">173      <div class="icon">174        <svg viewBox="0 0 24 24">175          <path d="M3 12l7-7v14z"></path>176        </svg>177      </div>178      <div class="icon">179        <svg viewBox="0 0 24 24">180          <rect x="3" y="6" width="14" height="12" rx="2" ry="2"></rect>181          <path d="M21 8v8"></path>182        </svg>183      </div>184    </div>185  </div>186 187  <!-- Header -->188  <div class="header">189    <div class="icon">190      <svg viewBox="0 0 24 24" stroke-linecap="round">191        <path d="M5 5l14 14"></path>192        <path d="M19 5L5 19"></path>193      </svg>194    </div>195    <div class="title">Share</div>196    <div class="spacer"></div>197    <div class="icon action">198      <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">199        <path d="M22 2L11 13"></path>200        <path d="M22 2l-6 20-5-9-9-5z"></path>201      </svg>202    </div>203    <div class="icon action">204      <svg viewBox="0 0 24 24" fill="#EDEDED" stroke="none">205        <circle cx="12" cy="5" r="2"></circle>206        <circle cx="12" cy="12" r="2"></circle>207        <circle cx="12" cy="19" r="2"></circle>208      </svg>209    </div>210  </div>211 212  <div class="accent"></div>213 214  <!-- Content -->215  <div class="content">216    <div class="row">217      <div class="icon person-icon">218        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">219          <circle cx="10" cy="7" r="3"></circle>220          <path d="M4 20c1-3 4-5 6-5s5 2 6 5"></path>221          <path d="M18 8v4"></path>222          <path d="M16 10h4"></path>223        </svg>224      </div>225      <input class="email-input" value="colepersonatest@gmail.com" />226    </div>227 228    <div class="permission-row">229      <div>Editor</div>230      <div class="chev icon" style="width: 60px; height: 60px;">231        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">232          <path d="M6 9l6 6 6-6"></path>233        </svg>234      </div>235    </div>236 237    <div class="divider"></div>238 239    <div class="checkbox-row">240      <div class="checkbox">241        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">242          <path d="M5 12l4 4 10-10"></path>243        </svg>244      </div>245      <div>Notify people</div>246    </div>247 248    <div class="message">Add a message</div>249  </div>250 251  <!-- Gesture Bar -->252  <div class="gesture"></div>253</div>254</body>255</html>