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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px; color: #fff;19    display: flex; align-items: center;20    padding: 0 36px; font-weight: 600;21    font-size: 38px;22  }23  .status-left { display: flex; align-items: center; gap: 26px; }24  .status-icon {25    width: 42px; height: 42px; border-radius: 50%;26    border: 2px solid rgba(255,255,255,0.3);27    display: inline-flex; align-items: center; justify-content: center;28    font-size: 26px; color: #fff;29  }30  .dot { font-size: 42px; opacity: 0.8; }31  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }32  .wifi {33    width: 36px; height: 36px;34  }35  .battery {36    width: 48px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;37  }38  .battery::after {39    content:""; position: absolute; right: -8px; top: 6px; width: 6px; height: 14px; background: #fff; border-radius: 2px;40  }41  .battery .level { position:absolute; left:3px; top:3px; height:18px; width:30px; background:#fff; border-radius:4px; }42 43  /* Gradient panel */44  .panel {45    position: absolute;46    left: 20px; right: 20px;47    top: 70px; bottom: 210px;48    border-top-right-radius: 140px;49    border-bottom-left-radius: 140px;50    border-top-left-radius: 40px;51    border-bottom-right-radius: 40px;52    background:53      radial-gradient(1200px 1000px at 80% 10%, #2d2072 0%, rgba(31,22,63,1) 40%, rgba(45,16,78,1) 60%, #4a2677 85%, #6a3b7f 100%);54    overflow: hidden;55  }56 57  .panel-content { position: absolute; left: 40px; top: 180px; color: #fff; }58 59  .title {60    display: inline-block;61    background: #0c0c0c;62    color: #fff;63    font-size: 46px;64    font-weight: 800;65    padding: 22px 26px;66    border-radius: 6px;67    box-shadow: 0 2px 0 rgba(0,0,0,0.8);68    position: relative;69  }70  .title-notch {71    position: absolute; left: -14px; bottom: -14px;72    width: 110px; height: 36px; background: #0c0c0c;73  }74 75  .artist {76    display: inline-block;77    margin-top: 24px;78    background: #0c0c0c;79    color: #c6c6c6;80    font-size: 42px; font-weight: 800;81    padding: 16px 22px; border-radius: 6px;82    width: fit-content;83  }84 85  .info-chip {86    display: inline-flex; align-items: center; gap: 14px;87    margin-top: 26px;88    background: #0c0c0c; color: #d9d9d9;89    font-size: 36px; font-weight: 600;90    padding: 18px 22px; border-radius: 6px;91  }92  .eq {93    width: 36px; height: 36px; display: inline-block;94  }95  .eq span {96    display:inline-block; width:6px; margin-right:4px;97    background:#888; border-radius:2px;98  }99  .eq span:nth-child(1){ height:20px; }100  .eq span:nth-child(2){ height:28px; }101  .eq span:nth-child(3){ height:16px; }102 103  /* Right-side circular actions */104  .side-actions {105    position: absolute; right: 36px; top: 160px;106    display: flex; flex-direction: column; gap: 34px;107  }108  .circle-btn {109    width: 120px; height: 120px; border-radius: 50%;110    background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.35);111    display: flex; align-items: center; justify-content: center;112  }113  .circle-btn svg { width: 50px; height: 50px; }114  .circle-btn .person {115    width: 52px; height: 52px;116  }117 118  /* Player buttons */119  .play-btn, .next-btn {120    position: absolute; border-radius: 50%; background: #000;121    box-shadow: 0 12px 24px rgba(0,0,0,0.5);122    display:flex; align-items:center; justify-content:center; color:#fff;123  }124  .play-btn { width: 170px; height: 170px; left: 455px; top: 1280px; }125  .next-btn { width: 130px; height: 130px; right: 110px; top: 1320px; }126 127  .play-btn svg, .next-btn svg { width: 56px; height: 56px; fill: #fff; }128 129  /* Progress */130  .progress {131    position: absolute; bottom: 340px; left: 300px; right: 40px;132    color: #fff;133  }134  .progress .time {135    font-size: 38px; font-weight: 700; letter-spacing: 0.5px;136    margin-bottom: 18px; opacity: 0.95;137  }138  .progress .bar {139    height: 3px; background: rgba(255,255,255,0.85);140    border-radius: 2px;141  }142 143  /* Bottom actions bar */144  .bottom-bar {145    position: absolute; left: 0; right: 0; bottom: 120px;146    height: 140px; padding: 0 54px;147    display: flex; align-items: center; gap: 70px; color: #fff;148  }149  .action {150    display: flex; align-items: center; gap: 22px; font-size: 34px; font-weight: 700;151  }152  .action svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 3px; }153 154  .more-dots {155    display: inline-flex; gap: 8px; align-items: center;156  }157  .more-dots span {158    width: 10px; height: 10px; background: #fff; border-radius: 50%;159    display: inline-block;160  }161 162  /* Home indicator */163  .home-indicator {164    position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);165    width: 360px; height: 16px; background: #fff; border-radius: 10px; opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="status-left">175      <div>11:16</div>176      <div class="status-icon">⏱</div>177      <div class="status-icon">P</div>178      <div class="status-icon">P</div>179      <div class="status-icon">P</div>180      <div class="dot">•</div>181    </div>182    <div class="status-right">183      <svg class="wifi" viewBox="0 0 24 24">184        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>185        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>186        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>187        <circle cx="12" cy="19" r="2" fill="#fff"/>188      </svg>189      <div class="battery"><div class="level"></div></div>190    </div>191  </div>192 193  <!-- Gradient panel -->194  <div class="panel">195    <div class="panel-content">196      <div class="title">197        Lord Huron - The Night We Met (Slowed down)198        <div class="title-notch"></div>199      </div>200      <div class="artist">Tina</div>201      <div class="info-chip">202        <div class="eq"><span></span><span></span><span></span></div>203        Behind this track204      </div>205    </div>206 207    <!-- Side actions -->208    <div class="side-actions">209      <div class="circle-btn" title="Minimize">210        <svg viewBox="0 0 24 24">211          <path d="M6 12h12" stroke="#111" stroke-width="2" fill="none"/>212          <path d="M12 6l-4 4M12 6l4 4" stroke="#111" stroke-width="2" fill="none"/>213        </svg>214      </div>215      <div class="circle-btn" title="Add person">216        <svg class="person" viewBox="0 0 24 24">217          <circle cx="12" cy="8" r="4" fill="#111"/>218          <path d="M4 20c2-4 14-4 16 0" stroke="#111" stroke-width="2" fill="none"/>219          <path d="M19 7v4M17 9h4" stroke="#111" stroke-width="2" fill="none"/>220        </svg>221      </div>222    </div>223 224    <!-- Player controls -->225    <div class="play-btn">226      <svg viewBox="0 0 24 24">227        <polygon points="8,5 19,12 8,19" fill="#fff"/>228      </svg>229    </div>230    <div class="next-btn">231      <svg viewBox="0 0 24 24">232        <polygon points="6,5 16,12 6,19" fill="#fff"/>233        <rect x="17" y="5" width="2" height="14" fill="#fff"/>234      </svg>235    </div>236 237    <!-- Progress -->238    <div class="progress">239      <div class="time">2:07 | 4:37</div>240      <div class="bar"></div>241    </div>242  </div>243 244  <!-- Bottom actions bar -->245  <div class="bottom-bar">246    <div class="action">247      <svg viewBox="0 0 24 24">248        <path d="M12 21s-8-5.4-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5.6-8 11-8 11z" fill="none" stroke="#fff" stroke-width="2"/>249      </svg>250      <div>127K</div>251    </div>252    <div class="action">253      <svg viewBox="0 0 24 24">254        <path d="M3 4h18v12H8l-5 4V4z" fill="none" stroke="#fff" stroke-width="2"/>255      </svg>256      <div>4.9K</div>257    </div>258    <div class="action">259      <svg viewBox="0 0 24 24">260        <circle cx="6" cy="12" r="3" stroke="#fff" fill="none" stroke-width="2"/>261        <circle cx="12" cy="6" r="3" stroke="#fff" fill="none" stroke-width="2"/>262        <circle cx="18" cy="12" r="3" stroke="#fff" fill="none" stroke-width="2"/>263        <path d="M8 11l3-4M13 8l3 3" stroke="#fff" stroke-width="2" fill="none"/>264      </svg>265    </div>266    <div class="action">267      <svg viewBox="0 0 24 24">268        <path d="M4 6h16M4 12h16M4 18h10" stroke="#fff" stroke-width="2" fill="none"/>269        <path d="M18 17l3 2-3 2v-4z" fill="#fff"/>270      </svg>271    </div>272    <div class="action">273      <div class="more-dots"><span></span><span></span><span></span></div>274    </div>275  </div>276 277  <!-- Home indicator -->278  <div class="home-indicator"></div>279</div>280</body>281</html>