GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Uploads Complete UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #0A0A0A;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    box-sizing: border-box;27  }28  .status-left { font-size: 40px; color: #E0E0E0; }29  .status-right { display: flex; align-items: center; gap: 26px; }30  .sb-icon {31    width: 40px; height: 40px; color: #E0E0E0;32    display: inline-flex; align-items: center; justify-content: center;33  }34  .battery { font-size: 34px; color: #E0E0E0; }35 36  /* Close label */37  .close-row {38    padding: 24px 36px 0 36px;39    font-size: 40px;40    color: #EAEAEA;41  }42 43  /* Header panel */44  .panel {45    margin: 24px 0 0 0;46    background: #1C1C1C;47    padding: 48px 36px 36px 36px;48    box-sizing: border-box;49    border-top: 1px solid #222;50    border-bottom: 1px solid #222;51  }52  .panel h1 {53    margin: 0 0 12px 0;54    font-size: 68px;55    font-weight: 300;56    color: #EDEDED;57  }58  .panel .sub {59    font-size: 36px;60    color: #A9A9A9;61    margin-bottom: 36px;62  }63  .actions {64    display: flex;65    gap: 24px;66  }67  .btn {68    height: 112px;69    padding: 0 40px;70    border-radius: 8px;71    font-size: 38px;72    display: inline-flex;73    align-items: center;74    justify-content: center;75    box-sizing: border-box;76    cursor: default;77  }78  .btn.primary {79    background: #0061FF;80    color: #FFFFFF;81    min-width: 380px;82    font-weight: 600;83  }84  .btn.secondary {85    background: #3A3A3A;86    color: #E0E0E0;87    min-width: 360px;88    font-weight: 600;89  }90 91  /* List */92  .list {93    padding: 24px 0 0 0;94  }95  .item {96    display: flex;97    align-items: center;98    justify-content: space-between;99    padding: 32px 36px;100    box-sizing: border-box;101    border-bottom: 1px solid #2A2A2A;102  }103  .item-left {104    display: flex;105    align-items: center;106    gap: 30px;107    min-width: 0;108  }109  .thumb {110    width: 104px;111    height: 104px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    color: #757575;115    display: flex;116    align-items: center;117    justify-content: center;118    font-size: 34px;119    border-radius: 8px;120    flex: 0 0 auto;121  }122  .info {123    display: flex;124    flex-direction: column;125    gap: 8px;126    min-width: 0;127  }128  .title {129    font-size: 38px;130    color: #F2F2F2;131    white-space: nowrap;132    overflow: hidden;133    text-overflow: ellipsis;134    max-width: 720px;135  }136  .subtitle {137    font-size: 32px;138    color: #9E9E9E;139  }140  .item-right {141    display: flex;142    align-items: center;143    gap: 28px;144    color: #BDBDBD;145  }146  .icon {147    font-size: 46px;148    line-height: 1;149  }150 151  /* Bottom home pill */152  .home-pill {153    position: absolute;154    bottom: 36px;155    left: 50%;156    transform: translateX(-50%);157    width: 360px;158    height: 18px;159    border-radius: 9px;160    background: rgba(255,255,255,0.75);161  }162</style>163</head>164<body>165<div id="render-target">166  <!-- Status bar -->167  <div class="status-bar">168    <div class="status-left">1:43</div>169    <div class="status-right">170      <div class="sb-icon">⦸</div>171      <div class="sb-icon">📶</div>172      <div class="sb-icon">🔔</div>173      <div class="battery">100%</div>174    </div>175  </div>176 177  <!-- Close -->178  <div class="close-row">Close</div>179 180  <!-- Header panel -->181  <div class="panel">182    <h1>Uploads complete</h1>183    <div class="sub">8 uploads complete</div>184    <div class="actions">185      <div class="btn primary">Upload photos</div>186      <div class="btn secondary">Upload file</div>187    </div>188  </div>189 190  <!-- List of uploaded items -->191  <div class="list">192    <div class="item">193      <div class="item-left">194        <div class="thumb">IMG</div>195        <div class="info">196          <div class="title">Diy tool kit.bin</div>197          <div class="subtitle">Uploaded to Dropbox</div>198        </div>199      </div>200      <div class="item-right">201        <span class="icon">🔗</span>202        <span class="icon">⋮</span>203      </div>204    </div>205 206    <div class="item">207      <div class="item-left">208        <div class="thumb">IMG</div>209        <div class="info">210          <div class="title">Diy tool kit</div>211          <div class="subtitle">Uploaded to Dropbox</div>212        </div>213      </div>214      <div class="item-right">215        <span class="icon">🔗</span>216        <span class="icon">⋮</span>217      </div>218    </div>219 220    <div class="item">221      <div class="item-left">222        <div class="thumb">PDF</div>223        <div class="info">224          <div class="title">0900766b81049498.pdf</div>225          <div class="subtitle">Uploaded to Dropbox</div>226        </div>227      </div>228      <div class="item-right">229        <span class="icon">🔗</span>230        <span class="icon">⋮</span>231      </div>232    </div>233 234    <div class="item">235      <div class="item-left">236        <div class="thumb">TXT</div>237        <div class="info">238          <div class="title">actuation_result.txt</div>239          <div class="subtitle">Uploaded to Dropbox</div>240        </div>241      </div>242      <div class="item-right">243        <span class="icon">🔗</span>244        <span class="icon">⋮</span>245      </div>246    </div>247 248    <div class="item">249      <div class="item-left">250        <div class="thumb">TXT</div>251        <div class="info">252          <div class="title">os_info.txt</div>253          <div class="subtitle">Uploaded to Dropbox</div>254        </div>255      </div>256      <div class="item-right">257        <span class="icon">🔗</span>258        <span class="icon">⋮</span>259      </div>260    </div>261 262    <div class="item">263      <div class="item-left">264        <div class="thumb">IMG</div>265        <div class="info">266          <div class="title">fitbitshare_1272361138.PNG</div>267          <div class="subtitle">Uploaded to Dropbox</div>268        </div>269      </div>270      <div class="item-right">271        <span class="icon">🔗</span>272        <span class="icon">⋮</span>273      </div>274    </div>275 276    <div class="item">277      <div class="item-left">278        <div class="thumb">PDF</div>279        <div class="info">280          <div class="title">Google Keep Document.pdf</div>281          <div class="subtitle">Uploaded to Dropbox</div>282        </div>283      </div>284      <div class="item-right">285        <span class="icon">🔗</span>286        <span class="icon">⋮</span>287      </div>288    </div>289 290    <div class="item">291      <div class="item-left">292        <div class="thumb">TXT</div>293        <div class="info">294          <div class="title">agents.txt</div>295          <div class="subtitle">Uploaded to Dropbox</div>296        </div>297      </div>298      <div class="item-right">299        <span class="icon">🔗</span>300        <span class="icon">⋮</span>301      </div>302    </div>303  </div>304 305  <div class="home-pill"></div>306</div>307</body>308</html>