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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000;15    border-radius: 36px;16    box-shadow: 0 40px 140px rgba(0,0,0,0.45);17    color: #fff;18  }19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 100%; height: 120px;24    background: #000;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    z-index: 5;31  }32  .status-left {33    display: flex; align-items: center; gap: 22px;34    font-weight: 600; font-size: 40px;35  }36  .status-icons {37    display: flex; align-items: center; gap: 22px;38  }39  .dot { width: 16px; height: 16px; background: #9E9E9E; border-radius: 50%; }40  .status-right { display: flex; align-items: center; gap: 26px; }41  /* Player card */42  .player-card {43    position: absolute;44    top: 120px; left: 24px;45    width: 1032px; height: 2060px;46    border-radius: 64px;47    overflow: hidden;48    background: radial-gradient(1200px 1200px at 70% 18%, #2a2367 0%, #2d226b 20%, #3a256f 40%, #4a2a77 60%, #5a2f7c 70%, #5a2b71 85%, #432458 100%);49  }50  /* Title tags */51  .tag {52    display: inline-block;53    background: #0b0b0b;54    padding: 22px 26px;55    border-radius: 6px;56    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;57  }58  .title {59    position: absolute; top: 70px; left: 48px;60    max-width: 820px;61    font-size: 48px; font-weight: 800; line-height: 1.2;62  }63  .artist {64    position: absolute; top: 240px; left: 48px;65    font-size: 40px; font-weight: 800; color: #cfcfcf;66  }67  .behind {68    position: absolute; top: 330px; left: 48px;69    display: inline-flex; align-items: center; gap: 16px;70    font-size: 36px; font-weight: 600; color: #cfcfcf;71  }72  .behind .eq {73    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;74  }75  /* Right side actions */76  .bubble {77    position: absolute;78    right: 36px;79    width: 112px; height: 112px;80    background: #fff;81    border-radius: 56px;82    display: flex; align-items: center; justify-content: center;83    box-shadow: 0 18px 40px rgba(0,0,0,0.35);84  }85  .bubble.top { top: 180px; }86  .bubble.bottom { top: 330px; }87  /* Player controls */88  .control {89    position: absolute;90    width: 170px; height: 170px;91    background: #000;92    border-radius: 50%;93    display: flex; align-items: center; justify-content: center;94    box-shadow: 0 24px 60px rgba(0,0,0,0.5);95  }96  .control.play { left: 455px; top: 1200px; }97  .control.next { right: 120px; top: 1200px; width: 140px; height: 140px; }98  /* Progress */99  .progress {100    position: absolute;101    left: 540px; right: 48px;102    bottom: 270px;103    height: 80px;104  }105  .progress .labels {106    font-size: 36px; font-weight: 600; letter-spacing: 0.5px;107    color: #eaeaea;108    margin-bottom: 12px;109  }110  .progress .bar {111    position: relative; height: 4px; background: rgba(255,255,255,0.35);112  }113  .progress .bar::before {114    content: "";115    position: absolute; left: 0; top: 0; bottom: 0;116    width: 36%; background: #fff;117  }118  /* Footer actions */119  .footer {120    position: absolute; left: 0; right: 0; bottom: 140px;121    height: 140px; background: #000;122    display: flex; align-items: center; justify-content: space-around;123    padding: 0 48px; box-sizing: border-box;124  }125  .f-item { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 38px; font-weight: 700; }126  .home-indicator {127    position: absolute; left: 50%; transform: translateX(-50%);128    bottom: 60px; width: 280px; height: 12px; border-radius: 8px; background: #e6e6e6; opacity: 0.9;129  }130  /* Simple icon helpers */131  svg { display: block; }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status Bar -->138  <div class="status-bar">139    <div class="status-left">140      <span>11:18</span>141      <div class="status-icons">142        <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>143        <div class="dot"></div>144        <div class="dot"></div>145        <div class="dot"></div>146        <div class="dot"></div>147      </div>148    </div>149    <div class="status-right">150      <!-- WiFi -->151      <svg width="44" height="44" viewBox="0 0 24 24">152        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>153        <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>154        <path d="M10 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>155        <circle cx="12" cy="19" r="1.6" fill="#fff"/>156      </svg>157      <!-- Battery -->158      <svg width="48" height="48" viewBox="0 0 26 26">159        <rect x="2" y="8" width="18" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>160        <rect x="4" y="10" width="12" height="6" fill="#fff"/>161        <rect x="20" y="11" width="3" height="4" fill="#fff"/>162      </svg>163    </div>164  </div>165 166  <!-- Player Card -->167  <div class="player-card">168    <div class="tag title">Lord Huron - The Night We Met (Slowed down)</div>169    <div class="tag artist">Tina</div>170    <div class="behind tag">171      <div class="eq">172        <svg width="28" height="28" viewBox="0 0 24 24">173          <rect x="3" y="10" width="3" height="8" fill="#cfcfcf"/>174          <rect x="9" y="6" width="3" height="12" fill="#cfcfcf"/>175          <rect x="15" y="8" width="3" height="10" fill="#cfcfcf"/>176        </svg>177      </div>178      <span>Behind this track</span>179    </div>180 181    <!-- Right buttons -->182    <div class="bubble top">183      <!-- Down arrow -->184      <svg width="44" height="44" viewBox="0 0 24 24">185        <path d="M6 9l6 6 6-6" stroke="#000" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186      </svg>187    </div>188    <div class="bubble bottom">189      <!-- Person add -->190      <svg width="44" height="44" viewBox="0 0 24 24">191        <circle cx="10" cy="8" r="4" stroke="#000" stroke-width="2.2" fill="none"/>192        <path d="M3 20c2.5-4.5 11.5-4.5 14 0" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round"/>193        <path d="M18 8v6M15 11h6" stroke="#000" stroke-width="2.2" stroke-linecap="round"/>194      </svg>195    </div>196 197    <!-- Controls -->198    <div class="control play">199      <svg width="72" height="72" viewBox="0 0 24 24">200        <path d="M8 6l10 6-10 6z" fill="#fff"/>201      </svg>202    </div>203    <div class="control next">204      <svg width="64" height="64" viewBox="0 0 24 24">205        <path d="M5 6l9 6-9 6V6z" fill="#fff"/>206        <path d="M18 6v12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>207      </svg>208    </div>209 210    <!-- Progress -->211    <div class="progress">212      <div class="labels">2:07 | 4:37</div>213      <div class="bar"></div>214    </div>215  </div>216 217  <!-- Footer actions -->218  <div class="footer">219    <div class="f-item">220      <svg width="52" height="52" viewBox="0 0 24 24">221        <path d="M12 21s-7-4.6-9.5-8A5.5 5.5 0 0112 6a5.5 5.5 0 019.5 7c-2.5 3.4-9.5 8-9.5 8z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>222      </svg>223      <span>127K</span>224    </div>225    <div class="f-item">226      <svg width="52" height="52" viewBox="0 0 24 24">227        <path d="M4 5h16v12H8l-4 4V5z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>228      </svg>229      <span>4.9K</span>230    </div>231    <div class="f-item">232      <svg width="52" height="52" viewBox="0 0 24 24">233        <circle cx="5" cy="12" r="2" fill="none" stroke="#fff" stroke-width="2"/>234        <circle cx="12" cy="7" r="2" fill="none" stroke="#fff" stroke-width="2"/>235        <circle cx="12" cy="17" r="2" fill="none" stroke="#fff" stroke-width="2"/>236        <path d="M7 12l3-3M7 12l3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>237      </svg>238    </div>239    <div class="f-item">240      <svg width="52" height="52" viewBox="0 0 24 24">241        <path d="M4 6h16M4 12h16M4 18h9" stroke="#fff" stroke-width="2" stroke-linecap="round"/>242      </svg>243    </div>244    <div class="f-item">245      <svg width="52" height="52" viewBox="0 0 24 24">246        <circle cx="12" cy="5" r="2" fill="#fff"/>247        <circle cx="12" cy="12" r="2" fill="#fff"/>248        <circle cx="12" cy="19" r="2" fill="#fff"/>249      </svg>250    </div>251  </div>252 253  <div class="home-indicator"></div>254</div>255</body>256</html>