GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Music App UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0B0B0B;13    color: #fff;14  }15 16  /* Status Bar */17  .status-bar {18    height: 100px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #fff;24    font-weight: 600;25    font-size: 44px;26  }27  .status-left { display: flex; align-items: center; gap: 22px; }28  .status-right { display: flex; align-items: center; gap: 26px; font-size: 36px; }29  .icon {30    width: 36px; height: 36px;31  }32  .wifi svg, .battery svg { width: 48px; height: 36px; }33 34  /* Main content spacing */35  .content {36    padding: 20px 30px 0 30px;37  }38 39  /* Error banner */40  .error-banner {41    background: #FFFFFF;42    color: #111;43    border-radius: 18px;44    height: 140px;45    display: flex;46    align-items: center;47    justify-content: center;48    font-size: 40px;49    box-shadow: 0 10px 30px rgba(0,0,0,0.4);50    margin-bottom: 26px;51  }52 53  /* Recently Played Card */54  .recent-card {55    background: #1a1a1a;56    border-radius: 22px;57    height: 230px;58    padding: 28px;59    display: flex;60    align-items: center;61    justify-content: space-between;62    margin-bottom: 42px;63  }64  .recent-left {65    display: flex;66    align-items: center;67    gap: 26px;68  }69  .artwork {70    width: 250px; height: 170px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    color: #757575;74    display: flex;75    justify-content: center;76    align-items: center;77    border-radius: 20px;78    font-size: 30px;79  }80  .recent-text .title {81    font-size: 44px; font-weight: 700;82  }83  .recent-text .sub {84    font-size: 32px; color: #b9b9b9; margin-top: 10px;85  }86  .play-btn {87    width: 110px; height: 110px; border-radius: 55px;88    background: #292929;89    display: flex; align-items: center; justify-content: center;90  }91  .play-btn svg { width: 48px; height: 48px; fill: #fff; }92 93  /* Section titles */94  .section-title {95    font-size: 60px; font-weight: 800; margin: 20px 0;96  }97 98  /* Playlists grid */99  .playlist-grid {100    display: flex; gap: 36px; margin-bottom: 24px;101  }102  .playlist-tile, .new-tile {103    width: 320px; height: 320px; border-radius: 26px;104    background: #1a1a1a; display: flex; align-items: center; justify-content: center;105  }106  .playlist-tile .img-placeholder {107    width: 100%; height: 100%; border-radius: 26px;108    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;109    display: flex; align-items: center; justify-content: center; font-size: 30px;110  }111  .new-tile {112    background: #161616; border: 2px dashed #333;113    color: #fff; flex-direction: column; gap: 20px;114  }115  .plus {116    width: 78px; height: 78px; border-radius: 8px;117    display: flex; align-items: center; justify-content: center;118  }119  .plus svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 8; }120  .new-label { font-size: 40px; font-weight: 700; }121 122  .playlist-label {123    font-size: 46px; font-weight: 700; margin-top: 18px;124  }125  .playlist-sub {126    font-size: 32px; color: #b9b9b9; margin-top: 6px; margin-bottom: 14px;127  }128 129  /* Trending header */130  .trending-header {131    display: flex; align-items: baseline; justify-content: space-between;132    margin-top: 34px;133  }134  .trending-title { font-size: 64px; font-weight: 800; }135  .see-all { font-size: 44px; color: #ff8a00; font-weight: 700; }136 137  .trending-sub { color: #b9b9b9; font-size: 40px; margin-top: 12px; }138 139  /* Trending cards row */140  .trend-row {141    display: flex; gap: 36px; margin-top: 30px;142  }143  .trend-card {144    width: 300px; 145  }146  .trend-art {147    width: 300px; height: 340px; border-radius: 26px;148    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;149    display: flex; align-items: center; justify-content: center; font-size: 30px;150    position: relative;151  }152  .mini-play {153    position: absolute; bottom: 18px; left: 18px;154    width: 54px; height: 54px; border-radius: 27px; background: rgba(0,0,0,0.6);155    display: flex; align-items: center; justify-content: center;156  }157  .mini-play svg { width: 28px; height: 28px; fill: #fff; }158 159  .trend-label { font-size: 54px; margin-top: 18px; }160  .trend-sub { font-size: 36px; color: #b9b9b9; margin-top: 10px; }161 162  /* Wide video card */163  .video-card {164    width: 640px;165  }166  .video-art {167    width: 640px; height: 340px; border-radius: 26px;168    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;169    display: flex; align-items: center; justify-content: center; font-size: 30px;170  }171 172  /* Bottom nav */173  .bottom-nav {174    position: absolute; bottom: 90px; left: 0; width: 100%;175    height: 160px; background: #121212; display: flex; justify-content: space-around;176    align-items: center; border-top: 1px solid #222;177  }178  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #bdbdbd; }179  .nav-item.active { color: #ff8a00; }180  .nav-item svg { width: 64px; height: 64px; fill: currentColor; }181  .nav-label { font-size: 34px; }182 183  /* Home indicator */184  .home-indicator {185    position: absolute; bottom: 24px; left: 50%;186    transform: translateX(-50%);187    width: 380px; height: 12px; background: #e6e6e6; border-radius: 6px;188    opacity: 0.8;189  }190</style>191</head>192<body>193<div id="render-target">194  <!-- Status Bar -->195  <div class="status-bar">196    <div class="status-left">197      <div>11:52</div>198    </div>199    <div class="status-right">200      <div class="wifi">201        <svg viewBox="0 0 24 24">202          <path fill="#fff" d="M2 8c5.5-5.3 14.5-5.3 20 0l-2 2c-4.5-4.3-11.5-4.3-16 0L2 8zm4 4c3.3-3.1 8.7-3.1 12 0l-2 2c-2.6-2.4-5.4-2.4-8 0l-2-2zm4 4l2 2 2-2c-2.2-2.1-3.8-2.1-6 0z"/>203        </svg>204      </div>205      <div class="battery">206        <svg viewBox="0 0 26 14">207          <rect x="1" y="2" width="20" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>208          <rect x="3" y="4" width="16" height="6" rx="1" fill="#fff"></rect>209          <rect x="22" y="5" width="3" height="4" rx="1" fill="#fff"></rect>210        </svg>211      </div>212      <div>100%</div>213    </div>214  </div>215 216  <div class="content">217    <!-- Error Banner -->218    <div class="error-banner">Sorry, there was an error.</div>219 220    <!-- Recently Played -->221    <div class="recent-card">222      <div class="recent-left">223        <div class="artwork">[IMG: Playlist artwork]</div>224        <div class="recent-text">225          <div class="title">Recently Played</div>226          <div class="sub">1 song</div>227        </div>228      </div>229      <div class="play-btn">230        <svg viewBox="0 0 24 24"><path d="M8 5l11 7-11 7V5z"/></svg>231      </div>232    </div>233 234    <!-- Your Playlists -->235    <div class="section-title">Your Playlists</div>236    <div class="playlist-grid">237      <div>238        <div class="playlist-tile">239          <div class="img-placeholder">[IMG: Playlist cover]</div>240        </div>241        <div class="playlist-label">Classical Music</div>242        <div class="playlist-sub">0 songs</div>243      </div>244      <div class="new-tile">245        <div class="plus">246          <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke-linecap="round"/></svg>247        </div>248        <div class="new-label">New Playlist</div>249      </div>250    </div>251 252    <!-- Trending -->253    <div class="trending-header">254      <div class="trending-title">Trending</div>255      <div class="see-all">See All</div>256    </div>257    <div class="trending-sub">The top charts on SoundHound.</div>258 259    <div class="trend-row">260      <div class="trend-card">261        <div class="trend-art">[IMG: Chart Artwork]262          <div class="mini-play">263            <svg viewBox="0 0 24 24"><path d="M8 5l11 7-11 7V5z"/></svg>264          </div>265        </div>266        <div class="trend-label">All</div>267        <div class="trend-sub">100 songs</div>268      </div>269 270      <div class="trend-card">271        <div class="trend-art">[IMG: Pop Artwork]272          <div class="mini-play">273            <svg viewBox="0 0 24 24"><path d="M8 5l11 7-11 7V5z"/></svg>274          </div>275        </div>276        <div class="trend-label">Pop</div>277        <div class="trend-sub">100 songs</div>278      </div>279 280      <div class="video-card">281        <div class="video-art">[IMG: YouTube video preview]</div>282      </div>283    </div>284  </div>285 286  <!-- Bottom Navigation -->287  <div class="bottom-nav">288    <div class="nav-item">289      <svg viewBox="0 0 24 24">290        <path d="M12 8a6 6 0 106 6h-2a4 4 0 11-4-4V4h2v4z"/>291      </svg>292      <div class="nav-label">History</div>293    </div>294    <div class="nav-item">295      <svg viewBox="0 0 24 24">296        <path d="M10 18a8 8 0 118-8h-2a6 6 0 10-6 6v2z"/>297        <circle cx="20" cy="20" r="3"></circle>298      </svg>299      <div class="nav-label">Search</div>300    </div>301    <div class="nav-item active">302      <svg viewBox="0 0 24 24">303        <path d="M9 3v12a3 3 0 106 0V3h-2v12a1 1 0 11-2 0V3H9z"/>304      </svg>305      <div class="nav-label">Playlists</div>306    </div>307  </div>308 309  <!-- Home Indicator -->310  <div class="home-indicator"></div>311</div>312</body>313</html>