GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Share - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1c1619;15    color: #e9e1e6;16  }17 18  .status-bar {19    height: 96px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #e9e1e6;25    font-size: 34px;26    box-sizing: border-box;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .dot { width: 14px; height: 14px; background: #e9e1e6; border-radius: 50%; opacity: .9; }34  .pill {35    width: 32px; height: 18px; border: 2px solid #e9e1e6; border-radius: 4px; position: relative;36  }37  .pill:after { content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 10px; background: #e9e1e6; border-radius: 1px; }38 39  .app-bar {40    height: 132px;41    display: flex;42    align-items: center;43    padding: 0 28px;44    box-sizing: border-box;45    gap: 20px;46    border-bottom: 1px solid #3a2f35;47  }48  .title { font-size: 48px; font-weight: 600; letter-spacing: 0.2px; }49 50  .app-actions {51    margin-left: auto;52    display: flex;53    align-items: center;54    gap: 24px;55  }56 57  .icon-btn svg { width: 60px; height: 60px; stroke: #e9e1e6; fill: none; stroke-width: 2.5; }58 59  .share-input {60    position: relative;61    padding-top: 10px;62    border-bottom: 1px solid #3a2f35;63  }64  .progress-track {65    height: 10px;66    background: #3a2f35;67  }68  .progress-bar {69    width: 76%;70    height: 100%;71    background: #f48fb1;72  }73 74  .email-row {75    display: flex;76    align-items: center;77    gap: 28px;78    padding: 28px;79    box-sizing: border-box;80    font-size: 40px;81    color: #f7cfe0;82  }83  .email-text { flex: 1; border: none; background: transparent; color: #f7cfe0; outline: none; font-size: 40px; }84 85  .section-row {86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 34px 28px;90    border-bottom: 1px solid #3a2f35;91    font-size: 38px;92    color: #d8cbd3;93  }94 95  .notify {96    display: flex;97    align-items: center;98    gap: 24px;99    padding: 30px 28px;100    font-size: 38px;101    color: #e9e1e6;102  }103  .checkbox {104    width: 48px; height: 48px; border-radius: 8px; background: #f48fb1; display: flex; align-items: center; justify-content: center;105  }106  .checkbox svg { width: 34px; height: 34px; stroke: #1c1619; stroke-width: 4; fill: none; }107 108  .message {109    padding: 30px 28px;110    color: #a8939e;111    font-size: 38px;112    border-top: 1px solid #3a2f35;113  }114 115  .home-bar {116    position: absolute;117    bottom: 34px;118    left: 50%;119    transform: translateX(-50%);120    width: 420px;121    height: 14px;122    background: #ffffff;123    border-radius: 8px;124    opacity: 0.9;125  }126 127  /* Simple icons styles */128  .mini-icon { width: 60px; height: 60px; }129  .mini-icon path, .mini-icon circle, .mini-icon polyline, .mini-icon line { stroke: #e9e1e6; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }130  .muted { color: #b6a8b1; }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status bar -->137  <div class="status-bar">138    <div>7:55</div>139    <div class="status-icons">140      <div class="dot"></div>141      <div class="dot"></div>142      <div class="dot"></div>143      <div class="pill"></div>144      <div class="dot"></div>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="app-bar">150    <!-- Close icon -->151    <div class="icon-btn">152      <svg viewBox="0 0 24 24">153        <path d="M5 5L19 19M5 19L19 5"></path>154      </svg>155    </div>156    <div class="title">Share</div>157    <div class="app-actions">158      <!-- Send icon -->159      <svg class="mini-icon" viewBox="0 0 24 24">160        <path d="M3 20l18-8L3 4v6l12 2-12 2v6z"></path>161      </svg>162      <!-- Kebab menu -->163      <svg class="mini-icon" viewBox="0 0 24 24">164        <circle cx="12" cy="5" r="2.2"></circle>165        <circle cx="12" cy="12" r="2.2"></circle>166        <circle cx="12" cy="19" r="2.2"></circle>167      </svg>168    </div>169  </div>170 171  <!-- Email input with progress underline -->172  <div class="share-input">173    <div class="progress-track"><div class="progress-bar"></div></div>174    <div class="email-row">175      <!-- Person add icon -->176      <svg class="mini-icon" viewBox="0 0 24 24">177        <circle cx="11" cy="7" r="3.2"></circle>178        <path d="M4 20c1.5-4 12.5-4 14 0"></path>179        <line x1="3" y1="7" x2="7" y2="7"></line>180        <line x1="5" y1="5" x2="5" y2="9"></line>181      </svg>182      <div class="email-text">mike.waggoner@hotwater.com</div>183    </div>184  </div>185 186  <!-- Editor row -->187  <div class="section-row">188    <div>Editor</div>189    <svg class="mini-icon" viewBox="0 0 24 24">190      <polyline points="6,9 12,15 18,9"></polyline>191    </svg>192  </div>193 194  <!-- Notify people -->195  <div class="notify">196    <div class="checkbox">197      <svg viewBox="0 0 24 24">198        <polyline points="4,12 10,17 20,6"></polyline>199      </svg>200    </div>201    <div>Notify people</div>202  </div>203 204  <!-- Add a message -->205  <div class="message">Add a message</div>206 207  <!-- Bottom home indicator -->208  <div class="home-bar"></div>209</div>210</body>211</html>