GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Downloads Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #121212;15    color: #EDEDED;16    font-family: Arial, Helvetica, sans-serif;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    padding: 0 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EDEDED;30    font-size: 46px;31    letter-spacing: 1px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  /* Header */39  .header {40    position: absolute;41    top: 110px;42    left: 0;43    width: 1080px;44    height: 180px;45    display: flex;46    align-items: center;47    padding: 0 40px;48  }49  .header-left {50    display: flex;51    align-items: center;52    gap: 26px;53  }54  .title {55    font-size: 70px;56    font-weight: 600;57    letter-spacing: 0.5px;58  }59  .header-right {60    margin-left: auto;61    display: flex;62    align-items: center;63    gap: 36px;64  }65  .icon-btn {66    width: 72px;67    height: 72px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71  }72  .icon svg { width: 60px; height: 60px; fill: none; stroke: #EDEDED; stroke-width: 5; }73  .icon.fill svg { fill: #EDEDED; stroke: none; }74  /* Breadcrumb */75  .crumbs {76    position: absolute;77    top: 300px;78    left: 48px;79    right: 48px;80    display: flex;81    align-items: center;82    justify-content: flex-start;83    font-size: 44px;84    color: #8AB4F8;85    height: 70px;86  }87  /* Section label */88  .section-label {89    position: absolute;90    top: 390px;91    left: 48px;92    right: 48px;93    font-size: 40px;94    color: #CFCFCF;95    opacity: 0.85;96  }97  /* View toggle icon on the right column header area */98  .view-toggle {99    position: absolute;100    top: 470px;101    right: 48px;102    width: 68px;103    height: 68px;104    display: flex;105    align-items: center;106    justify-content: center;107    opacity: 0.9;108  }109  /* Files grid */110  .files {111    position: absolute;112    top: 520px;113    left: 48px;114    right: 48px;115    display: flex;116    gap: 36px;117  }118  .col {119    width: calc((1080px - 96px - 36px) / 2);120    display: flex;121    flex-direction: column;122    gap: 36px;123  }124  .card {125    border: 2px solid #3A3A3A;126    border-radius: 26px;127    overflow: hidden;128    background: #141414;129  }130  .card.folder { padding: 28px 32px; height: 150px; display: flex; align-items: center; gap: 26px; }131  .card .label {132    font-size: 44px;133    font-weight: 500;134  }135  /* Contact card */136  .card.contact { height: 520px; display: flex; flex-direction: column; }137  .contact .thumb {138    flex: 1;139    display: flex;140    align-items: center;141    justify-content: center;142    background: #E0E0E0;143    border-bottom: 2px solid #3A3A3A;144  }145  .contact .meta {146    height: 160px;147    display: flex;148    align-items: center;149    gap: 24px;150    padding: 0 28px;151  }152  .filename {153    font-size: 44px;154    font-weight: 600;155  }156  .subtext {157    font-size: 34px;158    color: #BDBDBD;159    margin-top: 6px;160  }161  /* Image card */162  .card.image { height: 520px; display: flex; flex-direction: column; }163  .image .thumb {164    height: 360px;165    background: #E0E0E0;166    border-bottom: 2px solid #3A3A3A;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #757575;171    font-size: 38px;172    letter-spacing: 0.3px;173  }174  .image .meta {175    height: 160px;176    display: flex;177    align-items: center;178    gap: 24px;179    padding: 0 28px;180  }181  /* Bottom sheet */182  .bottom-sheet {183    position: absolute;184    left: 0;185    right: 0;186    bottom: 120px;187    height: 220px;188    background: #1F1F1F;189    border-top: 2px solid #2E2E2E;190    display: flex;191    align-items: center;192    padding: 0 40px;193    gap: 28px;194  }195  .input-row {196    flex: 1;197    display: flex;198    align-items: center;199    gap: 22px;200  }201  .input-text {202    flex: 1;203    font-size: 52px;204    font-weight: 600;205    border-bottom: 4px solid #EDEDED;206    padding-bottom: 8px;207  }208  .save-btn {209    background: #D6E6FF;210    color: #0D1B2A;211    font-size: 44px;212    font-weight: 700;213    padding: 24px 38px;214    border-radius: 40px;215    min-width: 180px;216    text-align: center;217  }218  /* Gesture pill */219  .gesture-pill {220    position: absolute;221    bottom: 36px;222    left: 50%;223    transform: translateX(-50%);224    width: 300px;225    height: 16px;226    background: #E0E0E0;227    border-radius: 10px;228    opacity: 0.8;229  }230  /* Utility small icons */231  .mini-icon svg { width: 46px; height: 46px; stroke: #EDEDED; stroke-width: 5; fill: none; }232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Status bar -->238  <div class="status-bar">239    <div>2:29</div>240    <div class="status-icons">241      <!-- search glyph -->242      <div class="mini-icon">243        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><line x1="14" y1="14" x2="20" y2="20"></line></svg>244      </div>245      <!-- download icon -->246      <div class="mini-icon">247        <svg viewBox="0 0 24 24"><path d="M12 4v10"></path><path d="M7 9l5 5 5-5"></path><path d="M4 20h16"></path></svg>248      </div>249      <!-- sim/network glyph -->250      <div class="mini-icon">251        <svg viewBox="0 0 24 24"><path d="M4 18h16"></path><path d="M8 14h8"></path><path d="M12 10h4"></path></svg>252      </div>253      <!-- dot -->254      <div style="width:12px;height:12px;border-radius:50%;background:#EDEDED;"></div>255      <!-- battery -->256      <div class="mini-icon">257        <svg viewBox="0 0 28 24">258          <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>259          <rect x="23" y="9" width="3" height="6" rx="1"></rect>260          <rect x="4" y="8" width="14" height="8" fill="#EDEDED" stroke="none"></rect>261        </svg>262      </div>263    </div>264  </div>265 266  <!-- Header -->267  <div class="header">268    <div class="header-left">269      <!-- hamburger -->270      <div class="icon-btn icon">271        <svg viewBox="0 0 24 24"><path d="M3 6h18"></path><path d="M3 12h18"></path><path d="M3 18h18"></path></svg>272      </div>273      <div class="title">Downloads</div>274    </div>275    <div class="header-right">276      <!-- add folder -->277      <div class="icon-btn icon">278        <svg viewBox="0 0 24 24">279          <path d="M3 7h7l2 2h9v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>280          <path d="M12 12v6"></path><path d="M9 15h6"></path>281        </svg>282      </div>283      <!-- more vertical -->284      <div class="icon-btn icon fill">285        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>286      </div>287    </div>288  </div>289 290  <!-- Breadcrumb -->291  <div class="crumbs">Downloads</div>292 293  <!-- Section label -->294  <div class="section-label">Files in Downloads</div>295 296  <!-- View toggle (list/grid) -->297  <div class="view-toggle">298    <svg viewBox="0 0 24 24" width="44" height="44" stroke="#EDEDED" stroke-width="3" fill="none">299      <rect x="3" y="4" width="7" height="7" rx="1"></rect>300      <rect x="14" y="4" width="7" height="7" rx="1"></rect>301      <rect x="3" y="13" width="7" height="7" rx="1"></rect>302      <rect x="14" y="13" width="7" height="7" rx="1"></rect>303    </svg>304  </div>305 306  <!-- Files grid -->307  <div class="files">308    <!-- Left column -->309    <div class="col">310      <!-- Folder card -->311      <div class="card folder">312        <div class="icon">313          <svg viewBox="0 0 24 24"><path d="M3 7h7l2 2h9v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z" stroke="#EDEDED" stroke-width="5" fill="none"></path></svg>314        </div>315        <div class="label">TeraBox</div>316      </div>317 318      <!-- Contact file card -->319      <div class="card contact">320        <div class="thumb">321          <div style="display:flex;flex-direction:column;align-items:center;gap:20px;">322            <svg viewBox="0 0 24 24" width="120" height="120" stroke="#757575" stroke-width="2" fill="none">323              <circle cx="12" cy="8" r="4"></circle>324              <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>325            </svg>326          </div>327        </div>328        <div class="meta">329          <div class="icon">330            <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path></svg>331          </div>332          <div>333            <div class="filename">contacts.vcf</div>334            <div class="subtext">349 B  Nov 23</div>335          </div>336        </div>337      </div>338 339      <!-- Image card -->340      <div class="card image">341        <div class="thumb">[IMG: Mount Rushmore photo]</div>342        <div class="meta">343          <div class="icon">344            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect><path d="M3 15l4-4 6 6 4-3 4 4"></path></svg>345          </div>346          <div>347            <div class="filename">PXL_20230921_1...</div>348            <div class="subtext">2.39 MB  Sep 27</div>349          </div>350        </div>351      </div>352    </div>353 354    <!-- Right column -->355    <div class="col">356      <!-- Image card -->357      <div class="card image">358        <div class="thumb">[IMG: Mount Rushmore photo]</div>359        <div class="meta">360          <div class="icon">361            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect><path d="M3 15l4-4 6 6 4-3 4 4"></path></svg>362          </div>363          <div>364            <div class="filename">Mount rushmore</div>365            <div class="subtext">2.39 MB  Oct 10</div>366          </div>367        </div>368      </div>369 370      <!-- Image card -->371      <div class="card image">372        <div class="thumb">[IMG: Mount Rushmore photo]</div>373        <div class="meta">374          <div class="icon">375            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect><path d="M3 15l4-4 6 6 4-3 4 4"></path></svg>376          </div>377          <div>378            <div class="filename">PXL_20230921_1...</div>379            <div class="subtext">2.39 MB  Sep 27</div>380          </div>381        </div>382      </div>383    </div>384  </div>385 386  <!-- Bottom sheet -->387  <div class="bottom-sheet">388    <div class="input-row">389      <div class="icon">390        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path></svg>391      </div>392      <div class="input-text">contacts_2023_11_24_14_29...</div>393    </div>394    <div class="save-btn">SAVE</div>395  </div>396 397  <!-- Navigation gesture pill -->398  <div class="gesture-pill"></div>399 400</div>401</body>402</html>