GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Share Sheet - Modeling</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #5a4a2b; /* dimmed brown note surface */12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 90px; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; font-size: 38px;20    opacity: 0.95;21  }22  .status-icons { display: flex; align-items: center; gap: 24px; }23  .status-icons svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; }24 25  /* App bar */26  .app-bar {27    position: absolute; top: 90px; left: 0; right: 0;28    height: 120px; display: flex; align-items: center;29    color: #d9c8a0;30    padding: 0 36px; gap: 26px;31  }32  .app-bar .title { font-size: 56px; font-weight: 600; letter-spacing: 0.5px; }33  .app-bar .spacer { flex: 1; }34  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }35  .icon-btn svg { width: 54px; height: 54px; stroke: #d9c8a0; fill: none; stroke-width: 3; }36 37  /* Note content */38  .note-body {39    position: absolute; top: 240px; left: 36px; right: 36px;40    color: #eadfbf; font-size: 64px;41  }42 43  /* Dim scrim for share sheet */44  .scrim {45    position: absolute; left:0; right:0; top:0; bottom:0;46    background: rgba(0,0,0,0.35);47  }48 49  /* Bottom sheet */50  .sheet {51    position: absolute; left: 0; bottom: 0; width: 100%;52    height: 900px; background: #141414; color: #fff;53    border-top-left-radius: 32px; border-top-right-radius: 32px;54    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);55    padding: 36px 44px;56  }57  .handle {58    width: 120px; height: 12px; background: #3b3b3b;59    border-radius: 12px; margin: 0 auto 30px auto;60  }61  .sheet-title {62    font-size: 52px; margin-bottom: 34px;63  }64  .actions { display: flex; gap: 26px; margin-bottom: 40px; }65  .chip {66    display: flex; align-items: center; gap: 20px;67    border: 2px solid #6f8cff; color: #dbe4ff;68    border-radius: 22px; padding: 22px 30px; font-size: 40px;69  }70  .chip svg { width: 46px; height: 46px; stroke: #a5baff; fill: none; stroke-width: 3; }71 72  .list-item {73    display: flex; align-items: center; gap: 28px;74    margin: 20px 0 44px 0;75  }76  .avatar {77    position: relative; width: 140px; height: 140px;78    border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;79    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;80  }81  .avatar .doc-badge {82    position: absolute; right: -2px; bottom: -2px;83    width: 44px; height: 44px; border-radius: 12px;84    background: #fffbef; border: 2px solid #e6d79c;85    display: flex; align-items: center; justify-content: center;86  }87  .avatar .doc-badge svg { width: 28px; height: 28px; stroke: #8b7b3a; fill: none; stroke-width: 2.4; }88  .item-text { font-size: 40px; color: #ddd; }89 90  .apps-row {91    display: flex; align-items: flex-start; justify-content: space-between;92    padding: 0 40px; margin-top: 12px;93  }94  .app {95    width: 200px; display: flex; flex-direction: column; align-items: center; gap: 18px;96  }97  .app .icon-circle {98    width: 140px; height: 140px; border-radius: 50%;99    background: #2a2a2a; border: 1px solid #3d3d3d;100    display: flex; align-items: center; justify-content: center; color: #9e9e9e; font-size: 34px;101  }102  .app .label { color: #cfcfcf; font-size: 34px; text-align: center; }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div>3:22</div>111    <div class="status-icons">112      <!-- WiFi -->113      <svg viewBox="0 0 24 24">114        <path d="M2 9c5-5 15-5 20 0"/>115        <path d="M5 12c3.5-3.5 10.5-3.5 14 0"/>116        <path d="M8 15c2-2 6-2 8 0"/>117        <circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"/>118      </svg>119      <!-- Battery -->120      <svg viewBox="0 0 30 18">121        <rect x="1.5" y="2" width="22" height="14" rx="2"></rect>122        <rect x="25" y="6" width="3.5" height="6" rx="1"></rect>123        <rect x="4" y="4.5" width="16" height="9" fill="#fff" stroke="none"/>124      </svg>125    </div>126  </div>127 128  <!-- App bar -->129  <div class="app-bar">130    <!-- Back arrow -->131    <div class="icon-btn">132      <svg viewBox="0 0 24 24">133        <path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"></path>134      </svg>135    </div>136    <div class="title">Title</div>137    <div class="spacer"></div>138    <!-- Alarm icon -->139    <div class="icon-btn">140      <svg viewBox="0 0 24 24">141        <circle cx="12" cy="12" r="7"></circle>142        <path d="M12 12l4 2"></path>143        <path d="M4 6l3-3"></path>144        <path d="M20 6l-3-3"></path>145      </svg>146    </div>147    <!-- Person add -->148    <div class="icon-btn">149      <svg viewBox="0 0 24 24">150        <circle cx="10" cy="8" r="4"></circle>151        <path d="M4 20c2-4 10-4 12 0" stroke-linecap="round"></path>152        <path d="M18 8v6"></path>153        <path d="M15 11h6"></path>154      </svg>155    </div>156    <!-- Kebab -->157    <div class="icon-btn">158      <svg viewBox="0 0 24 24">159        <circle cx="12" cy="5" r="2"></circle>160        <circle cx="12" cy="12" r="2"></circle>161        <circle cx="12" cy="19" r="2"></circle>162      </svg>163    </div>164  </div>165 166  <!-- Note body -->167  <div class="note-body">Modeling</div>168 169  <!-- Dim overlay scrim -->170  <div class="scrim"></div>171 172  <!-- Bottom sheet -->173  <div class="sheet">174    <div class="handle"></div>175    <div class="sheet-title">Modeling</div>176 177    <!-- Actions -->178    <div class="actions">179      <div class="chip">180        <svg viewBox="0 0 24 24">181          <rect x="5" y="4" width="14" height="16" rx="2"></rect>182          <line x1="8" y1="9" x2="16" y2="9"></line>183          <line x1="8" y1="13" x2="16" y2="13"></line>184        </svg>185        <span>Copy</span>186      </div>187      <div class="chip">188        <svg viewBox="0 0 24 24">189          <path d="M4 12c3-3 13-3 16 0"></path>190          <path d="M7 15c2-2 8-2 10 0"></path>191        </svg>192        <span>Nearby</span>193      </div>194    </div>195 196    <!-- Destination item -->197    <div class="list-item">198      <div class="avatar">[IMG: Notebook Avatar]199        <div class="doc-badge">200          <svg viewBox="0 0 20 20">201            <rect x="3" y="3" width="12" height="14" rx="2"></rect>202            <line x1="6" y1="8" x2="12" y2="8"></line>203            <line x1="6" y1="11" x2="12" y2="11"></line>204          </svg>205        </div>206      </div>207      <div class="item-text">My Notebook</div>208    </div>209 210    <!-- Apps row -->211    <div class="apps-row">212      <div class="app">213        <div class="icon-circle">G</div>214        <div class="label">Gmail</div>215      </div>216      <div class="app">217        <div class="icon-circle">💬</div>218        <div class="label">Messages</div>219      </div>220      <div class="app">221        <div class="icon-circle">Δ</div>222        <div class="label">Drive</div>223      </div>224      <div class="app">225        <div class="icon-circle">🗒</div>226        <div class="label">Keep Notes</div>227      </div>228    </div>229  </div>230 231</div>232</body>233</html>