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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0b0b0b;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 100px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 24px;29    box-sizing: border-box;30  }31  .sb-left { font-size: 42px; font-weight: 500; }32  .sb-center {33    display: flex;34    gap: 26px;35    margin-left: 40px;36  }37  .sb-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .icon {44    width: 44px;45    height: 44px;46  }47 48  /* App bar */49  .app-bar {50    position: absolute;51    top: 100px;52    left: 0;53    width: 100%;54    height: 120px;55    background: #2c2c2c;56    color: #fff;57    display: flex;58    align-items: center;59    box-sizing: border-box;60    padding: 0 24px;61  }62  .app-title {63    font-size: 52px;64    font-weight: 500;65    margin-left: 18px;66    letter-spacing: 0.2px;67  }68  .app-actions {69    margin-left: auto;70    display: flex;71    align-items: center;72    gap: 24px;73  }74 75  /* Grid */76  .grid {77    position: absolute;78    top: 220px; /* status + app bar */79    left: 0;80    width: 100%;81    box-sizing: border-box;82    padding: 16px;83    display: grid;84    grid-template-columns: repeat(3, 1fr);85    grid-auto-rows: 330px;86    gap: 12px;87  }88  .thumb {89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    color: #757575;92    display: flex;93    justify-content: center;94    align-items: center;95    font-size: 32px;96    text-align: center;97    border-radius: 6px;98  }99 100  /* Gesture bar */101  .gesture {102    position: absolute;103    bottom: 28px;104    left: 50%;105    transform: translateX(-50%);106    width: 420px;107    height: 12px;108    background: #CFCFCF;109    border-radius: 12px;110    opacity: 0.86;111  }112</style>113</head>114<body>115<div id="render-target">116  <!-- Status Bar -->117  <div class="status-bar">118    <div class="sb-left">8:55</div>119    <div class="sb-center">120      <!-- Simple app icons -->121      <svg class="icon" viewBox="0 0 24 24">122        <rect x="3" y="6" width="18" height="12" fill="none" stroke="#fff" stroke-width="2"></rect>123        <polygon points="10,9 16,12 10,15" fill="#fff"></polygon>124      </svg>125      <svg class="icon" viewBox="0 0 24 24">126        <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>127        <polyline points="3,7 12,13 21,7" fill="none" stroke="#fff" stroke-width="2"></polyline>128      </svg>129      <svg class="icon" viewBox="0 0 24 24">130        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>131        <circle cx="12" cy="12" r="4" fill="#fff"></circle>132      </svg>133      <svg class="icon" viewBox="0 0 24 24">134        <circle cx="12" cy="12" r="3" fill="#fff"></circle>135      </svg>136    </div>137    <div class="sb-right">138      <svg class="icon" viewBox="0 0 24 24">139        <path d="M2 16c3-3 7-3 10 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>140        <path d="M6 12c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>141        <path d="M10 8c1-1 3-1 4 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>142      </svg>143      <svg class="icon" viewBox="0 0 24 24">144        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>145        <rect x="4" y="9" width="12" height="6" fill="#fff"></rect>146        <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>147      </svg>148    </div>149  </div>150 151  <!-- App Bar -->152  <div class="app-bar">153    <svg class="icon" viewBox="0 0 24 24">154      <path d="M15 5 L7 12 L15 19" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>155    </svg>156    <div class="app-title">Select images</div>157    <div class="app-actions">158      <svg class="icon" viewBox="0 0 24 24">159        <path d="M3 6h7l2 3h9v9H3z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>160      </svg>161    </div>162  </div>163 164  <!-- Grid of image thumbnails -->165  <div class="grid">166    <div class="thumb">[IMG: Office desk photo]</div>167    <div class="thumb">[IMG: Office desk with cables]</div>168    <div class="thumb">[IMG: Hands typing on laptop]</div>169 170    <div class="thumb">[IMG: Office desk close-up]</div>171    <div class="thumb">[IMG: Desk adapters and wires]</div>172    <div class="thumb">[IMG: Laptop screen on desk]</div>173 174    <div class="thumb">[IMG: Laptop and hands]</div>175    <div class="thumb">[IMG: Card and cable on desk]</div>176    <div class="thumb">[IMG: Desk with earphones]</div>177 178    <div class="thumb">[IMG: People at office desk]</div>179    <div class="thumb">[IMG: Hands near trackpad]</div>180    <div class="thumb">[IMG: Cables and adapter]</div>181 182    <div class="thumb">[IMG: Under desk - shoes]</div>183    <div class="thumb">[IMG: Under desk - bag and adapter]</div>184    <div class="thumb">[IMG: Under desk - shoes]</div>185 186    <div class="thumb">[IMG: Adapter and cables on desk]</div>187    <div class="thumb">[IMG: Desk cables and card]</div>188    <div class="thumb">[IMG: Legs and shoes near desk]</div>189 190    <div class="thumb">[IMG: Under desk - bag and adapter]</div>191    <div class="thumb">[IMG: Desk with laptop edge]</div>192    <div class="thumb">[IMG: Office desk photo]</div>193  </div>194 195  <!-- Gesture bar -->196  <div class="gesture"></div>197</div>198</body>199</html>