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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F6E0DC;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #3A2C29;17  }18 19  /* Status bar */20  .status-bar {21    height: 88px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 36px;27    color: #5b4a45;28    opacity: 0.95;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .icon {36    width: 44px;37    height: 44px;38  }39 40  /* App bar */41  .app-bar {42    padding: 18px 36px 24px 36px;43  }44  .app-bar-row {45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .title-row {50    display: flex;51    align-items: center;52    gap: 28px;53    margin-top: 14px;54  }55  .title {56    font-size: 64px;57    font-weight: 700;58    letter-spacing: 0.2px;59  }60 61  /* Section tag */62  .section-active {63    margin: 24px 36px 6px 36px;64    font-size: 44px;65    color: #C23A2C;66    font-weight: 600;67  }68 69  /* Chips */70  .chip-row {71    padding: 8px 36px 8px 36px;72    display: flex;73    gap: 22px;74  }75  .chip {76    display: inline-flex;77    align-items: center;78    gap: 18px;79    padding: 18px 26px;80    height: 80px;81    font-size: 36px;82    color: #6d5b55;83    border: 2px solid #D7C9C5;84    background: #fff0;85    border-radius: 40px;86  }87 88  /* Files header */89  .files-header {90    padding: 26px 36px 10px 36px;91    display: flex;92    align-items: center;93    justify-content: space-between;94  }95  .files-header .label {96    font-size: 40px;97    color: #4b3c38;98    font-weight: 600;99  }100 101  /* Grid */102  .grid {103    padding: 8px 28px 120px 28px;104    display: grid;105    grid-template-columns: repeat(2, 1fr);106    grid-column-gap: 28px;107    grid-row-gap: 28px;108  }109  .card {110    background: #FFFFFF;111    border: 2px solid #D9D3D1;112    border-radius: 28px;113    overflow: hidden;114    height: 560px;115    position: relative;116    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;117  }118  .thumb {119    height: 370px;120    background: #FFFFFF;121    display: flex;122    align-items: center;123    justify-content: center;124    position: relative;125  }126  .thumb .expand {127    position: absolute;128    top: 16px;129    right: 16px;130    width: 64px; height: 64px;131    background: #f0f0f0;132    border-radius: 20px;133    display: flex; align-items: center; justify-content: center;134  }135  .meta {136    height: 190px;137    background: #FAE8E4;138    padding: 18px 22px;139    display: flex;140    flex-direction: column;141    justify-content: center;142    gap: 6px;143  }144  .meta .row {145    display: flex; align-items: center; gap: 14px;146  }147  .meta .title {148    font-size: 34px;149    color: #3C2F2B;150    white-space: nowrap;151    overflow: hidden;152    text-overflow: ellipsis;153    max-width: 380px;154  }155  .meta .sub {156    font-size: 28px;157    color: #8c7d78;158  }159  .badge-pdf {160    display: inline-flex;161    align-items: center;162    justify-content: center;163    background: #E05145;164    color: #fff;165    font-weight: 700;166    font-size: 26px;167    border-radius: 10px;168    width: 80px; height: 50px;169  }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 30px;175    left: 50%;176    transform: translateX(-50%);177    width: 320px;178    height: 12px;179    background: #3c3c3c;180    border-radius: 10px;181    opacity: 0.6;182  }183 184  /* Helpers */185  .muted { color: #8b7e78; }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status Bar -->192  <div class="status-bar">193    <div>12:10</div>194    <div class="status-icons">195      <!-- simple dots to impl