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.0">6<title>Mountain view.jpg - Action Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0e0e12; /* dark backdrop */13    font-family: Arial, Helvetica, sans-serif;14    color: #ffffff;15  }16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 110px; padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    color: #e9e9ea; font-weight: 600; font-size: 44px;22    letter-spacing: 0.5px;23  }24  .status-icons { display: flex; align-items: center; gap: 26px; }25  .icon { display: inline-flex; align-items: center; justify-content: center; }26  /* Top app bar */27  .app-bar {28    position: absolute; top: 110px; left: 0; right: 0;29    height: 120px; display: flex; align-items: center;30    padding: 0 36px; color: #cfd2d8;31    font-size: 60px; font-weight: 600;32    opacity: 0.9;33  }34  .app-bar .title { margin-left: 24px; flex: 1; }35  .app-bar .actions { display: flex; align-items: center; gap: 34px; }36  /* Content area (empty dark viewer) */37  .viewer {38    position: absolute; top: 230px; left: 0; right: 0; bottom: 620px;39    background: #0b0b0f;40  }41  /* Bottom sheet */42  .sheet {43    position: absolute; left: 0; right: 0; bottom: 0;44    height: 1780px; background: #e9e5ef;45    border-top-left-radius: 38px; border-top-right-radius: 38px;46    color: #2b2b34;47    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);48  }49  .sheet-header {50    display: flex; align-items: center;51    padding: 36px 40px 26px 40px;52    border-bottom: 2px solid rgba(0,0,0,0.08);53  }54  .thumb {55    width: 92px; height: 92px;56    background: #E0E0E0; border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center;58    color: #757575; font-size: 26px;59    border-radius: 12px; margin-right: 26px;60  }61  .file-name {62    font-size: 56px; font-weight: 700; color: #2f2f38;63  }64  .list {65    padding: 8px 8px 20px 8px;66  }67  .item {68    display: flex; align-items: center;69    padding: 28px 32px;70    font-size: 44px; color: #3a3a44;71  }72  .item .i {73    width: 64px; height: 64px;74    margin-right: 32px;75    display: inline-flex; align-items: center; justify-content: center;76  }77  .divider {78    height: 2px; margin: 18px 32px;79    background: rgba(0,0,0,0.12);80  }81  /* Bottom navigation pill */82  .pill {83    position: absolute; bottom: 22px; left: 50%;84    width: 420px; height: 16px; background: #7a7a80;85    border-radius: 10px; transform: translateX(-50%);86    opacity: 0.8;87  }88  /* SVG color helpers */89  .stroke-dark { stroke: #4b4b54; }90  .fill-dark { fill: #4b4b54; }91  .stroke-light { stroke: #cfd2d8; }92  .fill-light { fill: #cfd2d8; }93</style>94</head>95<body>96<div id="render-target">97  <!-- Status bar -->98  <div class="status-bar">99    <div>4:20</div>100    <div class="status-icons">101      <!-- simple icons: notifications, mail, sync, dot, signal/battery -->102      <svg class="icon" width="44" height="44" viewBox="0 0 24 24"><path class="fill-light" d="M12 2a6 6 0 00-6 6v4l-2 2v1h16v-1l-2-2V8a6 6 0 00-6-6zm0 20a3 3 0 003-3H9a3 3 0 003 3z"/></svg>103      <svg class="icon" width="44" height="44" viewBox="0 0 24 24"><path class="fill-light" d="M20 4H4a2 2 0 00-2 2v1l10 6 10-6V6a2 2 0 00-2-2zm0 6.3l-8 4.8-8-4.8V18a2 2 0 002 2h12a2 2 0 002-2V10.3z"/></svg>104      <svg class="icon" width="44" height="44" viewBox="0 0 24 24"><path class="fill-light" d="M12 4V1L8 5l4 4V6c3.3 0 6 2.7 6 6 0 .7-.1 1.4-.4 2h2.1c.2-.6.3-1.3.3-2 0-4.4-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6 0-.7.1-1.4.4-2H2.3C2.1 10.6 2 11.3 2 12c0 4.4 3.6 8 8 8v3l4-4-4-4v3z"/></svg>105      <svg class="icon" width="16" height="16" viewBox="0 0 8 8"><circle class="fill-light" cx="4" cy="4" r="3"/></svg>106      <svg class="icon" width="44" height="44" viewBox="0 0 24 24"><path class="fill-light" d="M2 12h4v8H2v-8zm6-4h4v12H8V8zm6-6h4v18h-4V2zm6 14h4v4h-4v-4z"/></svg>107      <svg class="icon" width="44" height="44" viewBox="0 0 24 24"><path class="fill-light" d="M17 8h-3V5h-4v3H7l5 5 5-5zM6 18h12v2H6z"/></svg>108    </div>109  </div>110 111  <!-- Top app bar -->112  <div class="app-bar">113    <div class="icon">114      <svg width="64" height="64" viewBox="0 0 24 24">115        <path class="fill-light" d="M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6z"/>116      </svg>117    </div>118    <div class="title">Mountain view.jpg</div>119    <div class="actions">120      <svg width="60" height="60" viewBox="0 0 24 24">121        <path fill="#cfd2d8" d="M21 6H3v12h18V6zm-2 2v8H5V8h14zM8 10h8v4H8z"/>122      </svg>123      <svg width="60" height="60" viewBox="0 0 24 24">124        <circle fill="#cfd2d8" cx="12" cy="5" r="2"/>125        <circle fill="#cfd2d8" cx="12" cy="12" r="2"/>126        <circle fill="#cfd2d8" cx="12" cy="19" r="2"/>127      </svg>128    </div>129  </div>130 131  <!-- Dark viewer space -->132  <div class="viewer"></div>133 134  <!-- Bottom sheet -->135  <div class="sheet">136    <div class="sheet-header">137      <div class="thumb">[IMG: Mountain view]</div>138      <div class="file-name">Mountain view.jpg</div>139    </div>140 141    <div class="list">142      <div class="item">143        <div class="i">144          <svg width="64" height="64" viewBox="0 0 24 24">145            <path fill="#4b4b54" d="M12 12a4 4 0 100-8 4 4 0 000 8zm-8 8v-1a6 6 0 0112 0v1H4z"/>146            <path fill="#4b4b54" d="M19 9h-2V7h-2V5h2V3h2v2h2v2h-2v2z"/>147          </svg>148        </div>149        <div>Share</div>150      </div>151 152      <div class="item">153        <div class="i">154          <svg width="64" height="64" viewBox="0 0 24 24">155            <path fill="#4b4b54" d="M16 11a4 4 0 11-8 0 4 4 0 018 0z"/>156            <path fill="#4b4b54" d="M4 20v-1c0-3.3 2.7-6 6-6s6 2.7 6 6v1H4z"/>157          </svg>158        </div>159        <div>Manage access</div>160      </div>161 162      <div class="item">163        <div class="i">164          <svg width="64" height="64" viewBox="0 0 24 24">165            <path fill="none" stroke="#4b4b54" stroke-width="2" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.5-6.3 3.5 1.2-7-5-4.9 7-.9z"/>166          </svg>167        </div>168        <div>Add to Starred</div>169      </div>170 171      <div class="item">172        <div class="i">173          <svg width="64" height="64" viewBox="0 0 24 24">174            <path fill="#4b4b54" d="M12 2a8 8 0 100 16 8 8 0 000-16zm1 9h4v2h-6V6h2v5z"/>175          </svg>176        </div>177        <div>Make available offline</div>178      </div>179 180      <div class="divider"></div>181 182      <div class="item">183        <div class="i">184          <svg width="64" height="64" viewBox="0 0 24 24">185            <path fill="none" stroke="#4b4b54" stroke-width="2" d="M7 14c-2 0-3.5-1.5-3.5-3.5S5 7 7 7c1.6 0 3 .9 3.6 2.3M17 10c2 0 3.5 1.5 3.5 3.5S19 17 17 17c-1.6 0-3-.9-3.6-2.3"/>186          </svg>187        </div>188        <div>Copy link</div>189      </div>190 191      <div class="item">192        <div class="i">193          <svg width="64" height="64" viewBox="0 0 24 24">194            <rect x="5" y="5" width="10" height="10" fill="none" stroke="#4b4b54" stroke-width="2"/>195            <rect x="9" y="9" width="10" height="10" fill="none" stroke="#4b4b54" stroke-width="2"/>196          </svg>197        </div>198        <div>Make a copy</div>199      </div>200 201      <div class="item">202        <div class="i">203          <svg width="64" height="64" viewBox="0 0 24 24">204            <path fill="#4b4b54" d="M15 5l-8 7 8 7V5z"/>205            <path fill="#4b4b54" d="M18 7h2v10h-2z"/>206          </svg>207        </div>208        <div>Send a copy</div>209      </div>210 211      <div class="divider"></div>212 213      <div class="item">214        <div class="i">215          <svg width="64" height="64" viewBox="0 0 24 24">216            <path fill="none" stroke="#4b4b54" stroke-width="2" d="M12 3v18M3 12h18M6 6l12 12M6 18L18 6"/>217          </svg>218        </div>219        <div>Open with</div>220      </div>221 222      <div class="item">223        <div class="i">224          <svg width="64" height="64" viewBox="0 0 24 24">225            <path fill="#4b4b54" d="M5 10l7 7 7-7h-4V3h-6v7H5z"/>226          </svg>227        </div>228        <div>Download</div>229      </div>230 231      <div class="item">232        <div class="i">233          <svg width="64" height="64" viewBox="0 0 24 24">234            <path fill="none" stroke="#4b4b54" stroke-width="2" d="M4 20h16M7 17l10-10M7 7h4v4"/>235          </svg>236        </div>237        <div>Rename</div>238      </div>239 240      <div class="item">241        <div class="i">242          <svg width="64" height="64" viewBox="0 0 24 24">243            <path fill="#4b4b54" d="M12 2l9 6-9 14L3 8l9-6zm0 4.3L7 8.7l5 3.3 5-3.3-5-2.4z"/>244            <rect x="6" y="15" width="12" height="3" fill="#4b4b54" opacity="0.6"/>245          </svg>246        </div>247        <div>Add shortcut to Drive</div>248      </div>249    </div>250 251    <div class="pill"></div>252  </div>253</div>254</body>255</html>