GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Share Sheet UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f7f7f8;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 70px;23 padding: 0 24px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #111;29 font-size: 28px;30 }31 32 /* App bar */33 .app-bar {34 position: absolute;35 top: 70px;36 left: 0;37 width: 1080px;38 height: 110px;39 background: #ffffff;40 display: flex;41 align-items: center;42 box-shadow: 0 1px 0 rgba(0,0,0,0.08);43 padding: 0 24px;44 box-sizing: border-box;45 }46 .app-bar .title {47 font-size: 42px;48 font-weight: 700;49 margin-left: 18px;50 }51 .app-actions {52 margin-left: auto;53 display: flex;54 gap: 34px;55 align-items: center;56 }57 .icon-btn {58 width: 56px;59 height: 56px;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #333;64 }65 66 /* List area */67 .content {68 position: absolute;69 top: 180px;70 left: 0;71 width: 1080px;72 bottom: 0;73 overflow: hidden;74 }75 .list {76 padding: 10px 0 0 0;77 }78 .item {79 position: relative;80 display: flex;81 align-items: center;82 gap: 26px;83 padding: 26px 24px;84 background: #fff;85 border-bottom: 1px solid #eee;86 }87 .item .file-badge {88 width: 78px;89 height: 78px;90 border-radius: 12px;91 background: #e8f0ff;92 border: 1px solid #cfd8ff;93 display: flex;94 align-items: center;95 justify-content: center;96 }97 .item .doc-badge {98 background: #ffe7e7;99 border-color: #ffc9c9;100 }101 .item .file-lines {102 width: 38px; height: 38px;103 }104 .item .texts {105 display: flex;106 flex-direction: column;107 }108 .item .name {109 font-size: 38px;110 font-weight: 700;111 color: #111;112 }113 .item .meta {114 margin-top: 6px;115 font-size: 28px;116 color: #6f6f6f;117 letter-spacing: 0.2px;118 }119 .check {120 margin-left: auto;121 width: 64px;122 height: 64px;123 border-radius: 50%;124 border: 3px solid #cfcfcf;125 }126 .check.selected {127 border-color: #2b74ff;128 background: #2b74ff;129 display: flex; align-items: center; justify-content: center;130 }131 .ad {132 margin: 0 0 12px 0;133 padding: 22px 24px;134 background: #fff;135 border-bottom: 1px solid #eee;136 }137 .ad .ad-img {138 width: 100%;139 height: 120px;140 background: #E0E0E0;141 border: 1px solid #BDBDBD;142 display: flex; align-items: center; justify-content: center;143 color: #757575;144 font-size: 28px;145 }146 147 /* Dim overlay for bottom sheet */148 .scrim {149 position: absolute;150 inset: 0;151 background: rgba(0,0,0,0.24);152 }153 154 /* Bottom Sheet */155 .sheet {156 position: absolute;157 left: 0;158 bottom: 0;159 width: 1080px;160 height: 950px;161 background: #ffffff;162 border-top-left-radius: 28px;163 border-top-right-radius: 28px;164 box-shadow: 0 -6px 24px rgba(0,0,0,0.25);165 padding: 28px 24px 30px;166 box-sizing: border-box;167 }168 .sheet-header {169 display: flex;170 align-items: center;171 gap: 20px;172 margin-bottom: 18px;173 }174 .sheet-header .doc-badge {175 width: 64px; height: 64px; border-radius: 12px;176 display: flex; align-items: center; justify-content: center;177 }178 .sheet-header .file-title {179 font-size: 40px;180 font-weight: 800;181 color: #111;182 }183 .star {184 margin-left: auto;185 width: 56px; height: 56px;186 display: flex; align-items: center; justify-content: center;187 }188 189 .row-head {190 display: flex;191 align-items: center;192 justify-content: space-between;193 margin-top: 10px;194 }195 .row-head .label {196 font-size: 34px; font-weight: 700;197 }198 .row-head .sub {199 font-size: 28px; color: #7b7b7b;200 }201 202 .circle-actions {203 margin-top: 20px;204 display: flex;205 gap: 44px;206 }207 .circle {208 width: 140px;209 display: flex;210 flex-direction: column;211 align-items: center;212 gap: 16px;213 }214 .circle .bubble {215 width: 120px; height: 120px; border-radius: 26px;216 display: flex; align-items: center; justify-content: center;217 color: #fff; font-weight: 700;218 }219 .circle .text {220 text-align: center;221 font-size: 28px;222 color: #333;223 line-height: 1.2;224 }225 226 .hint {227 margin-top: 24px;228 font-size: 28px;229 color: #7a7a7a;230 }231 232 .divider {233 margin: 22px -24px;234 height: 1px;235 background: #ededed;236 }237 238 .sheet-option {239 display: flex;240 align-items: center;241 gap: 24px;242 padding: 18px 0;243 }244 .opt-icon {245 width: 64px; height: 64px; border-radius: 12px; background: #f0f0f0;246 display: flex; align-items: center; justify-content: center; color: #777;247 }248 .sheet-option .opt-text {249 font-size: 34px; color: #111; font-weight: 600;250 }251 .badge-hot {252 background: #ff6b6b; color: #fff; font-size: 22px; padding: 4px 10px; border-radius: 16px; margin-left: 12px;253 }254 255 /* Simple SVG helpers */256 svg { display: block; }257 258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status Bar -->264 <div class="status-bar">265 <div>12:03</div>266 <div style="display:flex;gap:18px;align-items:center;color:#333;">267 <div style="width:18px;height:18px;background:#444;border-radius:3px;"></div>268 <div style="width:18px;height:18px;border:2px solid #444;border-radius:2px;"></div>269 </div>270 </div>271 272 <!-- App Bar -->273 <div class="app-bar">274 <div class="icon-btn" title="close">275 <svg width="36" height="36" viewBox="0 0 24 24">276 <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z" fill="#111"/>277 </svg>278 </div>279 <div class="title">1 selected</div>280 281 <div class="app-actions">282 <div class="icon-btn" title="move">283 <svg width="36" height="36" viewBox="0 0 24 24">284 <path d="M4 11h9V5l7 7-7 7v-6H4z" fill="#222"/>285 </svg>286 </div>287 <div class="icon-btn" title="delete">288 <svg width="36" height="36" viewBox="0 0 24 24">289 <path d="M6 7h12l-1 14H7L6 7zm2-3h8l1 2H7l1-2z" fill="#222"/>290 </svg>291 </div>292 <div class="icon-btn" title="share">293 <svg width="36" height="36" viewBox="0 0 24 24">294 <path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 14A3 3 0 0 0 9 12a3 3 0 0 0-.1-2l6.5-3.5A3 3 0 1 0 15 5a3 3 0 0 0 .1 1.1L8.6 9.6A3 3 0 1 0 9 14l6.5 3.5A3 3 0 1 0 18 16z" fill="#222"/>295 </svg>296 </div>297 <div class="icon-btn" title="more">298 <svg width="36" height="36" viewBox="0 0 24 24">299 <circle cx="12" cy="5" r="2.2" fill="#222"/>300 <circle cx="12" cy="12" r="2.2" fill="#222"/>301 <circle cx="12" cy="19" r="2.2" fill="#222"/>302 </svg>303 </div>304 </div>305 </div>306 307 <!-- List Content (behind the sheet) -->308 <div class="content">309 <div class="list">310 311 <div class="item">312 <div class="file-badge">313 <svg class="file-lines" viewBox="0 0 24 24">314 <rect x="5" y="5" width="14" height="2" fill="#5a78ff"></rect>315 <rect x="5" y="10" width="14" height="2" fill="#5a78ff"></rect>316 <rect x="5" y="15" width="10" height="2" fill="#5a78ff"></rect>317 </svg>318 </div>319 <div class="texts">320 <div class="name">Weekday schedule</div>321 <div class="meta">11:59 · 4.1 MB · My Cloud</div>322 </div>323 <div class="check"></div>324 </div>325 326 <div class="ad">327 <div class="ad-img">[IMG: Promotional Banner Ad]</div>328 </div>329 330 <div class="item">331 <div class="file-badge">332 <svg class="file-lines" viewBox="0 0 24 24">333 <rect x="5" y="5" width="14" height="2" fill="#5a78ff"></rect>334 <rect x="5" y="10" width="14" height="2" fill="#5a78ff"></rect>335 <rect x="5" y="15" width="10" height="2" fill="#5a78ff"></rect>336 </svg>337 </div>338 <div class="texts">339 <div class="name">Typical Weekend Schedule</div>340 <div class="meta">11:30 · 7 KB · My Cloud</div>341 </div>342 <div class="check"></div>343 </div>344 345 <div class="item" style="background:#eef4ff;">346 <div class="file-badge doc-badge">347 <svg width="40" height="40" viewBox="0 0 24 24">348 <rect x="4" y="3" width="16" height="18" rx="2" fill="#ff5c5c"></rect>349 <rect x="7" y="7" width="10" height="1.8" fill="#fff"></rect>350 <rect x="7" y="11" width="10" height="1.8" fill="#fff"></rect>351 </svg>352 </div>353 <div class="texts">354 <div class="name">Into-the-Wild-Jon-Krakauer</div>355 <div class="meta">09:38 · 1.8 MB · Download</div>356 </div>357 <div class="check selected">358 <svg width="34" height="34" viewBox="0 0 24 24">359 <path d="M9.2 16.6L4.5 11.9l1.4-1.4 3.3 3.3 8.9-8.9 1.4 1.4z" fill="#fff"/>360 </svg>361 </div>362 </div>363 364 <div class="item">365 <div class="file-badge doc-badge">366 <svg width="40" height="40" viewBox="0 0 24 24">367 <rect x="4" y="3" width="16" height="18" rx="2" fill="#ff5c5c"></rect>368 <rect x="7" y="7" width="10" height="1.8" fill="#fff"></rect>369 <rect x="7" y="11" width="10" height="1.8" fill="#fff"></rect>370 </svg>371 </div>372 <div class="texts">373 <div class="name">Ralph-Ellison-Invisible-Man-Text</div>374 <div class="meta">09:05 · 2.3 MB · Download</div>375 </div>376 <div class="check"></div>377 </div>378 379 </div>380 </div>381 382 <!-- Scrim -->383 <div class="scrim"></div>384 385 <!-- Share Bottom Sheet -->386 <div class="sheet">387 <div class="sheet-header">388 <div class="doc-badge" style="background:#ffe7e7;border:1px solid #ffcaca;">389 <svg width="34" height="34" viewBox="0 0 24 24">390 <rect x="5" y="4" width="14" height="16" rx="2" fill="#ff5a5a"></rect>391 <rect x="7" y="8" width="10" height="2" fill="#fff"></rect>392 <rect x="7" y="12" width="10" height="2" fill="#fff"></rect>393 </svg>394 </div>395 <div class="file-title">Into-the-Wild-Jon-Krakauer</div>396 <div class="star">397 <svg width="30" height="30" viewBox="0 0 24 24">398 <path d="M12 17.3l-5.2 3 1.3-5.8L3 9.8l6-0.5L12 4l3 5.3 6 0.5-5.1 4.7 1.3 5.8z" fill="none" stroke="#555" stroke-width="1.6"/>399 </svg>400 </div>401 </div>402 403 <div class="row-head">404 <div class="label">Share as Link</div>405 <div class="sub">Valid for 30 days</div>406 </div>407 408 <div class="circle-actions">409 <div class="circle">410 <div class="bubble" style="background:#ff4a3d;">G</div>411 <div class="text">Gmail</div>412 </div>413 <div class="circle">414 <div class="bubble" style="background:#3a86ff;">BT</div>415 <div class="text">Bluetooth Legacy</div>416 </div>417 <div class="circle">418 <div class="bubble" style="background:#6c63ff;">419 <svg width="44" height="44" viewBox="0 0 24 24">420 <path d="M3 12h18M12 3v18" stroke="#fff" stroke-width="2"/>421 </svg>422 </div>423 <div class="text">Copy Link</div>424 </div>425 <div class="circle">426 <div class="bubble" style="background:#fe6fae;">427 <svg width="46" height="46" viewBox="0 0 24 24">428 <rect x="4" y="5" width="16" height="10" rx="2" fill="#fff"/>429 <rect x="10" y="17" width="4" height="2" fill="#fff"/>430 </svg>431 </div>432 <div class="text">Computer</div>433 </div>434 <div class="circle">435 <div class="bubble" style="background:#8e9aa8;">436 <svg width="36" height="36" viewBox="0 0 24 24">437 <circle cx="6" cy="12" r="2.2" fill="#fff"/>438 <circle cx="12" cy="12" r="2.2" fill="#fff"/>439 <circle cx="18" cy="12" r="2.2" fill="#fff"/>440 </svg>441 </div>442 <div class="text">More</div>443 </div>444 </div>445 446 <div class="hint">Upload the current file and create a sharing link</div>447 448 <div class="divider"></div>449 450 <div class="sheet-option">451 <div class="opt-icon">452 <svg width="30" height="30" viewBox="0 0 24 24">453 <path d="M6 4h12v16H6zM9 7h6v2H9z" fill="#777"/>454 </svg>455 </div>456 <div class="opt-text">Share as File</div>457 </div>458 459 <div class="sheet-option">460 <div class="opt-icon">461 <svg width="30" height="30" viewBox="0 0 24 24">462 <rect x="3" y="3" width="18" height="18" rx="2" fill="#777"/>463 <rect x="6" y="7" width="12" height="2" fill="#fff"/>464 <rect x="6" y="11" width="12" height="2" fill="#fff"/>465 </svg>466 </div>467 <div class="opt-text">PDF to Word <span class="badge-hot">HOT</span></div>468 </div>469 470 <div class="sheet-option">471 <div class="opt-icon">472 <svg width="30" height="30" viewBox="0 0 24 24">473 <rect x="4" y="4" width="16" height="12" rx="2" fill="#777"/>474 <rect x="10" y="17" width="4" height="2" fill="#777"/>475 </svg>476 </div>477 <div class="opt-text">Export Long Image</div>478 </div>479 480 </div>481 482</div>483</body>484</html>