GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Share Sheet</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: linear-gradient(#0b0b0c, #151617);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 height: 96px;23 width: 100%;24 color: #f1f1f1;25 display: flex;26 align-items: center;27 padding: 0 36px;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-left { flex: 1; }32 .status-right { display: flex; gap: 28px; align-items: center; }33 .status-icon svg { width: 44px; height: 44px; fill: #eaeaea; opacity: 0.9; }34 35 /* Back button */36 .back-btn {37 position: absolute;38 top: 140px;39 left: 36px;40 width: 72px;41 height: 72px;42 border-radius: 36px;43 display: flex;44 align-items: center;45 justify-content: center;46 color: #d9d9d9;47 opacity: 0.8;48 }49 .back-btn svg { width: 36px; height: 36px; fill: #d9d9d9; }50 51 /* Main card / album art */52 .album-art {53 position: absolute;54 top: 220px;55 left: 120px;56 width: 720px;57 height: 720px;58 background: #2a2b2e;59 border: 1px solid #1f2022;60 border-radius: 36px;61 color: #9aa0a6;62 display: flex;63 align-items: center;64 justify-content: center;65 font-size: 36px;66 letter-spacing: 0.3px;67 }68 69 /* Vertical menu on top right */70 .top-menu {71 position: absolute;72 top: 240px;73 right: 80px;74 width: 84px;75 height: 84px;76 border-radius: 42px;77 background: rgba(0,0,0,0.35);78 display: flex;79 align-items: center;80 justify-content: center;81 }82 .dots { display: flex; flex-direction: column; gap: 10px; }83 .dots span {84 width: 10px; height: 10px; border-radius: 50%;85 background: #8c8c8c;86 }87 88 /* Floating action buttons */89 .fab {90 position: absolute;91 top: 970px;92 right: 240px;93 width: 140px;94 height: 140px;95 border-radius: 70px;96 box-shadow: 0 8px 18px rgba(0,0,0,0.45);97 display: flex;98 align-items: center;99 justify-content: center;100 }101 .fab.edit { background: #bdbdbd; }102 .fab.play { right: 80px; background: #157a70; }103 .fab svg { width: 56px; height: 56px; fill: #1d1d1f; }104 .fab.play svg { fill: #e9f5f3; }105 106 /* Title and description */107 .list-title {108 position: absolute;109 top: 1120px;110 left: 120px;111 font-size: 76px;112 color: #cfcfcf;113 font-weight: 700;114 }115 .list-desc {116 position: absolute;117 top: 1220px;118 left: 120px;119 font-size: 34px;120 color: #a0a0a0;121 width: 820px;122 }123 124 /* Action row (download/share + duration) */125 .action-row {126 position: absolute;127 top: 1300px;128 left: 120px;129 display: flex;130 align-items: center;131 gap: 36px;132 color: #9a9a9a;133 font-size: 34px;134 }135 .circle-icon {136 width: 84px; height: 84px;137 border-radius: 42px;138 border: 1px solid #2d2e31;139 display: flex; align-items: center; justify-content: center;140 background: rgba(255,255,255,0.04);141 }142 .circle-icon svg { width: 40px; height: 40px; fill: #bfbfbf; }143 144 /* Single song row */145 .song-row {146 position: absolute;147 top: 1400px;148 left: 120px;149 right: 120px;150 padding: 24px 0;151 border-bottom: 1px solid rgba(255,255,255,0.06);152 }153 .song-title { font-size: 40px; color: #d9d9d9; margin-bottom: 8px; }154 .song-sub { font-size: 32px; color: #9a9a9a; }155 .song-actions {156 position: absolute;157 right: 0;158 top: 16px;159 display: flex;160 align-items: center;161 gap: 42px;162 }163 .song-actions .circle-icon { width: 72px; height: 72px; }164 165 /* Bottom share sheet */166 .sheet {167 position: absolute;168 left: 0;169 bottom: 0;170 width: 100%;171 height: 920px;172 background: #1e1f22;173 border-top-left-radius: 44px;174 border-top-right-radius: 44px;175 box-shadow: 0 -10px 24px rgba(0,0,0,0.6);176 color: #e9e9e9;177 }178 .sheet-header {179 padding: 36px 40px 20px;180 font-size: 44px;181 font-weight: 700;182 }183 .sheet-list { padding: 0 24px; }184 .sheet-item {185 display: flex;186 align-items: center;187 gap: 28px;188 padding: 28px 20px;189 border-radius: 16px;190 color: #e6e6e6;191 }192 .sheet-item.highlight { background: #7f7f80; }193 .app-icon {194 width: 78px; height: 78px; border-radius: 39px;195 background: #E0E0E0; border: 1px solid #BDBDBD;196 display: flex; align-items: center; justify-content: center;197 color: #454545; font-size: 28px; font-weight: 700;198 }199 .sheet-text { display: flex; flex-direction: column; }200 .sheet-text .title { font-size: 40px; }201 .sheet-text .sub { font-size: 28px; color: #b6b6b6; margin-top: 6px; }202 203 .sheet-footer {204 position: absolute;205 bottom: 84px;206 right: 40px;207 display: flex; gap: 60px;208 font-size: 38px;209 color: #cfd9ff;210 }211 212 /* Bottom navigation pill */213 .home-pill {214 position: absolute;215 bottom: 28px;216 left: 50%;217 transform: translateX(-50%);218 width: 300px;219 height: 14px;220 border-radius: 7px;221 background: #bfbfbf;222 opacity: 0.7;223 }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Status bar -->230 <div class="status-bar">231 <div class="status-left">12:25</div>232 <div class="status-right">233 <div class="status-icon">234 <!-- simple wifi -->235 <svg viewBox="0 0 24 24"><path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zm-6.6-7.7c4.5-3.7 10.7-3.7 15.2 0l-1.7 1.7c-3.6-2.9-8.3-2.9-11.9 0l-1.6-1.7zm3.8 3.9c2.7-2.2 6.5-2.2 9.1 0l-1.6 1.6c-1.9-1.6-4.9-1.6-6.8 0l-1.7-1.6z"/></svg>236 </div>237 <div class="status-icon">238 <!-- battery -->239 <svg viewBox="0 0 24 24"><path d="M18 6h2v12h-2V6zM3 7.5C3 6.7 3.7 6 4.5 6h11c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5h-11C3.7 18 3 17.3 3 16.5v-9z"/><rect x="5" y="9" width="9" height="6" fill="#eaeaea"/></svg>240 </div>241 </div>242 </div>243 244 <!-- Back button -->245 <div class="back-btn">246 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-2 2-9-9 9-9 2 2z"/></svg>247 </div>248 249 <!-- Album art placeholder -->250 <div class="album-art">[IMG: Album Art]</div>251 252 <!-- Vertical menu -->253 <div class="top-menu">254 <div class="dots">255 <span></span><span></span><span></span>256 </div>257 </div>258 259 <!-- Floating action buttons -->260 <div class="fab edit">261 <!-- pencil -->262 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zm18.7-10.8c.4-.4.4-1 0-1.4l-2.8-2.8c-.4-.4-1-.4-1.4 0l-2.2 2.2 3.75 3.75 2.65-2.95z"/></svg>263 </div>264 <div class="fab play">265 <!-- play -->266 <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7V5z"/></svg>267 </div>268 269 <!-- Playlist title and description -->270 <div class="list-title">Chill List</div>271 <div class="list-desc">1 song with music from artists like Joe Pass.</div>272 273 <!-- Action row -->274 <div class="action-row">275 <div class="circle-icon">276 <!-- download -->277 <svg viewBox="0 0 24 24"><path d="M12 3v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4L10 13.2V3h2zM4 19h16v2H4v-2z"/></svg>278 </div>279 <div class="circle-icon">280 <!-- share -->281 <svg viewBox="0 0 24 24"><path d="M18 16.1c-.9 0-1.7.4-2.2 1l-7.3-4.1c.1-.3.1-.6.1-.9s0-.6-.1-.9l7.3-4.1c.6.6 1.3 1 2.2 1 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .4.1.6L7.8 8.5C7.2 7.9 6.2 7.5 5.2 7.5 3.5 7.5 2.2 8.8 2.2 10.5s1.3 3 3 3c1 0 2-.4 2.6-1l7.2 4.1c-.1.2-.1.4-.1.7 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-2.7-3-2.7z"/></svg>282 </div>283 <div>3m 32s • 1 Songs</div>284 </div>285 286 <!-- Song row -->287 <div class="song-row">288 <div class="song-title">Night And Day (Album Version)</div>289 <div class="song-sub">Joe Pass - Virtuoso</div>290 <div class="song-actions">291 <div class="circle-icon">292 <svg viewBox="0 0 24 24"><path d="M12 3v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4L10 13.2V3h2z"/></svg>293 </div>294 <div class="circle-icon" style="background: transparent;">295 <!-- vertical dots -->296 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>297 </div>298 </div>299 </div>300 301 <!-- Bottom share sheet -->302 <div class="sheet">303 <div class="sheet-header">Share</div>304 <div class="sheet-list">305 <div class="sheet-item highlight">306 <div class="app-icon">G</div>307 <div class="sheet-text">308 <div class="title">Gmail</div>309 </div>310 </div>311 312 <div class="sheet-item">313 <div class="app-icon">R</div>314 <div class="sheet-text">315 <div class="title">Reminder</div>316 <div class="sub">Create Reminder</div>317 </div>318 </div>319 320 <div class="sheet-item">321 <div class="app-icon">N</div>322 <div class="sheet-text">323 <div class="title">Nearby Share</div>324 </div>325 </div>326 </div>327 328 <div class="sheet-footer">329 <div>Just once</div>330 <div>Always</div>331 </div>332 333 <div class="home-pill"></div>334 </div>335 336</div>337</body>338</html>