GD-ML/AndroidCode
13.4k
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 - New Album Modal</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: #000000;13 border-radius: 24px;14 box-shadow: 0 20px 60px rgba(0,0,0,0.35);15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute; top: 0; left: 0; width: 100%; height: 96px;22 background: #000;23 display: flex; align-items: center; justify-content: space-between;24 padding: 0 28px; box-sizing: border-box; font-weight: 500;25 font-size: 34px;26 }27 .status-icons { display: flex; align-items: center; gap: 26px; }28 .icon-dot { width: 14px; height: 14px; background: #d6d6d6; border-radius: 50%; opacity: 0.85; }29 .icon-wifi, .icon-battery, .icon-dnd {30 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;31 }32 .icon-wifi svg, .icon-battery svg, .icon-dnd svg { fill: none; stroke: #fff; stroke-width: 3; }33 34 /* Top action bar */35 .top-bar {36 position: absolute; top: 96px; left: 0; width: 100%; height: 140px;37 background: #0f0f0f; display: flex; align-items: center;38 padding: 0 36px; box-sizing: border-box;39 border-bottom: 1px solid #1b1b1b;40 }41 .close-btn {42 width: 64px; height: 64px; border-radius: 32px;43 display: inline-flex; align-items: center; justify-content: center;44 margin-right: 22px;45 }46 .close-btn svg { width: 36px; height: 36px; stroke: #bdbdbd; stroke-width: 4; }47 .selected-text { font-size: 46px; font-weight: 600; color: #eaeaea; }48 49 /* Gallery grid */50 .grid {51 position: absolute; top: 236px; left: 0; width: 100%;52 padding: 22px; box-sizing: border-box;53 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;54 }55 .tile {56 position: relative; height: 260px; background: #E0E0E0;57 border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;58 color: #757575; font-size: 28px; border-radius: 10px; overflow: hidden;59 }60 .check-overlay {61 position: absolute; top: 12px; right: 12px;62 width: 56px; height: 56px; border-radius: 10px;63 background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.35);64 display: flex; align-items: center; justify-content: center;65 }66 .check-overlay svg { width: 34px; height: 34px; fill: none; stroke: #d5f5d5; stroke-width: 5; }67 68 /* Bottom actions */69 .bottom-actions {70 position: absolute; top: 1200px; left: 0; width: 100%; height: 160px;71 background: #101010; border-top: 1px solid #1b1b1b;72 display: flex; align-items: center; justify-content: space-around;73 color: #dcdcdc;74 }75 .action-item { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 28px; }76 .action-item svg { width: 64px; height: 64px; fill: none; stroke: #dcdcdc; stroke-width: 4; }77 78 /* Ad banner */79 .ad-banner {80 position: absolute; top: 1360px; left: 0; width: 100%; height: 140px;81 background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;82 display: flex; align-items: center; justify-content: center; gap: 16px;83 color: #444; font-size: 32px; box-sizing: border-box; padding: 0 24px;84 }85 .ad-close {86 position: absolute; right: 22px; top: 22px;87 width: 42px; height: 42px; border-radius: 21px;88 display: flex; align-items: center; justify-content: center;89 background: rgba(0,0,0,0.1);90 border: 1px solid #BDBDBD;91 }92 .ad-close svg { width: 22px; height: 22px; stroke: #666; stroke-width: 4; }93 94 /* Keyboard (with suggestion bar inside) */95 .keyboard {96 position: absolute; top: 1500px; left: 0; width: 100%; height: 900px;97 background: #0e0e0e; box-sizing: border-box; padding: 12px 18px 24px;98 display: flex; flex-direction: column; gap: 12px;99 border-top: 1px solid #1b1b1b;100 }101 .suggestions {102 height: 90px; background: #121212; border-radius: 16px;103 display: flex; align-items: center; padding: 0 24px; gap: 26px;104 color: #e8e8e8; font-size: 34px;105 }106 .suggestion-pill {107 background: #1a1a1a; border: 1px solid #2a2a2a; color: #e8e8e8;108 padding: 10px 24px; border-radius: 18px;109 }110 .key-row { display: flex; gap: 12px; justify-content: center; }111 .key {112 height: 120px; min-width: 88px;113 background: #1b1b1b; color: #e6e6e6;114 border-radius: 22px; display: flex; align-items: center; justify-content: center;115 font-size: 40px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);116 }117 .key.wide { min-width: 220px; }118 .key.space { min-width: 520px; }119 .key.green { background: #b9f5c4; color: #072b12; font-weight: 600; }120 .key.icon svg { width: 38px; height: 38px; stroke: #e6e6e6; fill: none; stroke-width: 4; }121 .gesture-bar {122 width: 200px; height: 10px; background: #ffffff; border-radius: 6px;123 opacity: 0.8; align-self: center; margin-top: auto;124 }125 126 /* Modal overlay */127 .overlay {128 position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 9;129 display: flex; align-items: center; justify-content: center;130 }131 .dialog {132 width: 920px; background: #2b2b2b; border-radius: 36px;133 box-shadow: 0 12px 40px rgba(0,0,0,0.45);134 padding: 40px 44px; box-sizing: border-box;135 }136 .dialog-title { font-size: 44px; font-weight: 600; margin-bottom: 40px; color: #ffffff; }137 .input-line {138 font-size: 40px; color: #ffffff; padding-bottom: 18px;139 border-bottom: 3px solid #9e9e9e; margin-bottom: 36px;140 display: flex; align-items: baseline; gap: 6px;141 }142 .caret { width: 2px; height: 44px; background: #7ee08f; animation: blink 1s infinite; }143 @keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }144 .dialog-actions {145 display: flex; justify-content: space-between; align-items: center;146 font-size: 40px; color: #ffffff;147 }148 .action-text { opacity: 0.95; }149 .action-right { text-transform: lowercase; }150 151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status bar -->157 <div class="status-bar">158 <div>2:06</div>159 <div class="status-icons">160 <div class="icon-dnd">161 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="7" y1="12" x2="17" y2="12"></line></svg>162 </div>163 <div class="icon-wifi">164 <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"></path><path d="M5 12c4-3 10-3 14 0"></path><path d="M8 15c3-2 5-2 8 0"></path><circle cx="12" cy="18" r="1.8"></circle></svg>165 </div>166 <div class="icon-battery">167 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="17" height="10" rx="2"></rect><rect x="21" y="10" width="2" height="4"></rect></svg>168 </div>169 </div>170 </div>171 172 <!-- Top action bar -->173 <div class="top-bar">174 <div class="close-btn">175 <svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>176 </div>177 <div class="selected-text">5 Selected</div>178 </div>179 180 <!-- Gallery grid -->181 <div class="grid">182 <div class="tile">183 [IMG: Road by greenery]184 <div class="check-overlay">185 <svg viewBox="0 0 24 24"><polyline points="4,13 10,18 20,6"></polyline></svg>186 </div>187 </div>188 <div class="tile">189 [IMG: Forest brush]190 <div class="check-overlay">191 <svg viewBox="0 0 24 24"><polyline points="4,13 10,18 20,6"></polyline></svg>192 </div>193 </div>194 <div class="tile">195 [IMG: Plant close-up]196 <div class="check-overlay">197 <svg viewBox="0 0 24 24"><polyline points="4,13 10,18 20,6"></polyline></svg>198 </div>199 </div>200 <div class="tile">[IMG: Forest hillside]</div>201 <div class="tile">[IMG: Desk with bag]</div>202 <div class="tile">[IMG: Person legs]</div>203 </div>204 205 <!-- Bottom actions -->206 <div class="bottom-actions">207 <div class="action-item">208 <svg viewBox="0 0 24 24"><path d="M4 12h9"></path><path d="M8 8l5 4-5 4"></path><rect x="14" y="6" width="6" height="12" rx="2"></rect></svg>209 <div>Share</div>210 </div>211 <div class="action-item">212 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 13H7L6 7z"></path><path d="M9 7V5h6v2"></path></svg>213 <div>Delete</div>214 </div>215 <div class="action-item">216 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="10" height="12" rx="2"></rect><rect x="10" y="4" width="10" height="12" rx="2" opacity="0.7"></rect></svg>217 <div>Copy</div>218 </div>219 <div class="action-item">220 <svg viewBox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 6l6 6-6 6"></path></svg>221 <div>Move</div>222 </div>223 </div>224 225 <!-- Ad banner -->226 <div class="ad-banner">227 <div>[IMG: Advertisement Banner]</div>228 <div class="ad-close">229 <svg viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg>230 </div>231 </div>232 233 <!-- Keyboard with suggestions -->234 <div class="keyboard">235 <div class="suggestions">236 <div class="suggestion-pill">Images</div>237 <div class="suggestion-pill">Image's</div>238 <div class="suggestion-pill">Imaged</div>239 </div>240 241 <div class="key-row" style="margin-top: 6px;">242 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>243 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>244 </div>245 <div class="key-row">246 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>247 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>248 </div>249 <div class="key-row">250 <div class="key icon">251 <svg viewBox="0 0 24 24"><path d="M12 19V5"></path><path d="M7 10l5-5 5 5"></path></svg>252 </div>253 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>254 <div class="key icon">255 <svg viewBox="0 0 24 24"><path d="M4 12h16"></path><path d="M14 7l5 5-5 5"></path></svg>256 </div>257 </div>258 <div class="key-row">259 <div class="key green wide">?123</div>260 <div class="key">,</div>261 <div class="key">😊</div>262 <div class="key space"> </div>263 <div class="key">.</div>264 <div class="key green">↩</div>265 </div>266 <div class="gesture-bar"></div>267 </div>268 269 <!-- Modal overlay -->270 <div class="overlay">271 <div class="dialog">272 <div class="dialog-title">New album</div>273 <div class="input-line">274 <div>Forest Images</div>275 <div class="caret"></div>276 </div>277 <div class="dialog-actions">278 <div class="action-text">Cancel</div>279 <div class="action-text action-right">ok</div>280 </div>281 </div>282 </div>283 284</div>285</body>286</html>