GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>File Manager Selection UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0B0B0B;14    font-family: Arial, Helvetica, sans-serif;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 80px;25    padding: 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #DADADA;31    font-size: 32px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-dot {40    width: 18px; height: 18px; background: #DADADA; border-radius: 50%;41  }42  .status-cloud {43    width: 48px; height: 30px; border-radius: 16px; border: 2px solid #DADADA; position: relative;44  }45  .status-cloud::after {46    content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;47    border: 2px solid #DADADA; left: -10px; top: -6px; background: transparent;48  }49  .battery {50    width: 44px; height: 22px; border: 2px solid #DADADA; border-radius: 6px; position: relative;51  }52  .battery::after {53    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #DADADA; border-radius: 2px;54  }55 56  /* Top app bar */57  .top-bar {58    position: absolute;59    top: 80px;60    left: 0;61    width: 1080px;62    height: 160px;63    padding: 0 24px;64    box-sizing: border-box;65    display: flex;66    align-items: center;67    justify-content: space-between;68  }69  .left-actions {70    display: flex;71    align-items: center;72    gap: 24px;73  }74  .close-btn {75    width: 72px; height: 72px; display: grid; place-items: center;76  }77  .title {78    display: flex;79    flex-direction: column;80    gap: 8px;81  }82  .title .main { font-size: 44px; font-weight: 600; }83  .title .sub { font-size: 28px; color: #A0A0A0; }84 85  .right-actions {86    display: flex;87    align-items: center;88    gap: 36px;89    margin-right: 8px;90  }91  .icon-btn { width: 72px; height: 72px; display: grid; place-items: center; opacity: 0.85; }92  .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #DADADA; stroke-width: 3; }93 94  /* File card */95  .file-card {96    position: absolute;97    top: 246px;98    left: 24px;99    width: 1032px;100    height: 170px;101    background: #21261C; /* dark olive selected tone */102    border-radius: 28px;103    display: flex;104    align-items: center;105    gap: 28px;106    padding: 24px 32px;107    box-sizing: border-box;108  }109  .doc-icon {110    width: 92px; height: 92px; border-radius: 16px; background: #214C4E;111    display: grid; place-items: center;112  }113  .doc-icon svg { width: 54px; height: 54px; fill: none; stroke: #BFE7EC; stroke-width: 3; }114  .file-info {115    flex: 1;116    display: flex;117    flex-direction: column;118    gap: 10px;119  }120  .file-name { font-size: 40px; color: #F4F4F4; }121  .file-meta { font-size: 28px; color: #A7A7A7; }122  .checkmark {123    width: 64px; height: 64px; border-radius: 50%; background: #2F4D2B;124    border: 2px solid #5FAA56; display: grid; place-items: center;125  }126  .checkmark svg { width: 38px; height: 38px; stroke: #9EE29B; stroke-width: 6; fill: none; }127 128  /* Bottom sheet */129  .bottom-sheet {130    position: absolute;131    bottom: 80px;132    left: 0;133    width: 1080px;134    height: 360px;135    background: #1B1D17;136    border-top-left-radius: 28px;137    border-top-right-radius: 28px;138    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);139  }140  .handle {141    width: 140px; height: 10px; background: #CFCFCF; border-radius: 6px;142    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);143  }144  .sheet-content {145    position: absolute; top: 56px; left: 28px; right: 28px;146  }147  .sheet-title { font-size: 28px; color: #A5A5A5; margin-bottom: 28px; }148  .storage-row {149    display: flex; align-items: center; gap: 24px;150    padding: 16px 8px;151  }152  .storage-icon {153    width: 80px; height: 80px; border-radius: 50%; background: #3A432A;154    display: grid; place-items: center; border: 2px solid #5E6B46;155  }156  .storage-icon svg { width: 44px; height: 44px; stroke: #CAD39F; fill: none; stroke-width: 3; }157  .storage-label { font-size: 36px; color: #EDEDED; }158 159  /* Gesture bar */160  .gesture-bar {161    position: absolute;162    bottom: 24px;163    left: 50%;164    transform: translateX(-50%);165    width: 220px; height: 10px; background: #EDEDED; border-radius: 6px; opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div>10:15</div>175    <div class="status-icons">176      <div class="status-dot"></div>177      <div class="status-dot" style="width:22px;height:22px;"></div>178      <div class="status-cloud"></div>179      <div class="status-dot" style="width:22px;height:22px;"></div>180      <div class="battery"></div>181    </div>182  </div>183 184  <!-- Top app bar with selection actions -->185  <div class="top-bar">186    <div class="left-actions">187      <div class="close-btn">188        <svg viewBox="0 0 24 24">189          <path d="M4 4 L20 20 M20 4 L4 20" stroke="#DADADA" stroke-width="3" />190        </svg>191      </div>192      <div class="title">193        <div class="main">1 selected</div>194        <div class="sub">6.27 kB</div>195      </div>196    </div>197    <div class="right-actions">198      <div class="icon-btn" title="Share">199        <svg viewBox="0 0 24 24">200          <circle cx="6" cy="12" r="3"></circle>201          <circle cx="18" cy="6" r="3"></circle>202          <circle cx="18" cy="18" r="3"></circle>203          <path d="M9 12 L15 8 M9 12 L15 16"></path>204        </svg>205      </div>206      <div class="icon-btn" title="Delete">207        <svg viewBox="0 0 24 24">208          <path d="M3 6 H21"></path>209          <rect x="6" y="8" width="12" height="12" rx="2" ry="2"></rect>210          <path d="M9 3 H15"></path>211        </svg>212      </div>213      <div class="icon-btn" title="More">214        <svg viewBox="0 0 24 24">215          <circle cx="12" cy="5" r="2" fill="#DADADA" stroke="none"></circle>216          <circle cx="12" cy="12" r="2" fill="#DADADA" stroke="none"></circle>217          <circle cx="12" cy="19" r="2" fill="#DADADA" stroke="none"></circle>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Selected file card -->224  <div class="file-card">225    <div class="doc-icon">226      <svg viewBox="0 0 24 24">227        <rect x="5" y="3" width="14" height="18" rx="2"></rect>228        <path d="M7 8 H17 M7 12 H17 M7 16 H13"></path>229      </svg>230    </div>231    <div class="file-info">232      <div class="file-name">Month finance .docx</div>233      <div class="file-meta">6.27 kB, 1 hour ago</div>234    </div>235    <div class="checkmark">236      <svg viewBox="0 0 24 24">237        <path d="M5 13 L10 18 L19 7"></path>238      </svg>239    </div>240  </div>241 242  <!-- Bottom sheet: Move to Internal storage -->243  <div class="bottom-sheet">244    <div class="handle"></div>245    <div class="sheet-content">246      <div class="sheet-title">Move to</div>247      <div class="storage-row">248        <div class="storage-icon">249          <svg viewBox="0 0 24 24">250            <rect x="6" y="3" width="12" height="18" rx="3"></rect>251            <rect x="10" y="18" width="4" height="2"></rect>252          </svg>253        </div>254        <div class="storage-label">Internal storage</div>255      </div>256    </div>257  </div>258 259  <!-- Gesture bar -->260  <div class="gesture-bar"></div>261</div>262</body>263</html>