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 Grid</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Top status/black bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 180px;30    background: #000;31  }32 33  /* Close icon */34  .close-wrap {35    position: absolute;36    top: 220px;37    left: 48px;38    width: 96px;39    height: 96px;40  }41  .close-icon {42    width: 96px;43    height: 96px;44  }45 46  /* Grid */47  .content {48    position: absolute;49    top: 340px;50    left: 0;51    right: 0;52    padding: 0 36px 140px;53  }54  .grid {55    display: grid;56    grid-template-columns: repeat(2, 1fr);57    gap: 36px;58  }59  .card {60    width: 100%;61  }62  .thumb {63    position: relative;64    width: 100%;65    height: 360px;66    background: #E0E0E0;67    border: 1px solid #BDBDBD;68    display: flex;69    align-items: center;70    justify-content: center;71    color: #757575;72    font-size: 28px;73    letter-spacing: 0.2px;74  }75  .overlay {76    position: absolute;77    left: 0;78    right: 0;79    bottom: 0;80    height: 92px;81    background: rgba(0, 0, 0, 0.45);82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 0 24px;86    color: #fff;87    font-size: 36px;88    font-weight: 500;89  }90 91  /* Bottom home indicator */92  .home-indicator {93    position: absolute;94    bottom: 38px;95    left: 50%;96    transform: translateX(-50%);97    width: 240px;98    height: 10px;99    background: #000;100    border-radius: 8px;101    opacity: 0.9;102  }103</style>104</head>105<body>106<div id="render-target">107  <div class="status-bar"></div>108 109  <div class="close-wrap">110    <svg class="close-icon" viewBox="0 0 24 24">111      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#5CC0E6" stroke-width="2.4" stroke-linecap="round" fill="none"/>112    </svg>113  </div>114 115  <div class="content">116    <div class="grid">117      <!-- Row 1 -->118      <div class="card">119        <div class="thumb">120          [IMG: Indoor yoga pose]121          <div class="overlay">122            <span>00:29</span>123            <span>1.88MB</span>124          </div>125        </div>126      </div>127      <div class="card">128        <div class="thumb">129          [IMG: Outdoor yoga with mountains]130          <div class="overlay">131            <span>00:28</span>132            <span>1.68MB</span>133          </div>134        </div>135      </div>136 137      <!-- Row 2 -->138      <div class="card">139        <div class="thumb">140          [IMG: Indoor yoga pose]141          <div class="overlay">142            <span>00:29</span>143            <span>1.88MB</span>144          </div>145        </div>146      </div>147      <div class="card">148        <div class="thumb">149          [IMG: Aerial beach coastline]150          <div class="overlay">151            <span>00:20</span>152            <span>1.7MB</span>153          </div>154        </div>155      </div>156 157      <!-- Row 3 -->158      <div class="card">159        <div class="thumb">160          [IMG: Tropical beach shoreline]161          <div class="overlay">162            <span>00:38</span>163            <span>3.14MB</span>164          </div>165        </div>166      </div>167      <div class="card">168        <div class="thumb">169          [IMG: Aerial beach coastline]170          <div class="overlay">171            <span>00:20</span>172            <span>1.7MB</span>173          </div>174        </div>175      </div>176    </div>177  </div>178 179  <div class="home-indicator"></div>180</div>181</body>182</html>