GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Music Player Share Sheet</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: radial-gradient(1200px 900px at 15% 0%, #3b2a6a 0%, #1b1331 60%, #140e26 100%);19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 100%;27 height: 110px;28 background: #000;29 color: #fff;30 display: flex;31 align-items: center;32 padding: 0 36px;33 box-sizing: border-box;34 font-weight: 600;35 }36 .status-left {37 display: flex;38 align-items: center;39 gap: 24px;40 font-size: 40px;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .status-dot {48 width: 18px;49 height: 18px;50 background: #fff;51 border-radius: 50%;52 opacity: 0.85;53 }54 .status-right {55 margin-left: auto;56 display: flex;57 align-items: center;58 gap: 28px;59 }60 .status-svg {61 width: 48px;62 height: 48px;63 fill: none;64 stroke: #fff;65 stroke-width: 5;66 }67 68 /* Top track info */69 .track-info {70 position: absolute;71 top: 150px;72 left: 40px;73 color: #fff;74 }75 .title-badge,76 .artist-badge {77 display: inline-block;78 background: rgba(0,0,0,0.8);79 padding: 22px 26px;80 border-radius: 8px;81 margin-bottom: 14px;82 box-shadow: 0 2px 0 rgba(0,0,0,0.35);83 }84 .title-badge {85 font-size: 46px;86 font-weight: 800;87 letter-spacing: 0.2px;88 }89 .artist-badge {90 font-size: 36px;91 font-weight: 600;92 width: fit-content;93 }94 .behind-pill {95 display: inline-flex;96 align-items: center;97 gap: 16px;98 background: rgba(0,0,0,0.7);99 color: #BDBDBD;100 padding: 18px 22px;101 border-radius: 8px;102 font-size: 30px;103 margin-top: 8px;104 }105 .mini-eq {106 width: 32px;107 height: 32px;108 }109 110 /* Right-side actions */111 .top-actions {112 position: absolute;113 top: 140px;114 right: 40px;115 display: flex;116 flex-direction: column;117 gap: 30px;118 }119 .circle-btn {120 width: 120px;121 height: 120px;122 background: rgba(255,255,255,0.18);123 border-radius: 50%;124 display: flex;125 align-items: center;126 justify-content: center;127 }128 .circle-btn svg {129 width: 60px;130 height: 60px;131 fill: none;132 stroke: #fff;133 stroke-width: 8;134 }135 136 /* Player controls */137 .play-btn {138 position: absolute;139 top: 1260px;140 left: 50%;141 transform: translateX(-50%);142 width: 200px;143 height: 200px;144 background: rgba(0,0,0,0.85);145 border-radius: 50%;146 display: flex;147 align-items: center;148 justify-content: center;149 box-shadow: 0 24px 60px rgba(0,0,0,0.6);150 }151 .play-btn svg {152 width: 90px;153 height: 90px;154 fill: #6f6f6f;155 }156 .skip-btn {157 position: absolute;158 top: 1260px;159 right: 120px;160 width: 140px;161 height: 140px;162 background: rgba(0,0,0,0.85);163 border-radius: 50%;164 display: flex;165 align-items: center;166 justify-content: center;167 box-shadow: 0 16px 40px rgba(0,0,0,0.6);168 }169 .skip-btn svg {170 width: 72px;171 height: 72px;172 fill: #6f6f6f;173 }174 175 /* Share sheet */176 .share-sheet {177 position: absolute;178 left: 0;179 right: 0;180 bottom: 120px;181 height: 620px;182 background: #0a0a0a;183 border-top-left-radius: 34px;184 border-top-right-radius: 34px;185 box-shadow: 0 -22px 40px rgba(0,0,0,0.6);186 color: #fff;187 padding: 28px 40px 40px 40px;188 box-sizing: border-box;189 }190 .drag-handle {191 position: absolute;192 top: 18px;193 left: 50%;194 transform: translateX(-50%);195 width: 160px;196 height: 12px;197 border-radius: 8px;198 background: #8e8e8e;199 opacity: 0.6;200 }201 .sheet-header {202 margin-top: 46px;203 display: flex;204 align-items: center;205 gap: 28px;206 }207 .art-placeholder {208 width: 160px;209 height: 160px;210 background: #E0E0E0;211 border: 1px solid #BDBDBD;212 display: flex;213 align-items: center;214 justify-content: center;215 color: #757575;216 font-weight: 600;217 border-radius: 10px;218 }219 .sheet-meta {220 display: flex;221 flex-direction: column;222 gap: 12px;223 }224 .sheet-title {225 font-size: 42px;226 font-weight: 800;227 }228 .sheet-artist {229 font-size: 32px;230 color: #bfbfbf;231 font-weight: 600;232 }233 234 .share-actions {235 margin-top: 46px;236 display: flex;237 justify-content: space-between;238 padding: 0 20px;239 }240 .share-item {241 width: 210px;242 display: flex;243 flex-direction: column;244 align-items: center;245 gap: 18px;246 }247 .share-icon {248 width: 150px;249 height: 150px;250 background: #2b2b2b;251 border-radius: 50%;252 display: flex;253 align-items: center;254 justify-content: center;255 }256 .share-icon svg {257 width: 72px;258 height: 72px;259 fill: none;260 stroke: #fff;261 stroke-width: 7;262 }263 .share-label {264 font-size: 30px;265 color: #cfcfcf;266 }267 268 /* Bottom navigation pill */269 .nav-pill {270 position: absolute;271 bottom: 40px;272 left: 50%;273 transform: translateX(-50%);274 width: 170px;275 height: 14px;276 border-radius: 10px;277 background: #d7d7d7;278 opacity: 0.85;279 }280</style>281</head>282<body>283<div id="render-target">284 285 <!-- Status bar -->286 <div class="status-bar">287 <div class="status-left">288 <div>11:16</div>289 <div class="status-icons">290 <div class="status-dot"></div>291 <div class="status-dot"></div>292 <div class="status-dot"></div>293 <div class="status-dot"></div>294 <div class="status-dot" style="opacity:0.5;"></div>295 </div>296 </div>297 <div class="status-right">298 <svg class="status-svg" viewBox="0 0 24 24">299 <path d="M2 12c4-4 16-4 20 0" />300 <path d="M5 12c3-3 11-3 14 0" />301 <path d="M8 12c2-2 6-2 8 0" />302 <circle cx="12" cy="12" r="1.5" fill="#fff"></circle>303 </svg>304 <svg class="status-svg" viewBox="0 0 28 24">305 <rect x="2" y="4" width="22" height="16" rx="3" ry="3" />306 <rect x="24" y="9" width="2" height="6" />307 <rect x="4" y="6" width="16" height="12" fill="#fff" stroke="none" />308 </svg>309 </div>310 </div>311 312 <!-- Track info -->313 <div class="track-info">314 <div class="title-badge">Lord Huron - The Night We Met (Slowed down)</div>315 <div class="artist-badge">Tina</div>316 <div class="behind-pill">317 <svg class="mini-eq" viewBox="0 0 24 24">318 <rect x="3" y="8" width="4" height="8" fill="#9e9e9e"></rect>319 <rect x="10" y="5" width="4" height="14" fill="#9e9e9e"></rect>320 <rect x="17" y="10" width="4" height="6" fill="#9e9e9e"></rect>321 </svg>322 <span>Behind this track</span>323 </div>324 </div>325 326 <!-- Right side actions -->327 <div class="top-actions">328 <div class="circle-btn">329 <svg viewBox="0 0 24 24">330 <polyline points="6,9 12,15 18,9" stroke-linecap="round" stroke-linejoin="round"></polyline>331 </svg>332 </div>333 <div class="circle-btn">334 <svg viewBox="0 0 24 24">335 <circle cx="12" cy="8" r="3"></circle>336 <path d="M6 20c0-3 4-4 6-4s6 1 6 4" stroke-linecap="round"></path>337 <path d="M18 7h4"></path>338 <path d="M20 5v4"></path>339 </svg>340 </div>341 </div>342 343 <!-- Player controls -->344 <div class="play-btn">345 <svg viewBox="0 0 24 24">346 <polygon points="9,7 18,12 9,17"></polygon>347 </svg>348 </div>349 <div class="skip-btn">350 <svg viewBox="0 0 24 24">351 <polygon points="6,6 13,12 6,18"></polygon>352 <polygon points="11,6 18,12 11,18"></polygon>353 <rect x="18.5" y="6" width="2" height="12" fill="#6f6f6f"></rect>354 </svg>355 </div>356 357 <!-- Share sheet -->358 <div class="share-sheet">359 <div class="drag-handle"></div>360 361 <div class="sheet-header">362 <div class="art-placeholder">[IMG: Track Art]</div>363 <div class="sheet-meta">364 <div class="sheet-title">Lord Huron - The Night We Met (Slowed down)</div>365 <div class="sheet-artist">Tina</div>366 </div>367 </div>368 369 <div class="share-actions">370 <div class="share-item">371 <div class="share-icon">372 <svg viewBox="0 0 24 24">373 <rect x="3" y="3" width="7" height="7"></rect>374 <rect x="14" y="3" width="7" height="4"></rect>375 <rect x="3" y="14" width="4" height="7"></rect>376 <rect x="16" y="14" width="5" height="7"></rect>377 <rect x="10" y="10" width="4" height="4"></rect>378 </svg>379 </div>380 <div class="share-label">QR code</div>381 </div>382 383 <div class="share-item">384 <div class="share-icon">385 <svg viewBox="0 0 24 24">386 <rect x="6" y="6" width="12" height="12"></rect>387 <rect x="2" y="2" width="12" height="12"></rect>388 </svg>389 </div>390 <div class="share-label">Copy Link</div>391 </div>392 393 <div class="share-item">394 <div class="share-icon">395 <svg viewBox="0 0 24 24">396 <path d="M4 6h12c2 0 4 2 4 4s-2 4-4 4H10l-6 4v-4c-2 0-2-2-2-4s2-4 2-4z"></path>397 </svg>398 </div>399 <div class="share-label">SMS</div>400 </div>401 402 <div class="share-item">403 <div class="share-icon">404 <svg viewBox="0 0 24 24">405 <circle cx="6" cy="12" r="2" fill="#fff" stroke="none"></circle>406 <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>407 <circle cx="18" cy="12" r="2" fill="#fff" stroke="none"></circle>408 </svg>409 </div>410 <div class="share-label">More</div>411 </div>412 </div>413 </div>414 415 <!-- Bottom navigation pill -->416 <div class="nav-pill"></div>417</div>418</body>419</html>