GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Mobile Sheet Menu - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0B0B0C;15    color: #EDEFEA;16  }17 18  /* Status bar */19  .status {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEFEA;26    font-size: 38px;27    letter-spacing: .5px;28  }29  .status .right {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .sb-icon {35    width: 34px; height: 34px; border-radius: 50%;36    background: #EDEFEA;37    opacity: .92;38  }39 40  /* App toolbar */41  .toolbar {42    height: 150px;43    padding: 0 30px 0 20px;44    display: flex;45    align-items: center;46    gap: 20px;47    color: #D7DCCD;48  }49  .toolbar .title {50    font-size: 54px;51    font-weight: 500;52    opacity: .95;53  }54  .toolbar .spacer { flex: 1; }55  .tb-icon {56    width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; opacity: .75;57  }58  .hint-row {59    height: 90px;60    padding: 0 40px;61    display: flex; align-items: center;62    color: #8F9488;63    font-size: 36px;64  }65 66  /* Bottom sheet */67  .sheet {68    position: absolute;69    left: 0; right: 0;70    top: 620px;71    height: 1780px;72    background: #262B20; /* deep olive */73    border-top-left-radius: 64px;74    border-top-right-radius: 64px;75    box-shadow: 0 -12px 40px rgba(0,0,0,.55);76  }77  .menu {78    padding-top: 40px;79  }80  .menu-item {81    display: flex;82    align-items: center;83    padding: 28px 40px 28px 44px;84    min-height: 140px;85    color: #E8EDE0;86    font-size: 46px;87    letter-spacing: .2px;88  }89  .menu-item .icon {90    width: 90px; height: 90px;91    margin-right: 42px;92    display: inline-flex;93    align-items: center; justify-content: center;94  }95  .menu-item .label {96    flex: 1;97  }98  .divider {99    margin: 18px 40px;100    border-top: 2px solid #515749;101    opacity: .8;102  }103 104  /* Gesture bar */105  .gesture {106    position: absolute;107    left: 50%;108    bottom: 26px;109    transform: translateX(-50%);110    width: 320px;111    height: 12px;112    background: #F2F3F0;113    border-radius: 10px;114    opacity: .85;115  }116  /* Subtle rounded cropping in corners (matches screenshot) */117  .corner-mask {118    position: absolute; width: 140px; height: 140px; border-radius: 50%;119    background: #0B0B0C;120    top: 585px;121  }122  .corner-mask.right { right: -70px; }123  .corner-mask.left { left: -70px; display: none; } /* Only the right corner is visible in screenshot */124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status">131    <div class="left">5:27</div>132    <div class="right">133      <div class="sb-icon" style="width:26px;height:26px;border-radius:6px;"></div>134      <div class="sb-icon" style="width:32px;height:32px;border-radius:7px;opacity:.75;"></div>135      <div class="sb-icon" style="width:32px;height:32px;border-radius:7px;opacity:.6;"></div>136      <div class="sb-icon" style="width:32px;height:32px;border-radius:7px;opacity:.6;"></div>137      <div class="sb-icon" style="width:40px;height:28px;border-radius:6px;"></div>138      <div class="sb-icon" style="width:30px;height:38px;border-radius:4px;"></div>139    </div>140  </div>141 142  <!-- Toolbar -->143  <div class="toolbar">144    <div class="tb-icon">145      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#E6E9E0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">146        <path d="M15 19l-7-7 7-7"/>147      </svg>148    </div>149    <div class="title">Office</div>150    <div class="spacer"></div>151    <div class="tb-icon">152      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#B9C0AE" stroke-width="2.2" stroke-linecap="round">153        <circle cx="11" cy="11" r="7"/>154        <path d="M21 21l-4.3-4.3"/>155      </svg>156    </div>157    <div class="tb-icon">158      <svg width="40" height="40" viewBox="0 0 24 24" fill="#B9C0AE">159        <circle cx="12" cy="5" r="2"/>160        <circle cx="12" cy="12" r="2"/>161        <circle cx="12" cy="19" r="2"/>162      </svg>163    </div>164  </div>165 166  <div class="hint-row">Name ↑</div>167 168  <!-- Bottom sheet -->169  <div class="sheet">170    <!-- rounded cropping on the right like the screenshot -->171    <div class="corner-mask right"></div>172 173    <div class="menu">174 175      <div class="menu-item">176        <div class="icon">177          <!-- Blue document icon -->178          <svg width="72" height="72" viewBox="0 0 24 24">179            <rect x="3" y="3" width="18" height="18" rx="3" fill="#4C6CF6"/>180            <rect x="7" y="8" width="10" height="2" fill="#FFFFFF"/>181          </svg>182        </div>183        <div class="label">Report</div>184      </div>185 186      <div class="menu-item">187        <div class="icon">188          <!-- Share (person +) -->189          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2">190            <circle cx="9" cy="9" r="3.2"/>191            <path d="M3.5 19c1-2.8 3.1-4 5.5-4s4.5 1.2 5.5 4"/>192            <path d="M17 7v4m-2-2h4"/>193          </svg>194        </div>195        <div class="label">Share</div>196      </div>197 198      <div class="menu-item">199        <div class="icon">200          <!-- Manage access (two people) -->201          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2">202            <circle cx="8" cy="10" r="3"/>203            <circle cx="16.5" cy="8.5" r="2.5"/>204            <path d="M3 20c.9-2.6 2.8-4 5-4s4.1 1.4 5 4"/>205            <path d="M13 14c2 0 3.6.8 4.5 2.5"/>206          </svg>207        </div>208        <div class="label">Manage access</div>209      </div>210 211      <div class="menu-item">212        <div class="icon">213          <!-- Star outline -->214          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linejoin="round">215            <path d="M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6L3.2 9.4l6.1-.9L12 3z"/>216          </svg>217        </div>218        <div class="label">Add to Starred</div>219      </div>220 221      <div class="menu-item">222        <div class="icon">223          <!-- Check in circle -->224          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">225            <circle cx="12" cy="12" r="8"/>226            <path d="M8.5 12.5l2.6 2.6 4.6-5.6"/>227          </svg>228        </div>229        <div class="label">Make available offline</div>230      </div>231 232      <div class="divider"></div>233 234      <div class="menu-item">235        <div class="icon">236          <!-- Link -->237          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round">238            <path d="M10 13a5 5 0 010-7l1.5-1.5a5 5 0 017 7L17 13"/>239            <path d="M14 11a5 5 0 010 7L12.5 19.5a5 5 0 01-7-7L7 11"/>240          </svg>241        </div>242        <div class="label">Copy link</div>243      </div>244 245      <div class="menu-item">246        <div class="icon">247          <!-- Copy -->248          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2">249            <rect x="9" y="9" width="10" height="10" rx="2"/>250            <rect x="5" y="5" width="10" height="10" rx="2"/>251          </svg>252        </div>253        <div class="label">Make a copy</div>254      </div>255 256      <div class="menu-item">257        <div class="icon">258          <!-- Send (arrow) -->259          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">260            <path d="M4 12l16-7-7 16-2.5-6L4 12z"/>261          </svg>262        </div>263        <div class="label">Send a copy</div>264      </div>265 266      <div class="divider"></div>267 268      <div class="menu-item">269        <div class="icon">270          <!-- Open with (diamond tool) -->271          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linejoin="round">272            <path d="M12 3l7 7-7 7-7-7 7-7z"/>273            <circle cx="12" cy="10.5" r="1.5" fill="#C7CEBD"/>274          </svg>275        </div>276        <div class="label">Open with</div>277      </div>278 279      <div class="menu-item">280        <div class="icon">281          <!-- Download -->282          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">283            <path d="M12 3v12"/>284            <path d="M7 10l5 5 5-5"/>285            <path d="M5 20h14"/>286          </svg>287        </div>288        <div class="label">Download</div>289      </div>290 291      <div class="menu-item">292        <div class="icon">293          <!-- Pencil -->294          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">295            <path d="M4 20l4.5-1 9-9a2.2 2.2 0 00-3.1-3.1l-9 9L4 20z"/>296            <path d="M14 6l4 4"/>297          </svg>298        </div>299        <div class="label">Rename</div>300      </div>301 302      <div class="menu-item">303        <div class="icon">304          <!-- Shortcut to Drive (triangle) -->305          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linejoin="round">306            <path d="M7 4h6l5 8-5 8H7L2 12 7 4z"/>307          </svg>308        </div>309        <div class="label">Add shortcut to Drive</div>310      </div>311 312      <div class="menu-item">313        <div class="icon">314          <!-- Move (arrows four) -->315          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#C7CEBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">316            <path d="M12 2v20M2 12h20"/>317            <path d="M8 6l4-4 4 4M6 8l-4 4 4 4M16 18l-4 4-4-4M18 16l4-4-4-4"/>318          </svg>319        </div>320        <div class="label">Move</div>321      </div>322 323    </div>324  </div>325 326  <div class="gesture"></div>327</div>328</body>329</html>