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 Permission Prompt</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED;13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; padding: 28px 38px;20    color: #FFFFFFCC; font-size: 38px;21  }22  .status-left { position: absolute; left: 38px; top: 32px; font-weight: 600; }23  .status-right { position: absolute; right: 32px; top: 28px; display: flex; align-items: center; gap: 24px; }24  .status-icon {25    width: 36px; height: 36px; opacity: .9;26  }27  .battery {28    display: flex; align-items: center; gap: 10px; font-size: 34px;29  }30 31  /* Top selection bar hint (X 2) */32  .selection-row {33    position: absolute; top: 150px; left: 44px; display: flex; align-items: center; gap: 30px;34    color: #D0D0D0; font-size: 64px; line-height: 1;35  }36  .selection-row .x { font-size: 84px; opacity: .9; }37  .selection-row .count { font-weight: 700; }38 39  /* Content sections */40  .sections {41    position: absolute; top: 250px; left: 0; right: 0;42    padding: 0 28px;43  }44  .section-title {45    color: #CFCFCF; font-weight: 700; font-size: 54px;46    margin: 36px 12px 22px;47  }48  .grid {49    display: grid;50    grid-template-columns: repeat(3, 1fr);51    gap: 18px;52    padding: 0 12px;53  }54  .thumb {55    position: relative;56    height: 300px;57    border-radius: 16px;58    overflow: hidden;59    background: #1E1E1E;60    border: 1px solid #2B2B2B;61  }62  .thumb .img {63    width: 100%; height: 100%;64    background: #E0E0E0; border: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center;66    color: #757575; font-size: 30px;67  }68  .check {69    position: absolute; top: 14px; right: 14px;70    width: 56px; height: 56px; border-radius: 50%;71    background: #3B5BAA; display: flex; align-items: center; justify-content: center;72    box-shadow: 0 2px 6px rgba(0,0,0,.5);73  }74  .check svg { width: 34px; height: 34px; fill: #DDE8FF; }75 76  /* Bottom actions behind dialog */77  .bottom-actions {78    position: absolute; bottom: 120px; left: 0; right: 0;79    display: flex; gap: 30px; padding: 0 40px; justify-content: space-between;80  }81  .action-btn {82    flex: 1; height: 140px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 18px;83    font-size: 44px; letter-spacing: .2px;84  }85  .action-btn.outlined {86    border: 3px solid #5D78B7; color: #BFD0FF; background: transparent;87  }88  .action-btn.solid {89    background: #3E58A8; color: #EAF0FF;90  }91  .action-btn svg { width: 56px; height: 56px; fill: currentColor; opacity: .95; }92 93  /* Permission dialog */94  .dialog {95    position: absolute; left: 110px; right: 110px; bottom: 520px;96    background: #1C1C1E; color: #F5F5F5;97    border-radius: 36px; padding: 48px 56px 36px;98    box-shadow: 0 30px 80px rgba(0,0,0,0.6);99  }100  .dialog .title {101    font-size: 56px; font-weight: 800; margin: 0 0 32px 0;102  }103  .preview-row {104    display: flex; gap: 26px; margin: 10px 0 34px 0;105  }106  .preview {107    width: 240px; height: 180px; border-radius: 18px; overflow: hidden;108  }109  .dialog-actions {110    display: flex; justify-content: flex-end; gap: 68px; margin-top: 8px;111    font-size: 44px;112  }113  .dialog-actions .ghost { color: #CFD8FF; opacity: .9; }114  .dialog-actions .primary { color: #DDE6FF; font-weight: 600; }115 116  /* Nav pill */117  .nav-pill {118    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);119    width: 220px; height: 10px; background: #E7E7E7; border-radius: 10px; opacity: .9;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status Bar -->127  <div class="status-bar">128    <div class="status-left">6:15</div>129    <div class="status-right">130      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">131        <circle cx="12" cy="12" r="10" fill="#FFFFFFAA"></circle>132      </svg>133      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">134        <path fill="#FFFFFFAA" d="M2 18h20L12 6z"></path>135      </svg>136      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">137        <circle cx="10" cy="10" r="6" fill="none" stroke="#FFFFFFAA" stroke-width="3"></circle>138        <path d="M15.5 15.5l4 4" stroke="#FFFFFFAA" stroke-width="3" stroke-linecap="round"></path>139      </svg>140      <div class="battery">141        <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">142          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#FFFFFFAA"></rect>143          <rect x="20" y="10" width="2" height="4" fill="#FFFFFFAA"></rect>144        </svg>145        100%146      </div>147    </div>148  </div>149 150  <!-- Selection Row -->151  <div class="selection-row">152    <div class="x">×</div>153    <div class="count">2</div>154  </div>155 156  <!-- Gallery Content -->157  <div class="sections">158    <div class="section-title">September</div>159    <div class="grid">160      <div class="thumb">161        <div class="img">[IMG: Yellow water bottle]</div>162      </div>163      <div class="thumb">164        <div class="img">[IMG: City view from window]</div>165      </div>166      <div class="thumb">167        <div class="img">[IMG: Office plant near window]</div>168        <div class="check">169          <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 2-2 1 1 6-6 2 2z"/></svg>170        </div>171      </div>172      <div class="thumb">173        <div class="img">[IMG: Plants on white pot]</div>174      </div>175    </div>176 177    <div class="section-title">August</div>178    <div class="grid">179      <div class="thumb">180        <div class="img">[IMG: Whiteboard with small UI]</div>181      </div>182      <div class="thumb">183        <div class="img">[IMG: Line sketch]</div>184      </div>185      <div class="thumb">186        <div class="img">[IMG: Red scribble]</div>187      </div>188    </div>189 190    <div class="section-title">July</div>191    <div class="grid">192      <div class="thumb">193        <div class="img">[IMG: Landscape view]</div>194      </div>195      <div class="thumb">196        <div class="img">[IMG: Plant close-up]</div>197        <div class="check">198          <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 2-2 1 1 6-6 2 2z"/></svg>199        </div>200      </div>201      <div class="thumb">202        <div class="img">[IMG: Desk snapshot]</div>203      </div>204    </div>205  </div>206 207  <!-- Bottom actions (behind dialog) -->208  <div class="bottom-actions">209    <div class="action-btn outlined">210      <svg viewBox="0 0 24 24" aria-hidden="true">211        <rect x="4" y="4" width="12" height="12" rx="2" ry="2"></rect>212        <rect x="8" y="8" width="12" height="12" rx="2" ry="2"></rect>213      </svg>214      Copy215    </div>216    <div class="action-btn solid">217      <svg viewBox="0 0 24 24" aria-hidden="true">218        <path d="M3 5h10v6h6v8H3z"></path>219        <path d="M13 5l6 6h-6z" fill="#ffffff"></path>220      </svg>221      Move222    </div>223  </div>224 225  <!-- Permission dialog -->226  <div class="dialog">227    <div class="title">Allow Gallery to modify 2 photos?</div>228    <div class="preview-row">229      <div class="preview">230        <div class="img">[IMG: Plant in white pot]</div>231      </div>232      <div class="preview">233        <div class="img">[IMG: Plant near window]</div>234      </div>235    </div>236    <div class="dialog-actions">237      <div class="ghost">Deny</div>238      <div class="primary">Allow</div>239    </div>240  </div>241 242  <!-- Navigation pill -->243  <div class="nav-pill"></div>244</div>245</body>246</html>