GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Photo Album - File Explorer</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #161A1E;14    color: #EAEAEA;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    background: #1E2328;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    box-sizing: border-box;30    font-size: 38px;31    letter-spacing: 0.5px;32    color: #DADADA;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .icon {40    width: 48px;41    height: 48px;42    fill: none;43    stroke: #DADADA;44    stroke-width: 3;45  }46  /* App bar */47  .app-bar {48    position: absolute;49    top: 96px;50    left: 0;51    width: 1080px;52    height: 140px;53    background: #1F252A;54    display: flex;55    align-items: center;56    box-sizing: border-box;57    padding: 0 24px;58  }59  .app-left {60    display: flex;61    align-items: center;62    gap: 24px;63  }64  .title {65    font-size: 48px;66    font-weight: 600;67    color: #F5F5F5;68  }69  .app-right {70    margin-left: auto;71    display: flex;72    align-items: center;73    gap: 36px;74  }75  .app-icon {76    width: 56px;77    height: 56px;78    stroke: #EAEAEA;79    fill: none;80    stroke-width: 3;81    opacity: 0.95;82  }83 84  /* Filter chips */85  .chip-row {86    position: absolute;87    top: 236px;88    left: 0;89    width: 1080px;90    padding: 24px;91    box-sizing: border-box;92    display: flex;93    gap: 24px;94  }95  .chip {96    display: flex;97    align-items: center;98    gap: 18px;99    padding: 20px 28px;100    border: 2px solid #343A40;101    border-radius: 24px;102    color: #D9D9D9;103    font-size: 36px;104    background: #22272D;105  }106  .chip .chip-icon {107    width: 40px; height: 40px; stroke: #D9D9D9; fill: none; stroke-width: 3;108  }109  .chip.active {110    border-color: #5B8DEF;111    color: #FFFFFF;112    background: #2A3040;113  }114 115  /* List items */116  .list {117    position: absolute;118    top: 360px;119    left: 0;120    width: 1080px;121    padding: 24px;122    box-sizing: border-box;123  }124  .item {125    width: 100%;126    background: #1B2025;127    border-radius: 12px;128    padding: 24px;129    box-sizing: border-box;130    display: flex;131    align-items: center;132    margin-bottom: 28px;133  }134  .thumb {135    width: 120px;136    height: 120px;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    color: #757575;140    display: flex;141    align-items: center;142    justify-content: center;143    font-size: 24px;144    text-align: center;145    border-radius: 8px;146  }147  .details {148    margin-left: 28px;149    flex: 1;150  }151  .name {152    font-size: 42px;153    color: #F0F0F0;154  }155  .meta {156    font-size: 32px;157    color: #A9B0B7;158    margin-top: 10px;159  }160  .item-menu {161    width: 48px;162    height: 48px;163    margin-left: 16px;164  }165 166  /* Bottom gesture bar */167  .gesture-bar {168    position: absolute;169    bottom: 32px;170    left: 50%;171    transform: translateX(-50%);172    width: 420px;173    height: 14px;174    background: #CFCFCF;175    border-radius: 10px;176    opacity: 0.6;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status Bar -->184  <div class="status-bar">185    <div class="status-left">5:06</div>186    <div class="status-right">187      <!-- WiFi icon -->188      <svg class="icon" viewBox="0 0 24 24">189        <path d="M2 9c5-4 15-4 20 0M6 13c3-3 9-3 12 0M10 17c2-2 4-2 6 0"/>190        <circle cx="12" cy="20" r="1.8" fill="#DADADA" stroke="none"/>191      </svg>192      <!-- Battery icon -->193      <svg class="icon" viewBox="0 0 24 24">194        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#DADADA"></rect>195        <rect x="20" y="9" width="2" height="6" rx="1" stroke="#DADADA"></rect>196        <rect x="4" y="8" width="12" height="8" fill="#DADADA" stroke="none"></rect>197      </svg>198    </div>199  </div>200 201  <!-- App Bar -->202  <div class="app-bar">203    <div class="app-left">204      <!-- Back arrow -->205      <svg class="app-icon" viewBox="0 0 24 24">206        <path d="M15 5L7 12l8 7" />207      </svg>208      <div class="title">photo album</div>209    </div>210    <div class="app-right">211      <!-- Close (X) -->212      <svg class="app-icon" viewBox="0 0 24 24">213        <path d="M5 5l14 14M19 5L5 19"/>214      </svg>215      <!-- Grid view icon -->216      <svg class="app-icon" viewBox="0 0 24 24">217        <rect x="3" y="3" width="7" height="7"/>218        <rect x="14" y="3" width="7" height="7"/>219        <rect x="3" y="14" width="7" height="7"/>220        <rect x="14" y="14" width="7" height="7"/>221      </svg>222      <!-- More (kebab) -->223      <svg class="app-icon" viewBox="0 0 24 24">224        <circle cx="12" cy="5" r="2" fill="#EAEAEA" stroke="none"/>225        <circle cx="12" cy="12" r="2" fill="#EAEAEA" stroke="none"/>226        <circle cx="12" cy="19" r="2" fill="#EAEAEA" stroke="none"/>227      </svg>228    </div>229  </div>230 231  <!-- Chip Row -->232  <div class="chip-row">233    <div class="chip">234      <svg class="chip-icon" viewBox="0 0 24 24">235        <circle cx="7" cy="12" r="4"/>236        <circle cx="17" cy="12" r="4"/>237        <path d="M3 12h3M18 12h3"/>238      </svg>239      <span>Audio</span>240    </div>241    <div class="chip">242      <svg class="chip-icon" viewBox="0 0 24 24">243        <rect x="5" y="3" width="14" height="18" rx="2"/>244        <line x1="8" y1="7" x2="16" y2="7"/>245        <line x1="8" y1="11" x2="16" y2="11"/>246        <line x1="8" y1="15" x2="16" y2="15"/>247      </svg>248      <span>Documents & other</span>249    </div>250    <div class="chip active">251      <svg class="chip-icon" viewBox="0 0 24 24">252        <rect x="3" y="5" width="18" height="14" rx="2"/>253        <path d="M4 16l6-6 4 4 3-3 3 5"/>254      </svg>255      <span>Images</span>256    </div>257  </div>258 259  <!-- File List -->260  <div class="list">261    <div class="item">262      <div class="thumb">[IMG: Landscape]</div>263      <div class="details">264        <div class="name">PXL_20230921_130911155.jpg</div>265        <div class="meta">3.18 MB, 6 days ago</div>266      </div>267      <svg class="item-menu" viewBox="0 0 24 24">268        <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>269        <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>270        <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>271      </svg>272    </div>273 274    <div class="item">275      <div class="thumb">[IMG: Monument]</div>276      <div class="details">277        <div class="name">PXL_20230921_130839603.jpg</div>278        <div class="meta">2.39 MB, 6 days ago</div>279      </div>280      <svg class="item-menu" viewBox="0 0 24 24">281        <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>282        <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>283        <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>284      </svg>285    </div>286  </div>287 288  <!-- Bottom gesture bar -->289  <div class="gesture-bar"></div>290 291</div>292</body>293</html>