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>Music Player UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1200px 1200px at 540px 400px, #3b3b3b 0%, #1c1c1c 45%, #0e0e0e 100%);15    color: #ffffff;16  }17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-size: 40px;30    opacity: 0.95;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }33  .icon-sb { width: 40px; height: 40px; opacity: 0.85; }34  /* Top page controls */35  .top-controls {36    position: absolute;37    top: 140px;38    left: 0;39    width: 1080px;40    padding: 0 36px;41    display: flex;42    align-items: center;43    justify-content: space-between;44    opacity: 0.95;45  }46  .chevron {47    width: 56px;48    height: 56px;49    border-radius: 28px;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .queue-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }55  /* Album art */56  .album {57    position: absolute;58    top: 260px;59    left: 50%;60    transform: translateX(-50%);61    width: 740px;62    height: 740px;63    box-shadow: 0 32px 80px rgba(0,0,0,0.45);64    border-radius: 12px;65    overflow: hidden;66  }67  .img-placeholder {68    width: 100%; height: 100%;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    display: flex; align-items: center; justify-content: center;72    color: #757575; font-size: 40px; text-align: center; padding: 24px;73  }74  /* Titles */75  .titles {76    position: absolute;77    top: 1040px;78    left: 0;79    width: 100%;80    text-align: center;81    padding: 0 60px;82  }83  .titles .artist { font-size: 44px; color: #d9d9d9; margin-bottom: 12px; }84  .titles .track { font-size: 58px; font-weight: 800; color: #ffffff; margin-bottom: 12px; }85  .titles .feat { font-size: 40px; color: #cfcfcf; }86  .titles .feat .name { color: #ffa826; font-weight: 600; }87  /* Action row */88  .actions {89    position: absolute;90    top: 1220px;91    left: 0;92    width: 100%;93    display: flex;94    justify-content: center;95    gap: 120px;96    color: #dcdcdc;97  }98  .action {99    display: flex; flex-direction: column; align-items: center; gap: 18px;100    font-size: 34px;101  }102  .action svg { width: 72px; height: 72px; }103  /* Waveform */104  .wave-wrap {105    position: absolute;106    top: 1400px;107    left: 60px;108    width: 960px;109    height: 220px;110  }111  .wave-bars {112    position: absolute;113    bottom: 40px;114    left: 0;115    width: 960px;116    height: 160px;117    display: flex;118    align-items: flex-end;119    gap: 8px;120  }121  .bar {122    width: 18px;123    background: #5a5a5a;124    border-radius: 4px 4px 0 0;125  }126  .bar.orange { background: #ffb240; }127  .wave-time {128    position: absolute; bottom: 0; left: 0; width: 960px;129    display: flex; justify-content: space-between; font-size: 34px; color: #d9d9d9;130  }131  /* Transport controls */132  .transport {133    position: absolute;134    top: 1700px;135    left: 0;136    width: 100%;137    height: 180px;138    display: flex;139    align-items: center;140    justify-content: center;141    gap: 180px;142  }143  .circle-btn {144    width: 200px; height: 200px; border-radius: 100px;145    border: 8px solid #ffffff; display: flex; align-items: center; justify-content: center;146    background: rgba(255,255,255,0.04);147    box-shadow: 0 10px 40px rgba(0,0,0,0.6);148  }149  .transport .side-btn svg { width: 84px; height: 84px; }150  .transport .side-btn { color: #fff; opacity: 0.95; }151  .transport-ext {152    position: absolute;153    top: 1700px;154    left: 40px;155    width: 1000px;156    display: flex;157    justify-content: space-between;158    align-items: center;159    pointer-events: none;160  }161  .transport-ext .left, .transport-ext .right { pointer-events: none; }162  .transport-ext svg { width: 54px; height: 54px; opacity: 0.9; }163  /* Divider */164  .divider {165    position: absolute;166    top: 1920px;167    left: 0;168    width: 100%;169    height: 2px;170    background: #2e2e2e;171  }172  /* Artist card */173  .artist-card {174    position: absolute;175    top: 1960px;176    left: 40px;177    width: 1000px;178    display: flex;179    align-items: center;180    justify-content: space-between;181  }182  .artist-info { display: flex; align-items: center; gap: 28px; }183  .avatar {184    width: 120px; height: 120px; border-radius: 60px; overflow: hidden;185    background: #E0E0E0; border: 1px solid #BDBDBD;186    display: flex; align-items: center; justify-content: center;187    color: #757575; font-size: 26px;188  }189  .artist-text .name { font-size: 48px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 14px; }190  .artist-text .followers { font-size: 34px; color: #cfcfcf; margin-top: 6px; }191  .artist-text .followers .num { color: #ffa826; font-weight: 700; }192  .follow-btn {193    padding: 18px 36px; border-radius: 50px; border: 3px solid #ffa826; color: #ffa826; font-weight: 700; font-size: 36px; background: transparent;194  }195  /* Ad banner placeholder */196  .ad-banner {197    position: absolute;198    bottom: 120px;199    left: 60px;200    width: 960px;201    height: 160px;202    background: #E0E0E0;203    border: 1px solid #BDBDBD;204    display: flex; align-items: center; justify-content: center;205    color: #757575; font-size: 36px; text-align: center;206  }207  /* Home pill */208  .home-pill {209    position: absolute;210    bottom: 40px;211    left: 50%;212    transform: translateX(-50%);213    width: 280px;214    height: 10px;215    background: #ffffff;216    border-radius: 5px;217    opacity: 0.9;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status Bar -->225  <div class="statusbar">226    <div class="status-left">227      <div>8:30</div>228      <svg class="icon-sb" viewBox="0 0 24 24"><path fill="#fff" d="M12 2a1 1 0 0 1 1 1v7h6a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/></svg>229      <svg class="icon-sb" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none"/></svg>230      <svg class="icon-sb" viewBox="0 0 24 24"><path fill="#fff" d="M4 12a8 8 0 0 1 16 0c0 2.6-1.1 5-3 6.7l-1.3-1.6A6 6 0 1 0 6 12H4z"/></svg>231      <div style="font-size:36px; opacity:0.6;">•</div>232    </div>233    <div class="status-right">234      <svg class="icon-sb" viewBox="0 0 24 24"><path fill="#fff" d="M3 18h18l-2-2H5l-2 2zM5 6h14l2 2H3l2-2z"/></svg>235      <svg class="icon-sb" viewBox="0 0 24 24"><path fill="#fff" d="M12 4c3.9 0 7 3.1 7 7v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7c0-3.9 3.1-7 7-7z"/></svg>236    </div>237  </div>238 239  <!-- Top Controls -->240  <div class="top-controls">241    <div class="chevron">242      <svg viewBox="0 0 24 24" width="56" height="56"><path fill="#fff" d="M15.5 18l-7-6 7-6v12z"/></svg>243    </div>244    <div class="queue-btn">245      <svg viewBox="0 0 24 24"><path fill="#fff" d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm15-2l4 2-4 2v-4z"/></svg>246    </div>247  </div>248 249  <!-- Album Art -->250  <div class="album">251    <div class="img-placeholder">[IMG: Album Cover - Shayad Remix]</div>252  </div>253 254  <!-- Titles -->255  <div class="titles">256    <div class="artist">Soul Strike</div>257    <div class="track">Shayad (Soul Strike Remix)</div>258    <div class="feat">Feat. <span class="name">Arijit Singh</span></div>259  </div>260 261  <!-- Actions -->262  <div class="actions">263    <div class="action">264      <svg viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-width="2" d="M12 21s-8-5.3-8-11.3S7.4 3 12 7.2 20 3 20 9.7 12 21 12 21z"/></svg>265      <div>Like</div>266    </div>267    <div class="action">268      <svg viewBox="0 0 24 24"><path fill="#fff" d="M4 5h12v2H4V5zm0 5h12v2H4v-2zm0 5h9v2H4v-2z"/><path fill="#fff" d="M19 10v5l3-2.5-3-2.5z"/></svg>269      <div>Playlist</div>270    </div>271    <div class="action">272      <svg viewBox="0 0 24 24"><path fill="#fff" d="M12 4v9l-3-3H7l5 5 5-5h-2l-3 3V4z"/><path fill="#fff" d="M4 20h16v-2H4v2z"/></svg>273      <div>Download</div>274    </div>275    <div class="action">276      <svg viewBox="0 0 24 24"><path fill="#fff" d="M4 12l16-8-6 16-2-6-8-2z"/></svg>277      <div>Share</div>278    </div>279  </div>280 281  <!-- Waveform -->282  <div class="wave-wrap">283    <div class="wave-bars">284      <!-- Left orange section -->285      <div class="bar orange" style="height:110px;"></div>286