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>Camera Gallery Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18  /* Status bar */19  .status-bar {20    height: 88px;21    padding: 0 24px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .sb-right {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .sb-icon svg { width: 34px; height: 34px; }34  .sb-icon svg path, .sb-icon svg rect, .sb-icon svg circle, .sb-icon svg polyline, .sb-icon svg line {35    stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;36  }37 38  /* App bar */39  .app-bar {40    height: 120px;41    display: flex;42    align-items: center;43    gap: 20px;44    padding: 0 24px;45    border-bottom: 1px solid rgba(255,255,255,0.08);46  }47  .back-icon svg { width: 48px; height: 48px; }48  .title { font-size: 50px; font-weight: 600; }49 50  /* Grid */51  .grid {52    padding: 16px 24px 24px 24px;53    display: grid;54    grid-template-columns: repeat(3, 1fr);55    gap: 12px;56  }57  .thumb {58    background: #E0E0E0;59    border: 1px solid #BDBDBD;60    color: #757575;61    display: flex;62    align-items: center;63    justify-content: center;64    font-size: 28px;65    aspect-ratio: 1 / 1;66    text-align: center;67  }68 69  /* Spacer above ad to mimic blank area */70  .spacer {71    height: 260px; /* creates the black area above the ad in the screenshot */72  }73 74  /* Ad banner */75  .ad-banner {76    position: absolute;77    bottom: 0; left: 0;78    width: 100%;79    height: 220px;80    background: #6EC3F6;81    color: #fff;82    display: flex;83    align-items: center;84    padding: 20px 24px;85    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);86  }87  .ad-logo {88    width: 120px; height: 120px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    color: #1E88E5;92    display: flex; align-items: center; justify-content: center;93    border-radius: 12px;94    margin-right: 24px;95    font-size: 24px;96    font-weight: 600;97  }98  .ad-text {99    flex: 1;100  }101  .ad-line1 { font-size: 42px; font-weight: 700; }102  .ad-line2 { font-size: 32px; margin-top: 8px; font-weight: 600; }103  .ad-actions {104    display: flex; align-items: center; gap: 14px;105    margin-left: 18px;106  }107  .ad-badge {108    background: #FFEB3B;109    color: #214;110    padding: 8px 14px;111    border-radius: 999px;112    font-size: 24px;113    font-weight: 700;114  }115  .ad-close {116    width: 44px; height: 44px; border-radius: 50%;117    background: rgba(255,255,255,0.25);118    display: flex; align-items: center; justify-content: center;119  }120  .ad-close svg { width: 20px; height: 20px; }121  .ad-close svg line { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Top status bar -->128  <div class="status-bar">129    <div class="sb-left">1:44</div>130    <div class="sb-right">131      <!-- Do Not Disturb / bell-off -->132      <div class="sb-icon">133        <svg viewBox="0 0 24 24">134          <path d="M12 3c-3 0-5 2-5 5v3l-2 2"></path>135          <path d="M20 16l-2-2V8"></path>136          <line x1="4" y1="4" x2="20" y2="20"></line>137        </svg>138      </div>139      <!-- Wi-Fi -->140      <div class="sb-icon">141        <svg viewBox="0 0 24 24">142          <path d="M4 9c4.5-4 11.5-4 16 0"></path>143          <path d="M7 12c3.2-2.8 6.8-2.8 10 0"></path>144          <path d="M10 15c1.8-1.6 4.2-1.6 6 0"></path>145          <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>146        </svg>147      </div>148      <!-- Battery -->149      <div class="sb-icon">150        <svg viewBox="0 0 24 24">151          <rect x="3" y="7" width="16" height="10" rx="2"></rect>152          <rect x="20" y="10" width="2" height="4" rx="1"></rect>153          <rect x="5" y="9" width="12" height="6" fill="#fff" stroke="none"></rect>154        </svg>155      </div>156    </div>157  </div>158 159  <!-- App bar -->160  <div class="app-bar">161    <div class="back-icon">162      <svg viewBox="0 0 24 24">163        <polyline points="15,6 9,12 15,18"></polyline>164      </svg>165    </div>166    <div class="title">Camera</div>167  </div>168 169  <!-- Grid of thumbnails -->170  <div class="grid">171    <div class="thumb">[IMG: Road beside greenery]</div>172    <div class="thumb">[IMG: Grass field top view]</div>173    <div class="thumb">[IMG: Plant stem close-up]</div>174 175    <div class="thumb">[IMG: Forest landscape]</div>176    <div class="thumb">[IMG: Trees and houses]</div>177    <div class="thumb">[IMG: Office desk with cables]</div>178 179    <div class="thumb">[IMG: Desk with devices]</div>180    <div class="thumb">[IMG: Hands typing on laptop]</div>181    <div class="thumb">[IMG: Spreadsheet on laptop]</div>182 183    <div class="thumb">[IMG: Empty white desk]</div>184    <div class="thumb">[IMG: Under desk cable box]</div>185    <div class="thumb">[IMG: Legs and shoes under desk]</div>186  </div>187 188  <!-- Spacer area (black) above the ad -->189  <div class="spacer"></div>190 191  <!-- Bottom advertisement -->192  <div class="ad-banner">193    <div class="ad-logo">[IMG: Coconut]</div>194    <div class="ad-text">195      <div class="ad-line1">Tender Coconut Water at ₹47/Piece</div>196      <div class="ad-line2">Start VIP Trial @ ₹35</div>197    </div>198    <div class="ad-actions">199      <div class="ad-badge">VIP</div>200      <div class="ad-close">201        <svg viewBox="0 0 24 24">202          <line x1="6" y1="6" x2="18" y2="18"></line>203          <line x1="6" y1="18" x2="18" y2="6"></line>204        </svg>205      </div>206    </div>207  </div>208 209</div>210</body>211</html>