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 Delete Prompt</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0C0C0C; border-radius: 38px;13    box-shadow: 0 20px 60px rgba(0,0,0,0.35);14    color: #fff;15  }16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0; height: 96px;18    padding: 0 24px;19    display: flex; align-items: center; justify-content: space-between;20    font-weight: 600; font-size: 36px;21    color: #EDEDED;22  }23  .status-icons { display: flex; align-items: center; gap: 26px; }24  .top-action {25    position: absolute; top: 116px; left: 30px; right: 30px; height: 84px;26    display: flex; align-items: center; gap: 24px;27    color: #9AA0A6; font-size: 54px; font-weight: 700; letter-spacing: 0.5px;28  }29  .grid {30    position: absolute; top: 220px; left: 24px; right: 24px;31    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;32    opacity: 0.55;33  }34  .photo {35    height: 330px; background: #E0E0E0; border: 1px solid #BDBDBD;36    display: flex; align-items: center; justify-content: center; color: #757575;37    font-size: 28px; font-weight: 600;38  }39  .scrim {40    position: absolute; inset: 0; background: rgba(0,0,0,0.35);41  }42  .modal {43    position: absolute; left: 120px; right: 120px; bottom: 600px;44    background: #202322; border-radius: 42px;45    padding: 48px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);46  }47  .modal h2 {48    margin: 0 0 30px 0; font-size: 56px; font-weight: 700; color: #F1F3F4;49    line-height: 1.1;50  }51  .thumbs { display: flex; gap: 28px; margin-bottom: 40px; }52  .thumb {53    width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;54    border-radius: 20px; display: flex; align-items: center; justify-content: center;55    color: #5F6368; font-size: 40px; font-weight: 700;56  }57  .modal-actions {58    display: flex; justify-content: flex-end; align-items: center; gap: 80px;59    font-size: 48px; font-weight: 700;60  }61  .action-link { color: #C9F7B3; cursor: pointer; }62  .toast {63    position: absolute; bottom: 360px; left: 50%; transform: translateX(-50%);64    background: #2A2A2A; border-radius: 44px; padding: 26px 34px;65    display: flex; align-items: center; gap: 22px;66    box-shadow: 0 10px 24px rgba(0,0,0,0.45);67    color: #FFFFFF; font-size: 40px; font-weight: 600;68  }69  .toast .icon {70    width: 64px; height: 64px; border-radius: 50%;71    background: #F7D96F; display: flex; align-items: center; justify-content: center;72    color: #1A1A1A; font-weight: 800;73  }74  .bottom-toolbar {75    position: absolute; left: 0; right: 0; bottom: 220px; height: 150px;76    display: flex; align-items: center; justify-content: space-around;77    color: #D0D0D0; font-size: 34px;78  }79  .tool { display: flex; flex-direction: column; align-items: center; gap: 18px; }80  .tool svg { width: 58px; height: 58px; stroke: #D0D0D0; fill: none; stroke-width: 2.2; }81  .ad-banner {82    position: absolute; left: 0; right: 0; bottom: 110px; height: 120px;83    background: #FFFFFF; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;84    display: flex; align-items: center; justify-content: center; color: #333; font-weight: 700;85  }86  .nav-pill {87    position: absolute; left: 50%; transform: translateX(-50%);88    bottom: 40px; width: 220px; height: 14px; border-radius: 14px; background: #FFFFFF;89    opacity: 0.9;90  }91  .x-icon {92    width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;93  }94  .x-icon svg { width: 58px; height: 58px; fill: none; stroke: #9AA0A6; stroke-width: 6; }95  .status-icons svg { width: 42px; height: 42px; fill: none; stroke: #EDEDED; stroke-width: 3; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status bar -->102  <div class="status-bar">103    <div>2:07</div>104    <div class="status-icons">105      <!-- Silent icon -->106      <svg viewBox="0 0 24 24"><path d="M3 9l5-4v14l-5-4M16 9l5-4v14l-5-4" opacity="0.6"/></svg>107      <!-- Wi-Fi -->108      <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M11 18l2 2"/></svg>109      <!-- Battery -->110      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>111      <!-- Settings dot -->112      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>113    </div>114  </div>115 116  <!-- Top action bar -->117  <div class="top-action">118    <div class="x-icon">119      <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20"/></svg>120    </div>121    <div>5 Selected</div>122  </div>123 124  <!-- Photos grid (dimmed) -->125  <div class="grid">126    <div class="photo">[IMG: Road]</div>127    <div class="photo">[IMG: Shrubs]</div>128    <div class="photo">[IMG: Plant Close-up]</div>129    <div class="photo">[IMG: Forest]</div>130    <div class="photo">[IMG: Trees]</div>131    <div class="photo">[IMG: Office Desk]</div>132  </div>133 134  <!-- Background scrim under modal -->135  <div class="scrim"></div>136 137  <!-- Delete permission modal -->138  <div class="modal">139    <h2>Allow Gallery to delete 5 photos?</h2>140    <div class="thumbs">141      <div class="thumb">[IMG: Road]</div>142      <div class="thumb">[IMG: Field]</div>143      <div class="thumb">+3</div>144    </div>145    <div class="modal-actions">146      <div class="action-link">Deny</div>147      <div class="action-link">Allow</div>148    </div>149  </div>150 151  <!-- Snack bar / toast -->152  <div class="toast">153    <div class="icon">G</div>154    <div>Album created</div>155  </div>156 157  <!-- Bottom toolbar -->158  <div class="bottom-toolbar">159    <div class="tool">160      <svg viewBox="0 0 24 24"><path d="M12 4l6 6-6 6M6 20v-4a6 6 0 016-6h6"/></svg>161      <div>Share</div>162    </div>163    <div class="tool">164      <svg viewBox="0 0 24 24"><path d="M4 7h16M7 7l1 13h8l1-13M9 7V5h6v2"/></svg>165      <div>Delete</div>166    </div>167    <div class="tool">168      <svg viewBox="0 0 24 24"><rect x="4" y="6" width="12" height="12" rx="2"/><path d="M16 8h4v12H10"/></svg>169      <div>Copy</div>170    </div>171    <div class="tool">172      <svg viewBox="0 0 24 24"><path d="M5 12h9M10 7l4 5-4 5"/><rect x="4" y="4" width="6" height="16" rx="2"/></svg>173      <div>Move</div>174    </div>175  </div>176 177  <!-- Advertisement banner -->178  <div class="ad-banner">179    <div style="width: 100%; max-width: 1000px; height: 90px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">180      [IMG: Advertisement banner]181    </div>182  </div>183 184  <!-- Navigation pill -->185  <div class="nav-pill"></div>186</div>187</body>188</html>