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 Selection - New Album Dialog</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: #000;15    border-radius: 0;16    box-shadow: none;17    color: #fff;18  }19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 110px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-size: 42px;30  }31  .status-right {32    display: flex; align-items: center; gap: 26px;33  }34  /* Header */35  .header {36    position: absolute;37    top: 110px; left: 0; right: 0;38    height: 130px;39    display: flex; align-items: center;40    padding: 0 40px;41    color: #9e9e9e;42  }43  .header .title {44    font-size: 60px; font-weight: 600; margin-left: 24px;45  }46  .icon-btn {47    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;48  }49  /* Grid */50  .grid {51    position: absolute;52    top: 240px; left: 0; right: 0;53    padding: 28px;54    display: grid;55    grid-template-columns: repeat(3, 1fr);56    gap: 24px;57  }58  .tile {59    position: relative;60    height: 330px;61    border-radius: 14px;62    overflow: hidden;63  }64  .img-ph {65    width: 100%; height: 100%;66    background: #E0E0E0; border: 1px solid #BDBDBD;67    display: flex; align-items: center; justify-content: center;68    color: #757575; font-size: 34px;69  }70  .tile::after {71    content: "";72    position: absolute; inset: 0;73    background: rgba(0,0,0,0.35);74  }75  .check {76    position: absolute; top: 12px; right: 12px;77    width: 64px; height: 64px;78    background: rgba(255,255,255,0.08);79    border-radius: 12px;80    display: flex; align-items: center; justify-content: center;81    border: 2px solid rgba(255,255,255,0.35);82  }83  /* Bottom actions */84  .actions {85    position: absolute;86    bottom: 240px;87    left: 0; right: 0;88    height: 210px;89    display: flex;90    align-items: center;91    justify-content: space-around;92    color: #bdbdbd;93  }94  .action {95    display: flex; flex-direction: column; align-items: center; gap: 18px;96    font-size: 34px;97  }98  .action svg { width: 60px; height: 60px; opacity: 0.8; }99  /* Ad banner */100  .ad-banner {101    position: absolute;102    bottom: 120px; left: 0; right: 0;103    height: 140px;104    padding: 0 20px;105  }106  .ad-ph {107    width: 100%; height: 100%;108    background: #E0E0E0; border: 1px solid #BDBDBD;109    display: flex; align-items: center; justify-content: center;110    color: #757575; font-size: 36px;111  }112  /* Gesture bar */113  .gesture {114    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);115    width: 180px; height: 14px; border-radius: 8px; background: #6f6f6f;116    opacity: 0.7;117  }118  /* Overlay dialog */119  .overlay {120    position: absolute; inset: 0;121    background: rgba(0,0,0,0.55);122  }123  .dialog {124    position: absolute;125    left: 40px; right: 40px;126    bottom: 680px;127    background: #2b2b2b;128    border-radius: 26px;129    padding: 48px 44px;130    box-shadow: 0 12px 36px rgba(0,0,0,0.6);131  }132  .dialog h2 {133    margin: 0 0 36px 0;134    font-size: 48px; font-weight: 700; color: #f0f0f0;135  }136  .input {137    margin-top: 10px;138    font-size: 38px; color: #bdbdbd;139    padding: 22px 0;140    border-bottom: 3px solid #8e8e8e;141  }142  .dialog-actions {143    margin-top: 80px;144    display: flex; justify-content: space-between; align-items: center;145    font-size: 46px; color: #fff;146  }147  .btn-text { color: #ffffff; opacity: 0.95; }148</style>149</head>150<body>151<div id="render-target">152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="time">2:05</div>155    <div class="status-right">156      <!-- simple status icons -->157      <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="5" cy="12" r="3" fill="#fff"/><circle cx="12" cy="12" r="3" fill="#fff"/><circle cx="19" cy="12" r="3" fill="#fff"/></svg>158      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 17l9-10 9 10" stroke="#fff" stroke-width="2" fill="none"/></svg>159      <svg width="40" height="40" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"/><path d="M8 9h8v2H8z" fill="#fff"/></svg>160      <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="19" cy="12" r="2" fill="#fff"/></svg>161      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 10l6 6 12-12" stroke="#fff" stroke-width="2" fill="none"/></svg>162      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 18h20" stroke="#fff" stroke-width="2"/><path d="M18 6h0" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>163      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 18h8l2-10h6" stroke="#fff" stroke-width="2" fill="none"/></svg>164      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 12h14" stroke="#fff" stroke-width="2"/><path d="M19 8v8" stroke="#fff" stroke-width="2"/></svg>165    </div>166  </div>167 168  <!-- Header -->169  <div class="header">170    <div class="icon-btn">171      <svg width="64" height="64" viewBox="0 0 24 24">172        <path d="M4 4l16 16M20 4L4 20" stroke="#9e9e9e" stroke-width="3" stroke-linecap="round"/>173      </svg>174    </div>175    <div class="title">5 Selected</div>176  </div>177 178  <!-- Grid of images -->179  <div class="grid">180    <div class="tile">181      <div class="img-ph">[IMG: Road]</div>182      <div class="check">183        <svg width="40" height="40" viewBox="0 0 24 24">184          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>185          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>186        </svg>187      </div>188    </div>189    <div class="tile">190      <div class="img-ph">[IMG: Field]</div>191      <div class="check">192        <svg width="40" height="40" viewBox="0 0 24 24">193          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>194          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>195        </svg>196      </div>197    </div>198    <div class="tile">199      <div class="img-ph">[IMG: Plant Close-up]</div>200      <div class="check">201        <svg width="40" height="40" viewBox="0 0 24 24">202          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>203          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>204        </svg>205      </div>206    </div>207 208    <div class="tile">209      <div class="img-ph">[IMG: Forest]</div>210      <div class="check">211        <svg width="40" height="40" viewBox="0 0 24 24">212          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>213          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>214        </svg>215      </div>216    </div>217    <div class="tile">218      <div class="img-ph">[IMG: Trees]</div>219      <div class="check">220        <svg width="40" height="40" viewBox="0 0 24 24">221          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>222          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>223        </svg>224      </div>225    </div>226    <div class="tile">227      <div class="img-ph">[IMG: Office Desk]</div>228      <div class="check">229        <svg width="40" height="40" viewBox="0 0 24 24">230          <rect x="2" y="2" width="20" height="20" rx="4" stroke="#cfcfcf" stroke-width="2" fill="none"/>231          <path d="M6 12l4 4 8-8" stroke="#cfcfcf" stroke-width="2" fill="none"/>232        </svg>233      </div>234    </div>235  </div>236 237  <!-- Bottom actions -->238  <div class="actions">239    <div class="action">240      <svg viewBox="0 0 24 24">241        <path d="M12 5l4 4h-3v6h-2V9H8l4-4z" fill="#bdbdbd"/>242        <path d="M5 19h14v-3" stroke="#bdbdbd" stroke-width="2" fill="none"/>243      </svg>244      <div>Share</div>245    </div>246    <div class="action">247      <svg viewBox="0 0 24 24">248        <path d="M7 6h10l-1 14H8L7 6z" stroke="#bdbdbd" stroke-width="2" fill="none"/>249        <path d="M9 6V4h6v2" stroke="#bdbdbd" stroke-width="2"/>250      </svg>251      <div>Delete</div>252    </div>253    <div class="action">254      <svg viewBox="0 0 24 24">255        <rect x="6" y="6" width="12" height="12" rx="2" stroke="#bdbdbd" stroke-width="2" fill="none"/>256        <rect x="3" y="9" width="12" height="12" rx="2" stroke="#bdbdbd" stroke-width="2" fill="none"/>257      </svg>258      <div>Copy</div>259    </div>260    <div class="action">261      <svg viewBox="0 0 24 24">262        <path d="M4 12h12" stroke="#bdbdbd" stroke-width="2"/><path d="M12 7l5 5-5 5" stroke="#bdbdbd" stroke-width="2" fill="none"/>263      </svg>264      <div>Move</div>265    </div>266  </div>267 268  <!-- Ad banner -->269  <div class="ad-banner">270    <div class="ad-ph">[IMG: Ad Banner - UP TO 40% OFF]</div>271  </div>272 273  <!-- Gesture bar -->274  <div class="gesture"></div>275 276  <!-- Overlay and Dialog -->277  <div class="overlay"></div>278  <div class="dialog">279    <h2>New album</h2>280    <div class="input">Enter album name</div>281    <div class="dialog-actions">282      <div class="btn-text">Cancel</div>283      <div class="btn-text">ok</div>284    </div>285  </div>286</div>287</body>288</html>