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 Confirmation UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", "Inter", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #FFFFFF;34    box-sizing: border-box;35  }36  .status-bar .time {37    font-size: 40px;38    font-weight: 600;39    letter-spacing: 0.5px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 22px;45  }46  .status-icons svg {47    display: block;48  }49 50  /* Back arrow */51  .back-btn {52    position: absolute;53    top: 160px;54    left: 36px;55    width: 64px;56    height: 64px;57    display: flex;58    align-items: center;59    justify-content: center;60  }61  .back-btn svg {62    opacity: 0.85;63  }64 65  /* Main photo area */66  .photo {67    position: absolute;68    top: 380px;69    left: 60px;70    width: 960px;71    height: 1400px;72    background: #E0E0E0;73    border: 1px solid #BDBDBD;74    color: #757575;75    display: flex;76    align-items: center;77    justify-content: center;78    font-size: 34px;79    text-align: center;80    line-height: 1.3;81  }82 83  /* Modal card */84  .modal-card {85    position: absolute;86    left: 120px;87    top: 830px;88    width: 840px;89    height: 980px;90    border-radius: 44px;91    background: #2A2A2A;92    box-shadow: 0 40px 120px rgba(0,0,0,0.7);93    overflow: hidden;94  }95  .modal-top {96    padding: 56px 56px 40px 56px;97    color: #FFFFFF;98  }99  .modal-title {100    font-size: 56px;101    font-weight: 600;102    line-height: 1.2;103    letter-spacing: 0.2px;104  }105  .modal-img {106    margin: 0 56px;107    height: 480px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    color: #757575;111    display: flex;112    align-items: center;113    justify-content: center;114    font-size: 30px;115    border-radius: 12px;116  }117  .modal-actions {118    position: absolute;119    bottom: 0;120    left: 0;121    right: 0;122    height: 170px;123    padding: 0 84px;124    display: flex;125    align-items: center;126    justify-content: space-between;127    background: #1F1F1F;128    border-top-left-radius: 44px;129    border-top-right-radius: 44px;130  }131  .btn {132    background: transparent;133    border: none;134    font-size: 46px;135    font-weight: 500;136    color: #B7F5B7;137    padding: 18px 0;138    cursor: default;139  }140  .btn.deny { opacity: 0.95; }141  .btn.allow { opacity: 1; }142 143  /* Bottom toolbar */144  .bottom-toolbar {145    position: absolute;146    bottom: 320px;147    left: 0;148    width: 100%;149    height: 120px;150    display: flex;151    align-items: center;152    justify-content: center;153    gap: 160px;154  }155  .toolbar-icon svg {156    width: 64px;157    height: 64px;158  }159  .toolbar-icon path, .toolbar-icon circle {160    stroke: #CFCFCF;161    fill: none;162    stroke-width: 2.2;163  }164 165  /* Filmstrip thumbnails */166  .filmstrip {167    position: absolute;168    bottom: 160px;169    left: 0;170    width: 100%;171    height: 156px;172    padding: 0 20px;173    display: flex;174    align-items: center;175    gap: 16px;176    box-sizing: border-box;177  }178  .thumb {179    width: 140px;180    height: 140px;181    background: #E0E0E0;182    border: 1px solid #BDBDBD;183    color: #757575;184    font-size: 22px;185    display: flex;186    align-items: center;187    justify-content: center;188    border-radius: 8px;189    text-align: center;190    line-height: 1.2;191  }192  .ad-tile {193    position: relative;194  }195  .ad-close {196    position: absolute;197    top: -8px;198    right: -8px;199    width: 32px;200    height: 32px;201    border-radius: 16px;202    background: #87CEEB;203    color: #00334d;204    font-weight: 700;205    font-size: 22px;206    display: flex;207    align-items: center;208    justify-content: center;209  }210 211  /* Home indicator */212  .home-indicator {213    position: absolute;214    left: 50%;215    bottom: 54px;216    width: 240px;217    height: 12px;218    transform: translateX(-50%);219    background: rgba(255,255,255,0.85);220    border-radius: 8px;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status Bar -->228  <div class="status-bar">229    <div class="time">1:46</div>230    <div class="status-icons">231      <!-- Simple glyphs approximating the screenshot -->232      <!-- Gmail -->233      <svg width="40" height="40" viewBox="0 0 24 24">234        <path d="M3 5h18v14H3z" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>235        <path d="M3 5l9 7 9-7" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linecap="round"/>236      </svg>237      <!-- YouTube -->238      <svg width="40" height="40" viewBox="0 0 24 24">239        <rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>240        <path d="M10 9l6 3-6 3z" fill="#FFFFFF"/>241      </svg>242      <!-- Settings gear (simplified) -->243      <svg width="40" height="40" viewBox="0 0 24 24">244        <circle cx="12" cy="12" r="4.5" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>245        <path d="M12 3v3M21 12h-3M12 21v-3M3 12h3M5 5l2 2M19 5l-2 2M19 19l-2-2M5 19l2-2" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>246      </svg>247      <!-- Dot -->248      <svg width="16" height="16" viewBox="0 0 24 24">249        <circle cx="12" cy="12" r="3" fill="#FFFFFF"/>250      </svg>251      <!-- Notifications off (bell with slash) -->252      <svg width="40" height="40" viewBox="0 0 24 24">253        <path d="M12 3c-3 0-5 2.3-5 5.2V12l-2 2v1h14v-1l-2-2V8.2C17 5.3 15 3 12 3z" fill="none" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>254        <path d="M4 4l16 16" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round"/>255      </svg>256      <!-- Wi-Fi -->257      <svg width="40" height="40" viewBox="0 0 24 24">258        <path d="M3 9c4.5-4 13.5-4 18 0" stroke="#FFFFFF" stroke-width="1.8" fill="none" stroke-linecap="round"/>259        <path d="M6 12c3-2.7 9-2.7 12 0" stroke="#FFFFFF" stroke-width="1.8" fill="none" stroke-linecap="round"/>260        <circle cx="12" cy="16" r="1.6" fill="#FFFFFF"/>261      </svg>262      <!-- Battery -->263      <svg width="40" height="40" viewBox="0 0 24 24">264        <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>265        <rect x="19" y="10" width="2" height="4" fill="#FFFFFF"/>266      </svg>267    </div>268  </div>269 270  <!-- Back Arrow -->271  <div class="back-btn">272    <svg width="48" height="48" viewBox="0 0 24 24">273      <path d="M15 6l-9 6 9 6" stroke="#BDBDBD" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>274    </svg>275  </div>276 277  <!-- Main Photo -->278  <div class="photo">[IMG: Office desk with cables and smartphones]</div>279 280  <!-- Modal card asking for confirmation -->281  <div class="modal-card">282    <div class="modal-top">283      <div class="modal-title">Allow Gallery to delete this photo?</div>284    </div>285    <div class="modal-img">[IMG: Desk photo - cropped]</div>286    <div class="modal-actions">287      <button class="btn deny">Deny</button>288      <button class="btn allow">Allow</button>289    </div>290  </div>291 292  <!-- Bottom Toolbar -->293  <div class="bottom-toolbar">294    <div class="toolbar-icon">295      <!-- Heart outline -->296      <svg viewBox="0 0 24 24">297        <path d="M12 21s-6.5-4.4-8.5-7.2C1.5 11.3 3 8 6.3 8c2 0 3.3 1.2 3.7 2 0.4-0.8 1.7-2 3.7-2 3.3 0 4.8 3.3 2.8 5.8C18.5 16.6 12 21 12 21z"/>298      </svg>299    </div>300    <div class="toolbar-icon">301      <!-- Share -->302      <svg viewBox="0 0 24 24">303        <path d="M18 8l-6-5v4H8c-3 0-5 2.5-5 5.5V20h4v-7.5C7 11 8.3 10 10 10h2v4l6-6z"/>304      </svg>305    </div>306    <div class="toolbar-icon">307      <!-- Trash -->308      <svg viewBox="0 0 24 24">309        <path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12"/>310      </svg>311    </div>312    <div class="toolbar-icon">313      <!-- More (ellipsis) -->314      <svg viewBox="0 0 24 24">315        <circle cx="6" cy="12" r="2"/>316        <circle cx="12" cy="12" r="2"/>317        <circle cx="18" cy="12" r="2"/>318      </svg>319    </div>320  </div>321 322  <!-- Filmstrip thumbnails -->323  <div class="filmstrip">324    <div class="thumb">[IMG: Outfit]</div>325    <div class="thumb">[IMG: Dress]</div>326    <div class="thumb">[IMG: Kurta]</div>327    <div class="thumb">[IMG: Denim Jacket]</div>328    <div class="thumb">[IMG: Casual Shirt]</div>329    <div class="thumb">[IMG: Skirt Set]</div>330    <div class="thumb">[IMG: T-Shirt]</div>331    <div class="thumb ad-tile">332      <div class="thumb">[IMG: Ad Banner]</div>333      <div class="ad-close">×</div>334    </div>335  </div>336 337  <!-- Home Indicator -->338  <div class="home-indicator"></div>339 340</div>341</body>342</html>