GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Share Screen UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1440px; height: 3120px;10    position: relative; overflow: hidden;11    background: #101213; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; padding: 0 60px;18    display: flex; align-items: center; justify-content: space-between;19    color: #DADADA; font-size: 48px; letter-spacing: 1px;20  }21  .status-icons { display: flex; align-items: center; gap: 30px; }22  .dot {23    width: 26px; height: 26px; border-radius: 50%; background: #B0B0B0;24  }25  .battery {26    width: 70px; height: 36px; border: 3px solid #B0B0B0; border-radius: 6px; position: relative;27  }28  .battery::after {29    content: ""; position: absolute; right: -14px; top: 9px;30    width: 10px; height: 18px; background: #B0B0B0; border-radius: 2px;31  }32  .battery .level {33    position: absolute; left: 4px; top: 4px; height: 24px; width: 44px; background: #9CCC65;34  }35 36  /* Header bar */37  .header {38    position: absolute; top: 120px; left: 0; right: 0;39    height: 220px; padding: 0 60px;40    display: flex; align-items: center; justify-content: center;41  }42  .header-title { font-size: 96px; font-weight: 600; color: #EAEAEA; }43  .header .left, .header .right { position: absolute; top: 50%; transform: translateY(-50%); }44  .header .left { left: 40px; }45  .header .right { right: 40px; display: flex; align-items: center; gap: 50px; }46  .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }47  .icon { width: 72px; height: 72px; fill: #EDEDED; }48 49  /* Light green focus strip below header (as seen in screenshot) */50  .focus-strip {51    position: absolute; top: 340px; left: 0;52    width: 720px; height: 12px; background: #9CCC65;53  }54 55  /* Content */56  .content {57    position: absolute; top: 360px; left: 0; right: 0;58    padding: 40px 60px 0 60px;59  }60 61  /* Email input row */62  .share-row {63    display: flex; align-items: center; gap: 40px;64    padding: 50px 0 30px 0;65    border-bottom: 6px solid #9CCC65;66  }67  .person-ico { width: 90px; height: 90px; }68  .email-text { font-size: 72px; color: #EDEDED; }69 70  /* Editor dropdown */71  .dropdown-row {72    margin-top: 80px;73    padding: 50px 0;74    border-bottom: 2px solid #2A2C2D;75    display: flex; align-items: center; justify-content: space-between;76  }77  .dropdown-label { font-size: 66px; color: #EDEDED; }78  .chev { width: 54px; height: 54px; fill: #CFCFCF; }79 80  /* Notify people */81  .notify-row {82    margin-top: 40px;83    padding: 60px 0;84    border-bottom: 2px solid #2A2C2D;85    display: flex; align-items: center; gap: 36px;86  }87  .checkbox {88    width: 78px; height: 78px; background: #9CCC65; border-radius: 10px; position: relative;89  }90  .checkbox svg { position: absolute; top: 8px; left: 8px; width: 62px; height: 62px; fill: none; stroke: #0D0D0D; stroke-width: 12; }91  .notify-text { font-size: 66px; color: #EDEDED; }92 93  /* Add a message */94  .message-row {95    margin-top: 70px;96    padding-top: 30px;97    color: #BDBDBD; font-size: 66px;98  }99 100  /* Bottom pill (gesture bar) */101  .gesture {102    position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);103    width: 500px; height: 20px; border-radius: 12px; background: #E0E0E0;104    opacity: 0.75;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div class="time">9:07</div>114    <div class="status-icons">115      <div class="dot"></div>116      <div class="dot"></div>117      <div class="dot"></div>118      <div class="battery"><div class="level"></div></div>119    </div>120  </div>121 122  <!-- Header -->123  <div class="header">124    <div class="left icon-btn">125      <!-- Close (X) icon -->126      <svg class="icon" viewBox="0 0 24 24">127        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>128      </svg>129    </div>130    <div class="header-title">Share</div>131    <div class="right">132      <!-- Paper plane icon -->133      <div class="icon-btn">134        <svg class="icon" viewBox="0 0 24 24">135          <path d="M3 11 L21 3 L14 21 L11 13 Z" fill="#EDEDED"/>136        </svg>137      </div>138      <!-- Kebab (vertical dots) -->139      <div class="icon-btn">140        <svg class="icon" viewBox="0 0 24 24">141          <circle cx="12" cy="5" r="2.5" fill="#EDEDED"/>142          <circle cx="12" cy="12" r="2.5" fill="#EDEDED"/>143          <circle cx="12" cy="19" r="2.5" fill="#EDEDED"/>144        </svg>145      </div>146    </div>147  </div>148 149  <div class="focus-strip"></div>150 151  <!-- Content area -->152  <div class="content">153    <!-- Email row -->154    <div class="share-row">155      <!-- Person icon -->156      <svg class="person-ico" viewBox="0 0 24 24">157        <circle cx="12" cy="7.5" r="4.5" fill="#CFCFCF"/>158        <path d="M4 20 C4 15.5 9 14 12 14 C15 14 20 15.5 20 20 Z" fill="#CFCFCF"/>159      </svg>160      <div class="email-text">Thomas123@gmail.com</div>161    </div>162 163    <!-- Editor dropdown -->164    <div class="dropdown-row">165      <div class="dropdown-label">Editor</div>166      <svg class="chev" viewBox="0 0 24 24">167        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>168      </svg>169    </div>170 171    <!-- Notify people -->172    <div class="notify-row">173      <div class="checkbox">174        <svg viewBox="0 0 24 24">175          <path d="M5 12 L10 17 L19 7" />176        </svg>177      </div>178      <div class="notify-text">Notify people</div>179    </div>180 181    <!-- Add a message -->182    <div class="message-row">Add a message</div>183  </div>184 185  <!-- Gesture bar -->186  <div class="gesture"></div>187</div>188</body>189</html>