GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Gallery Delete Permission UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Roboto, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #000000;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    display: flex;29    align-items: center;30    padding: 0 28px;31    box-sizing: border-box;32    color: #ffffff;33    opacity: 0.95;34  }35  .status-bar .time {36    font-size: 34px;37    font-weight: 600;38    letter-spacing: 0.4px;39  }40  .status-bar .icons {41    margin-left: auto;42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .status-icon svg {47    width: 40px;48    height: 40px;49    fill: none;50    stroke: #ffffff;51    stroke-width: 2.5;52    opacity: 0.9;53  }54 55  /* Back arrow */56  .back-arrow {57    position: absolute;58    top: 170px;59    left: 32px;60    width: 60px;61    height: 60px;62    color: #B0B0B0;63  }64  .back-arrow svg {65    width: 60px;66    height: 60px;67    stroke: #B0B0B0;68    stroke-width: 6;69    fill: none;70    stroke-linecap: round;71    stroke-linejoin: round;72  }73 74  /* Main photo area (dimmed) */75  .photo-bg {76    position: absolute;77    top: 260px;78    left: 0;79    width: 1080px;80    height: 1400px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex;84    align-items: center;85    justify-content: center;86    color: #757575;87    font-size: 32px;88    letter-spacing: 0.3px;89  }90  .photo-dimmer {91    position: absolute;92    top: 260px;93    left: 0;94    width: 1080px;95    height: 1400px;96    background: rgba(0,0,0,0.55);97  }98 99  /* Permission dialog card */100  .dialog {101    position: absolute;102    left: 120px;103    top: 980px;104    width: 840px;105    background: #1E1F1D;106    border-radius: 48px;107    box-shadow: 0 20px 60px rgba(0,0,0,0.45);108    color: #ffffff;109    overflow: hidden;110  }111  .dialog .title {112    padding: 40px 48px 24px 48px;113    font-size: 54px;114    font-weight: 700;115    line-height: 1.22;116    color: #EDEDED;117  }118  .dialog .preview {119    width: 100%;120    height: 640px;121    background: #E0E0E0;122    border-top: 1px solid #2A2B29;123    border-bottom: 1px solid #2A2B29;124    display: flex;125    align-items: center;126    justify-content: center;127    color: #757575;128    font-size: 28px;129  }130  .dialog .actions {131    display: flex;132    justify-content: flex-end;133    gap: 60px;134    padding: 36px 52px 44px 52px;135    background: #1E1F1D;136  }137  .dialog .btn-text {138    font-size: 40px;139    font-weight: 600;140    color: #98E1A0; /* light green accent */141  }142 143  /* Bottom toolbar */144  .bottom-toolbar {145    position: absolute;146    left: 0;147    bottom: 340px;148    width: 100%;149    height: 120px;150    display: flex;151    align-items: center;152    justify-content: space-around;153    padding: 0 120px;154    box-sizing: border-box;155  }156  .toolbar-icon svg {157    width: 70px;158    height: 70px;159    stroke: #D9D9D9;160    stroke-width: 3.5;161    fill: none;162    opacity: 0.9;163  }164 165  /* Ad banner */166  .ad-banner {167    position: absolute;168    left: 0;169    bottom: 170px;170    width: 1080px;171    height: 140px;172    background: #FFFFFF;173    border-top: 1px solid #D0D0D0;174    border-bottom: 1px solid #D0D0D0;175    box-sizing: border-box;176    display: flex;177    align-items: center;178    padding: 0 28px;179    gap: 20px;180  }181  .ad-logo {182    width: 110px;183    height: 110px;184    background: #E0E0E0;185    border: 1px solid #BDBDBD;186    display: flex;187    align-items: center;188    justify-content: center;189    color: #757575;190    font-size: 22px;191  }192  .ad-text {193    font-size: 34px;194    color: #2E2E2E;195    line-height: 1.2;196  }197 198  /* Navigation pill */199  .nav-pill {200    position: absolute;201    left: 50%;202    bottom: 68px;203    transform: translateX(-50%);204    width: 220px;205    height: 12px;206    background: #FFFFFF;207    opacity: 0.95;208    border-radius: 8px;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div class="time">1:46</div>218    <div class="icons">219      <div class="status-icon">220        <!-- Do Not Disturb (moon-like) -->221        <svg viewBox="0 0 24 24">222          <path d="M12 2a9.9 9.9 0 0 0 0 20c-3.8-1.3-6.5-4.9-6.5-9.5S8.2 3.3 12 2z"></path>223        </svg>224      </div>225      <div class="status-icon">226        <!-- Wi-Fi -->227        <svg viewBox="0 0 24 24">228          <path d="M2 8c5-4 15-4 20 0"></path>229          <path d="M5 12c3.5-2.6 10.5-2.6 14 0"></path>230          <path d="M8 16c2-1.4 6-1.4 8 0"></path>231          <circle cx="12" cy="19" r="1.5" fill="#ffffff"></circle>232        </svg>233      </div>234      <div class="status-icon">235        <!-- Battery -->236        <svg viewBox="0 0 24 24">237          <rect x="2" y="6" width="18" height="12" rx="2"></rect>238          <rect x="21" y="10" width="2" height="4" rx="1"></rect>239          <rect x="4" y="8" width="12" height="8" fill="#ffffff" stroke="none"></rect>240        </svg>241      </div>242    </div>243  </div>244 245  <!-- Back arrow -->246  <div class="back-arrow">247    <svg viewBox="0 0 24 24">248      <path d="M15 5l-7 7 7 7"></path>249    </svg>250  </div>251 252  <!-- Large photo area behind dialog -->253  <div class="photo-bg">[IMG: Office desk with phones and cables]</div>254  <div class="photo-dimmer"></div>255 256  <!-- Permission dialog -->257  <div class="dialog">258    <div class="title">Allow Gallery to delete this photo?</div>259    <div class="preview">[IMG: Photo preview]</div>260    <div class="actions">261      <div class="btn-text">Deny</div>262      <div class="btn-text">Allow</div>263    </div>264  </div>265 266  <!-- Bottom toolbar icons -->267  <div class="bottom-toolbar">268    <div class="toolbar-icon">269      <!-- Heart outline -->270      <svg viewBox="0 0 24 24">271        <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6c2 0 3.2 1.1 4.2 2.4C12.9 7.1 14.1 6 16.2 6 19.5 6 21.5 9 21 12.5 19 16.5 12 21 12 21z"></path>272      </svg>273    </div>274    <div class="toolbar-icon">275      <!-- Share -->276      <svg viewBox="0 0 24 24">277        <circle cx="18" cy="5" r="3"></circle>278        <circle cx="6" cy="12" r="3"></circle>279        <circle cx="18" cy="19" r="3"></circle>280        <path d="M8.7 11l6.6-4M8.7 13l6.6 4"></path>281      </svg>282    </div>283    <div class="toolbar-icon">284      <!-- Trash -->285      <svg viewBox="0 0 24 24">286        <path d="M3 7h18"></path>287        <path d="M8 7V5h8v2"></path>288        <rect x="6" y="7" width="12" height="13" rx="2"></rect>289        <path d="M10 11v6M14 11v6"></path>290      </svg>291    </div>292    <div class="toolbar-icon">293      <!-- More (ellipsis) -->294      <svg viewBox="0 0 24 24">295        <circle cx="6" cy="12" r="2" fill="#D9D9D9" stroke="none"></circle>296        <circle cx="12" cy="12" r="2" fill="#D9D9D9" stroke="none"></circle>297        <circle cx="18" cy="12" r="2" fill="#D9D9D9" stroke="none"></circle>298      </svg>299    </div>300  </div>301 302  <!-- Ad banner -->303  <div class="ad-banner">304    <div class="ad-logo">[IMG]</div>305    <div class="ad-text">306      Unveil Organic India Now<br>307      Organic India Store - Sector 18, Noida308    </div>309  </div>310 311  <!-- Navigation pill -->312  <div class="nav-pill"></div>313</div>314</body>315</html>