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>Chill List - Share Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: linear-gradient(180deg, #0e0e0e 0%, #151515 35%, #1a1a1a 100%);15    color: #e6e6e6;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 90px;25    padding: 0 28px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #eaeaea;30    opacity: 0.95;31    font-weight: 600;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .sb-right {36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .sb-icon { width: 34px; height: 34px; opacity: 0.9; }41 42  /* Back button */43  .back-btn {44    position: absolute;45    top: 130px;46    left: 28px;47    width: 72px;48    height: 72px;49    border-radius: 36px;50    display: flex;51    align-items: center;52    justify-content: center;53    color: #cfcfcf;54  }55 56  /* Top area */57  .top-wrap {58    position: absolute;59    left: 72px;60    top: 140px;61    right: 72px;62  }63 64  .cover-and-actions {65    position: relative;66    width: 100%;67    height: 720px;68  }69 70  .cover {71    position: absolute;72    left: 48px;73    top: 0;74    width: 680px;75    height: 680px;76    border-radius: 28px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #5f5f5f;83    font-size: 34px;84    font-weight: 600;85  }86 87  .kebab {88    position: absolute;89    right: 8px;90    top: 20px;91    width: 84px;92    height: 84px;93    border-radius: 42px;94    display: flex;95    align-items: center;96    justify-content: center;97    background: transparent;98    color: #8e8e8e;99  }100 101  .action-fab {102    position: absolute;103    right: 40px;104    top: 520px;105    display: flex;106    gap: 24px;107    align-items: center;108  }109  .fab {110    width: 140px;111    height: 140px;112    border-radius: 70px;113    box-shadow: 0 6px 14px rgba(0,0,0,0.4);114    display: flex;115    align-items: center;116    justify-content: center;117  }118  .fab.edit { background: #3a3a3a; border: 1px solid #4a4a4a; }119  .fab.play { background: #1d7267; }120 121  /* Title & meta */122  .title-block {123    margin-top: 48px;124    padding-left: 48px;125    color: #d9d9d9;126  }127  .playlist-title {128    font-size: 82px;129    font-weight: 700;130    letter-spacing: 0.5px;131    margin: 28px 0 18px;132  }133  .subtitle {134    font-size: 36px;135    color: #b0b0b0;136  }137 138  /* Actions row */139  .actions-row {140    margin-top: 34px;141    padding-left: 48px;142    display: flex;143    align-items: center;144    gap: 28px;145    color: #c9c9c9;146  }147  .chip {148    display: inline-flex;149    align-items: center;150    justify-content: center;151    width: 92px;152    height: 92px;153    border-radius: 46px;154    border: 2px solid #3b3b3b;155    background: #232323;156  }157  .duration-meta {158    margin-left: 14px;159    font-size: 32px;160    color: #969696;161  }162 163  /* Track item */164  .track-item {165    margin-top: 44px;166    padding: 28px 32px 28px 48px;167    display: flex;168    align-items: center;169    justify-content: space-between;170    color: #e5e5e5;171  }172  .track-text .title { font-size: 44px; font-weight: 600; margin: 0 0 8px; }173  .track-text .artist { font-size: 32px; color: #9a9a9a; }174  .track-actions {175    display: flex;176    align-items: center;177    gap: 34px;178  }179 180  /* Share sheet */181  .sheet {182    position: absolute;183    left: 0;184    right: 0;185    bottom: 0;186    height: 920px;187    background: #242424;188    border-top-left-radius: 32px;189    border-top-right-radius: 32px;190    box-shadow: 0 -18px 28px rgba(0,0,0,0.55);191  }192  .sheet-header {193    padding: 24px 36px 8px;194    color: #f0f0f0;195    font-size: 44px;196    font-weight: 700;197  }198  .sheet-list { margin-top: 8px; }199  .sheet-item {200    display: flex;201    align-items: center;202    padding: 26px 36px;203    border-top: 1px solid #2f2f2f;204  }205  .sheet-item:first-of-type { border-top: none; }206  .app-icon {207    width: 92px;208    height: 92px;209    border-radius: 46px;210    background: #E0E0E0;211    border: 1px solid #BDBDBD;212    color: #5b5b5b;213    font-size: 28px;214    display: flex;215    align-items: center;216    justify-content: center;217    margin-right: 28px;218    font-weight: 700;219  }220  .app-text .name { font-size: 40px; color: #eaeaea; }221  .app-text .desc { font-size: 30px; color: #a8a8a8; margin-top: 6px; }222  .sheet-footer {223    position: absolute;224    left: 0;225    right: 0;226    bottom: 24px;227    display: flex;228    justify-content: center;229  }230  .home-indicator {231    width: 260px;232    height: 10px;233    border-radius: 5px;234    background: #e9e9e9;235    opacity: 0.85;236  }237 238  /* Helpers */239  .icon { width: 44px; height: 44px; }240  .icon.large { width: 62px; height: 62px; }241  .muted { color: #9a9a9a; }242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Status Bar -->248  <div class="status-bar">249    <div class="sb-left">12:24</div>250    <div class="sb-right">251      <!-- simple placeholders for status icons -->252      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#eaeaea" stroke-width="2"/></svg>253      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/></svg>254      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#eaeaea" stroke-width="2"/></svg>255      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="7" y="6" width="10" height="12" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/><path d="M12 3v3" stroke="#eaeaea" stroke-width="2"/></svg>256    </div>257  </div>258 259  <!-- Back button -->260  <div class="back-btn" title="Back">261    <svg class="icon large" viewBox="0 0 24 24">262      <path d="M15 19l-7-7 7-7" fill="none" stroke="#d0d0d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263    </svg>264  </div>265 266  <!-- Top content -->267  <div class="top-wrap">268    <div class="cover-and-actions">269      <div class="cover">[IMG: Playlist Cover]</div>270 271      <div class="kebab">272        <svg class="icon large" viewBox="0 0 24 24">273          <circle cx="12" cy="4" r="2" fill="#8e8e8e"/>274          <circle cx="12" cy="12" r="2" fill="#8e8e8e"/>275          <circle cx="12" cy="20" r="2" fill="#8e8e8e"/>276        </svg>277      </div>278 279      <div class="action-fab">280        <div class="fab edit" title="Edit">281          <svg class="icon large" viewBox="0 0 24 24">282            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#cacaca"/>283            <path d="M20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z" fill="#cacaca"/>284          </svg>285        </div>286        <div class="fab play" title="Play">287          <svg class="icon large" viewBox="0 0 24 24">288            <path d="M8 5v14l11-7z" fill="#e9f8f4"/>289          </svg>290        </div>291      </div>292    </div>293 294    <div class="title-block">295      <div class="playlist-title">Chill List</div>296      <div class="subtitle">1 song with music from artists like Joe Pass.</div>297 298      <div class="actions-row">299        <div class="chip" title="Download">300          <svg class="icon" viewBox="0 0 24 24">301            <path d="M12 3v12" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round"/>302            <path d="M7 10l5 5 5-5" fill="none" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>303            <path d="M4 20h16" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round"/>304          </svg>305        </div>306        <div class="chip" title="Share">307          <svg class="icon" viewBox="0 0 24 24">308            <path d="M4 12v8h16v-8" fill="none" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round"/>309            <path d="M12 4l0 12" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round"/>310            <path d="M7 9l5-5 5 5" fill="none" stroke="#d5d5d5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>311          </svg>312        </div>313        <div class="duration-meta">3m 32s • 1 Songs</div>314      </div>315 316      <div class="track-item">317        <div class="track-text">318          <div class="title">Night And Day (Album Version)</div>319          <div class="artist">Joe Pass - Virtuoso</div>320        </div>321        <div class="track-actions">322          <svg class="icon" viewBox="0 0 24 24" title="Download">323            <path d="M12 3v12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>324            <path d="M7 10l5 5 5-5" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>325            <path d="M4 20h16" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>326          </svg>327          <svg class="icon" viewBox="0 0 24 24" title="More">328            <circle cx="12" cy="5" r="2" fill="#b8b8b8"/>329            <circle cx="12" cy="12" r="2" fill="#b8b8b8"/>330            <circle cx="12" cy="19" r="2" fill="#b8b8b8"/>331          </svg>332        </div>333      </div>334    </div>335  </div>336 337  <!-- Share sheet -->338  <div class="sheet">339    <div class="sheet-header">Share</div>340    <div class="sheet-list">341      <div class="sheet-item">342        <div class="app-icon">GM</div>343        <div class="app-text">344          <div class="name">Gmail</div>345        </div>346      </div>347      <div class="sheet-item">348        <div class="app-icon">RE</div>349        <div class="app-text">350          <div class="name">Reminder</div>351          <div class="desc">Create Reminder</div>352        </div>353      </div>354      <div class="sheet-item">355        <div class="app-icon">NS</div>356        <div class="app-text">357          <div class="name">Nearby Share</div>358        </div>359      </div>360    </div>361 362    <div class="sheet-footer">363      <div class="home-indicator"></div>364    </div>365  </div>366 367</div>368</body>369</html>