GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Gallery Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #232427;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ECECEC;26    font-size: 40px;27    letter-spacing: 1px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-dot {35    width: 10px;36    height: 10px;37    background: #9AA0A6;38    border-radius: 50%;39    opacity: .9;40  }41  .icon {42    width: 44px;43    height: 44px;44    fill: #E0E0E0;45  }46 47  /* Header */48  .header {49    padding: 16px 40px 24px 40px;50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .title-wrap {55    display: flex;56    align-items: center;57    gap: 20px;58  }59  .app-mark {60    width: 72px;61    height: 72px;62    border-radius: 12px;63    background: linear-gradient(135deg, #4CAF50, #FFC107, #2196F3);64    border: 1px solid #3A3A3A;65  }66  .title {67    font-size: 56px;68    font-weight: 600;69    color: #F1F1F1;70  }71  .kebab {72    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;73  }74 75  /* Quick actions */76  .quick-actions {77    padding: 12px 36px 8px 36px;78    display: flex;79    gap: 36px;80  }81  .qa-btn {82    flex: 1;83    height: 150px;84    border: 2px solid #3A3A3A;85    color: #DADADA;86    border-radius: 26px;87    display: flex;88    align-items: center;89    gap: 22px;90    padding: 0 34px;91    font-size: 44px;92    background: rgba(255,255,255,0.02);93  }94  .qa-btn svg { width: 48px; height: 48px; fill: #B0C6FF; }95 96  /* Section header */97  .section-row {98    padding: 14px 36px 16px 36px;99    display: flex;100    align-items: center;101    justify-content: flex-end;102  }103  .section-label {104    color: #B9C1D1;105    font-size: 38px;106    display: flex;107    align-items: center;108    gap: 12px;109  }110  .section-label svg { width: 34px; height: 34px; fill: #B9C1D1; }111 112  /* Grid */113  .grid {114    padding: 10px 36px 0 36px;115    display: flex;116    flex-wrap: wrap;117    gap: 48px;118  }119  .card {120    width: calc((1080px - 36px - 36px - 48px)/2); /* two columns with outer padding and gap */121  }122  .thumb {123    width: 100%;124    height: 360px;125    border-radius: 32px;126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    color: #757575;129    display: flex;130    align-items: center;131    justify-content: center;132    font-size: 36px;133    text-align: center;134  }135  .thumb.rounded {136    border-radius: 32px;137  }138  .card-title {139    margin-top: 20px;140    font-size: 44px;141    color: #F1F1F1;142  }143  .card-sub {144    margin-top: 6px;145    font-size: 32px;146    color: #AEB4BE;147  }148 149  /* Bottom nav */150  .bottom-nav {151    position: absolute;152    left: 0;153    right: 0;154    bottom: 72px;155    height: 170px;156    border-top: 1px solid #2F2F32;157    background: #232427;158    display: flex;159  }160  .tab {161    flex: 1;162    display: flex;163    flex-direction: column;164    align-items: center;165    justify-content: center;166    gap: 12px;167    color: #C9CED6;168    font-size: 34px;169  }170  .tab svg { width: 56px; height: 56px; }171  .tab.active { color: #7FB3FF; }172  .tab.active svg { fill: #7FB3FF; }173  .tab svg { fill: #9AA0A6; }174 175  /* Gesture bar */176  .gesture {177    position: absolute;178    bottom: 20px;179    left: 50%;180    transform: translateX(-50%);181    width: 260px;182    height: 10px;183    border-radius: 6px;184    background: #FFFFFF;185    opacity: .9;186  }187</style>188</head>189<body>190<div id="render-target">191  <!-- Status Bar -->192  <div class="status-bar">193    <div>6:10</div>194    <div class="status-right">195      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17h18v3H3zM7 4h10l3 10H4z"/></svg>196      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-10 10h2a8 8 0 0 1 16 0h2A10 10 0 0 0 12 2z"/></svg>197      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3L1 9l11 6 9-4.91V17h2V9z"/></svg>198      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79L20 21.49 21.49 20 15.5 14zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>199      <div class="status-dot"></div>200      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 7.5l-8.5 10-4-4.5-6 7.5h22z"/></svg>201      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 4H8a2 2 0 0 0-2 2v12h2v-2h8v2h2V6a2 2 0 0 0-2-2zm0 10H8V6h8v8z"/></svg>202      <div style="display:flex; align-items:center; gap:8px;">203        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 20V4a1 1 0 0 1 1-1h6v18h-6a1 1 0 0 1-1-1zM6 20H4v-7h2v7z"/></svg>204        <div style="font-size:36px;">100%</div>205      </div>206    </div>207  </div>208 209  <!-- Header -->210  <div class="header">211    <div class="title-wrap">212      <div class="app-mark" aria-label="App icon"></div>213      <div class="title">Gallery</div>214    </div>215    <div class="kebab" aria-label="menu">216      <svg viewBox="0 0 24 24" class="icon"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>217    </div>218  </div>219 220  <!-- Quick actions -->221  <div class="quick-actions">222    <div class="qa-btn">223      <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>224      <span>Favourites</span>225    </div>226    <div class="qa-btn">227      <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7L6 7zm3-4h6l1 3H8l1-3z"/></svg>228      <span>Trash</span>229    </div>230  </div>231 232  <!-- Section header -->233  <div class="section-row">234    <div class="section-label">235      <span>Recent</span>236      <svg viewBox="0 0 24 24"><path d="M7 10l5-5 5 5H7zm10 4l-5 5-5-5h10z"/></svg>237    </div>238  </div>239 240  <!-- Grid of folders -->241  <div class="grid">242    <!-- Card 1 -->243    <div class="card">244      <div class="thumb rounded">[IMG: Camera Folder Thumbnail]</div>245      <div class="card-title">Camera</div>246      <div class="card-sub">5 items · 84 MB</div>247    </div>248 249    <!-- Card 2 -->250    <div class="card">251      <div class="thumb rounded">[IMG: Screenshots Preview]</div>252      <div class="card-title">Screenshots</div>253      <div class="card-sub">1 item · 86 kB</div>254    </div>255 256    <!-- Card 3 -->257    <div class="card">258      <div class="thumb rounded">[IMG: Simple Triangle Drawing]</div>259      <div class="card-title">Infinite Painter</div>260      <div class="card-sub">2 items · 135 kB</div>261    </div>262  </div>263 264  <!-- Bottom Navigation -->265  <div class="bottom-nav">266    <div class="tab">267      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2z"/></svg>268      <div>Photos</div>269    </div>270    <div class="tab active">271      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6V4zm2 0v16h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-8z"/></svg>272      <div>Folders</div>273    </div>274  </div>275 276  <!-- Gesture pill -->277  <div class="gesture"></div>278</div>279</body>280</html>