GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Photo Album UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #12161C;14    color: #EDEFF2;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #D6D9DE;25    font-size: 38px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    gap: 28px;31    align-items: center;32  }33  /* Top app bar */34  .app-bar {35    height: 132px;36    display: flex;37    align-items: center;38    padding: 0 28px;39    gap: 26px;40    border-bottom: 1px solid #1F2630;41  }42  .title {43    font-size: 52px;44    font-weight: 600;45    color: #EAEFF3;46    flex: 1;47  }48  .bar-icons {49    display: flex;50    align-items: center;51    gap: 36px;52  }53 54  /* Chips row */55  .chip-row {56    display: flex;57    gap: 24px;58    padding: 24px 24px 18px 24px;59  }60  .chip {61    display: inline-flex;62    align-items: center;63    gap: 18px;64    padding: 20px 28px;65    border-radius: 22px;66    border: 1px solid #2A323E;67    background: #19202A;68    color: #E5E9EF;69    font-size: 36px;70  }71  .chip .icon {72    width: 56px; height: 56px;73    background: #232B36;74    border-radius: 50%;75    display: grid; place-items: center;76  }77 78  /* List */79  .list {80    padding: 12px 0 0 0;81  }82  .item {83    display: flex;84    align-items: center;85    padding: 26px 24px;86    gap: 28px;87    border-bottom: 1px solid #1A2230;88  }89  .thumb {90    width: 128px; height: 128px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    color: #555;94    display: flex; align-items: center; justify-content: center;95    text-align: center;96    font-size: 22px;97    padding: 6px;98    border-radius: 10px;99  }100  .meta {101    flex: 1;102    min-width: 0;103  }104  .name {105    font-size: 44px;106    color: #E9EDF2;107    white-space: nowrap;108    overflow: hidden;109    text-overflow: ellipsis;110    margin-bottom: 12px;111  }112  .sub {113    font-size: 34px;114    color: #9AA3AE;115  }116  .kebab {117    width: 72px; height: 72px;118    display: grid; place-items: center;119  }120 121  /* Simple helper for svg buttons */122  .icon-btn { width: 72px; height: 72px; display: grid; place-items: center; }123  .muted { color: #C7CFD8; }124</style>125</head>126<body>127<div id="render-target">128  <!-- Status bar -->129  <div class="status-bar">130    <div>4:58</div>131    <div class="status-right">132      <!-- Wi-Fi -->133      <svg width="48" height="48" viewBox="0 0 24 24" fill="#C9D2DB" xmlns="http://www.w3.org/2000/svg">134        <path d="M12 18.5l-1.6-1.6a2.25 2.25 0 013.2 0L12 18.5zm4.6-4.6a6.5 6.5 0 00-9.2 0l-1.4-1.4a8.5 8.5 0 0112 0l-1.4 1.4zm3.2-3.2a11 11 0 00-17.6 0L.8 9.9a13 13 0 0122.4 0l-3.2-1.2z"/>135      </svg>136      <!-- Battery -->137      <svg width="48" height="48" viewBox="0 0 24 24" fill="#C9D2DB" xmlns="http://www.w3.org/2000/svg">138        <path d="M16 6h1a2 2 0 012 2v8a2 2 0 01-2 2h-1v1h-2v-1H8a2 2 0 01-2-2V8a2 2 0 012-2h8zm1 2H7v8h10V8z"/>139      </svg>140    </div>141  </div>142 143  <!-- App bar -->144  <div class="app-bar">145    <!-- back arrow -->146    <div class="icon-btn">147      <svg width="60" height="60" viewBox="0 0 24 24" fill="#E6EBF0" xmlns="http://www.w3.org/2000/svg">148        <path d="M14 7l-5 5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>149      </svg>150    </div>151    <div class="title">photo album</div>152    <div class="bar-icons">153      <!-- X icon -->154      <div class="icon-btn">155        <svg width="56" height="56" viewBox="0 0 24 24" fill="#D3DAE3" xmlns="http://www.w3.org/2000/svg">156          <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>157        </svg>158      </div>159      <!-- grid icon -->160      <div class="icon-btn">161        <svg width="56" height="56" viewBox="0 0 24 24" fill="#D3DAE3" xmlns="http://www.w3.org/2000/svg">162          <path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/>163        </svg>164      </div>165      <!-- kebab -->166      <div class="icon-btn">167        <svg width="56" height="56" viewBox="0 0 24 24" fill="#D3DAE3" xmlns="http://www.w3.org/2000/svg">168          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Chips filter row -->175  <div class="chip-row">176    <div class="chip">177      <div class="icon">178        <svg width="34" height="34" viewBox="0 0 24 24" fill="#AFC0D0" xmlns="http://www.w3.org/2000/svg">179          <path d="M3 10v4l8 5V5L3 10zm10-5v14l8-5v-4l-8-5z"/>180        </svg>181      </div>182      <span>Audio</span>183    </div>184 185    <div class="chip">186      <div class="icon">187        <svg width="34" height="34" viewBox="0 0 24 24" fill="#AFC0D0" xmlns="http://www.w3.org/2000/svg">188          <path d="M6 2h9l5 5v13a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm9 1.5V9h5.5L15 3.5z"/>189        </svg>190      </div>191      <span>Documents &amp; other</span>192    </div>193 194    <div class="chip">195      <div class="icon">196        <svg width="34" height="34" viewBox="0 0 24 24" fill="#AFC0D0" xmlns="http://www.w3.org/2000/svg">197          <path d="M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14l4-4h12a2 2 0 002-2z"/>198        </svg>199      </div>200      <span>Images</span>201    </div>202  </div>203 204  <!-- List items -->205  <div class="list">206    <div class="item">207      <div class="thumb">[IMG: Mountain statue thumbnail]</div>208      <div class="meta">209        <div class="name">PXL_20230921_130839603~2.jpg</div>210        <div class="sub">1.09 MB, 5 days ago</div>211      </div>212      <div class="kebab">213        <svg width="52" height="52" viewBox="0 0 24 24" fill="#C8D0DA" xmlns="http://www.w3.org/2000/svg">214          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>215        </svg>216      </div>217    </div>218 219    <div class="item">220      <div class="thumb">[IMG: Mountain cliff thumbnail]</div>221      <div class="meta">222        <div class="name">PXL_20230921_130911155.jpg</div>223        <div class="sub">3.18 MB, 6 days ago</div>224      </div>225      <div class="kebab">226        <svg width="52" height="52" viewBox="0 0 24 24" fill="#C8D0DA" xmlns="http://www.w3.org/2000/svg">227          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>228        </svg>229      </div>230    </div>231 232    <div class="item">233      <div class="thumb">[IMG: Mountain statue thumbnail]</div>234      <div class="meta">235        <div class="name">PXL_20230921_130839603.jpg</div>236        <div class="sub">2.39 MB, 6 days ago</div>237      </div>238      <div class="kebab">239        <svg width="52" height="52" viewBox="0 0 24 24" fill="#C8D0DA" xmlns="http://www.w3.org/2000/svg">240          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>241        </svg>242      </div>243    </div>244  </div>245</div>246</body>247</html>