GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Downloads UI</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: #0f1115;13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #13161b;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    color: #eaeaea;29    font-size: 40px;30    letter-spacing: 0.5px;31  }32  .status-bar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon { display: inline-flex; align-items: center; justify-content: center; }39  .icon svg { display: block; }40 41  /* Header */42  .header {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    height: 140px;48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52    background: #161a20;53    border-bottom: 1px solid #222832;54  }55  .title {56    font-size: 64px;57    font-weight: 600;58    margin-left: 20px;59  }60  .header .actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 36px;65  }66 67  /* Path / tab */68  .path-bar {69    position: absolute;70    top: 230px;71    left: 0;72    width: 1080px;73    height: 92px;74    padding: 0 32px;75    box-sizing: border-box;76    display: flex;77    align-items: center;78    color: #9ec3ff;79    font-size: 44px;80    background: #161a20;81  }82  .path-bar .underline {83    position: absolute;84    bottom: 0;85    left: 32px;86    width: 160px;87    height: 6px;88    background: #3b82f6;89    border-radius: 3px;90  }91 92  /* Section header */93  .section {94    position: absolute;95    top: 322px;96    left: 0;97    width: 1080px;98    height: 108px;99    padding: 0 32px;100    box-sizing: border-box;101    display: flex;102    align-items: center;103    color: #dcdcdc;104    font-size: 46px;105    border-bottom: 1px solid #222832;106  }107  .section .label { font-weight: 600; }108  .section .right { margin-left: auto; }109 110  /* List */111  .list {112    position: absolute;113    top: 430px;114    left: 0;115    width: 1080px;116    padding: 0 24px;117    box-sizing: border-box;118  }119  .item {120    display: flex;121    align-items: center;122    padding: 24px 8px;123    border-bottom: 1px solid #222832;124  }125  .thumb {126    width: 132px;127    height: 132px;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    color: #757575;131    display: flex;132    justify-content: center;133    align-items: center;134    font-size: 26px;135    text-align: center;136    border-radius: 10px;137    margin-right: 24px;138    overflow: hidden;139  }140  .content {141    flex: 1;142    min-width: 0;143  }144  .content .name {145    font-size: 44px;146    line-height: 1.2;147    color: #f2f2f2;148    margin-bottom: 10px;149  }150  .content .meta {151    font-size: 34px;152    color: #9aa0a6;153  }154  .kebab {155    width: 54px;156    height: 54px;157    margin-left: 12px;158  }159 160  /* Gesture bar */161  .gesture {162    position: absolute;163    bottom: 40px;164    left: 50%;165    transform: translateX(-50%);166    width: 560px;167    height: 10px;168    background: #e5e5e5;169    border-radius: 6px;170    opacity: 0.9;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status bar -->178  <div class="status-bar">179    <div class="time">11:40</div>180    <div class="right">181      <!-- simple status icons -->182      <span class="icon">183        <svg width="34" height="34" viewBox="0 0 24 24">184          <path d="M2 16c3-4 6-6 10-6s7 2 10 6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>185          <circle cx="12" cy="16" r="2" fill="#eaeaea"/>186        </svg>187      </span>188      <span class="icon">189        <svg width="40" height="34" viewBox="0 0 24 24">190          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#eaeaea" stroke-width="2" fill="none"/>191          <rect x="20" y="10" width="2" height="4" fill="#eaeaea"/>192        </svg>193      </span>194    </div>195  </div>196 197  <!-- Header -->198  <div class="header">199    <div class="icon">200      <svg width="64" height="64" viewBox="0 0 24 24">201        <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202      </svg>203    </div>204    <div class="title">Downloads</div>205    <div class="actions">206      <div class="icon">207        <!-- grid icon -->208        <svg width="56" height="56" viewBox="0 0 24 24">209          <rect x="3" y="3" width="6" height="6" fill="#cfd8dc"/>210          <rect x="3" y="13" width="6" height="6" fill="#cfd8dc"/>211          <rect x="13" y="3" width="8" height="6" fill="#cfd8dc"/>212          <rect x="13" y="13" width="8" height="6" fill="#cfd8dc"/>213        </svg>214      </div>215      <div class="icon">216        <!-- kebab menu (vertical dots) -->217        <svg class="kebab" viewBox="0 0 24 24">218          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>219          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>220          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>221        </svg>222      </div>223    </div>224  </div>225 226  <!-- Path / tab -->227  <div class="path-bar">228    <div>Download</div>229    <div class="underline"></div>230  </div>231 232  <!-- Section header -->233  <div class="section">234    <div class="label">Today</div>235    <div class="right icon">236      <!-- check circle -->237      <svg width="56" height="56" viewBox="0 0 24 24">238        <circle cx="12" cy="12" r="10" stroke="#cfd8dc" stroke-width="2" fill="none"/>239        <path d="M7 12l3 3 7-7" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round"/>240      </svg>241    </div>242  </div>243 244  <!-- List -->245  <div class="list">246    <!-- Item 1 -->247    <div class="item">248      <div class="thumb">[IMG: PDF cover]</div>249      <div class="content">250        <div class="name">WHO-2019-nCoV-clinical-2023.2-eng (1).pdf</div>251        <div class="meta">2.72 MB, 24 minutes ago</div>252      </div>253      <div class="icon">254        <svg class="kebab" viewBox="0 0 24 24">255          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>256          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>257          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>258        </svg>259      </div>260    </div>261 262    <!-- Item 2 -->263    <div class="item">264      <div class="thumb">[IMG: PDF cover]</div>265      <div class="content">266        <div class="name">WHO-2019-nCoV-clinical-2023.2-eng.pdf</div>267        <div class="meta">2.72 MB, 25 minutes ago</div>268      </div>269      <div class="icon">270        <svg class="kebab" viewBox="0 0 24 24">271          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>272          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>273          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>274        </svg>275      </div>276    </div>277 278    <!-- Item 3 -->279    <div class="item">280      <div class="thumb">[IMG: White PDF preview]</div>281      <div class="content">282        <div class="name">20121106214533yermapdf_pdf (1).pdf</div>283        <div class="meta">235 kB, 27 minutes ago</div>284      </div>285      <div class="icon">286        <svg class="kebab" viewBox="0 0 24 24">287          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>288          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>289          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>290        </svg>291      </div>292    </div>293 294    <!-- Item 4 -->295    <div class="item">296      <div class="thumb">[IMG: White PDF preview]</div>297      <div class="content">298        <div class="name">20121106214533yermapdf_pdf.pdf</div>299        <div class="meta">235 kB, 27 minutes ago</div>300      </div>301      <div class="icon">302        <svg class="kebab" viewBox="0 0 24 24">303          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>304          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>305          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>306        </svg>307      </div>308    </div>309 310    <!-- Item 5 -->311    <div class="item">312      <div class="thumb">[IMG: Book preview]</div>313      <div class="content">314        <div class="name">The Red and the Black_ A Chronicle of 1830 by Stendhal _ Project Gute...</div>315        <div class="meta">193 kB, 28 minutes ago</div>316      </div>317      <div class="icon">318        <svg class="kebab" viewBox="0 0 24 24">319          <circle cx="12" cy="5" r="2.2" fill="#cfd8dc"/>320          <circle cx="12" cy="12" r="2.2" fill="#cfd8dc"/>321          <circle cx="12" cy="19" r="2.2" fill="#cfd8dc"/>322        </svg>323      </div>324    </div>325  </div>326 327  <!-- Gesture bar -->328  <div class="gesture"></div>329</div>330</body>331</html>