GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Gallery Select Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#202124; color:#EDEDED; font-family: Arial, Helvetica, sans-serif;12  }13 14  /* Status bar */15  .status-bar{16    height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;17    color:#EDEDED; font-size:34px; letter-spacing:0.5px;18    background:#202124;19  }20  .status-right{ display:flex; align-items:center; gap:22px; }21  .sb-icon{ width:30px; height:30px; opacity:0.8; }22  .battery{ display:flex; align-items:center; gap:10px; font-size:30px; }23  .battery svg{ width:46px; height:28px; }24 25  /* Top actions */26  .top-actions{27    height:120px; display:flex; align-items:center; gap:26px;28    padding:0 28px; background:#2A2B2E; border-bottom:1px solid #3b3d40;29  }30  .close-x{ font-size:70px; line-height:1; color:#EDEDED; }31  .selected-count{ font-size:46px; font-weight:600; }32 33  /* Content area */34  .content{ padding:22px 26px 220px 26px; overflow:hidden; }35  .section-title{36    font-size:38px; font-weight:700; margin:28px 8px 18px; color:#FFFFFF;37  }38  .grid{39    display:grid; grid-template-columns: repeat(4, 1fr);40    gap:24px; padding:0 2px;41  }42 43  .thumb{ position:relative; height:236px; border-radius:8px; overflow:hidden; }44  .img-box{45    width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD;46    display:flex; align-items:center; justify-content:center; color:#555; font-size:26px; text-align:center; padding:10px;47  }48  .thumb .ring{49    position:absolute; top:10px; left:10px; width:36px; height:36px; border-radius:50%;50    border:3px solid #EDEDED; background:rgba(0,0,0,0.0);51  }52  .thumb.selected::after{53    content:""; position:absolute; inset:0; background:rgba(84,110,160,0.35);54  }55  .thumb.selected .ring{56    border:none; background:#8ab4f8;57  }58  .duration{59    position:absolute; bottom:10px; left:10px; display:flex; align-items:center; gap:8px;60    background:rgba(0,0,0,0.6); color:#fff; padding:6px 10px; border-radius:20px; font-size:24px;61  }62  .duration svg{ width:18px; height:18px; }63 64  /* August grid (3 columns) */65  .grid-3{ grid-template-columns: repeat(3, 1fr); }66 67  /* July grid (1 column start-of-row look) */68  .grid-1{ grid-template-columns: repeat(4, 1fr); }69  .grid-1 .thumb:nth-child(1){ grid-column:1 / span 1; }70 71  /* Bottom action bar */72  .action-bar{73    position:absolute; left:0; right:0; bottom:90px;74    padding:0 40px; display:flex; justify-content:space-between; align-items:center; gap:32px;75  }76  .btn{77    flex:1; height:120px; border-radius:18px; font-size:40px; font-weight:600;78    display:flex; align-items:center; justify-content:center; gap:18px; cursor:default;79  }80  .btn-outline{81    color:#8ab4f8; border:4px solid #8ab4f8; background:transparent;82  }83  .btn-filled{84    background:#8ab4f8; color:#0b152b;85  }86  .btn svg{ width:44px; height:44px; }87 88  /* Bottom navigation pill */89  .nav-pill{90    position:absolute; left:50%; transform:translateX(-50%);91    bottom:22px; width:240px; height:12px; background:#CFCFCF; border-radius:10px; opacity:0.85;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status bar -->99  <div class="status-bar">100    <div>6:14</div>101    <div class="status-right">102      <!-- Simple glyphs (mock) -->103      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#DADCE0"/></svg>104      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#DADCE0"/></svg>105      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 11h18v2H3z" fill="#DADCE0"/></svg>106      <div class="battery">107        <svg viewBox="0 0 36 20">108          <rect x="1" y="2" width="30" height="16" rx="3" fill="none" stroke="#EDEDED" stroke-width="2"/>109          <rect x="3" y="4" width="26" height="12" rx="2" fill="#EDEDED"/>110          <rect x="32" y="7" width="3" height="6" rx="1.5" fill="#EDEDED"/>111        </svg>112        100%113      </div>114    </div>115  </div>116 117  <!-- Top actions -->118  <div class="top-actions">119    <div class="close-x">×</div>120    <div class="selected-count">1</div>121  </div>122 123  <!-- Content -->124  <div class="content">125    <div class="section-title">September</div>126    <div class="grid">127      <!-- Video thumb -->128      <div class="thumb">129        <div class="img-box">[IMG: Yellow bottle on desk - Video]</div>130        <div class="ring"></div>131        <div class="duration">132          <svg viewBox="0 0 24 24"><polygon points="8,6 18,12 8,18" fill="#fff"/></svg>133          0:12134        </div>135      </div>136      <div class="thumb">137        <div class="img-box">[IMG: Landscape from window]</div>138        <div class="ring"></div>139      </div>140      <div class="thumb">141        <div class="img-box">[IMG: Indoor plant by window]</div>142        <div class="ring"></div>143      </div>144      <div class="thumb selected">145        <div class="img-box">[IMG: Green plants in white planter]</div>146        <div class="ring"></div>147      </div>148    </div>149 150    <div class="section-title">August</div>151    <div class="grid grid-3">152      <div class="thumb">153        <div class="img-box">[IMG: Light gray screenshot]</div>154        <div class="ring"></div>155      </div>156      <div class="thumb">157        <div class="img-box">[IMG: Triangle line drawing]</div>158        <div class="ring"></div>159      </div>160      <div class="thumb">161        <div class="img-box">[IMG: Red heart drawing]</div>162        <div class="ring"></div>163      </div>164    </div>165 166    <div class="section-title">July</div>167    <div class="grid grid-1">168      <div class="thumb">169        <div class="img-box">[IMG: Distant landscape view]</div>170        <div class="ring"></div>171      </div>172    </div>173  </div>174 175  <!-- Bottom actions -->176  <div class="action-bar">177    <button class="btn btn-outline" aria-label="Copy">178      <svg viewBox="0 0 24 24"><rect x="4" y="4" width="12" height="12" rx="2" fill="none" stroke="#8ab4f8" stroke-width="2"/><rect x="8" y="8" width="12" height="12" rx="2" fill="none" stroke="#8ab4f8" stroke-width="2"/></svg>179      Copy180    </button>181    <button class="btn btn-filled" aria-label="Move">182      <svg viewBox="0 0 24 24"><path d="M4 12h12l-3-3 1.4-1.4L21 12l-6.6 4.4L13 15l3-3H4z" fill="#0b152b"/></svg>183      Move184    </button>185  </div>186 187  <!-- Navigation pill -->188  <div class="nav-pill"></div>189</div>190</body>191</html>