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 - Move to Album</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  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 30px;21    color: #eaeaea;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 40px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .dot { width: 12px; height: 12px; background: #eaeaea; border-radius: 50%; display: inline-block; opacity: 0.8; }34 35  /* Header - selection */36  .selection-header {37    height: 120px;38    display: flex;39    align-items: center;40    padding: 0 40px;41    color: #9e9e9e;42    gap: 26px;43  }44  .selection-header .title {45    font-size: 56px;46    font-weight: 600;47    color: #bdbdbd;48    letter-spacing: 0.3px;49  }50  .icon-btn {51    width: 72px;52    height: 72px;53    display: inline-flex;54    align-items: center;55    justify-content: center;56    opacity: 0.8;57  }58 59  /* Grid */60  .grid {61    padding: 0 24px;62    display: grid;63    grid-template-columns: repeat(3, 1fr);64    grid-gap: 24px;65  }66  .thumb {67    position: relative;68    height: 330px;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    display: flex;72    justify-content: center;73    align-items: center;74    color: #757575;75    font-size: 32px;76    overflow: hidden;77  }78  .check {79    position: absolute;80    top: 14px;81    right: 14px;82    width: 64px;83    height: 64px;84    border-radius: 8px;85    background: rgba(0,0,0,0.35);86    border: 2px solid rgba(255,255,255,0.6);87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .check svg { width: 40px; height: 40px; }92 93  /* Bottom action bar */94  .bottom-actions {95    position: absolute;96    left: 0;97    right: 0;98    bottom: 270px; /* sits above ad banner */99    height: 220px;100    display: flex;101    justify-content: space-around;102    align-items: center;103    color: #9e9e9e;104  }105  .action {106    width: 180px;107    display: flex;108    flex-direction: column;109    align-items: center;110    gap: 18px;111    font-size: 36px;112  }113  .action svg { width: 60px; height: 60px; opacity: 0.85; }114 115  /* Ad banner */116  .ad-banner {117    position: absolute;118    left: 0;119    bottom: 90px;120    width: 1080px;121    height: 160px;122    background: #E0E0E0;123    border-top: 1px solid #BDBDBD;124    border-bottom: 1px solid #BDBDBD;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #757575;129    font-size: 40px;130  }131 132  /* Gesture pill */133  .gesture {134    position: absolute;135    left: 50%;136    bottom: 26px;137    transform: translateX(-50%);138    width: 210px;139    height: 14px;140    background: #e6e6e6;141    border-radius: 8px;142    opacity: 0.9;143  }144 145  /* Modal card */146  .modal {147    position: absolute;148    left: 40px;149    bottom: 560px;150    width: 1000px;151    height: 1200px;152    background: #262626;153    border-radius: 36px;154    box-shadow: 0 30px 110px rgba(0,0,0,0.7);155    color: #ffffff;156    overflow: hidden;157  }158  .modal-header {159    display: flex;160    justify-content: space-between;161    align-items: center;162    padding: 46px 46px 20px 46px;163  }164  .modal-title {165    font-size: 56px;166    font-weight: 600;167    letter-spacing: 0.3px;168  }169  .plus-btn {170    width: 88px;171    height: 88px;172    display: inline-flex;173    align-items: center;174    justify-content: center;175  }176  .modal-body {177    padding: 24px 46px;178    height: 860px;179  }180  .modal-footer {181    position: absolute;182    left: 0;183    right: 0;184    bottom: 34px;185    display: flex;186    justify-content: center;187  }188  .primary-btn {189    width: 640px;190    height: 124px;191    background: #3b74f2;192    color: #ffffff;193    border-radius: 62px;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 44px;198    font-weight: 600;199    letter-spacing: 0.2px;200    box-shadow: 0 8px 20px rgba(59,116,242,0.35);201  }202</style>203</head>204<body>205<div id="render-target">206  <!-- Status bar -->207  <div class="status-bar">208    <div class="time">2:04</div>209    <div class="status-icons">210      <!-- simple icons -->211      <svg viewBox="0 0 24 24" width="48" height="48" fill="#eaeaea"><path d="M12 2l10 8h-3v10H5V10H2l10-8z"/></svg>212      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#eaeaea" stroke-width="2"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h10"/></svg>213      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M2 8l10 6 10-6"/><path d="M2 16l10 6 10-6"/></svg>214      <span class="dot"></span>215    </div>216  </div>217 218  <!-- Selection header -->219  <div class="selection-header">220    <div class="icon-btn">221      <svg viewBox="0 0 24 24" width="64" height="64" stroke="#9e9e9e" stroke-width="2" fill="none">222        <path d="M4 4L20 20M20 4L4 20"/>223      </svg>224    </div>225    <div class="title">5 Selected</div>226  </div>227 228  <!-- Grid of thumbnails -->229  <div class="grid" style="margin-top: 10px;">230    <div class="thumb">231      [IMG: Photo]232      <div class="check">233        <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>234      </div>235    </div>236    <div class="thumb">237      [IMG: Photo]238      <div class="check">239        <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>240      </div>241    </div>242    <div class="thumb">243      [IMG: Photo]244      <div class="check">245        <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>246      </div>247    </div>248    <div class="thumb">[IMG: Photo]</div>249    <div class="thumb">[IMG: Photo]</div>250    <div class="thumb">[IMG: Photo]</div>251  </div>252 253  <!-- Modal card -->254  <div class="modal">255    <div class="modal-header">256      <div class="modal-title">Move to</div>257      <div class="plus-btn">258        <svg viewBox="0 0 24 24" width="72" height="72" stroke="#3b74f2" stroke-width="3" fill="none" stroke-linecap="round">259          <path d="M12 5v14M5 12h14"/>260        </svg>261      </div>262    </div>263    <div class="modal-body">264      <!-- empty area to mimic list content -->265    </div>266    <div class="modal-footer">267      <div class="primary-btn">Move to Album</div>268    </div>269  </div>270 271  <!-- Bottom actions -->272  <div class="bottom-actions">273    <div class="action">274      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">275        <circle cx="6" cy="12" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="12" r="2"/>276        <path d="M7.7 10.7l3.6-3.6M12.7 7.7l3.6 3.6"/>277      </svg>278      <div>Share</div>279    </div>280    <div class="action">281      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">282        <path d="M6 7h12l-1 14H7L6 7z"/><path d="M9 7V5h6v2"/>283      </svg>284      <div>Delete</div>285    </div>286    <div class="action">287      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">288        <rect x="5" y="7" width="12" height="12" rx="2"/>289        <path d="M9 5h8v8"/>290      </svg>291      <div>Copy</div>292    </div>293    <div class="action">294      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">295        <path d="M4 12h12"/><path d="M10 6l6 6-6 6"/>296      </svg>297      <div>Move</div>298    </div>299  </div>300 301  <!-- Ad banner -->302  <div class="ad-banner">[IMG: Promotional Banner Ad]</div>303 304  <!-- Gesture indicator -->305  <div class="gesture"></div>306</div>307</body>308</html>