GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Downloads - 1 selected</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    color: #1f1f1f;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #1f1f1f;24    font-size: 34px;25  }26  .sb-left { display: flex; align-items: center; gap: 18px; }27  .sb-right { display: flex; align-items: center; gap: 20px; }28  .tiny-dot {29    width: 24px; height: 24px; border-radius: 50%; background: #646464;30  }31  .wifi {32    width: 36px; height: 24px;33    border: 3px solid #4a4a4a; border-top-color: transparent; border-left-color: transparent;34    transform: rotate(45deg);35    border-radius: 4px;36  }37  .battery {38    width: 54px; height: 28px; border: 3px solid #4a4a4a; position: relative; border-radius: 4px;39  }40  .battery::after {41    content: ""; position: absolute; right: -8px; top: 6px;42    width: 6px; height: 16px; background: #4a4a4a; border-radius: 2px;43  }44 45  /* App bar */46  .app-bar {47    height: 120px;48    display: flex; align-items: center; justify-content: space-between;49    padding: 0 24px;50    border-bottom: 1px solid #efefef;51  }52  .bar-left { display: flex; align-items: center; gap: 22px; }53  .bar-title { font-size: 44px; font-weight: 600; }54  .bar-actions { display: flex; align-items: center; gap: 36px; }55  .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }56  .icon svg { width: 44px; height: 44px; fill: none; stroke: #1f1f1f; stroke-width: 4px; }57 58  /* List */59  .content {60    position: absolute;61    top: 200px;62    left: 0;63    right: 0;64    bottom: 0;65    padding-bottom: 240px;66    overflow: hidden;67  }68  .list {69    padding: 16px 0 0 0;70  }71  .row {72    margin: 12px 18px;73    padding: 26px 24px;74    border-radius: 18px;75    border: 1px solid #ececec;76    background: #ffffff;77    display: flex;78    align-items: center;79    gap: 22px;80    position: relative;81  }82  .row.selected {83    background: #EEF4FF;84    border-color: #d6e5ff;85  }86  .file-icon {87    width: 68px; height: 68px;88    border-radius: 16px;89    background: #F4B9B1;90    display: flex; align-items: center; justify-content: center;91    position: relative;92  }93  .file-icon::after {94    content: "";95    position: absolute;96    right: 8px; top: 8px;97    width: 18px; height: 18px; background: #ffd9d4;98    transform: rotate(45deg);99  }100  .doc-icon {101    width: 68px; height: 68px; border-radius: 16px; background: #E8F1FF;102    display: flex; align-items: center; justify-content: center;103  }104  .doc-lines { width: 40px; height: 40px; border: 2px solid #7aa8ff; border-radius: 6px; position: relative; }105  .doc-lines:before, .doc-lines:after {106    content: ""; position: absolute; left: 6px; right: 6px; height: 3px; background: #7aa8ff; border-radius: 2px;107  }108  .doc-lines:before { top: 10px; }109  .doc-lines:after { bottom: 10px; }110 111  .file-info { flex: 1; display: flex; flex-direction: column; }112  .title { font-size: 40px; line-height: 1.24; }113  .meta { margin-top: 8px; color: #6f6f6f; font-size: 30px; }114 115  .end-check {116    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);117    display: flex; align-items: center; justify-content: center;118  }119  .check-circle {120    width: 60px; height: 60px; border-radius: 50%; background: #3E7BFF; display: flex; align-items: center; justify-content: center;121  }122  .check-circle svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 6px; fill: none; }123 124  .empty-dot {125    width: 56px; height: 56px; border-radius: 50%; background: #e9e9e9;126  }127 128  /* Ad row (muted) */129  .ad-row { opacity: 0.45; }130  .ad-badge {131    width: 68px; height: 68px; border-radius: 14px; background: #d7eef2;132    display: flex; align-items: center; justify-content: center; color: #3a9fb6; font-weight: 700; font-size: 34px;133  }134  .ad-open {135    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);136    color: #3E7BFF; font-size: 34px; font-weight: 600;137  }138 139  /* Bottom area */140  .open-files {141    width: 740px; height: 116px;142    background: #eef2fb;143    border: 1px solid #dfe5f4;144    color: #a8b7da;145    border-radius: 58px;146    display: flex; align-items: center; justify-content: center;147    font-size: 42px; font-weight: 600;148    margin: 60px auto 22px auto;149  }150  .history-end {151    text-align: center; color: #9a9a9a; font-size: 36px; margin-top: 14px;152  }153  .home-indicator {154    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);155    width: 480px; height: 10px; background: #bdbdbd; border-radius: 8px; opacity: 0.8;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status bar -->163  <div class="status-bar">164    <div class="sb-left">165      <div style="font-weight:600;">12:08</div>166      <div class="tiny-dot"></div>167      <div class="tiny-dot" style="background:#9a9a9a;"></div>168    </div>169    <div class="sb-right">170      <div class="wifi"></div>171      <div class="battery"></div>172    </div>173  </div>174 175  <!-- App bar -->176  <div class="app-bar">177    <div class="bar-left">178      <div class="icon-btn icon">179        <svg viewBox="0 0 24 24">180          <line x1="5" y1="5" x2="19" y2="19"></line>181          <line x1="19" y1="5" x2="5" y2="19"></line>182        </svg>183      </div>184      <div class="bar-title">1 selected</div>185    </div>186    <div class="bar-actions">187      <!-- share -->188      <div class="icon-btn icon">189        <svg viewBox="0 0 24 24">190          <circle cx="6" cy="12" r="2"></circle>191          <circle cx="18" cy="6" r="2"></circle>192          <circle cx="18" cy="18" r="2"></circle>193          <line x1="8" y1="12" x2="16" y2="7"></line>194          <line x1="8" y1="12" x2="16" y2="17"></line>195        </svg>196      </div>197      <!-- delete -->198      <div class="icon-btn icon">199        <svg viewBox="0 0 24 24">200          <rect x="6" y="8" width="12" height="12"></rect>201          <rect x="9" y="4" width="6" height="3"></rect>202        </svg>203      </div>204      <!-- share link -->205      <div class="icon-btn icon">206        <svg viewBox="0 0 24 24">207          <path d="M8 12a4 4 0 0 1 4-4h4"></path>208          <path d="M16 12a4 4 0 0 1-4 4H8"></path>209          <line x1="14" y1="6" x2="18" y2="10"></line>210          <line x1="14" y1="18" x2="18" y2="14"></line>211        </svg>212      </div>213      <!-- menu -->214      <div class="icon-btn icon">215        <svg viewBox="0 0 24 24">216          <circle cx="12" cy="5" r="2"></circle>217          <circle cx="12" cy="12" r="2"></circle>218          <circle cx="12" cy="19" r="2"></circle>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Content list -->225  <div class="content">226    <div class="list">227 228      <!-- Selected file -->229      <div class="row selected">230        <div class="file-icon"></div>231        <div class="file-info">232          <div class="title">Into-the-Wild-Jon-Krakauer</div>233          <div class="meta">12:04 · 1.8 MB · Download</div>234        </div>235        <div class="end-check">236          <div class="check-circle">237            <svg viewBox="0 0 24 24">238              <polyline points="5,12 10,17 19,7"></polyline>239            </svg>240          </div>241        </div>242      </div>243 244      <!-- Ad row (dimmed) -->245      <div class="row ad-row">246        <div class="ad-badge">F</div>247        <div class="file-info">248          <div class="title">Furlenco</div>249          <div class="meta">Your favourite online furniture app - now in an all new avatar!...</div>250        </div>251        <div class="ad-open">OPEN</div>252      </div>253 254      <!-- Weekday schedule -->255      <div class="row">256        <div class="doc-icon"><div class="doc-lines"></div></div>257        <div class="file-info">258          <div class="title">Weekday schedule</div>259          <div class="meta">11:59 · 4.1 MB · My Cloud</div>260        </div>261        <div class="end-check"><div class="empty-dot"></div></div>262      </div>263 264      <!-- Typical Weekend Schedule -->265      <div class="row">266        <div class="doc-icon"><div class="doc-lines"></div></div>267        <div class="file-info">268          <div class="title">Typical Weekend Schedule</div>269          <div class="meta">11:30 · 7 KB · My Cloud</div>270        </div>271        <div class="end-check"><div class="empty-dot"></div></div>272      </div>273 274      <!-- Ralph Ellison -->275      <div class="row">276        <div class="file-icon"></div>277        <div class="file-info">278          <div class="title">Ralph-Ellison-Invisible-Man-Text</div>279          <div class="meta">09:05 · 2.3 MB · Download</div>280        </div>281        <div class="end-check"><div class="empty-dot"></div></div>282      </div>283 284      <!-- Disabled Open files button -->285      <div class="open-files">Open files</div>286      <div class="history-end">No earlier history</div>287 288    </div>289  </div>290 291  <div class="home-indicator"></div>292</div>293</body>294</html>