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>Select images - Gallery</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: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    background: #000;22    display: flex;23    align-items: center;24    padding: 0 24px;25    box-sizing: border-box;26    font-size: 36px;27    letter-spacing: 0.5px;28  }29  .status-left { flex: 1; color: #fff; }30  .status-right { display: flex; align-items: center; gap: 22px; }31  .icon-mini {32    width: 32px; height: 32px;33    display: inline-block;34  }35 36  /* App bar */37  .app-bar {38    height: 140px;39    background: #2b2b2b;40    display: flex;41    align-items: center;42    padding: 0 24px;43    box-sizing: border-box;44    border-bottom: 1px solid #1f1f1f;45  }46  .app-title {47    font-size: 56px;48    font-weight: 600;49    margin-left: 18px;50    color: #ffffff;51  }52  .spacer { flex: 1; }53 54  /* Gallery grid */55  .gallery {56    position: absolute;57    top: 96px; /* status bar */58    top: calc(96px + 140px);59    left: 0; right: 0;60    bottom: 110px; /* gesture area */61    overflow: hidden;62    background: #111111;63  }64  .grid {65    height: 100%;66    padding: 16px;67    box-sizing: border-box;68    display: grid;69    grid-template-columns: repeat(3, 1fr);70    grid-auto-rows: 344px;71    gap: 12px;72  }73  .tile {74    position: relative;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    color: #757575;78    display: flex;79    align-items: center;80    justify-content: center;81    text-align: center;82    font-size: 28px;83    border-radius: 4px;84    user-select: none;85  }86  .badge {87    position: absolute;88    top: 12px;89    right: 12px;90    width: 56px;91    height: 56px;92    background: rgba(0,0,0,0.75);93    color: #fff;94    border-radius: 50%;95    font-size: 32px;96    display: flex;97    align-items: center;98    justify-content: center;99    border: 2px solid #111;100  }101 102  /* Floating action button */103  .fab {104    position: absolute;105    right: 34px;106    bottom: 190px;107    width: 132px;108    height: 132px;109    background: #1e88e5;110    color: #fff;111    border-radius: 50%;112    box-shadow: 0 8px 24px rgba(0,0,0,0.5);113    display: flex;114    align-items: center;115    justify-content: center;116  }117  .fab-badge {118    position: absolute;119    top: -4px;120    right: -4px;121    width: 56px;122    height: 56px;123    background: rgba(0,0,0,0.85);124    color: #fff;125    border-radius: 50%;126    font-size: 30px;127    display: flex;128    align-items: center;129    justify-content: center;130    border: 2px solid #1e88e5;131  }132 133  /* Gesture bar */134  .gesture {135    position: absolute;136    bottom: 28px;137    left: 50%;138    transform: translateX(-50%);139    width: 400px;140    height: 12px;141    background: #6b6b6b;142    border-radius: 10px;143    opacity: 0.8;144  }145</style>146</head>147<body>148<div id="render-target">149  <!-- Status bar -->150  <div class="status-bar">151    <div class="status-left">8:56</div>152    <div class="status-right">153      <!-- simple status icons -->154      <svg class="icon-mini" viewBox="0 0 24 24" fill="#fff">155        <path d="M3 12l7-7v4h11v6H10v4z"></path>156      </svg>157      <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">158        <path d="M2 10a10 10 0 0 1 20 0"></path>159        <path d="M6 10a6 6 0 0 1 12 0"></path>160        <circle cx="12" cy="16" r="1.6" fill="#fff"></circle>161      </svg>162      <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">163        <rect x="3" y="6" width="18" height="12" rx="2"></rect>164        <rect x="19" y="10" width="2" height="4" fill="#fff" stroke="none"></rect>165      </svg>166    </div>167  </div>168 169  <!-- App bar -->170  <div class="app-bar">171    <svg width="52" height="52" viewBox="0 0 24 24">172      <path d="M15 4L7 12l8 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>173    </svg>174    <div class="app-title">Select images</div>175    <div class="spacer"></div>176    <svg width="56" height="56" viewBox="0 0 24 24">177      <path d="M3 7h8l2 2h8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#bdbdbd"></path>178      <rect x="3" y="5" width="8" height="4" fill="#d0d0d0"></rect>179    </svg>180  </div>181 182  <!-- Gallery -->183  <div class="gallery">184    <div class="grid">185      <div class="tile">186        [IMG: Office desk photo]187        <div class="badge">1</div>188      </div>189      <div class="tile">[IMG: Office desk photo]</div>190      <div class="tile">[IMG: Hands on laptop]</div>191      <div class="tile">[IMG: Desk cables close-up]</div>192      <div class="tile">[IMG: Laptop and cables]</div>193      <div class="tile">[IMG: Desk with earphones]</div>194      <div class="tile">[IMG: Spreadsheet on laptop]</div>195      <div class="tile">[IMG: Typing on laptop]</div>196      <div class="tile">[IMG: Cable and card on desk]</div>197      <div class="tile">[IMG: Legs and shoes under desk]</div>198      <div class="tile">[IMG: Bag and cables under table]</div>199      <div class="tile">[IMG: Shoes and chair wheels]</div>200      <div class="tile">[IMG: Under-desk bag and power]</div>201      <div class="tile">[IMG: Desk cables close-up]</div>202      <div class="tile">[IMG: Feet and floor near desk]</div>203      <div class="tile">[IMG: Under-desk power]</div>204      <div class="tile">[IMG: Earphones on white desk]</div>205      <div class="tile">[IMG: Laptop with spreadsheet]</div>206    </div>207  </div>208 209  <!-- Floating action button with count -->210  <div class="fab">211    <svg width="72" height="72" viewBox="0 0 24 24">212      <path d="M8 4l8 8-8 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>213    </svg>214    <div class="fab-badge">1</div>215  </div>216 217  <!-- Gesture bar -->218  <div class="gesture"></div>219</div>220</body>221</html>