GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Downloads UI Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11    color: #1f1f1f;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #F4F3F7;19  }20 21  /* Status bar */22  .status-bar {23    height: 72px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-weight: 600;29    color: #333;30    font-size: 32px;31  }32  .status-icons {33    display: flex;34    gap: 18px;35    align-items: center;36  }37  .circle {38    width: 26px;39    height: 26px;40    border-radius: 50%;41    background: #bdbdbd;42  }43  .battery {44    width: 40px;45    height: 24px;46    border: 2px solid #555;47    border-radius: 4px;48    position: relative;49  }50  .battery::after {51    content: "";52    position: absolute;53    right: -8px;54    top: 6px;55    width: 6px;56    height: 12px;57    background: #555;58    border-radius: 2px;59  }60  .battery .level {61    position: absolute;62    left: 3px;63    top: 3px;64    height: 16px;65    width: 26px;66    background: #4CAF50;67  }68 69  /* App bar */70  .app-bar {71    height: 150px;72    padding: 0 32px;73    display: flex;74    align-items: center;75    justify-content: space-between;76  }77  .title-group {78    display: flex;79    align-items: center;80    gap: 24px;81  }82  .title {83    font-size: 64px;84    font-weight: 700;85    letter-spacing: -0.5px;86  }87  .bar-icons {88    display: flex;89    gap: 28px;90  }91  .icon-btn {92    width: 72px;93    height: 72px;94    display: inline-flex;95    align-items: center;96    justify-content: center;97    border-radius: 16px;98  }99  .section {100    padding: 0 32px;101    font-size: 36px;102    color: #4b4b4b;103  }104  .section .label {105    margin: 22px 0 10px 0;106    font-weight: 600;107  }108  .sub-toolbar {109    display: flex;110    align-items: center;111    justify-content: space-between;112    margin-top: 22px;113  }114  .sub-left {115    font-size: 36px;116    color: #2f2f2f;117    font-weight: 600;118  }119 120  /* Grid of tiles/cards */121  .grid {122    margin-top: 28px;123    padding: 0 32px;124    display: grid;125    grid-template-columns: 1fr 1fr;126    grid-column-gap: 36px;127    grid-row-gap: 34px;128  }129  .folder-tile, .file-card {130    background: #fff;131    border: 1.5px solid #E3E3EA;132    border-radius: 28px;133  }134  .folder-tile {135    height: 150px;136    display: flex;137    align-items: center;138    padding: 28px 30px;139    gap: 22px;140  }141  .folder-label {142    font-size: 40px;143    font-weight: 600;144    color: #202124;145  }146 147  .file-card {148    height: 520px;149    position: relative;150    display: flex;151    align-items: center;152    justify-content: center;153  }154  .pdf-badge {155    width: 120px;156    height: 120px;157    background: #D54B3F;158    border-radius: 16px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #fff;163    font-weight: 800;164    font-size: 42px;165    letter-spacing: 1px;166  }167  .doc-badge {168    width: 120px;169    height: 120px;170    background: #D9F1FF;171    border: 2px solid #9BD4F6;172    border-radius: 16px;173    display: flex;174    align-items: center;175    justify-content: center;176    color: #4AA8DB;177    font-weight: 800;178    font-size: 40px;179  }180  .caption {181    position: absolute;182    left: 0;183    bottom: 0;184    right: 0;185    padding: 26px 30px;186    border-top: 1px solid #ECECF1;187    border-radius: 0 0 28px 28px;188  }189  .caption .name {190    font-size: 40px;191    color: #1f1f1f;192    font-weight: 700;193    margin-bottom: 10px;194    white-space: nowrap;195    overflow: hidden;196    text-overflow: ellipsis;197  }198  .caption .meta {199    font-size: 30px;200    color: #6b6b75;201    font-weight: 600;202  }203 204  /* Bottom sheet */205  .bottom-sheet {206    position: absolute;207    left: 0;208    right: 0;209    bottom: 110px;210    height: 160px;211    background: #ffffff;212    box-shadow: 0 8px 24px rgba(0,0,0,0.2);213    border-top-left-radius: 28px;214    border-top-right-radius: 28px;215    display: flex;216    align-items: center;217    padding: 0 36px;218    gap: 26px;219  }220  .sheet-title {221    font-size: 48px;222    font-weight: 700;223    flex: 1;224    border-bottom: 4px solid #E7E7EE;225    padding-bottom: 8px;226  }227  .save-btn {228    background: #367BF5;229    color: #fff;230    font-weight: 800;231    font-size: 40px;232    padding: 24px 44px;233    border-radius: 18px;234  }235 236  /* Gesture bar */237  .gesture-bar {238    position: absolute;239    left: 50%;240    transform: translateX(-50%);241    bottom: 36px;242    width: 480px;243    height: 16px;244    background: #C9C9CE;245    border-radius: 12px;246  }247 248  /* Simple helpers for SVG icons */249  svg {250    display: block;251  }252</style>253</head>254<body>255<div id="render-target">256 257  <!-- Status Bar -->258  <div class="status-bar">259    <div>7:59</div>260    <div class="status-icons">261      <div class="circle"></div>262      <div class="circle"></div>263      <div class="circle"></div>264      <div class="battery"><div class="level"></div></div>265    </div>266  </div>267 268  <!-- App Bar -->269  <div class="app-bar">270    <div class="title-group">271      <div class="icon-btn">272        <!-- Hamburger -->273        <svg width="52" height="52" viewBox="0 0 52 52">274          <rect x="6" y="12" width="40" height="4" fill="#3b3b3b"></rect>275          <rect x="6" y="24" width="40" height="4" fill="#3b3b3b"></rect>276          <rect x="6" y="36" width="40" height="4" fill="#3b3b3b"></rect>277        </svg>278      </div>279      <div class="title">Downloads</div>280    </div>281    <div class="bar-icons">282      <div class="icon-btn">283        <!-- Folder with plus -->284        <svg width="56" height="56" viewBox="0 0 56 56">285          <path d="M10 18h16l4 6h16v20c0 3-2 5-5 5H15c-3 0-5-2-5-5V18z" fill="none" stroke="#454545" stroke-width="3" />286          <path d="M34 12H20l-4 6" stroke="#454545" stroke-width="3" fill="none"/>287          <rect x="35" y="28" width="16" height="16" rx="4" fill="#e9f0ff" stroke="#6088ff" stroke-width="2"></rect>288          <rect x="42" y="31" width="2" height="10" fill="#6088ff"></rect>289          <rect x="38" y="35" width="10" height="2" fill="#6088ff"></rect>290        </svg>291      </div>292      <div class="icon-btn">293        <!-- More vertical -->294        <svg width="56" height="56" viewBox="0 0 56 56">295          <circle cx="28" cy="14" r="4" fill="#3b3b3b"></circle>296          <circle cx="28" cy="28" r="4" fill="#3b3b3b"></circle>297          <circle cx="28" cy="42" r="4" fill="#3b3b3b"></circle>298        </svg>299      </div>300    </div>301  </div>302 303  <!-- Section labels -->304  <div class="section">305    <div class="label">Downloads</div>306 307    <div class="sub-toolbar">308      <div class="sub-left">Files in Downloads</div>309      <div class="icon-btn" style="width:64px;height:64px;">310        <!-- Grid view icon -->311        <svg width="48" height="48" viewBox="0 0 48 48">312          <rect x="6" y="6" width="12" height="12" fill="none" stroke="#444" stroke-width="3"></rect>313          <rect x="20" y="6" width="12" height="12" fill="none" stroke="#444" stroke-width="3"></rect>314          <rect x="34" y="6" width="8" height="12" fill="none" stroke="#444" stroke-width="3"></rect>315          <rect x="6" y="20" width="12" height="12" fill="none" stroke="#444" stroke-width="3"></rect>316          <rect x="20" y="20" width="12" height="12" fill="none" stroke="#444" stroke-width="3"></rect>317          <rect x="34" y="20" width="8" height="12" fill="none" stroke="#444" stroke-width="3"></rect>318        </svg>319      </div>320    </div>321  </div>322 323  <!-- Grid content -->324  <div class="grid">325 326    <!-- Row: Folders -->327    <div class="folder-tile">328      <!-- Folder icon -->329      <svg width="70" height="70" viewBox="0 0 70 70">330        <path d="M10 26h20l6 8h24v22c0 4-3 7-7 7H17c-4 0-7-3-7-7V26z" fill="none" stroke="#6b6b6b" stroke-width="3"></path>331      </svg>332      <div class="folder-label">Nearby Share</div>333    </div>334 335    <div class="folder-tile">336      <svg width="70" height="70" viewBox="0 0 70 70">337        <path d="M10 26h20l6 8h24v22c0 4-3 7-7 7H17c-4 0-7-3-7-7V26z" fill="none" stroke="#6b6b6b" stroke-width="3"></path>338      </svg>339      <div class="folder-label">YMCA Org.</div>340    </div>341 342    <div class="folder-tile">343      <svg width="70" height="70" viewBox="0 0 70 70">344        <path d="M10 26h20l6 8h24v22c0 4-3 7-7 7H17c-4 0-7-3-7-7V26z" fill="none" stroke="#6b6b6b" stroke-width="3"></path>345      </svg>346      <div class="folder-label">TeraBox</div>347    </div>348 349    <!-- Empty to align grid -->350    <div></div>351 352    <!-- Row: Files (large cards) -->353    <div class="file-card">354      <div class="pdf-badge">PDF</div>355      <div class="caption">356        <div class="name">Adobe PDF.pdf</div>357        <div class="meta">15.53 kB  12:38 AM</div>358      </div>359    </div>360 361    <div class="file-card">362      <div class="pdf-badge">PDF</div>363      <div class="caption">364        <div class="name">pdf-sample (1).pdf</div>365        <div class="meta">7.95 kB  Aug 31</div>366      </div>367    </div>368 369    <div class="file-card">370      <div class="pdf-badge">PDF</div>371      <div class="caption">372        <div class="name">pdf-sample.pdf</div>373        <div class="meta">7.95 kB  Aug 31</div>374      </div>375    </div>376 377    <div class="file-card">378      <div class="doc-badge">DOC</div>379      <div class="caption">380        <div class="name">BACKUP_REMIND...</div>381        <div class="meta">20.48 kB  Aug 31</div>382      </div>383    </div>384 385  </div>386 387  <!-- Bottom sheet -->388  <div class="bottom-sheet">389    <div class="pdf-badge" style="width:88px;height:88px;font-size:36px;">PDF</div>390    <div class="sheet-title">Movie Plans</div>391    <div class="save-btn">SAVE</div>392  </div>393 394  <!-- Gesture Bar -->395  <div class="gesture-bar"></div>396 397</div>398</body>399</html>