GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Photo Album UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #121212; color: #EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 90px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #DADADA; font-size: 36px; letter-spacing: .5px;19  }20  .status-icons { display: flex; gap: 22px; align-items: center; }21  .status-dot { width: 20px; height: 20px; border-radius: 50%; background: #DADADA; opacity: .85; }22  .battery {23    width: 52px; height: 28px; border: 3px solid #DADADA; border-radius: 6px; position: relative;24  }25  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #DADADA; border-radius: 2px; }26  .battery .level { position: absolute; left: 3px; top: 3px; height: 18px; width: 34px; background: #DADADA; }27 28  /* App bar */29  .app-bar {30    position: absolute; top: 90px; left: 0; right: 0;31    height: 130px; display: flex; align-items: center;32    padding: 0 28px; gap: 24px; border-bottom: 1px solid #1F1F1F;33  }34  .app-title { font-size: 48px; font-weight: 500; margin-right: auto; }35  .icon-btn {36    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;37    border-radius: 18px; color: #EDEDED;38  }39  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #EDEDED; stroke-width: 6; }40 41  /* Chips */42  .chips {43    position: absolute; top: 230px; left: 24px; right: 24px;44    display: flex; gap: 18px;45  }46  .chip {47    height: 90px; padding: 0 28px; display: flex; align-items: center; gap: 16px;48    border: 2px solid #2E2E2E; border-radius: 22px; background: #1A1A1A; color: #EDEDED;49    font-size: 34px;50  }51  .chip svg { width: 42px; height: 42px; stroke: #CFCFCF; fill: none; stroke-width: 5; }52 53  /* File list */54  .list {55    position: absolute; top: 350px; left: 24px; right: 24px; bottom: 300px;56  }57  .file-row {58    display: flex; align-items: center;59    padding: 26px 10px; gap: 28px; border-bottom: 1px solid #1F1F1F;60  }61  .thumb {62    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;63    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; text-align: center; border-radius: 10px;64  }65  .file-info { flex: 1; }66  .file-name { font-size: 36px; color: #FFFFFF; margin-bottom: 8px; }67  .file-meta { font-size: 30px; color: #A8A8A8; }68  .kebab {69    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;70  }71  .kebab svg { width: 16px; height: 48px; fill: #CFCFCF; }72 73  /* Snackbar */74  .snackbar {75    position: absolute; left: 0; right: 0; bottom: 120px;76    padding: 26px 28px; background: #1A1A1A; border-top: 8px solid #F5C847;77    display: flex; align-items: center;78  }79  .snackbar-text { flex: 1; }80  .snackbar-title { font-size: 38px; margin-bottom: 8px; }81  .snackbar-sub { font-size: 32px; color: #BBBBBB; }82  .snackbar-btn {83    width: 180px; height: 86px; border-radius: 999px; border: 2px solid #3C3C3C;84    display: flex; align-items: center; justify-content: center; font-size: 38px; color: #EDEDED;85  }86 87  /* Gesture bar */88  .gesture {89    position: absolute; bottom: 36px; left: 50%;90    transform: translateX(-50%);91    width: 320px; height: 12px; border-radius: 8px; background: #C7C7C7; opacity: .6;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status Bar -->99  <div class="status-bar">100    <div class="time">5:05</div>101    <div class="status-icons">102      <div class="status-dot"></div>103      <div class="status-dot" style="width:18px;height:18px;"></div>104      <div class="battery"><div class="level"></div></div>105    </div>106  </div>107 108  <!-- App Bar -->109  <div class="app-bar">110    <div class="icon-btn" aria-label="Back">111      <svg viewBox="0 0 24 24">112        <path d="M15 4 L7 12 L15 20" />113      </svg>114    </div>115    <div class="app-title">photo album</div>116    <div class="icon-btn" aria-label="Close">117      <svg viewBox="0 0 24 24">118        <path d="M5 5 L19 19 M19 5 L5 19" />119      </svg>120    </div>121    <div class="icon-btn" aria-label="Grid">122      <svg viewBox="0 0 24 24">123        <rect x="3" y="3" width="5" height="5" stroke-width="2"></rect>124        <rect x="10" y="3" width="5" height="5" stroke-width="2"></rect>125        <rect x="17" y="3" width="5" height="5" stroke-width="2"></rect>126        <rect x="3" y="10" width="5" height="5" stroke-width="2"></rect>127        <rect x="10" y="10" width="5" height="5" stroke-width="2"></rect>128        <rect x="17" y="10" width="5" height="5" stroke-width="2"></rect>129        <rect x="3" y="17" width="5" height="5" stroke-width="2"></rect>130        <rect x="10" y="17" width="5" height="5" stroke-width="2"></rect>131        <rect x="17" y="17" width="5" height="5" stroke-width="2"></rect>132      </svg>133    </div>134    <div class="icon-btn" aria-label="More">135      <svg viewBox="0 0 24 24">136        <circle cx="12" cy="5" r="2.2" fill="#EDEDED"></circle>137        <circle cx="12" cy="12" r="2.2" fill="#EDEDED"></circle>138        <circle cx="12" cy="19" r="2.2" fill="#EDEDED"></circle>139      </svg>140    </div>141  </div>142 143  <!-- Filter Chips -->144  <div class="chips">145    <div class="chip">146      <svg viewBox="0 0 24 24">147        <circle cx="8" cy="12" r="5"></circle>148        <rect x="14" y="9" width="6" height="8" rx="2"></rect>149      </svg>150      <div>Audio</div>151    </div>152    <div class="chip">153      <svg viewBox="0 0 24 24">154        <rect x="4" y="5" width="16" height="12" rx="2"></rect>155        <path d="M4 9 H20" />156      </svg>157      <div>Documents & other</div>158    </div>159    <div class="chip">160      <svg viewBox="0 0 24 24">161        <rect x="4" y="6" width="16" height="12" rx="2"></rect>162        <path d="M6 11 L10 8 L12 10 L18 7" />163      </svg>164      <div>Images</div>165    </div>166  </div>167 168  <!-- File List -->169  <div class="list">170    <div class="file-row">171      <div class="thumb">[IMG: Rock photo]</div>172      <div class="file-info">173        <div class="file-name">PXL_20230921_130839603~2.jpg</div>174        <div class="file-meta">1.09 MB, 5 days ago</div>175      </div>176      <div class="kebab">177        <svg viewBox="0 0 6 24">178          <circle cx="3" cy="4" r="2" />179          <circle cx="3" cy="12" r="2" />180          <circle cx="3" cy="20" r="2" />181        </svg>182      </div>183    </div>184 185    <div class="file-row">186      <div class="thumb">[IMG: Mountain photo]</div>187      <div class="file-info">188        <div class="file-name">PXL_20230921_130911155.jpg</div>189        <div class="file-meta">3.18 MB, 6 days ago</div>190      </div>191      <div class="kebab">192        <svg viewBox="0 0 6 24">193          <circle cx="3" cy="4" r="2" />194          <circle cx="3" cy="12" r="2" />195          <circle cx="3" cy="20" r="2" />196        </svg>197      </div>198    </div>199 200    <div class="file-row">201      <div class="thumb">[IMG: Rock photo]</div>202      <div class="file-info">203        <div class="file-name">PXL_20230921_130839603.jpg</div>204        <div class="file-meta">2.39 MB, 6 days ago</div>205      </div>206      <div class="kebab">207        <svg viewBox="0 0 6 24">208          <circle cx="3" cy="4" r="2" />209          <circle cx="3" cy="12" r="2" />210          <circle cx="3" cy="20" r="2" />211        </svg>212      </div>213    </div>214  </div>215 216  <!-- Snackbar -->217  <div class="snackbar">218    <div class="snackbar-text">219      <div class="snackbar-title">1 file moved to Trash</div>220      <div class="snackbar-sub">1.09 MB added to Trash total</div>221    </div>222    <div class="snackbar-btn">View</div>223  </div>224 225  <!-- Gesture Bar -->226  <div class="gesture"></div>227</div>228</body>229</html>