GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #22150B; /* dark warm brown */14    color: #D9C7B7;      /* warm beige text */15    font-family: Arial, Helvetica, sans-serif;16  }17 18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #F2E9E2;25    font-size: 38px;26    letter-spacing: 0.5px;27    opacity: 0.95;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .app-bar {35    height: 160px;36    padding: 0 36px;37    display: flex;38    align-items: center;39    gap: 26px;40    border-bottom: 1px solid #4A3A2E;41  }42  .app-title {43    font-size: 72px;44    font-weight: 600;45    margin-right: auto;46  }47  .top-actions {48    display: flex;49    align-items: center;50    gap: 40px;51  }52  .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #D9C7B7; stroke-width: 4; }53  .icon-fill svg { width: 60px; height: 60px; fill: #D9C7B7; stroke: none; }54 55  .add-row {56    padding: 28px 36px;57    display: flex;58    align-items: center;59    gap: 26px;60    font-size: 46px;61    color: #D9C7B7;62    border-bottom: 1px solid #4A3A2E;63  }64  .add-icon svg { width: 56px; height: 56px; stroke: #D9C7B7; stroke-width: 4; fill: none; }65  .caret {66    width: 2px;67    height: 48px;68    background: #E59A52;69    margin-right: 10px;70  }71  .spacer {72    height: 1680px; /* large empty area to match screenshot */73  }74 75  .bottom-section {76    position: absolute;77    left: 36px;78    right: 36px;79    bottom: 140px;80  }81  .manage-label {82    font-size: 42px;83    color: #D9C7B7;84    margin-bottom: 26px;85  }86  .avatars {87    display: flex;88    align-items: center;89    gap: 28px;90  }91  .chip {92    width: 110px;93    height: 110px;94    border-radius: 55px;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #FFFFFF;99    font-size: 50px;100    font-weight: 700;101  }102  .chip.magenta { background: #D11E6D; }103  .divider {104    width: 2px;105    height: 90px;106    background: #7A675A;107    margin: 0 4px;108  }109  .chip.teal { background: #1AAFA8; font-weight: 600; }110  .chip svg { width: 60px; height: 60px; fill: none; stroke: #FFFFFF; stroke-width: 4; }111 112  .gesture-bar {113    position: absolute;114    bottom: 40px;115    left: 50%;116    transform: translateX(-50%);117    width: 420px;118    height: 12px;119    background: #EFEFEF;120    border-radius: 6px;121    opacity: 0.8;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status Bar -->129  <div class="status-bar">130    <div class="status-left">9:13</div>131    <div class="status-right">132      <!-- small triangle/caution outline -->133      <svg viewBox="0 0 24 24" width="40" height="40">134        <path d="M12 3 L22 20 H2 Z" fill="none" stroke="#F2E9E2" stroke-width="2"></path>135      </svg>136      <!-- Wi-Fi icon -->137      <svg viewBox="0 0 24 24" width="40" height="40">138        <path d="M2 9c5-5 15-5 20 0" fill="none" stroke="#FFFFFF" stroke-width="2"/>139        <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#FFFFFF" stroke-width="2"/>140        <path d="M8 15c3-3 5-3 8 0" fill="none" stroke="#FFFFFF" stroke-width="2"/>141        <circle cx="12" cy="18" r="1.5" fill="#FFFFFF"/>142      </svg>143      <!-- Battery icon -->144      <svg viewBox="0 0 28 24" width="46" height="40">145        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>146        <rect x="4" y="8" width="14" height="8" fill="#FFFFFF"/>147        <rect x="22" y="9" width="4" height="6" fill="#FFFFFF"/>148      </svg>149    </div>150  </div>151 152  <!-- App Bar -->153  <div class="app-bar">154    <div class="icon-btn">155      <!-- Close (X) -->156      <svg viewBox="0 0 24 24">157        <path d="M6 6 L18 18 M6 18 L18 6"></path>158      </svg>159    </div>160    <div class="app-title">Share</div>161    <div class="top-actions">162      <!-- Send (paper plane) -->163      <div class="icon-fill">164        <svg viewBox="0 0 24 24">165          <path d="M3 11 L20 4 L14 20 L11 13 Z"></path>166        </svg>167      </div>168      <!-- More (vertical dots) -->169      <div class="icon-fill">170        <svg viewBox="0 0 24 24">171          <circle cx="12" cy="5" r="2.4"></circle>172          <circle cx="12" cy="12" r="2.4"></circle>173          <circle cx="12" cy="19" r="2.4"></circle>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Add people row -->180  <div class="add-row">181    <div class="add-icon">182      <svg viewBox="0 0 24 24">183        <circle cx="12" cy="8" r="3.5"></circle>184        <path d="M5 20c0-4 14-4 14 0" />185        <path d="M4 8h4M6 6v4" />186      </svg>187    </div>188    <div class="caret"></div>189    <div>Add people or groups</div>190  </div>191 192  <div class="spacer"></div>193 194  <!-- Bottom: Manage access and avatars -->195  <div class="bottom-section">196    <div class="manage-label">Manage access</div>197    <div class="avatars">198      <div class="chip magenta">C</div>199      <div class="divider"></div>200      <div class="chip teal">201        <!-- simple user silhouette -->202        <svg viewBox="0 0 24 24">203          <circle cx="12" cy="8" r="4"></circle>204          <path d="M4 20c0-4.5 16-4.5 16 0" />205        </svg>206      </div>207    </div>208  </div>209 210  <!-- Gesture bar -->211  <div class="gesture-bar"></div>212 213</div>214</body>215</html>