GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Downloads UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 90px;23    display: flex;24    align-items: center;25    padding: 0 36px;26    color: #EAEAEA;27    font-size: 36px;28    letter-spacing: 0.5px;29  }30  .status-bar .spacer { flex: 1; }31  .status-icon { width: 40px; height: 40px; margin-left: 22px; opacity: 0.85; }32 33  /* App bar */34  .app-bar {35    position: absolute;36    top: 90px;37    left: 0;38    width: 100%;39    height: 160px;40    display: flex;41    align-items: center;42    padding: 0 32px;43  }44  .app-title {45    font-size: 64px;46    font-weight: 600;47    margin-left: 28px;48  }49  .app-actions {50    margin-left: auto;51    display: flex;52    align-items: center;53    gap: 34px;54  }55  .icon-btn svg { width: 56px; height: 56px; opacity: 0.95; }56 57  /* Tabs */58  .tabs {59    position: absolute;60    top: 250px;61    left: 0;62    width: 100%;63    height: 110px;64    padding: 0 38px;65    display: flex;66    align-items: flex-end;67    box-sizing: border-box;68  }69  .tab {70    font-size: 48px;71    color: #99C1FF;72    font-weight: 600;73  }74  .tab-indicator {75    position: absolute;76    bottom: 0;77    left: 0;78    height: 10px;79    width: 100%;80    background: #1E88E5;81    opacity: 0.45;82  }83 84  /* Section heading */85  .section-title {86    position: absolute;87    top: 360px;88    left: 38px;89    font-size: 44px;90    color: #CFCFCF;91  }92 93  /* List */94  .list {95    position: absolute;96    top: 430px;97    left: 0;98    width: 100%;99    padding: 0 30px 0 38px;100    box-sizing: border-box;101  }102  .item {103    display: flex;104    align-items: center;105    padding: 32px 8px;106    border-bottom: 1px solid rgba(255,255,255,0.06);107    position: relative;108  }109  .thumb {110    width: 120px;111    height: 120px;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: 24px;119    border-radius: 8px;120    margin-right: 30px;121  }122  .content {123    flex: 1;124  }125  .title {126    font-size: 40px;127    line-height: 54px;128    color: #FFFFFF;129  }130  .meta {131    margin-top: 10px;132    font-size: 34px;133    color: #B0B5BB;134  }135  .item .menu {136    width: 56px;137    height: 56px;138    margin-left: 16px;139  }140  .check-wrap {141    position: absolute;142    right: 16px;143    top: 18px;144  }145 146  /* Bottom toast + progress */147  .bottom-info {148    position: absolute;149    bottom: 80px;150    left: 0;151    width: 100%;152    padding: 26px 38px;153    font-size: 38px;154    color: #FFFFFF;155    box-sizing: border-box;156  }157  .bottom-progress {158    position: absolute;159    bottom: 64px;160    left: 0;161    width: 100%;162    height: 10px;163    background: #90CAF9;164  }165  .gesture-bar {166    position: absolute;167    bottom: 16px;168    left: 50%;169    transform: translateX(-50%);170    width: 420px;171    height: 12px;172    background: #D0D0D0;173    border-radius: 6px;174    opacity: 0.7;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status bar -->182  <div class="status-bar">183    <div>11:43</div>184    <div class="spacer"></div>185    <!-- simple status icons -->186    <div class="status-icon">187      <svg viewBox="0 0 24 24">188        <circle cx="12" cy="12" r="5" fill="#FFFFFF"/>189      </svg>190    </div>191    <div class="status-icon">192      <svg viewBox="0 0 24 24">193        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#FFFFFF"/>194      </svg>195    </div>196    <div class="status-icon">197      <svg viewBox="0 0 24 24">198        <rect x="3" y="4" width="18" height="18" rx="3" fill="#FFFFFF"/>199      </svg>200    </div>201  </div>202 203  <!-- App bar -->204  <div class="app-bar">205    <div class="icon-btn">206      <!-- back arrow -->207      <svg viewBox="0 0 56 56">208        <path d="M33 12 L18 28 L33 44" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209      </svg>210    </div>211    <div class="app-title">Downloads</div>212    <div class="app-actions">213      <!-- grid icon -->214      <div class="icon-btn">215        <svg viewBox="0 0 56 56">216          <rect x="8" y="8" width="16" height="16" fill="#FFFFFF"/>217          <rect x="32" y="8" width="16" height="16" fill="#FFFFFF"/>218          <rect x="8" y="32" width="16" height="16" fill="#FFFFFF"/>219          <rect x="32" y="32" width="16" height="16" fill="#FFFFFF"/>220        </svg>221      </div>222      <!-- more menu -->223      <div class="icon-btn">224        <svg viewBox="0 0 56 56">225          <circle cx="28" cy="12" r="4" fill="#FFFFFF"/>226          <circle cx="28" cy="28" r="4" fill="#FFFFFF"/>227          <circle cx="28" cy="44" r="4" fill="#FFFFFF"/>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Tabs -->234  <div class="tabs">235    <div class="tab">Download</div>236    <div class="tab-indicator"></div>237  </div>238 239  <!-- Section heading -->240  <div class="section-title">Today</div>241 242  <!-- List -->243  <div class="list">244 245    <!-- Item 1 -->246    <div class="item">247      <div class="thumb">[IMG: PDF cover]</div>248      <div class="content">249        <div class="title">WHO-2019-nCoV-clinical-2023.2-eng.pdf</div>250        <div class="meta">2.72 MB, 28 minutes ago</div>251      </div>252      <div class="menu">253        <svg viewBox="0 0 56 56">254          <circle cx="28" cy="12" r="4" fill="#CFCFCF"/>255          <circle cx="28" cy="28" r="4" fill="#CFCFCF"/>256          <circle cx="28" cy="44" r="4" fill="#CFCFCF"/>257        </svg>258      </div>259      <div class="check-wrap">260        <svg width="64" height="64" viewBox="0 0 64 64">261          <circle cx="32" cy="32" r="28" stroke="#90CAF9" stroke-width="4" fill="none"/>262          <path d="M20 33 L28 41 L44 24" stroke="#90CAF9" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263        </svg>264      </div>265    </div>266 267    <!-- Item 2 -->268    <div class="item">269      <div class="thumb">[IMG: PDF]</div>270      <div class="content">271        <div class="title">20121106214533yermapdf_pdf (1).pdf</div>272        <div class="meta">235 kB, 30 minutes ago</div>273      </div>274      <div class="menu">275        <svg viewBox="0 0 56 56">276          <circle cx="28" cy="12" r="4" fill="#CFCFCF"/>277          <circle cx="28" cy="28" r="4" fill="#CFCFCF"/>278          <circle cx="28" cy="44" r="4" fill="#CFCFCF"/>279        </svg>280      </div>281    </div>282 283    <!-- Item 3 -->284    <div class="item">285      <div class="thumb">[IMG: PDF]</div>286      <div class="content">287        <div class="title">20121106214533yermapdf_pdf.pdf</div>288        <div class="meta">235 kB, 30 minutes ago</div>289      </div>290      <div class="menu">291        <svg viewBox="0 0 56 56">292          <circle cx="28" cy="12" r="4" fill="#CFCFCF"/>293          <circle cx="28" cy="28" r="4" fill="#CFCFCF"/>294          <circle cx="28" cy="44" r="4" fill="#CFCFCF"/>295        </svg>296      </div>297    </div>298 299    <!-- Item 4 -->300    <div class="item">301      <div class="thumb">[IMG: eBook]</div>302      <div class="content">303        <div class="title">The Red and the Black_ A Chronicle of 1830 by Stendhal _ Project Gute...</div>304        <div class="meta">193 kB, 31 minutes ago</div>305      </div>306      <div class="menu">307        <svg viewBox="0 0 56 56">308          <circle cx="28" cy="12" r="4" fill="#CFCFCF"/>309          <circle cx="28" cy="28" r="4" fill="#CFCFCF"/>310          <circle cx="28" cy="44" r="4" fill="#CFCFCF"/>311        </svg>312      </div>313    </div>314 315  </div>316 317  <!-- Bottom info -->318  <div class="bottom-info">1 file moved to Documents</div>319  <div class="bottom-progress"></div>320  <div class="gesture-bar"></div>321 322</div>323</body>324</html>