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>Share File UI</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: #111214;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 110px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-weight: 600;30    box-sizing: border-box;31  }32  .status-left { font-size: 42px; letter-spacing: 1px; }33  .status-right { display: flex; align-items: center; gap: 22px; font-size: 30px; color: #D6D6D6; }34  .icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; }35 36  /* App bar */37  .app-bar {38    position: absolute;39    top: 110px; left: 0;40    width: 100%;41    height: 132px;42    background: #1A1B1E;43    display: flex; align-items: center;44    padding: 0 24px;45    box-sizing: border-box;46    border-bottom: 1px solid rgba(255,255,255,0.06);47  }48  .app-title {49    flex: 1;50    margin-left: 16px;51    font-size: 40px;52    color: #D9D9D9;53    white-space: nowrap;54    overflow: hidden;55    text-overflow: ellipsis;56  }57  .app-actions { display: flex; gap: 22px; }58 59  /* Preview behind the sheet */60  .doc-preview {61    position: absolute;62    top: 242px;63    left: 0;64    width: 100%;65    height: 720px;66    background: #E0E0E0;67    border-top: 1px solid #BDBDBD;68    border-bottom: 1px solid #BDBDBD;69    display: flex;70    align-items: flex-start;71    justify-content: center;72    color: #555;73    padding-top: 24px;74    box-sizing: border-box;75  }76  .doc-preview span { 77    background: rgba(255,255,255,0.8);78    color: #444;79    padding: 8px 14px;80    border: 1px solid #BDBDBD;81    border-radius: 6px;82    font-size: 28px;83  }84 85  /* Bottom sheet */86  .sheet {87    position: absolute;88    left: 0; right: 0; bottom: 0;89    height: 1500px;90    background: #1F2023;91    border-top-left-radius: 28px;92    border-top-right-radius: 28px;93    box-shadow: 0 -20px 40px rgba(0,0,0,0.55);94    padding: 26px 36px 34px;95    box-sizing: border-box;96  }97  .sheet .grabber {98    width: 120px; height: 8px; border-radius: 6px;99    background: #3B3C40; margin: 8px auto 22px;100  }101  .sheet-header {102    display: flex; align-items: center; justify-content: space-between;103    margin-bottom: 24px;104  }105  .sheet-title { font-size: 52px; font-weight: 700; }106  .add-people {107    width: 80px; height: 80px; border-radius: 50%;108    background: #2A2B2F; display: flex; align-items: center; justify-content: center;109    border: 1px solid rgba(255,255,255,0.08);110  }111 112  .file-row {113    display: flex; align-items: center; gap: 24px;114    padding: 24px 0;115    border-bottom: 1px solid rgba(255,255,255,0.06);116  }117  .thumb {118    width: 130px; height: 130px; background: #E0E0E0; border: 1px solid #BDBDBD;119    display: flex; align-items: center; justify-content: center; color: #757575;120    font-size: 24px;121  }122  .file-meta .name { font-size: 40px; color: #fff; margin-bottom: 6px; }123  .file-meta .sub { font-size: 28px; color: #B8B8B8; }124 125  .hint { margin: 26px 0 16px; color: #A6A6A8; font-size: 28px; }126 127  .share-card {128    background: #0B57D0;129    border-radius: 26px;130    padding: 28px;131    position: relative;132    color: #fff;133  }134  .share-card .row {135    display: flex; align-items: center; justify-content: space-between;136  }137  .share-card .title { font-size: 44px; font-weight: 700; }138  .share-card .subtitle { font-size: 28px; opacity: 0.95; margin-top: 6px; }139  .radio {140    width: 44px; height: 44px; border-radius: 50%;141    border: 3px solid #fff; display: inline-flex; align-items: center; justify-content: center;142    background: transparent;143  }144  .radio .dot {145    width: 20px; height: 20px; background: #fff; border-radius: 50%;146  }147 148  .share-options {149    margin-top: 22px;150    display: grid;151    gap: 14px;152  }153  .opt {154    display: flex; align-items: center; gap: 14px;155    font-size: 30px;156  }157  .opt svg { width: 38px; height: 38px; }158  .modify {159    margin-top: 18px;160    color: #E7F0FF;161    font-size: 28px;162    display: inline-flex; align-items: center; gap: 8px;163  }164 165  .export-row {166    margin-top: 28px;167    padding: 24px 4px;168    border-top: 1px solid rgba(255,255,255,0.06);169    border-bottom: 1px solid rgba(255,255,255,0.06);170    display: flex; align-items: center; justify-content: space-between;171  }172  .export-row .left .h { font-size: 42px; font-weight: 700; }173  .export-row .left .s { font-size: 28px; color: #B8B8B8; margin-top: 6px; }174 175  .footer-actions {176    position: absolute;177    bottom: 80px;178    left: 36px;179    right: 36px;180    display: flex; align-items: center; justify-content: space-between; gap: 24px;181  }182  .btn-primary {183    flex: 1 1 auto;184    max-width: 720px;185    height: 120px; border-radius: 16px; border: none;186    background: #2B6EE8;187    color: #fff; font-size: 42px; font-weight: 700;188    display: flex; align-items: center; justify-content: center; gap: 16px;189    box-shadow: 0 8px 16px rgba(0,0,0,0.35);190  }191  .share-icons { display: flex; align-items: center; gap: 18px; }192  .app-icon {193    width: 110px; height: 110px; border-radius: 50%;194    background: #2A2B2F; display: flex; align-items: center; justify-content: center;195    border: 1px solid rgba(255,255,255,0.08);196  }197 198  /* Home indicator */199  .home-indicator {200    position: absolute;201    bottom: 18px; left: 50%;202    transform: translateX(-50%);203    width: 320px; height: 10px; border-radius: 8px;204    background: rgba(255,255,255,0.7);205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar -->212  <div class="status-bar">213    <div class="status-left">8:42</div>214    <div class="status-right">215      <div class="icon">216        <svg viewBox="0 0 24 24" width="36" height="36" fill="#CFCFCF"><path d="M2 10h14v6H2z" opacity="0.5"/><path d="M18 7h3v12h-3z" /></svg>217      </div>218      <div style="display:flex;align-items:center;gap:6px;">219        <svg viewBox="0 0 24 24" width="36" height="36" fill="#CFCFCF"><path d="M2 20h20v2H2zM4 16h16v2H4zM6 12h12v2H6zM8 8h8v2H8zM10 4h4v2h-4z"/></svg>220      </div>221      <div style="display:flex;align-items:center;gap:8px;">222        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M3 13h18v8H3z"/><path d="M6 13V7a6 6 0 0 1 12 0v6"/></svg>223        <span style="font-size:30px;color:#fff;">71%</span>224      </div>225    </div>226  </div>227 228  <!-- App Bar -->229  <div class="app-bar">230    <div class="icon">231      <svg viewBox="0 0 24 24" width="58" height="58" stroke="#E6E6E6" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round">232        <path d="M15 18l-6-6 6-6"/>233      </svg>234    </div>235    <div class="app-title">the-diary-of-anne-fr...</div>236    <div class="app-actions">237      <div class="icon">238        <svg viewBox="0 0 24 24" width="44" height="44" stroke="#E6E6E6" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">239          <path d="M12 2l3 6 6 .9-4.5 4.3L17 20l-5-3-5 3 1.5-6.8L4 8.9 10 8z"/>240        </svg>241      </div>242      <div class="icon">243        <svg viewBox="0 0 24 24" width="44" height="44" stroke="#E6E6E6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">244          <circle cx="11" cy="11" r="7"></circle>245          <path d="M21 21l-4.3-4.3"></path>246        </svg>247      </div>248      <div class="icon">249        <svg viewBox="0 0 24 24" width="44" height="44" fill="#E6E6E6">250          <circle cx="12" cy="5" r="2"></circle>251          <circle cx="12" cy="12" r="2"></circle>252          <circle cx="12" cy="19" r="2"></circle>253        </svg>254      </div>255    </div>256  </div>257 258  <!-- Document Preview -->259  <div class="doc-preview">260    <span>[IMG: PDF Preview]</span>261  </div>262 263  <!-- Bottom Sheet -->264  <div class="sheet">265    <div class="grabber"></div>266    <div class="sheet-header">267      <div class="sheet-title">Share file</div>268      <div class="add-people">269        <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#DADADA" stroke-width="2">270          <circle cx="9" cy="8" r="4"></circle>271          <path d="M2 20c0-3.3 3.6-6 7-6"></path>272          <path d="M17 11v6"></path>273          <path d="M14 14h6"></path>274        </svg>275      </div>276    </div>277 278    <div class="file-row">279      <div class="thumb">[IMG: PDF Thumbnail]</div>280      <div class="file-meta">281        <div class="name">the-diary-of-anne-frank-1.pdf</div>282        <div class="sub">702 KB, modified 1 hour ago</div>283      </div>284    </div>285 286    <div class="hint">Choose how to share this file</div>287 288    <div class="share-card">289      <div class="row">290        <div>291          <div class="title">Share link</div>292          <div class="subtitle">Receivers can view</div>293        </div>294        <div class="radio" aria-checked="true"><div class="dot"></div></div>295      </div>296 297      <div class="share-options">298        <div class="opt">299          <svg viewBox="0 0 24 24" stroke="#FFFFFF" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">300            <circle cx="12" cy="12" r="3"></circle>301            <path d="M19.4 15a1.7 1.7 0 0 0 .1-1 7 7 0 0 0-.6-1.5l1.5-1.7-1.9-1.9-1.7 1.5a7 7 0 0 0-1.5-.6 1.7 1.7 0 0 0-1 0l-.5-2.2H10l-.5 2.2a7 7 0 0 0-1.5.6L6.3 7.9 4.4 9.8l1.5 1.7a7 7 0 0 0-.6 1.5 1.7 1.7 0 0 0 .1 1L3 16v2l2.3.5a7 7 0 0 0 1.2 1.2L6 22h2l1-2.4 1 .2 1-.2L12 22h2l-.5-2.3a7 7 0 0 0 1.2-1.2L17 18l2-.4v-2z"/>302          </svg>303          <div>Manage access</div>304        </div>305        <div class="opt">306          <svg viewBox="0 0 24 24" stroke="#FFFFFF" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">307            <rect x="3" y="4" width="18" height="14" rx="2"></rect>308            <circle cx="8" cy="10.5" r="2"></circle>309            <path d="M4 18c2.5-3 5.5-3 7.5 0"></path>310            <path d="M14 9h6M14 13h5"></path>311          </svg>312          <div>Add password or expiration date</div>313        </div>314      </div>315 316      <div class="modify">317        Modify settings318        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#E7F0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>319      </div>320    </div>321 322    <div class="export-row">323      <div class="left">324        <div class="h">Export a copy</div>325        <div class="s">Receivers are sent a copy</div>326      </div>327      <div class="radio" aria-checked="false"></div>328    </div>329 330    <div class="footer-actions">331      <button class="btn-primary" type="button">332        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">333          <path d="M10.5 13.5l3-3"></path>334          <path d="M7.8 15.2a4.5 4.5 0 1 1 0-6.4l2 2"></path>335          <path d="M16.2 8.8a4.5 4.5 0 1 1 0 6.4l-2-2"></path>336        </svg>337        Copy Link338      </button>339      <div class="share-icons">340        <div class="app-icon">341          <svg viewBox="0 0 24 24" width="54" height="54" fill="#6FA7FF"><circle cx="12" cy="12" r="10"/></svg>342        </div>343        <div class="app-icon">344          <svg viewBox="0 0 24 24" width="54" height="54" fill="#EA4335">345            <rect x="4" y="6" width="16" height="12" rx="2" fill="#EA4335"/>346            <path d="M4 8l8 5 8-5" fill="#FFC107"/>347          </svg>348        </div>349        <div class="app-icon">350          <svg viewBox="0 0 24 24" width="54" height="54" fill="#DADADA">351            <circle cx="12" cy="12" r="2"></circle>352            <circle cx="12" cy="6" r="2"></circle>353            <circle cx="12" cy="18" r="2"></circle>354          </svg>355        </div>356      </div>357    </div>358  </div>359 360  <div class="home-indicator"></div>361</div>362</body>363</html>