GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1115;13    color: #e6e6e6;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    color: #eaeaea;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-size: 44px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status-right svg { fill: none; stroke: #eaeaea; stroke-width: 3; }37 38  /* Action bar */39  .action-bar {40    position: absolute;41    top: 120px;42    left: 0;43    width: 1080px;44    height: 160px;45    padding: 0 36px;46    box-sizing: border-box;47    display: flex;48    align-items: center;49    justify-content: space-between;50  }51  .action-left {52    display: flex;53    align-items: center;54    gap: 28px;55  }56  .x-btn {57    width: 64px; height: 64px;58  }59  .title-wrap { line-height: 1.2; }60  .title {61    font-size: 52px;62    font-weight: 700;63    color: #d9d9d9;64  }65  .subtitle {66    font-size: 32px;67    color: #9aa0a6;68    margin-top: 6px;69  }70  .action-right {71    display: flex;72    align-items: center;73    gap: 44px;74  }75  .action-right svg { width: 60px; height: 60px; stroke: #d9d9d9; fill: none; stroke-width: 3; }76 77  /* List area */78  .list {79    position: absolute;80    top: 280px;81    left: 0;82    width: 1080px;83    padding: 0 24px;84    box-sizing: border-box;85  }86  .row {87    position: relative;88    display: flex;89    align-items: center;90    padding: 28px;91    margin: 20px 0;92    border-radius: 24px;93    background: #14171c;94  }95  .row.selected {96    background: #22313d;97  }98  .thumb {99    width: 150px;100    height: 150px;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    border-radius: 16px;104    display: flex;105    align-items: center;106    justify-content: center;107    color: #757575;108    font-size: 28px;109    text-align: center;110    margin-right: 28px;111    flex-shrink: 0;112  }113  .file-info {114    flex: 1;115  }116  .file-name {117    font-size: 44px;118    color: #cfd8dc;119  }120  .file-meta {121    margin-top: 12px;122    font-size: 32px;123    color: #7f8c8d;124  }125  .check {126    width: 66px; height: 66px;127    margin-left: 20px;128  }129 130  /* Bottom sheet */131  .sheet {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 680px;137    background: #1a1f25;138    border-top-left-radius: 22px;139    border-top-right-radius: 22px;140    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);141  }142  .sheet-content {143    width: 100%;144    height: 100%;145    padding: 60px 48px 170px;146    box-sizing: border-box;147    text-align: center;148  }149  .trash-illustration {150    width: 140px; height: 140px; margin: 0 auto 28px;151  }152  .sheet-title {153    font-size: 48px; font-weight: 700; color: #e5e7eb;154  }155  .sheet-sub {156    font-size: 32px; color: #aab2bd; margin-top: 18px;157  }158  .cta {159    position: absolute;160    bottom: 24px;161    left: 24px;162    width: 1032px;163    height: 120px;164    background: #a9c8ff;165    color: #0b1a2a;166    border-radius: 60px;167    display: flex;168    align-items: center;169    justify-content: center;170    gap: 22px;171    font-size: 40px;172    font-weight: 700;173  }174  .cta svg { width: 52px; height: 52px; stroke: #0b1a2a; }175 176  /* Home indicator */177  .home-indicator {178    position: absolute;179    bottom: 8px;180    left: 50%;181    transform: translateX(-50%);182    width: 360px;183    height: 16px;184    background: #5a5f67;185    border-radius: 10px;186    opacity: 0.6;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status Bar -->194  <div class="status-bar">195    <div class="status-left">5:04</div>196    <div class="status-right">197      <!-- WiFi -->198      <svg viewBox="0 0 24 24">199        <path d="M2 8c5-4 15-4 20 0" />200        <path d="M5 12c3-3 11-3 14 0" />201        <path d="M8 16c2-2 6-2 8 0" />202        <circle cx="12" cy="20" r="1.6" fill="#eaeaea"></circle>203      </svg>204      <!-- Battery -->205      <svg viewBox="0 0 26 16">206        <rect x="1" y="2" width="20" height="12" rx="2" />207        <rect x="22" y="5" width="3" height="6" rx="1" />208        <rect x="3" y="4" width="16" height="8" fill="#eaeaea"></rect>209      </svg>210    </div>211  </div>212 213  <!-- Action Bar -->214  <div class="action-bar">215    <div class="action-left">216      <!-- Close X -->217      <svg class="x-btn" viewBox="0 0 24 24">218        <path d="M5 5L19 19" stroke="#d9d9d9" stroke-width="3"></path>219        <path d="M19 5L5 19" stroke="#d9d9d9" stroke-width="3"></path>220      </svg>221      <div class="title-wrap">222        <div class="title">1 selected</div>223        <div class="subtitle">1.09 MB</div>224      </div>225    </div>226    <div class="action-right">227      <!-- Share -->228      <svg viewBox="0 0 24 24">229        <circle cx="5" cy="12" r="2"></circle>230        <circle cx="19" cy="5" r="2"></circle>231        <circle cx="19" cy="19" r="2"></circle>232        <path d="M7 12L17 7" />233        <path d="M7 12L17 17" />234      </svg>235      <!-- Trash -->236      <svg viewBox="0 0 24 24">237        <path d="M4 7h16" />238        <path d="M9 7V5h6v2" />239        <rect x="6" y="7" width="12" height="13" rx="2" />240      </svg>241      <!-- More -->242      <svg viewBox="0 0 24 24">243        <circle cx="12" cy="5" r="2" fill="#d9d9d9"></circle>244        <circle cx="12" cy="12" r="2" fill="#d9d9d9"></circle>245        <circle cx="12" cy="19" r="2" fill="#d9d9d9"></circle>246      </svg>247    </div>248  </div>249 250  <!-- List -->251  <div class="list">252    <!-- Row 1 selected -->253    <div class="row selected">254      <div class="thumb">[IMG: Dogs]</div>255      <div class="file-info">256        <div class="file-name">PXL_20230921_130839603~2.jpg</div>257        <div class="file-meta">1.09 MB, 5 days ago</div>258      </div>259      <!-- Checked circle -->260      <svg class="check" viewBox="0 0 24 24">261        <circle cx="12" cy="12" r="11" fill="#3b78ff"></circle>262        <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="3" fill="none"></path>263      </svg>264    </div>265 266    <!-- Row 2 -->267    <div class="row">268      <div class="thumb">[IMG: Mountain]</div>269      <div class="file-info">270        <div class="file-name">PXL_20230921_130911155.jpg</div>271        <div class="file-meta">3.18 MB, 6 days ago</div>272      </div>273      <!-- Unchecked circle -->274      <svg class="check" viewBox="0 0 24 24">275        <circle cx="12" cy="12" r="10" fill="none" stroke="#7a8088" stroke-width="3"></circle>276      </svg>277    </div>278 279    <!-- Row 3 -->280    <div class="row">281      <div class="thumb">[IMG: Monument]</div>282      <div class="file-info">283        <div class="file-name">PXL_20230921_130839603.jpg</div>284        <div class="file-meta">2.39 MB, 6 days ago</div>285      </div>286      <!-- Unchecked circle -->287      <svg class="check" viewBox="0 0 24 24">288        <circle cx="12" cy="12" r="10" fill="none" stroke="#7a8088" stroke-width="3"></circle>289      </svg>290    </div>291  </div>292 293  <!-- Bottom Sheet -->294  <div class="sheet">295    <div class="sheet-content">296      <!-- Trash Illustration -->297      <svg class="trash-illustration" viewBox="0 0 24 24">298        <rect x="7" y="7" width="10" height="12" rx="2" fill="#cfd8dc"></rect>299        <path d="M9 7V5h6v2" stroke="#cfd8dc" stroke-width="2" fill="none"></path>300        <path d="M4 7h16" stroke="#cfd8dc" stroke-width="2"></path>301      </svg>302      <div class="sheet-title">Files will move to Trash</div>303      <div class="sheet-sub">Files in Trash haven’t been permanently deleted from your device.<br>You can restore them for up to 30 days.</div>304    </div>305 306    <div class="cta">307      <svg viewBox="0 0 24 24">308        <path d="M4 7h16" />309        <path d="M9 7V5h6v2" />310        <rect x="6" y="7" width="12" height="13" rx="2" />311      </svg>312      <span>Move 1 file to Trash</span>313    </div>314  </div>315 316  <!-- Home indicator -->317  <div class="home-indicator"></div>318 319</div>320</body>321</html>