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>Downloads UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0F1F1F;15    border-radius: 28px;16    box-shadow: 0 8px 30px rgba(0,0,0,0.35);17    color: #E6F0EE;18  }19 20  /* Status bar */21  .status-bar {22    height: 110px;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #EAF2F1;28    font-size: 44px;29    letter-spacing: 1px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35    color: #EAF2F1;36    font-size: 34px;37  }38  .icon {39    width: 48px; height: 48px;40    fill: none; stroke: #C6D2CF; stroke-width: 4;41  }42  .icon-fill { fill: #C6D2CF; stroke: none; }43 44  /* App bar */45  .app-bar {46    height: 140px;47    padding: 0 36px;48    display: flex;49    align-items: center;50    justify-content: space-between;51  }52  .app-left {53    display: flex; align-items: center; gap: 28px;54  }55  .title {56    font-size: 72px; font-weight: 600; color: #EAF2F1;57  }58  .app-actions {59    display: flex; align-items: center; gap: 28px;60  }61 62  /* Filters */63  .filters {64    padding: 10px 40px 0 40px;65  }66  .crumb {67    color: #69F0AE;68    font-size: 44px;69    margin-bottom: 26px;70  }71  .chips-row {72    display: flex; align-items: center; gap: 22px;73    margin-bottom: 28px;74  }75  .chip {76    display: inline-flex;77    align-items: center;78    gap: 18px;79    color: #D3DDDB;80    border: 2px solid #3A4745;81    border-radius: 30px;82    padding: 18px 26px;83    font-size: 38px;84    background: rgba(255,255,255,0.02);85  }86  .view-toggle {87    position: absolute;88    right: 40px;89    top: 420px;90    width: 72px; height: 72px;91    display: flex; align-items: center; justify-content: center;92    border-radius: 16px;93  }94 95  /* Section title */96  .section-title {97    padding: 6px 40px 0 40px;98    color: #B7C3C1;99    font-size: 40px;100    margin-top: 16px;101  }102 103  /* Grid */104  .grid {105    padding: 24px 40px 0 40px;106    display: grid;107    grid-template-columns: 1fr 1fr;108    gap: 36px;109  }110  .card {111    background: #1A2524;112    border: 2px solid #3B4746;113    border-radius: 28px;114    overflow: hidden;115  }116  .thumb {117    height: 380px;118    display: flex;119    align-items: center;120    justify-content: center;121    background: #E0E0E0;122    border-bottom: 1px solid #BDBDBD;123    color: #757575;124    font-size: 40px;125  }126  .expand-badge {127    position: absolute;128    right: 24px;129    top: 24px;130    width: 72px; height: 72px;131    border-radius: 16px;132    background: rgba(0,0,0,0.45);133    display: flex; align-items: center; justify-content: center;134  }135  .caption {136    padding: 24px 28px 30px 28px;137    background: #162020;138    border-top: 2px solid #2F3A39;139  }140  .file-title {141    font-size: 40px; color: #EAF2F1; margin-bottom: 8px;142    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;143  }144  .file-meta {145    font-size: 34px; color: #9FB0AD;146  }147  .row-meta {148    display: flex; align-items: center; gap: 16px;149  }150  .badge {151    display: inline-block;152    background: #C57C74;153    color: #2D2222;154    font-weight: 700;155    padding: 8px 16px;156    border-radius: 10px;157    font-size: 30px;158  }159 160  /* Bottom gesture bar */161  .gesture {162    position: absolute;163    bottom: 28px;164    left: 50%;165    transform: translateX(-50%);166    width: 300px;167    height: 14px;168    background: #EDEDED;169    border-radius: 10px;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="status-left">12:22</div>180    <div class="status-right">181      <!-- simple status icons -->182      <svg class="icon" viewBox="0 0 24 24">183        <path d="M4 12l4-6 4 6 4-6 4 6" />184      </svg>185      <svg class="icon" viewBox="0 0 24 24">186        <circle cx="12" cy="12" r="9"></circle>187        <path d="M12 12l4-6" />188      </svg>189      <svg class="icon" viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="2"></circle>191      </svg>192      <svg class="icon" viewBox="0 0 24 24">193        <path d="M3 8h18v10H3z"></path>194        <path d="M19 4h-6" />195      </svg>196      <span style="font-size:34px;">100%</span>197    </div>198  </div>199 200  <!-- App Bar -->201  <div class="app-bar">202    <div class="app-left">203      <!-- Hamburger -->204      <svg class="icon" viewBox="0 0 24 24">205        <path d="M3 6h18M3 12h18M3 18h18" />206      </svg>207      <div class="title">Downloads</div>208    </div>209    <div class="app-actions">210      <!-- Search -->211      <svg class="icon" viewBox="0 0 24 24">212        <circle cx="10" cy="10" r="6"></circle>213        <path d="M15 15l6 6"></path>214      </svg>215      <!-- More (vertical dots) -->216      <svg class="icon" viewBox="0 0 24 24">217        <circle class="icon-fill" cx="12" cy="5" r="2.2"></circle>218        <circle class="icon-fill" cx="12" cy="12" r="2.2"></circle>219        <circle class="icon-fill" cx="12" cy="19" r="2.2"></circle>220      </svg>221    </div>222  </div>223 224  <!-- Filters -->225  <div class="filters">226    <div class="crumb">Downloads</div>227    <div class="chips-row">228      <div class="chip">229        <svg class="icon" viewBox="0 0 24 24">230          <path d="M3 8l7-5 11 11-7 5-11-11zM10 3l11 11"></path>231        </svg>232        Large files233      </div>234      <div class="chip">235        <svg class="icon" viewBox="0 0 24 24">236          <circle cx="12" cy="12" r="9"></circle>237          <path d="M12 12V7M12 12l5 3"></path>238        </svg>239        This week240      </div>241    </div>242  </div>243 244  <!-- Grid/List Toggle icon -->245  <div class="view-toggle">246    <svg class="icon" viewBox="0 0 24 24">247      <rect x="3" y="4" width="7" height="7" class="icon" style="fill:#C6D2CF;stroke:none;"></rect>248      <rect x="14" y="4" width="7" height="7" class="icon" style="fill:#C6D2CF;stroke:none;"></rect>249      <rect x="3" y="15" width="7" height="7" class="icon" style="fill:#C6D2CF;stroke:none;"></rect>250      <rect x="14" y="15" width="7" height="7" class="icon" style="fill:#C6D2CF;stroke:none;"></rect>251    </svg>252  </div>253 254  <!-- Section Title -->255  <div class="section-title">Files in Downloads</div>256 257  <!-- Cards Grid -->258  <div class="grid">259 260    <!-- Card 1 -->261    <div class="card" style="position:relative;">262      <div class="expand-badge">263        <svg class="icon" viewBox="0 0 24 24">264          <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"></path>265        </svg>266      </div>267      <div class="thumb">[IMG: Contacts Thumbnail]</div>268      <div class="caption">269        <div class="file-title">contacts.vcf</div>270        <div class="row-meta">271          <svg class="icon" viewBox="0 0 24 24">272            <circle cx="12" cy="8" r="4"></circle>273            <path d="M4 21c2-4 14-4 16 0"></path>274          </svg>275          <div class="file-meta">76 B 11:24 AM</div>276        </div>277      </div>278    </div>279 280    <!-- Card 2 -->281    <div class="card">282      <div class="thumb">[IMG: Video Thumbnail]</div>283      <div class="caption">284        <div class="file-title">production_id_3...</div>285        <div class="row-meta">286          <svg class="icon" viewBox="0 0 24 24">287            <path d="M3 5h18v14H3zM8 5l8 6"></path>288          </svg>289          <div class="file-meta">52.06 MB Dec 1</div>290        </div>291      </div>292    </div>293 294    <!-- Card 3 -->295    <div class="card">296      <div class="thumb">297        <span class="badge">PDF</span>298      </div>299      <div class="caption">300        <div class="file-title">The Martian - A...</div>301        <div class="row-meta">302          <span class="badge">PDF</span>303          <div class="file-meta">1.26 MB Nov 29</div>304        </div>305      </div>306    </div>307 308    <!-- Card 4 -->309    <div class="card">310      <div class="thumb">311        <span class="badge">PDF</span>312      </div>313      <div class="caption">314        <div class="file-title">germanycountr...</div>315        <div class="row-meta">316          <span class="badge">PDF</span>317          <div class="file-meta">51.00 MB Nov 9</div>318        </div>319      </div>320    </div>321 322    <!-- Card 5 -->323    <div class="card">324      <div class="thumb">325        <span class="badge">PDF</span>326      </div>327      <div class="caption">328        <div class="file-title">report_2024.pdf</div>329        <div class="row-meta">330          <span class="badge">PDF</span>331          <div class="file-meta">2.3 MB Nov 2</div>332        </div>333      </div>334    </div>335 336    <!-- Card 6 -->337    <div class="card">338      <div class="thumb">339        <span class="badge">PDF</span>340      </div>341      <div class="caption">342        <div class="file-title">notes_weekly.pdf</div>343        <div class="row-meta">344          <span class="badge">PDF</span>345          <div class="file-meta">860 KB Oct 31</div>346        </div>347      </div>348    </div>349 350  </div>351 352  <!-- Bottom gesture pill -->353  <div class="gesture"></div>354 355</div>356</body>357</html>