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 - Share</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #111111; color: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 100px;17    background: #0c0c0c; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 28px;20    box-sizing: border-box;21  }22  .status-left { display: flex; align-items: center; gap: 16px; }23  .status-time { font-size: 36px; letter-spacing: 0.5px; }24  .status-right { display: flex; align-items: center; gap: 18px; font-size: 28px; color: #e6e6e6; opacity: 0.9; }25  .ico-s { width: 34px; height: 34px; fill: #e6e6e6; stroke: #e6e6e6; }26 27  /* Selection bar */28  .selection-bar {29    position: absolute; top: 100px; left: 0; width: 100%; height: 140px;30    background: #1b1b1b; color: #eaeaea;31    display: flex; align-items: center; justify-content: space-between;32    padding: 0 28px; box-sizing: border-box;33  }34  .sel-left { display: flex; align-items: center; gap: 24px; }35  .sel-right { display: flex; align-items: center; gap: 44px; }36  .ico-l { width: 56px; height: 56px; fill: none; stroke: #cfcfcf; stroke-width: 3; }37  .ico-action { width: 56px; height: 56px; fill: #cfcfcf; stroke: #cfcfcf; }38  .count { font-size: 52px; font-weight: 500; color: #f0f0f0; }39 40  /* Content area */41  .content {42    position: absolute; top: 240px; left: 0; right: 0; bottom: 260px;43    overflow: hidden;44  }45  .month {46    padding: 22px 30px 10px 30px; color: #b9b9b9; font-size: 42px; font-weight: 500;47  }48  .gallery {49    display: grid; grid-template-columns: repeat(4, 1fr);50    gap: 30px; padding: 0 30px; box-sizing: border-box;51  }52  .item {53    position: relative; height: 230px; border-radius: 6px; overflow: hidden;54    background: #E0E0E0; border: 1px solid #2b2b2b;55    display: flex; align-items: center; justify-content: center;56    color: #757575; font-size: 26px;57  }58  .item.selected .overlay {59    position: absolute; inset: 0; background: rgba(0,0,0,0.45);60    border-radius: 6px;61  }62  .check {63    position: absolute; top: 12px; left: 12px; width: 54px; height: 54px;64    border-radius: 50%;65    background: #2f3bff;66    display: flex; align-items: center; justify-content: center;67    box-shadow: 0 0 0 2px #111 inset;68  }69  .check svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }70 71  /* Share sheet */72  .share-sheet {73    position: absolute; left: 0; bottom: 0; width: 100%; height: 260px;74    background: #3f3f3f; border-top: 1px solid #2a2a2a;75    display: flex; align-items: center; justify-content: space-around;76    padding: 22px 0 26px; box-sizing: border-box;77  }78  .app {79    width: 180px; display: flex; flex-direction: column; align-items: center; color: #fff;80  }81  .icon-round {82    width: 120px; height: 120px; border-radius: 60px; background: #ffffff;83    display: flex; align-items: center; justify-content: center;84  }85  .icon-round svg { width: 64px; height: 64px; fill: #2c2c2c; stroke: #2c2c2c; }86  .app label { margin-top: 12px; font-size: 30px; color: #f5f5f5; }87 88  /* Gesture bar */89  .gesture {90    position: absolute; left: 50%; transform: translateX(-50%);91    bottom: 12px; width: 200px; height: 10px; background: #e7e7e7; border-radius: 10px;92    opacity: 0.9; z-index: 5;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Status bar -->100  <div class="status-bar">101    <div class="status-left">102      <div class="status-time">10:33</div>103    </div>104    <div class="status-right">105      <!-- Wi‑Fi -->106      <svg class="ico-s" viewBox="0 0 24 24">107        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>108        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>109        <path d="M9 16c3-2 5-2 6 0" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>110        <circle cx="12" cy="19" r="1.7" fill="#e6e6e6"/>111      </svg>112      <!-- Battery -->113      <svg class="ico-s" viewBox="0 0 28 24">114        <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#e6e6e6" stroke-width="2"/>115        <rect x="4" y="8" width="16" height="8" fill="#e6e6e6"/>116        <rect x="22" y="9" width="3" height="6" rx="1" fill="#e6e6e6"/>117      </svg>118      <div>100%</div>119    </div>120  </div>121 122  <!-- Selection bar -->123  <div class="selection-bar">124    <div class="sel-left">125      <svg class="ico-l" viewBox="0 0 24 24">126        <path d="M4 4L20 20M20 4L4 20"></path>127      </svg>128      <div class="count">5</div>129    </div>130    <div class="sel-right">131      <!-- Share icon -->132      <svg class="ico-action" viewBox="0 0 24 24">133        <circle cx="6" cy="12" r="2" />134        <circle cx="18" cy="6" r="2" />135        <circle cx="18" cy="18" r="2" />136        <path d="M8 12L16 7M8 12L16 17" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>137      </svg>138      <!-- Delete icon -->139      <svg class="ico-action" viewBox="0 0 24 24">140        <rect x="7" y="8" width="10" height="12" rx="1" />141        <path d="M5 8h14M9 8v10M15 8v10M9 5h6l1 3H8z" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>142      </svg>143      <!-- More (vertical dots) -->144      <svg class="ico-action" viewBox="0 0 24 24">145        <circle cx="12" cy="5" r="2"/>146        <circle cx="12" cy="12" r="2"/>147        <circle cx="12" cy="19" r="2"/>148      </svg>149    </div>150  </div>151 152  <!-- Content -->153  <div class="content">154    <div class="month">September</div>155    <div class="gallery">156      <!-- Row 1 -->157      <div class="item selected">158        <div>[IMG: Ornate hall interior]</div>159        <div class="overlay"></div>160        <div class="check">161          <svg viewBox="0 0 32 32"><path d="M7 17l6 6 12-14"/></svg>162        </div>163      </div>164      <div class="item selected">165        <div>[IMG: Castle at sunset]</div>166        <div class="overlay"></div>167        <div class="check">168          <svg viewBox="0 0 32 32"><path d="M7 17l6 6 12-14"/></svg>169        </div>170      </div>171      <div class="item selected">172        <div>[IMG: Dome by river]</div>173        <div class="overlay"></div>174        <div class="check">175          <svg viewBox="0 0 32 32"><path d="M7 17l6 6 12-14"/></svg>176        </div>177      </div>178      <div class="item selected">179        <div>[IMG: Bridge and museum]</div>180        <div class="overlay"></div>181        <div class="check">182          <svg viewBox="0 0 32 32"><path d="M7 17l6 6 12-14"/></svg>183        </div>184      </div>185 186      <!-- Row 2 -->187      <div class="item selected">188        <div>[IMG: City riverside]</div>189        <div class="overlay"></div>190        <div class="check">191          <svg viewBox="0 0 32 32"><path d="M7 17l6 6 12-14"/></svg>192        </div>193      </div>194      <!-- remaining cells intentionally left empty to match screenshot spacing -->195    </div>196  </div>197 198  <!-- Share sheet -->199  <div class="share-sheet">200    <div class="app">201      <div class="icon-round">202        <!-- Simple envelope for Gmail -->203        <svg viewBox="0 0 24 24">204          <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#2c2c2c" stroke-width="2"/>205          <path d="M3 7l9 6 9-6" fill="none" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round"/>206        </svg>207      </div>208      <label>Gmail</label>209    </div>210    <div class="app">211      <div class="icon-round">212        <!-- Chat bubble -->213        <svg viewBox="0 0 24 24">214          <path d="M4 5h16v10H9l-5 4V5z" />215        </svg>216      </div>217      <label>Messages</label>218    </div>219    <div class="app">220      <div class="icon-round">221        <!-- Bluetooth glyph -->222        <svg viewBox="0 0 24 24">223          <path d="M12 3v18l6-6-6-6 6-6-6 6-6-6 6 6-6 6 6-6" fill="none" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>224        </svg>225      </div>226      <label>Bluetooth</label>227    </div>228    <div class="app">229      <div class="icon-round">230        <!-- 3x3 grid for More -->231        <svg viewBox="0 0 24 24">232          <circle cx="6" cy="6" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="6" r="2"/>233          <circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>234          <circle cx="6" cy="18" r="2"/><circle cx="12" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>235        </svg>236      </div>237      <label>More</label>238    </div>239  </div>240 241  <!-- Gesture bar -->242  <div class="gesture"></div>243 244</div>245</body>246</html>