GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Action Sheet - Dark</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#1f2329; color:#e9ecef;10  }11 12  /* Status bar */13  .statusbar{14    position:absolute; top:0; left:0; right:0; height:100px;15    padding:0 36px; box-sizing:border-box;16    display:flex; align-items:center; justify-content:space-between;17    color:#eaeaea; font-size:40px; letter-spacing:1px;18  }19  .status-icons{ display:flex; align-items:center; gap:26px; }20  .icon-small{ width:36px; height:36px; opacity:.9; }21 22  /* Content sheet */23  .sheet{24    position:absolute; top:100px; left:0; right:0; bottom:0;25    overflow:hidden auto;26  }27 28  .header{29    display:flex; align-items:center;30    padding:32px 40px; gap:28px; font-size:46px; font-weight:500;31    border-bottom:1px solid #2b2f36;32  }33  .doc-icon{34    width:60px; height:60px; border-radius:10px; background:#5a79ff;35    position:relative; flex:none;36  }37  .doc-icon:before, .doc-icon:after{38    content:""; position:absolute; left:12px; right:12px; height:6px; background:#ffffff; border-radius:3px;39  }40  .doc-icon:before{ top:16px; }41  .doc-icon:after{ top:34px; }42 43  .group{ padding:6px 0; }44 45  .row{46    display:flex; align-items:center; gap:32px;47    padding:30px 40px; font-size:42px; color:#e9e9ea;48  }49  .row:hover{ background:rgba(255,255,255,0.03); }50  .row .i{ width:56px; height:56px; flex:none; opacity:.9; }51  .divider{ height:1px; background:#2b2f36; margin:12px 0; }52 53  /* Bottom gesture bar */54  .gesture{55    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);56    width:420px; height:10px; background:#e6e6e6; opacity:.7; border-radius:10px;57  }58 59  /* Helper to tint icons */60  svg{ display:block; }61  .stroke{ stroke:#c2c8ce; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }62  .fill{ fill:#c2c8ce; }63</style>64</head>65<body>66<div id="render-target">67 68  <!-- Status bar -->69  <div class="statusbar">70    <div>10:06</div>71    <div class="status-icons">72      <!-- location / notifications simple dots -->73      <svg class="icon-small" viewBox="0 0 24 24"><circle class="fill" cx="12" cy="12" r="3"/></svg>74      <!-- wifi -->75      <svg class="icon-small" viewBox="0 0 24 24">76        <path class="stroke" d="M2 8c5-4 15-4 20 0"/>77        <path class="stroke" d="M5 12c3-3 11-3 14 0"/>78        <path class="stroke" d="M8 15c2-2 6-2 8 0"/>79        <circle class="fill" cx="12" cy="18" r="1.6"/>80      </svg>81      <!-- battery -->82      <svg class="icon-small" viewBox="0 0 32 24">83        <rect class="stroke" x="2" y="6" width="24" height="12" rx="2"/>84        <rect class="fill" x="4" y="8" width="18" height="8" rx="1"/>85        <rect class="fill" x="26" y="9" width="3" height="6" rx="1"/>86      </svg>87    </div>88  </div>89 90  <div class="sheet">91    <!-- Header -->92    <div class="header">93      <div class="doc-icon"></div>94      <div>Grocery List</div>95    </div>96 97    <!-- Options -->98    <div class="group">99      <div class="row">100        <!-- star -->101        <svg class="i" viewBox="0 0 24 24"><path class="stroke" d="M12 3l2.7 5.5 6 .9-4.4 4.3 1 6-5.3-2.8L6.7 20l1-6L3.3 9.4l6-.9z"/></svg>102        <div>Add to Starred</div>103      </div>104 105      <div class="row">106        <!-- offline (check in circle) -->107        <svg class="i" viewBox="0 0 24 24">108          <circle class="stroke" cx="12" cy="12" r="9"/>109          <path class="stroke" d="M8 12l3 3 5-6"/>110        </svg>111        <div>Make available offline</div>112      </div>113      <div class="divider"></div>114 115      <div class="row">116        <!-- link -->117        <svg class="i" viewBox="0 0 24 24">118          <path class="stroke" d="M10 14l-2 2a4 4 0 1 1-6-6l2-2"/>119          <path class="stroke" d="M14 10l2-2a4 4 0 1 1 6 6l-2 2"/>120          <path class="stroke" d="M8 12h8"/>121        </svg>122        <div>Copy link</div>123      </div>124 125      <div class="row">126        <!-- copy -->127        <svg class="i" viewBox="0 0 24 24">128          <rect class="stroke" x="8" y="8" width="10" height="12" rx="2"/>129          <rect class="stroke" x="4" y="4" width="10" height="12" rx="2"/>130        </svg>131        <div>Make a copy</div>132      </div>133 134      <div class="row">135        <!-- send / share -->136        <svg class="i" viewBox="0 0 24 24">137          <path class="stroke" d="M22 3L9 10l5 2 2 5 6-14z"/>138          <path class="stroke" d="M9 10l-6 3 6 3"/>139        </svg>140        <div>Send a copy</div>141      </div>142      <div class="divider"></div>143 144      <div class="row">145        <!-- open with (move) -->146        <svg class="i" viewBox="0 0 24 24">147          <path class="stroke" d="M3 12h6M15 12h6M12 3v6M12 15v6"/>148          <path class="stroke" d="M9 6l3-3 3 3M9 18l3 3 3-3"/>149        </svg>150        <div>Open with</div>151      </div>152 153      <div class="row">154        <!-- download -->155        <svg class="i" viewBox="0 0 24 24">156          <path class="stroke" d="M12 3v11"/>157          <path class="stroke" d="M8 10l4 4 4-4"/>158          <path class="stroke" d="M4 20h16"/>159        </svg>160        <div>Download</div>161      </div>162 163      <div class="row">164        <!-- rename (pencil) -->165        <svg class="i" viewBox="0 0 24 24">166          <path class="stroke" d="M3 17.25V21h3.75L19.81 7.94l-3.75-3.75L3 17.25z"/>167          <path class="stroke" d="M14.06 4.19l3.75 3.75"/>168        </svg>169        <div>Rename</div>170      </div>171 172      <div class="row">173        <!-- add shortcut to drive (triangle + plus) -->174        <svg class="i" viewBox="0 0 24 24">175          <path class="stroke" d="M7 17h10L12 4 7 13z"/>176          <path class="stroke" d="M19 14v6M16 17h6"/>177        </svg>178        <div>Add shortcut to Drive</div>179      </div>180 181      <div class="row">182        <!-- move -->183        <svg class="i" viewBox="0 0 24 24">184          <rect class="stroke" x="3" y="7" width="14" height="12" rx="2"/>185          <path class="stroke" d="M9 7V5a2 2 0 0 1 2-2h7v7"/>186          <path class="stroke" d="M12 12l3 3-3 3"/>187        </svg>188        <div>Move</div>189      </div>190 191      <div class="row">192        <!-- details & activity (info circle) -->193        <svg class="i" viewBox="0 0 24 24">194          <circle class="stroke" cx="12" cy="12" r="9"/>195          <path class="stroke" d="M12 8h.01M10.5 12H12v5"/>196        </svg>197        <div>Details &amp; activity</div>198      </div>199 200      <div class="row">201        <!-- print -->202        <svg class="i" viewBox="0 0 24 24">203          <rect class="stroke" x="6" y="3" width="12" height="6" rx="1"/>204          <rect class="stroke" x="6" y="15" width="12" height="6" rx="1"/>205          <rect class="stroke" x="3" y="9" width="18" height="8" rx="2"/>206        </svg>207        <div>Print</div>208      </div>209 210      <div class="row">211        <!-- add to home screen -->212        <svg class="i" viewBox="0 0 24 24">213          <rect class="stroke" x="3" y="3" width="18" height="18" rx="3"/>214          <path class="stroke" d="M9 12h6M12 9v6"/>215        </svg>216        <div>Add to Home screen</div>217      </div>218 219      <div class="row">220        <!-- remove (trash) -->221        <svg class="i" viewBox="0 0 24 24">222          <path class="stroke" d="M4 7h16"/>223          <path class="stroke" d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/>224          <path class="stroke" d="M9 7V4h6v3"/>225          <path class="stroke" d="M10 11v6M14 11v6"/>226        </svg>227        <div>Remove</div>228      </div>229    </div>230  </div>231 232  <div class="gesture"></div>233</div>234</body>235</html>