GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>File Actions Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #232323;15    color: #EEEEEE;16    font-family: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    padding: 0 36px;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    font-size: 38px;28    letter-spacing: 0.5px;29  }30  .status-icons { display: flex; gap: 24px; align-items: center; opacity: 0.9; }31  .dot { width: 10px; height: 10px; border-radius: 50%; background: #bbb; display: inline-block; }32 33  /* Header / preview */34  .sheet-header {35    padding-top: 10px;36    padding-bottom: 40px;37    text-align: center;38    border-bottom: 1px solid #2d2d2d;39  }40  .grabber {41    width: 170px;42    height: 18px;43    border-radius: 12px;44    background: #5a5350;45    margin: 12px auto 36px;46    opacity: 0.7;47  }48  .preview {49    width: 280px;50    height: 360px;51    margin: 0 auto 36px;52    background: #E0E0E0;53    border: 2px solid #BDBDBD;54    color: #757575;55    display: flex;56    justify-content: center;57    align-items: center;58    border-radius: 28px;59    box-shadow: 0 8px 20px rgba(0,0,0,0.5);60    font-size: 28px;61    text-align: center;62    padding: 10px;63  }64  .file-title {65    font-size: 56px;66    font-weight: 700;67    margin: 6px 40px 6px;68    line-height: 1.2;69  }70  .file-meta {71    font-size: 34px;72    color: #BDBDBD;73    margin-bottom: 12px;74  }75 76  /* Action list */77  .actions { }78  .item {79    height: 140px;80    display: flex;81    align-items: center;82    padding: 0 44px;83    gap: 34px;84    border-bottom: 1px solid #2d2d2d;85  }86  .item .label {87    font-size: 42px;88    color: #EDEDED;89    letter-spacing: 0.2px;90  }91  .item .label.dim { color: #D1633C; } /* delete color */92  .icon {93    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;94  }95  .icon svg { width: 64px; height: 64px; stroke: #E0E0E0; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }96 97  .row-right { margin-left: auto; display: flex; align-items: center; }98 99  /* Toggle switch */100  .switch {101    width: 120px; height: 64px; border-radius: 34px; background: #6E6E6E; position: relative;102  }103  .switch::after {104    content: "";105    position: absolute;106    top: 4px; left: 4px;107    width: 56px; height: 56px; border-radius: 50%;108    background: #CFCFCF;109    box-shadow: 0 2px 6px rgba(0,0,0,0.4);110  }111 112  /* Bottom home indicator */113  .home-indicator {114    position: absolute;115    bottom: 24px;116    left: 50%;117    transform: translateX(-50%);118    width: 220px;119    height: 12px;120    background: #D0D0D0;121    border-radius: 8px;122    opacity: 0.85;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Simulated status bar -->130  <div class="status-bar">131    <div>8:41</div>132    <div class="status-icons">133      <span class="dot"></span>134      <span class="dot"></span>135      <span class="dot"></span>136      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0"></path><path d="M6 8v8a6 6 0 0 0 12 0V8"></path></svg>137      <div style="font-size:34px;">71%</div>138    </div>139  </div>140 141  <!-- Header with preview and file info -->142  <div class="sheet-header">143    <div class="grabber"></div>144    <div class="preview">[IMG: PDF Thumbnail]</div>145    <div class="file-title">the-diary-of-anne-frank-1.pdf</div>146    <div class="file-meta">702 KB, modified 1 hour ago</div>147  </div>148 149  <!-- Actions list -->150  <div class="actions">151 152    <div class="item">153      <div class="icon">154        <!-- Person with plus (Share) -->155        <svg viewBox="0 0 24 24">156          <circle cx="9" cy="8" r="3"></circle>157          <path d="M4 20c0-3 3-5 5-5s5 2 5 5"></path>158          <path d="M18 7v6"></path>159          <path d="M15 10h6"></path>160        </svg>161      </div>162      <div class="label">Share</div>163    </div>164 165    <div class="item">166      <div class="icon">167        <!-- Gear (Manage access) -->168        <svg viewBox="0 0 24 24">169          <circle cx="12" cy="12" r="3"></circle>170          <path d="M19 12l2-1-2-1-.5-2 1.5-1.5-1.5-1.5L15 4l-1-2-1 2-2 .5L9 3 7.5 4.5 9 6l-.5 2-2 1-2 1 2 1 .5 2-1.5 1.5L9 21l2-.5 1 2 1-2 2-.5 1.5 1.5L21 17.5 19.5 16l.5-2z" opacity="0.35"></path>171        </svg>172      </div>173      <div class="label">Manage access</div>174    </div>175 176    <div class="item">177      <div class="icon">178        <!-- Cloud -->179        <svg viewBox="0 0 24 24">180          <path d="M5 16a4 4 0 1 1 1-7 5 5 0 0 1 9-1 4 4 0 1 1 2 8H7"></path>181        </svg>182      </div>183      <div class="label">Make available offline</div>184      <div class="row-right">185        <div class="switch"></div>186      </div>187    </div>188 189    <div class="item">190      <div class="icon">191        <!-- Star -->192        <svg viewBox="0 0 24 24">193          <path d="M12 3l2.7 5.6 6.2.9-4.5 4.4 1 6.1L12 17l-5.4 3 1-6.1L3 9.5l6.3-.9L12 3z"></path>194        </svg>195      </div>196      <div class="label">Star</div>197    </div>198 199    <div class="item">200      <div class="icon">201        <!-- Download -->202        <svg viewBox="0 0 24 24">203          <path d="M12 3v11"></path>204          <path d="M8 10l4 4 4-4"></path>205          <path d="M5 21h14"></path>206        </svg>207      </div>208      <div class="label">Save To Device</div>209    </div>210 211    <div class="item">212      <div class="icon">213        <!-- Folder + search -->214        <svg viewBox="0 0 24 24">215          <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z"></path>216          <circle cx="16.5" cy="14.5" r="3"></circle>217          <path d="M19 17l2 2"></path>218        </svg>219      </div>220      <div class="label">Show in folder</div>221    </div>222 223    <div class="item">224      <div class="icon">225        <!-- Pencil -->226        <svg viewBox="0 0 24 24">227          <path d="M3 17l4 4 12-12-4-4L3 17z"></path>228          <path d="M14 5l4 4"></path>229        </svg>230      </div>231      <div class="label">Rename</div>232    </div>233 234    <div class="item">235      <div class="icon">236        <!-- Duplicate (two squares) -->237        <svg viewBox="0 0 24 24">238          <rect x="4" y="8" width="10" height="10" rx="2"></rect>239          <rect x="10" y="4" width="10" height="10" rx="2"></rect>240        </svg>241      </div>242      <div class="label">Duplicate</div>243    </div>244 245    <div class="item">246      <div class="icon">247        <!-- Move (arrows) -->248        <svg viewBox="0 0 24 24">249          <path d="M12 2v20"></path>250          <path d="M2 12h20"></path>251          <path d="M8 6l4-4 4 4"></path>252          <path d="M8 18l4 4 4-4"></path>253          <path d="M6 8l-4 4 4 4"></path>254          <path d="M18 8l4 4-4 4"></path>255        </svg>256      </div>257      <div class="label">Move</div>258    </div>259 260    <div class="item">261      <div class="icon">262        <!-- Open with (launch) -->263        <svg viewBox="0 0 24 24">264          <path d="M8 16h8v-8"></path>265          <path d="M8 8l8 8"></path>266          <rect x="3" y="3" width="18" height="18" rx="3" opacity="0.35"></rect>267        </svg>268      </div>269      <div class="label">Open with...</div>270    </div>271 272    <div class="item">273      <div class="icon">274        <!-- Printer -->275        <svg viewBox="0 0 24 24">276          <rect x="6" y="3" width="12" height="6"></rect>277          <rect x="6" y="14" width="12" height="7"></rect>278          <path d="M4 10h16v4H4z"></path>279        </svg>280      </div>281      <div class="label">Print</div>282    </div>283 284    <div class="item">285      <div class="icon">286        <!-- Trash -->287        <svg viewBox="0 0 24 24">288          <path d="M4 7h16"></path>289          <path d="M7 7l1 14h8l1-14"></path>290          <path d="M9 7V4h6v3"></path>291        </svg>292      </div>293      <div class="label dim">Delete</div>294    </div>295 296  </div>297 298  <div class="home-indicator"></div>299</div>300</body>301</html>