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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #ECECEC;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #0f0f0f;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-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .icon {39    width: 40px;40    height: 40px;41    display: inline-block;42  }43 44  /* Header */45  .header {46    position: absolute;47    top: 110px;48    left: 0;49    width: 1080px;50    height: 140px;51    display: flex;52    align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55    gap: 24px;56  }57  .back-btn {58    width: 64px;59    height: 64px;60  }61  .title {62    font-size: 64px;63    font-weight: 600;64    color: #EDEDED;65    flex: 1;66  }67  .header-actions {68    display: flex;69    align-items: center;70    gap: 36px;71    margin-right: 24px;72  }73 74  /* Tabs */75  .tabs {76    position: absolute;77    top: 250px;78    left: 0;79    width: 1080px;80    height: 100px;81    display: flex;82    align-items: center;83    padding: 0 32px;84    box-sizing: border-box;85    border-bottom: 2px solid #303030;86  }87  .tab {88    font-size: 44px;89    color: #A5C7FF;90    padding-bottom: 16px;91    border-bottom: 6px solid #4C8DFF;92  }93 94  /* List */95  .section-label {96    position: absolute;97    top: 360px;98    left: 32px;99    font-size: 40px;100    color: #BDBDBD;101  }102  .list {103    position: absolute;104    top: 430px;105    left: 0;106    width: 1080px;107  }108  .row {109    display: flex;110    align-items: center;111    padding: 24px 32px;112    height: 170px;113    box-sizing: border-box;114    border-bottom: 1px solid #232323;115  }116  .thumb {117    width: 120px;118    height: 120px;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    display: flex;122    justify-content: center;123    align-items: center;124    color: #757575;125    font-size: 28px;126    border-radius: 16px;127    margin-right: 28px;128  }129  .file-info {130    flex: 1;131  }132  .file-name {133    font-size: 42px;134    color: #F0F0F0;135    white-space: nowrap;136    overflow: hidden;137    text-overflow: ellipsis;138    max-width: 780px;139  }140  .meta {141    font-size: 34px;142    color: #9E9E9E;143    margin-top: 10px;144  }145  .row-actions {146    width: 60px;147    display: flex;148    justify-content: center;149  }150 151  /* Vertical ellipsis */152  .kebab {153    width: 36px;154    height: 70px;155  }156 157  /* Selected check */158  .check-badge {159    position: absolute;160    top: 480px;161    right: 40px;162    width: 66px;163    height: 66px;164    border-radius: 50%;165    border: 4px solid #8AB4F8;166    display: flex;167    justify-content: center;168    align-items: center;169    color: #8AB4F8;170    background: transparent;171  }172 173  /* Context menu */174  .context-menu {175    position: absolute;176    top: 540px;177    right: 32px;178    width: 600px;179    background: #1F1F1F;180    border-radius: 18px;181    box-shadow: 0 12px 24px rgba(0,0,0,0.6);182    padding: 18px 0;183  }184  .menu-item {185    height: 110px;186    display: flex;187    align-items: center;188    padding: 0 32px;189    font-size: 40px;190    color: #E6E6E6;191    box-sizing: border-box;192  }193  .menu-item + .menu-item {194    border-top: 1px solid #2A2A2A;195  }196 197  /* Bottom gesture bar */198  .gesture {199    position: absolute;200    bottom: 42px;201    left: 50%;202    transform: translateX(-50%);203    width: 360px;204    height: 14px;205    background: #E6E6E6;206    border-radius: 10px;207    opacity: 0.7;208  }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Status Bar -->215  <div class="status-bar">216    <div>11:41</div>217    <div class="status-icons">218      <!-- simple status icons -->219      <svg class="icon" viewBox="0 0 24 24">220        <circle cx="12" cy="12" r="10" fill="#FFD54F"></circle>221      </svg>222      <svg class="icon" viewBox="0 0 24 24">223        <path d="M3 12l4 4 12-12" stroke="#A5A5A5" stroke-width="3" fill="none"/>224      </svg>225      <svg class="icon" viewBox="0 0 24 24">226        <path d="M5 3h14v18H5z" stroke="#B0BEC5" stroke-width="2" fill="none"/>227        <rect x="8" y="6" width="8" height="12" fill="#B0BEC5"/>228      </svg>229      <svg class="icon" viewBox="0 0 24 24">230        <path d="M18 2v6h4" stroke="#D0D0D0" stroke-width="2" fill="none"/>231        <rect x="2" y="8" width="18" height="14" stroke="#D0D0D0" stroke-width="2" fill="none"/>232      </svg>233    </div>234  </div>235 236  <!-- Header -->237  <div class="header">238    <svg class="back-btn" viewBox="0 0 24 24">239      <path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240    </svg>241    <div class="title">Downloads</div>242    <div class="header-actions">243      <!-- grid icon -->244      <svg class="icon" viewBox="0 0 24 24">245        <rect x="3" y="3" width="6" height="6" fill="#EDEDED"/>246        <rect x="15" y="3" width="6" height="6" fill="#EDEDED"/>247        <rect x="3" y="15" width="6" height="6" fill="#EDEDED"/>248        <rect x="15" y="15" width="6" height="6" fill="#EDEDED"/>249      </svg>250      <!-- top kebab -->251      <svg class="kebab" viewBox="0 0 24 24">252        <circle cx="12" cy="5" r="2" fill="#EDEDED"/>253        <circle cx="12" cy="12" r="2" fill="#EDEDED"/>254        <circle cx="12" cy="19" r="2" fill="#EDEDED"/>255      </svg>256    </div>257  </div>258 259  <!-- Tabs -->260  <div class="tabs">261    <div class="tab">Download</div>262  </div>263 264  <!-- Section label -->265  <div class="section-label">Today</div>266 267  <!-- File list -->268  <div class="list">269    <div class="row">270      <div class="thumb">[IMG: PDF Cover]</div>271      <div class="file-info">272        <div class="file-name">WHO-2019-nCoV-clinical-2023.2-eng (1).pdf</div>273        <div class="meta">2.72 MB, 24 minutes ago</div>274      </div>275      <div class="row-actions">276        <svg class="kebab" viewBox="0 0 24 24">277          <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>278          <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>279          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>280        </svg>281      </div>282    </div>283 284    <div class="row">285      <div class="thumb">[IMG: PDF Cover]</div>286      <div class="file-info">287        <div class="file-name">WHO-2019-nCoV-cg.pdf</div>288        <div class="meta">2.72 MB, 25 minutes ago</div>289      </div>290      <div class="row-actions">291        <svg class="kebab" viewBox="0 0 24 24">292          <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>293          <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>294          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>295        </svg>296      </div>297    </div>298 299    <div class="row">300      <div class="thumb">[IMG: PDF Preview]</div>301      <div class="file-info">302        <div class="file-name">20121106214533y (1).pdf</div>303        <div class="meta">235 kB, 27 minutes ago</div>304      </div>305      <div class="row-actions">306        <svg class="kebab" viewBox="0 0 24 24">307          <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>308          <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>309          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>310        </svg>311      </div>312    </div>313 314    <div class="row">315      <div class="thumb">[IMG: PDF Preview]</div>316      <div class="file-info">317        <div class="file-name">20121106214533y.pdf</div>318        <div class="meta">235 kB, 27 minutes ago</div>319      </div>320      <div class="row-actions">321        <svg class="kebab" viewBox="0 0 24 24">322          <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>323          <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>324          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>325        </svg>326      </div>327    </div>328 329    <div class="row">330      <div class="thumb">[IMG: Document Thumbnail]</div>331      <div class="file-info">332        <div class="file-name">The Red and the ... of 1830 by Stend...</div>333        <div class="meta">193 kB, 28 minutes ago</div>334      </div>335      <div class="row-actions">336        <svg class="kebab" viewBox="0 0 24 24">337          <circle cx="12" cy="5" r="2" fill="#CFCFCF"/>338          <circle cx="12" cy="12" r="2" fill="#CFCFCF"/>339          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>340        </svg>341      </div>342    </div>343  </div>344 345  <!-- Selected badge -->346  <div class="check-badge">347    <svg viewBox="0 0 24 24" width="38" height="38">348      <path d="M5 13l4 4 10-10" stroke="#8AB4F8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>349    </svg>350  </div>351 352  <!-- Context Menu -->353  <div class="context-menu">354    <div class="menu-item">Select</div>355    <div class="menu-item">Share</div>356    <div class="menu-item">Open with</div>357    <div class="menu-item">Rename</div>358    <div class="menu-item">Add to Favorites</div>359    <div class="menu-item">Move to Trash</div>360    <div class="menu-item">Move to</div>361    <div class="menu-item">Move to Safe folder</div>362    <div class="menu-item">Copy to</div>363    <div class="menu-item">Back up to Google Drive</div>364    <div class="menu-item">File info</div>365  </div>366 367  <!-- Bottom gesture bar -->368  <div class="gesture"></div>369</div>370</body>371</html>