GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0B0B0B;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    font-size: 34px;30    letter-spacing: 1px;31  }32 33  /* Header section */34  .header {35    position: absolute;36    top: 100px;37    left: 0;38    width: 1080px;39    padding: 20px 36px 0 36px;40    box-sizing: border-box;41  }42 43  .back-btn {44    width: 98px;45    height: 98px;46    border-radius: 50%;47    background: #1E1E1E;48    display: flex;49    align-items: center;50    justify-content: center;51    margin-bottom: 18px;52  }53 54  .cast-btn {55    position: absolute;56    top: 8px;57    right: 36px;58    width: 96px;59    height: 96px;60    border-radius: 48px;61    background: #1E1E1E;62    display: flex;63    align-items: center;64    justify-content: center;65  }66 67  .cover-stack {68    position: relative;69    width: 340px;70    height: 240px;71    margin-top: 12px;72  }73  .cover-stack .sheet {74    position: absolute;75    width: 240px;76    height: 240px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #6E6E6E;83    font-size: 24px;84  }85  .sheet.s2 { left: 22px; top: 10px; opacity: 0.6; }86  .sheet.s3 { left: 44px; top: 20px; opacity: 0.8; }87  .sheet.main { left: 66px; top: 30px; opacity: 1; }88 89  .title-area {90    position: absolute;91    left: 440px;92    top: 36px;93    right: 36px;94  }95  .playlist-title {96    font-size: 64px;97    font-weight: 800;98    line-height: 1.1;99    margin: 0 0 10px 0;100  }101  .meta {102    color: #9E9E9E;103    font-size: 32px;104    margin-bottom: 28px;105  }106  .byline {107    display: flex;108    align-items: center;109    gap: 18px;110  }111  .avatar {112    width: 80px;113    height: 80px;114    background: #2B2B2B;115    border-radius: 50%;116  }117  .byline span {118    font-size: 36px;119    color: #DADADA;120  }121 122  .controls {123    position: absolute;124    left: 440px;125    top: 220px;126    display: flex;127    align-items: center;128    gap: 36px;129  }130  .shuffle {131    width: 90px;132    height: 90px;133    border-radius: 20px;134    background: #1E1E1E;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .play-btn {140    width: 170px;141    height: 170px;142    border-radius: 85px;143    background: #2E2E2E;144    display: flex;145    align-items: center;146    justify-content: center;147  }148 149  /* Suggestions section */150  .section {151    position: absolute;152    top: 520px;153    left: 36px;154    right: 36px;155  }156  .section h3 {157    font-size: 44px;158    margin: 0 0 28px 0;159    color: #EEEEEE;160  }161  .suggest-card {162    display: flex;163    align-items: center;164    gap: 28px;165    padding: 20px 8px;166  }167  .album-art {168    width: 180px;169    height: 180px;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    color: #6E6E6E;173    display: flex;174    align-items: center;175    justify-content: center;176    text-align: center;177    font-size: 22px;178  }179  .track-info {180    flex: 1;181  }182  .track-title {183    font-size: 48px;184    margin: 0 0 8px 0;185  }186  .track-artist {187    font-size: 36px;188    color: #BDBDBD;189    margin-bottom: 8px;190  }191  .track-meta {192    display: flex;193    align-items: center;194    gap: 12px;195    color: #9E9E9E;196    font-size: 32px;197  }198  .add-btn {199    width: 84px;200    height: 84px;201    border-radius: 18px;202    background: #1E1E1E;203    display: flex;204    align-items: center;205    justify-content: center;206    border: 2px solid #3A3A3A;207  }208 209  .refresh-btn {210    margin-top: 36px;211    width: 100%;212    height: 110px;213    background: #1E1E1E;214    color: #FFFFFF;215    border-radius: 22px;216    display: flex;217    align-items: center;218    justify-content: center;219    font-size: 44px;220    border: 1px solid #2C2C2C;221  }222 223  /* Toast */224  .toast {225    position: absolute;226    bottom: 360px;227    left: 50%;228    transform: translateX(-50%);229    padding: 26px 40px;230    background: rgba(255,255,255,0.08);231    border: 1px solid rgba(255,255,255,0.18);232    color: #FFFFFF;233    border-radius: 48px;234    font-size: 40px;235  }236 237  /* Mini player */238  .mini-player {239    position: absolute;240    left: 0;241    right: 0;242    bottom: 210px;243    height: 140px;244    background: #1A1A1A;245    display: flex;246    align-items: center;247    padding: 0 28px;248    box-sizing: border-box;249    gap: 24px;250    border-top: 1px solid #2A2A2A;251  }252  .mini-title {253    font-size: 38px;254  }255  .mini-sub {256    font-size: 30px;257    color: #BDBDBD;258  }259  .mini-info {260    display: flex;261    flex-direction: column;262  }263  .mini-spacer {264    flex: 1;265  }266  .icon-btn {267    width: 80px;268    height: 80px;269    background: transparent;270    display: flex;271    align-items: center;272    justify-content: center;273  }274 275  /* Bottom nav */276  .bottom-nav {277    position: absolute;278    left: 0;279    right: 0;280    bottom: 0;281    height: 210px;282    background: #0E0E0E;283    border-top: 1px solid #222;284    display: flex;285    justify-content: space-around;286    align-items: center;287    padding-bottom: 12px;288  }289  .nav-item {290    display: flex;291    flex-direction: column;292    align-items: center;293    color: #A0A0A0;294    font-size: 30px;295    gap: 10px;296  }297  .nav-item.active {298    color: #FFFFFF;299  }300  .nav-icon {301    width: 64px;302    height: 64px;303    display: flex;304    align-items: center;305    justify-content: center;306  }307</style>308</head>309<body>310<div id="render-target">311 312  <!-- Status Bar -->313  <div class="status-bar">314    <div>1:19</div>315    <div style="display:flex; align-items:center; gap:24px;">316      <!-- small status icons (placeholders as simple shapes) -->317      <svg width="28" height="28"><circle cx="14" cy="14" r="12" fill="#fff"/></svg>318      <svg width="28" height="28"><rect x="2" y="6" width="24" height="16" fill="#fff"/></svg>319      <svg width="28" height="28"><rect x="4" y="4" width="20" height="20" fill="#fff"/></svg>320      <svg width="28" height="28"><circle cx="14" cy="14" r="12" fill="#fff"/></svg>321    </div>322  </div>323 324  <!-- Header -->325  <div class="header">326    <div class="back-btn">327      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">328        <path d="M14 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>329      </svg>330    </div>331 332    <div class="cast-btn">333      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">334        <path d="M3 18h2a7 7 0 0 0-7-7v2a5 5 0 0 1 5 5zM3 14h2a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1zM21 6H3a2 2 0 0 0-2 2v2h2V8h18v8h-6v2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"/>335      </svg>336    </div>337 338    <div class="cover-stack">339      <div class="sheet s2"></div>340      <div class="sheet s3"></div>341      <div class="sheet main">[IMG: Playlist Cover]</div>342    </div>343 344    <div class="title-area">345      <h1 class="playlist-title">My Favorite Songs</h1>346      <div class="meta">Playlist · Just now</div>347      <div class="byline">348        <div class="avatar"></div>349        <span>By Amelia miller</span>350      </div>351    </div>352 353    <div class="controls">354      <div class="shuffle">355        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">356          <path d="M17 3h4v4h-2V6h-2V3zM3 7h5l9 10h4v4h-4v-2h-3L5 9H3V7zm0 10h4v2H3v-2z"/>357        </svg>358      </div>359      <div class="play-btn">360        <svg width="70" height="70" viewBox="0 0 24 24" fill="#fff">361          <path d="M8 5v14l11-7z"/>362        </svg>363      </div>364    </div>365  </div>366 367  <!-- Suggestions -->368  <div class="section">369    <h3>Suggestions for your new playlist</h3>370 371    <div class="suggest-card">372      <div class="album-art">[IMG: Album Art]</div>373      <div class="track-info">374        <div class="track-title">Mambo Diablo</div>375        <div class="track-artist">Tito Puente</div>376        <div class="track-meta">377          <svg width="28" height="28" viewBox="0 0 24 24" fill="#9E9E9E">378            <path d="M8 5v14l11-7z"/>379          </svg>380          <span>513 · 3:08</span>381        </div>382      </div>383      <div class="add-btn">384        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">385          <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>386        </svg>387      </div>388    </div>389 390    <div class="refresh-btn">Refresh suggestions</div>391  </div>392 393  <!-- Toast -->394  <div class="toast">Playlist created</div>395 396  <!-- Mini Player -->397  <div class="mini-player">398    <div class="icon-btn">399      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">400        <path d="M8 5v14l11-7z"/>401      </svg>402    </div>403    <div class="mini-info">404      <div class="mini-title">Tito Mambo</div>405      <div class="mini-sub">Tito Puente</div>406    </div>407    <div class="mini-spacer"></div>408    <div class="icon-btn">409      <!-- user-plus -->410      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">411        <path d="M15 14c-3 0-9 1.5-9 4.5V21h9v-2H8.5c.8-.7 3-1.5 6.5-1.5 1.6 0 3.1.2 4.5.6V18c0-3-6-4-9-4zM15 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM19 10v2h-2v2h-2v-2h-2v-2h2V8h2v2h2z"/>412      </svg>413    </div>414    <div class="icon-btn">415      <!-- heart outline -->416      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">417        <path d="M12.1 21.35l-1.1-1.02C5.1 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.59 4.81 14.26 4 16 4 18.5 4 20.5 6 20.5 8.5c0 3.78-3.1 6.86-8.9 11.83l-.5.47z" fill="none" stroke="#fff" stroke-width="2"/>418      </svg>419    </div>420  </div>421 422  <!-- Bottom Navigation -->423  <div class="bottom-nav">424    <div class="nav-item">425      <div class="nav-icon">426        <svg width="40" height="40" viewBox="0 0 24 24" fill="#A0A0A0">427          <path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/>428        </svg>429      </div>430      <div>Home</div>431    </div>432    <div class="nav-item">433      <div class="nav-icon">434        <svg width="40" height="40" viewBox="0 0 24 24" fill="#A0A0A0">435          <path d="M3 5h18v4H3V5zm0 6h12v8H3v-8zm14 0h4v8h-4v-8z"/>436        </svg>437      </div>438      <div>Feed</div>439    </div>440    <div class="nav-item">441      <div class="nav-icon">442        <svg width="40" height="40" viewBox="0 0 24 24" fill="#A0A0A0">443          <path d="M10 18a8 8 0 1 1 5.3-14l4.7 4.7-1.4 1.4-4.7-4.7A6 6 0 1 0 10 16a6 6 0 0 0 3.6-1.2l1.4 1.4A8 8 0 0 1 10 18z"/>444        </svg>445      </div>446      <div>Search</div>447    </div>448    <div class="nav-item active">449      <div class="nav-icon">450        <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF">451          <path d="M4 4h7v7H4V4zm0 9h7v7H4v-7zm9-9h7v7h-7V4zm0 9h7v7h-7v-7z"/>452        </svg>453      </div>454      <div>Library</div>455    </div>456    <div class="nav-item">457      <div class="nav-icon">458        <svg width="40" height="40" viewBox="0 0 24 24" fill="#A0A0A0">459          <path d="M19 18v-8l-7-4-7 4v8l7 4 7-4zM5 10.3l7 4 7-4M12 6v8"/>460        </svg>461      </div>462      <div>Upgrade</div>463    </div>464  </div>465 466</div>467</body>468</html>