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>Playlist Save UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18  /* Top area */19  .top-bar {20    position: absolute;21    top: 72px;22    left: 48px;23    right: 48px;24    height: 96px;25  }26  .back-btn {27    width: 72px;28    height: 72px;29    display: inline-flex;30    align-items: center;31    justify-content: center;32  }33  .top-actions {34    position: absolute;35    right: 0;36    top: 0;37    display: inline-flex;38    align-items: center;39    gap: 24px;40  }41  .save-btn {42    background: #FFFFFF;43    color: #000;44    border-radius: 20px;45    padding: 18px 32px;46    font-weight: 600;47    box-shadow: 0 6px 14px rgba(0,0,0,0.35);48  }49  .cast {50    width: 72px;51    height: 72px;52    border-radius: 12px;53    background: rgba(255,255,255,0.08);54    display: inline-flex;55    align-items: center;56    justify-content: center;57  }58 59  /* Content */60  .content {61    position: absolute;62    top: 220px;63    left: 48px;64    right: 48px;65  }66  .create-row {67    display: flex;68    align-items: center;69    gap: 32px;70    padding: 20px 0;71  }72  .create-square {73    width: 176px;74    height: 176px;75    background: #2B2B2B;76    border-radius: 16px;77    position: relative;78  }79  .create-text {80    font-size: 44px;81    font-weight: 600;82    letter-spacing: 0.2px;83  }84  .playlist-item {85    display: flex;86    align-items: center;87    justify-content: space-between;88    margin-top: 80px;89  }90  .pl-left {91    display: flex;92    align-items: center;93    gap: 32px;94  }95  .artwork {96    width: 180px;97    height: 180px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 10px;101    display: flex;102    align-items: center;103    justify-content: center;104    color: #757575;105    font-size: 26px;106    text-align: center;107    padding: 8px;108  }109  .pl-title {110    font-size: 46px;111    font-weight: 700;112    margin-bottom: 10px;113  }114  .pl-sub {115    font-size: 32px;116    color: #9E9E9E;117  }118  .check {119    width: 72px;120    height: 72px;121    border-radius: 36px;122    background: rgba(255,255,255,0.08);123    display: flex;124    align-items: center;125    justify-content: center;126  }127 128  /* Mini player */129  .mini-player {130    position: absolute;131    left: 0;132    right: 0;133    bottom: 260px;134    height: 180px;135    background: linear-gradient(90deg, #1d215a 0%, #2b1f47 100%);136    padding: 28px 40px 22px 40px;137  }138  .mini-upper {139    display: flex;140    align-items: center;141    justify-content: space-between;142  }143  .mini-left {144    display: flex;145    align-items: center;146    gap: 28px;147    min-width: 0;148  }149  .track-title {150    font-size: 34px;151    font-weight: 700;152    white-space: nowrap;153    overflow: hidden;154    text-overflow: ellipsis;155    max-width: 640px;156  }157  .track-sub {158    font-size: 28px;159    color: #BDBDBD;160    margin-top: 4px;161  }162  .mini-right {163    display: flex;164    align-items: center;165    gap: 36px;166  }167  .progress {168    position: absolute;169    left: 40px;170    right: 40px;171    bottom: 18px;172    height: 6px;173    background: rgba(255,255,255,0.15);174    border-radius: 3px;175    overflow: hidden;176  }177  .progress .bar {178    width: 38%;179    height: 100%;180    background: #FF6D00;181  }182 183  /* Bottom navigation */184  .bottom-nav {185    position: absolute;186    left: 0;187    right: 0;188    bottom: 84px;189    height: 220px;190    background: #2A2A2A;191    border-top: 1px solid #3A3A3A;192    display: grid;193    grid-template-columns: repeat(5, 1fr);194    align-items: center;195    padding-bottom: 24px;196  }197  .nav-item {198    text-align: center;199    color: #BDBDBD;200  }201  .nav-item .label {202    font-size: 28px;203    margin-top: 12px;204  }205  .nav-item.active {206    color: #FFFFFF;207  }208  .home-indicator {209    position: absolute;210    left: 50%;211    transform: translateX(-50%);212    bottom: 24px;213    width: 360px;214    height: 10px;215    background: #FFFFFF;216    border-radius: 6px;217    opacity: 0.9;218  }219 220  /* Utility icons sizing */221  .icon-32 { width: 32px; height: 32px; }222  .icon-40 { width: 40px; height: 40px; }223  .icon-48 { width: 48px; height: 48px; }224  .icon-56 { width: 56px; height: 56px; }225  .icon-64 { width: 64px; height: 64px; }226  .icon-72 { width: 72px; height: 72px; }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Top actions -->233  <div class="top-bar">234    <div class="back-btn">235      <svg class="icon-56" viewBox="0 0 24 24" fill="none">236        <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>237      </svg>238    </div>239    <div class="top-actions">240      <div class="cast">241        <svg class="icon-48" viewBox="0 0 24 24" fill="none">242          <rect x="3" y="5" width="18" height="14" rx="2" stroke="#FFFFFF" stroke-width="2"/>243          <path d="M3 17a4 4 0 014 4M3 17a2 2 0 012 2M3 17h0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>244        </svg>245      </div>246      <div class="save-btn">Save</div>247    </div>248  </div>249 250  <!-- Content -->251  <div class="content">252    <div class="create-row">253      <div class="create-square">254        <svg viewBox="0 0 100 100" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);" width="72" height="72">255          <path d="M50 22v56M22 50h56" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>256        </svg>257      </div>258      <div class="create-text">Create playlist</div>259    </div>260 261    <div class="playlist-item">262      <div class="pl-left">263        <div class="artwork">[IMG: Purple cover art]</div>264        <div>265          <div class="pl-title">Feel Good</div>266          <div class="pl-sub">Playlist · 2 Tracks</div>267        </div>268      </div>269      <div class="check">270        <svg class="icon-48" viewBox="0 0 24 24" fill="none">271          <circle cx="12" cy="12" r="10" stroke="#CFCFCF" stroke-width="2"/>272          <path d="M7 12l3 3 7-7" stroke="#CFCFCF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>273        </svg>274      </div>275    </div>276  </div>277 278  <!-- Mini Player -->279  <div class="mini-player">280    <div class="mini-upper">281      <div class="mini-left">282        <svg class="icon-56" viewBox="0 0 24 24">283          <path d="M8 5l12 7-12 7V5z" fill="#FFFFFF"/>284        </svg>285        <div style="min-width:0;">286          <div class="track-title">Lord Huron - The Night We Met (Slowed...)</div>287          <div class="track-sub">Tina</div>288        </div>289      </div>290      <div class="mini-right">291        <svg class="icon-48" viewBox="0 0 24 24" fill="none">292          <circle cx="9" cy="8" r="4" stroke="#FFFFFF" stroke-width="2"/>293          <path d="M17 11v4m2-2h-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>294          <path d="M3 20c0-4 4-6 6-6s6 2 6 6" stroke="#FFFFFF" stroke-width="2" fill="none"/>295        </svg>296        <svg class="icon-48" viewBox="0 0 24 24" fill="none">297          <path d="M12 21s-6.5-4.35-8.5-7.23C1.4 11.3 2.9 8 6.2 8c2 0 3.2 1.1 3.8 2 0.6-0.9 1.8-2 3.8-2 3.3 0 4.8 3.3 2.7 5.77C18.5 16.65 12 21 12 21z" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linejoin="round"/>298        </svg>299      </div>300    </div>301    <div class="progress"><div class="bar"></div></div>302  </div>303 304  <!-- Bottom navigation -->305  <div class="bottom-nav">306    <div class="nav-item">307      <svg class="icon-56" viewBox="0 0 24 24" fill="none">308        <path d="M3 10l9-7 9 7v9a2 2 0 01-2 2H5a2 2 0 01-2-2v-9z" stroke="#BDBDBD" stroke-width="2"/>309        <path d="M9 21v-6h6v6" stroke="#BDBDBD" stroke-width="2"/>310      </svg>311      <div class="label">Home</div>312    </div>313    <div class="nav-item">314      <svg class="icon-56" viewBox="0 0 24 24" fill="none">315        <rect x="3" y="4" width="18" height="6" rx="1.5" stroke="#BDBDBD" stroke-width="2"/>316        <rect x="3" y="12" width="18" height="8" rx="1.5" stroke="#BDBDBD" stroke-width="2"/>317      </svg>318      <div class="label">Feed</div>319    </div>320    <div class="nav-item active">321      <svg class="icon-56" viewBox="0 0 24 24" fill="none">322        <circle cx="11" cy="11" r="7" stroke="#FFFFFF" stroke-width="2"/>323        <path d="M20 20l-4-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>324      </svg>325      <div class="label">Search</div>326    </div>327    <div class="nav-item">328      <svg class="icon-56" viewBox="0 0 24 24" fill="none">329        <rect x="4" y="3" width="6" height="18" rx="1.5" stroke="#BDBDBD" stroke-width="2"/>330        <rect x="14" y="6" width="6" height="15" rx="1.5" stroke="#BDBDBD" stroke-width="2"/>331      </svg>332      <div class="label">Library</div>333    </div>334    <div class="nav-item">335      <svg class="icon-56" viewBox="0 0 24 24" fill="none">336        <path d="M6 16a6 6 0 1111.9-2M6 16h10a3 3 0 010 6H8a3 3 0 01-2-6z" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>337      </svg>338      <div class="label">Upgrade</div>339    </div>340  </div>341 342  <div class="home-indicator"></div>343</div>344</body>345</html>