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 - 5 Selected</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000; color: #fff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; padding: 0 28px;19    display: flex; align-items: center; justify-content: space-between;20    font-weight: 500;21  }22  .status-time { font-size: 38px; letter-spacing: 0.5px; }23  .status-icons { display: flex; align-items: center; gap: 26px; }24  .status-icons svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.95; }25 26  /* Header */27  .header {28    position: absolute; top: 110px; left: 0; right: 0;29    height: 120px; padding: 0 28px;30    display: flex; align-items: center; gap: 22px;31  }32  .back-btn {33    width: 64px; height: 64px; border-radius: 32px;34    display: flex; align-items: center; justify-content: center;35  }36  .back-btn svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 5; }37  .header-title { font-size: 56px; font-weight: 600; }38 39  /* Grid */40  .content {41    position: absolute; top: 240px; left: 0; right: 0;42    padding: 24px;43  }44  .grid-3 {45    display: grid; grid-template-columns: repeat(3, 1fr);46    gap: 20px;47  }48  .grid-2 {49    margin-top: 20px;50    display: grid; grid-template-columns: repeat(2, 1fr);51    gap: 20px;52  }53  .tile { position: relative; border-radius: 8px; overflow: hidden; }54  .img {55    width: 100%; height: 300px;56    background: #E0E0E0; border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center;58    color: #757575; font-size: 30px; text-align: center;59  }60  .tall .img { height: 360px; }61 62  /* Selection check overlay */63  .check {64    position: absolute; top: 14px; right: 14px;65    width: 50px; height: 50px; border-radius: 10px;66    box-shadow: inset 0 0 0 3px #fff;67    background: rgba(0,0,0,0.35);68    display: flex; align-items: center; justify-content: center;69  }70  .check svg { width: 30px; height: 30px; }71  .check svg path { stroke: #fff; stroke-width: 6; fill: none; }72  .selected .check { background: rgba(255,255,255,0.12); }73  .not-selected .check svg { opacity: 0; }74 75  /* Bottom actions */76  .actions {77    position: absolute; left: 0; right: 0; bottom: 160px;78    height: 220px; display: flex; align-items: center; justify-content: space-around;79  }80  .action { display: flex; flex-direction: column; align-items: center; gap: 16px; }81  .action-icon {82    width: 64px; height: 64px;83  }84  .action-icon svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 3.5; }85  .action-label { font-size: 34px; color: #fff; }86 87  /* Ad banner */88  .ad {89    position: absolute; bottom: 0; left: 0; right: 0;90    height: 160px; background: #fff; color: #222;91    border-top: 1px solid #DDD; padding: 18px 24px;92    display: flex; align-items: center; gap: 18px;93  }94  .ad-left { display: flex; align-items: center; gap: 12px; }95  .ad-btn {96    width: 30px; height: 30px; border-radius: 15px;97    display: flex; align-items: center; justify-content: center;98    border: 1px solid #CFCFCF; color: #777; font-size: 18px;99  }100  .ad-logo {101    width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;102    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;103  }104  .ad-text { display: flex; flex-direction: column; }105  .ad-title { font-size: 36px; font-weight: 600; }106  .ad-sub { font-size: 30px; color: #1976D2; }107  .ad-cta {108    margin-left: auto; width: 60px; height: 60px; border-radius: 12px;109    background: #4285F4; display: flex; align-items: center; justify-content: center;110  }111  .ad-cta svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3.5; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div class="status-time">2:03</div>120    <div class="status-icons">121      <!-- Do not disturb -->122      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><rect x="6" y="11" width="12" height="2" fill="#fff" stroke="none"></rect></svg>123      <!-- Wi‑Fi -->124      <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"></path><path d="M5 11c3-3 11-3 14 0"></path><path d="M8 14c2-2 6-2 8 0"></path><circle cx="12" cy="17" r="1.5" fill="#fff" stroke="none"></circle></svg>125      <!-- Battery -->126      <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="22" y="10" width="4" height="4"></rect><rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"></rect></svg>127    </div>128  </div>129 130  <!-- Header -->131  <div class="header">132    <div class="back-btn">133      <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"></path></svg>134    </div>135    <div class="header-title">5 Selected</div>136  </div>137 138  <!-- Content grid -->139  <div class="content">140    <div class="grid-3">141      <!-- Row 1 -->142      <div class="tile selected">143        <div class="img">[IMG: Aerial view of road]</div>144        <div class="check">145          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>146        </div>147      </div>148      <div class="tile selected">149        <div class="img">[IMG: Dry field with shrubs]</div>150        <div class="check">151          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>152        </div>153      </div>154      <div class="tile selected">155        <div class="img">[IMG: Close-up plant stem and soil]</div>156        <div class="check">157          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>158        </div>159      </div>160 161      <!-- Row 2 -->162      <div class="tile selected">163        <div class="img">[IMG: Forest and trees panorama]</div>164        <div class="check">165          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>166        </div>167      </div>168      <div class="tile selected">169        <div class="img">[IMG: Green landscape with scattered trees]</div>170        <div class="check">171          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>172        </div>173      </div>174      <div class="tile not-selected">175        <div class="img">[IMG: Office desk and laptop]</div>176        <div class="check">177          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>178        </div>179      </div>180    </div>181 182    <!-- Row 3 (two wide tiles) -->183    <div class="grid-2">184      <div class="tile not-selected tall">185        <div class="img">[IMG: Under desk cables and bag]</div>186        <div class="check">187          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>188        </div>189      </div>190      <div class="tile not-selected tall">191        <div class="img">[IMG: Legs and shoes near chair]</div>192        <div class="check">193          <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"></path></svg>194        </div>195      </div>196    </div>197  </div>198 199  <!-- Bottom actions -->200  <div class="actions">201    <div class="action">202      <div class="action-icon">203        <!-- Share -->204        <svg viewBox="0 0 24 24">205          <circle cx="5" cy="12" r="2"></circle>206          <circle cx="19" cy="5" r="2"></circle>207          <circle cx="19" cy="19" r="2"></circle>208          <path d="M7 12 L17 7 M7 12 L17 17"></path>209        </svg>210      </div>211      <div class="action-label">Share</div>212    </div>213 214    <div class="action">215      <div class="action-icon">216        <!-- Delete -->217        <svg viewBox="0 0 24 24">218          <path d="M4 7 H20"></path>219          <path d="M9 7 V5 H15 V7"></path>220          <rect x="6" y="7" width="12" height="12" rx="2"></rect>221        </svg>222      </div>223      <div class="action-label">Delete</div>224    </div>225 226    <div class="action">227      <div class="action-icon">228        <!-- Copy -->229        <svg viewBox="0 0 24 24">230          <rect x="7" y="7" width="11" height="11" rx="2"></rect>231          <rect x="4" y="4" width="11" height="11" rx="2"></rect>232        </svg>233      </div>234      <div class="action-label">Copy</div>235    </div>236 237    <div class="action">238      <div class="action-icon">239        <!-- Move -->240        <svg viewBox="0 0 24 24">241          <path d="M5 12 H15"></path>242          <path d="M12 9 L15 12 L12 15"></path>243          <rect x="4" y="5" width="8" height="14" rx="2"></rect>244        </svg>245      </div>246      <div class="action-label">Move</div>247    </div>248  </div>249 250  <!-- Ad banner -->251  <div class="ad">252    <div class="ad-left">253      <div class="ad-btn">i</div>254      <div class="ad-btn">×</div>255      <div class="ad-logo">[IMG: Organic India logo]</div>256    </div>257    <div class="ad-text">258      <div class="ad-title">Experience Organic India Today</div>259      <div class="ad-sub">Organic India Store - Sector 18, Noida</div>260    </div>261    <div class="ad-cta">262      <svg viewBox="0 0 24 24"><path d="M6 4 L18 12 L6 20 Z" fill="#fff" stroke="none"></path></svg>263    </div>264  </div>265 266</div>267</body>268</html>