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>Trash Confirmation UI</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: #0E0F12;13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;14    color: #EAEAEA;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 96px;21    display: flex; align-items: center;22    padding: 0 36px;23    color: #DADADA; font-size: 36px; letter-spacing: 0.5px;24  }25  .status-bar .right {26    margin-left: auto; display: flex; align-items: center; gap: 24px;27  }28  .status-icon svg { width: 42px; height: 42px; stroke: #DADADA; fill: none; opacity: 0.9; }29 30  /* Top action/selection bar */31  .action-bar {32    position: absolute; top: 96px; left: 0; right: 0;33    height: 132px; display: flex; align-items: center;34    padding: 0 30px;35    background: #121317;36    border-bottom: 1px solid rgba(255,255,255,0.06);37  }38  .action-left { display: flex; align-items: center; gap: 24px; }39  .action-left .close-btn svg { width: 56px; height: 56px; stroke: #EAEAEA; }40  .action-title { font-size: 40px; font-weight: 600; color: #EAEAEA; }41 42  .action-right {43    margin-left: auto; display: flex; align-items: center; gap: 36px;44  }45  .action-right .icon-btn svg { width: 56px; height: 56px; stroke: #EAEAEA; fill: none; opacity: 0.9; }46  .action-right .trash svg { fill: none; }47  .overflow-dots { display: inline-flex; flex-direction: column; gap: 8px; }48  .overflow-dots span {49    width: 10px; height: 10px; border-radius: 50%;50    background: #DADADA; display: block;51  }52 53  /* File item card */54  .content {55    position: absolute; top: 260px; left: 30px; right: 30px;56  }57  .file-card {58    height: 180px; border-radius: 28px;59    background: #1C1F24; display: flex; align-items: center;60    padding: 24px; gap: 28px; color: #F5F5F5;61  }62  .thumbnail {63    width: 120px; height: 120px; border-radius: 16px;64    background: #E0E0E0; border: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center;66    color: #757575; font-size: 24px;67  }68  .file-info { flex: 1; }69  .file-title { font-size: 40px; font-weight: 600; }70  .file-meta { margin-top: 8px; font-size: 30px; color: #A8ADB4; }71  .checkmark {72    width: 64px; height: 64px; border-radius: 50%;73    background: #2A2E34; border: 2px solid #4D5560;74    display: flex; align-items: center; justify-content: center;75  }76  .checkmark svg { width: 38px; height: 38px; fill: none; stroke: #8AB4F8; stroke-width: 6; }77 78  /* Bottom sheet */79  .bottom-sheet {80    position: absolute; left: 0; right: 0; bottom: 70px;81    height: 620px; background: #161A1F;82    border-top-left-radius: 24px; border-top-right-radius: 24px;83    box-shadow: 0 -10px 20px rgba(0,0,0,0.4);84    padding: 60px 48px;85    text-align: center;86  }87  .sheet-icon {88    width: 120px; height: 120px; margin: 0 auto 34px auto;89    display: flex; align-items: center; justify-content: center;90  }91  .sheet-icon svg { width: 100%; height: 100%; fill: #D0D3D7; }92  .sheet-title { font-size: 44px; font-weight: 600; margin-bottom: 20px; color: #EAEAEA; }93  .sheet-desc { font-size: 30px; line-height: 42px; color: #AAB0B6; max-width: 900px; margin: 0 auto 48px auto; }94 95  .cta-btn {96    width: 984px; height: 116px; margin: 0 auto;97    background: #BBD1FF; color: #0F1220;98    border-radius: 28px; font-size: 36px; font-weight: 600;99    display: flex; align-items: center; justify-content: center; gap: 24px;100  }101  .cta-btn .btn-icon { width: 48px; height: 48px; }102  .cta-btn .btn-icon svg { width: 100%; height: 100%; fill: none; stroke: #0F1220; stroke-width: 6; }103 104  /* Navigation pill */105  .nav-pill {106    position: absolute; bottom: 16px; left: 50%;107    transform: translateX(-50%);108    width: 220px; height: 14px; background: #FFFFFF;109    border-radius: 10px; opacity: 0.95;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div class="left">10:47</div>119    <div class="right">120      <div class="status-icon">121        <!-- Wifi -->122        <svg viewBox="0 0 24 24">123          <path d="M2 8c5-4 15-4 20 0" stroke-width="2" />124          <path d="M5 11c4-3 10-3 14 0" stroke-width="2" />125          <path d="M8 14c3-2 7-2 10 0" stroke-width="2" />126          <circle cx="12" cy="18" r="1.6" fill="#DADADA"></circle>127        </svg>128      </div>129      <div class="status-icon">130        <!-- Battery -->131        <svg viewBox="0 0 26 24">132          <rect x="1" y="5" width="20" height="14" rx="3" stroke-width="2"></rect>133          <rect x="4" y="8" width="14" height="8" fill="#DADADA"></rect>134          <rect x="21.5" y="9" width="3.5" height="6" rx="1" fill="#DADADA"></rect>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Action bar -->141  <div class="action-bar">142    <div class="action-left">143      <div class="close-btn">144        <svg viewBox="0 0 24 24">145          <path d="M5 5L19 19M19 5L5 19" stroke-width="2"></path>146        </svg>147      </div>148      <div class="action-title">1 selected</div>149    </div>150    <div class="action-right">151      <!-- Share -->152      <div class="icon-btn">153        <svg viewBox="0 0 24 24">154          <circle cx="5" cy="12" r="2"></circle>155          <circle cx="19" cy="5" r="2"></circle>156          <circle cx="19" cy="19" r="2"></circle>157          <path d="M6.7 11.3L17.5 6.5M6.7 12.7L17.5 17.5" stroke-width="2"></path>158        </svg>159      </div>160      <!-- Trash -->161      <div class="icon-btn trash">162        <svg viewBox="0 0 24 24">163          <path d="M3 6h18M9 6l1-2h4l1 2M6 6l1 14h10l1-14" stroke-width="2"></path>164        </svg>165      </div>166      <!-- Overflow -->167      <div class="overflow-dots">168        <span></span><span></span><span></span>169      </div>170    </div>171  </div>172 173  <!-- File card -->174  <div class="content">175    <div class="file-card">176      <div class="thumbnail">[IMG: File Thumbnail]</div>177      <div class="file-info">178        <div class="file-title">Doc X.jpg</div>179        <div class="file-meta">12.77 kB, Jul 7</div>180      </div>181      <div class="checkmark">182        <svg viewBox="0 0 24 24">183          <path d="M5 13l4 4 10-10"></path>184        </svg>185      </div>186    </div>187  </div>188 189  <!-- Bottom sheet -->190  <div class="bottom-sheet">191    <div class="sheet-icon">192      <svg viewBox="0 0 64 64">193        <rect x="16" y="22" width="32" height="34" rx="6" fill="#D0D3D7"></rect>194        <rect x="18" y="16" width="28" height="8" rx="3" fill="#D0D3D7"></rect>195        <rect x="26" y="12" width="12" height="6" rx="2" fill="#D0D3D7"></rect>196      </svg>197    </div>198    <div class="sheet-title">Files will move to Trash</div>199    <div class="sheet-desc">200      Files in Trash haven’t been permanently deleted from your device.201      You can restore them for up to 30 days.202    </div>203    <div class="cta-btn">204      <div class="btn-icon">205        <svg viewBox="0 0 24 24">206          <path d="M3 6h18M9 6l1-2h4l1 2M6 6l1 14h10l1-14"></path>207        </svg>208      </div>209      <span>Move 1 file to Trash</span>210    </div>211  </div>212 213  <!-- Navigation pill -->214  <div class="nav-pill"></div>215 216</div>217</body>218</html>