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 - Along the River</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121314;20    color: #fff;21  }22 23  /* Header */24  .top-bar {25    position: absolute;26    top: 96px;27    left: 0;28    right: 0;29    height: 120px;30  }31  .title {32    position: absolute;33    top: 0;34    left: 0; right: 0;35    text-align: center;36  }37  .title h1 {38    margin: 0;39    font-size: 64px;40    font-weight: 600;41    color: #EDEDED;42    letter-spacing: 0.2px;43  }44  .title .subtitle {45    margin-top: 12px;46    font-size: 34px;47    color: #8A8A8A;48  }49  .icon-btn {50    position: absolute;51    width: 64px;52    height: 64px;53  }54  .icon-close {55    left: 64px;56    top: 20px;57  }58  .icon-heart {59    right: 64px;60    top: 20px;61  }62  .icon svg {63    width: 64px;64    height: 64px;65    stroke: #EDEDED;66    fill: none;67    stroke-width: 4;68    stroke-linecap: round;69    stroke-linejoin: round;70    opacity: 0.95;71  }72 73  /* Decorative waves */74  .waves {75    position: absolute;76    left: 0;77    right: 0;78    top: 780px;79    width: 1080px;80    height: 420px;81    opacity: 0.9;82  }83  .waves svg {84    width: 100%;85    height: 100%;86  }87 88  /* Playback controls */89  .controls {90    position: absolute;91    top: 1540px;92    left: 0;93    right: 0;94    height: 300px;95  }96  .round-btn {97    position: absolute;98    width: 260px;99    height: 260px;100    left: 410px;101    top: 0;102    border-radius: 50%;103    background: #465057;104    box-shadow: 0 12px 24px rgba(0,0,0,0.35);105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .round-btn .bar {110    width: 20px;111    height: 120px;112    background: #F2F5F7;113    border-radius: 4px;114    margin: 0 24px;115    opacity: 0.95;116  }117  .side-control {118    position: absolute;119    top: 80px;120    width: 120px;121    height: 120px;122  }123  .side-control.left { left: 180px; }124  .side-control.right { right: 180px; }125  .side-control svg {126    width: 120px;127    height: 120px;128    stroke: #FFFFFF;129    fill: none;130    stroke-width: 6;131    opacity: 0.9;132  }133 134  /* Progress bar */135  .progress-wrap {136    position: absolute;137    left: 48px;138    right: 48px;139    top: 2090px;140    height: 40px;141  }142  .progress-track {143    position: absolute;144    left: 0;145    right: 0;146    top: 8px;147    height: 8px;148    background: #242526;149    border-radius: 4px;150  }151  .progress-fill {152    position: absolute;153    left: 0;154    top: 8px;155    height: 8px;156    width: 180px; /* current progress */157    background: #19B7C8;158    border-radius: 4px;159  }160  .progress-thumb {161    position: absolute;162    left: 180px;163    top: -2px;164    width: 28px;165    height: 28px;166    border-radius: 50%;167    background: #FFFFFF;168    box-shadow: 0 2px 6px rgba(0,0,0,0.35);169  }170  .time {171    position: absolute;172    right: 0;173    top: 40px;174    font-size: 34px;175    color: #9A9A9A;176    letter-spacing: 0.4px;177  }178 179  /* Home indicator */180  .home-indicator {181    position: absolute;182    bottom: 40px;183    left: 50%;184    transform: translateX(-50%);185    width: 220px;186    height: 12px;187    background: #FFFFFF;188    border-radius: 8px;189    opacity: 0.7;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Header with title and icons -->197  <div class="top-bar">198    <div class="icon-btn icon-close icon">199      <svg viewBox="0 0 64 64">200        <path d="M10 10 L54 54"></path>201        <path d="M54 10 L10 54"></path>202      </svg>203    </div>204    <div class="title">205      <h1>Along the River</h1>206      <div class="subtitle">Single</div>207    </div>208    <div class="icon-btn icon-heart icon">209      <svg viewBox="0 0 64 64">210        <path d="M32 54 C32 54 14 42 10 30 C6 20 12 12 20 12 C26 12 30 16 32 20 C34 16 38 12 44 12 C52 12 58 20 54 30 C50 42 32 54 32 54"></path>211      </svg>212    </div>213  </div>214 215  <!-- Decorative wave lines -->216  <div class="waves">217    <svg viewBox="0 0 1080 420">218      <!-- Dark teal wave -->219      <path d="M0 220 C 180 160, 360 280, 540 230 C 720 180, 900 300, 1080 240" stroke="#0B7185" stroke-width="10" fill="none"></path>220      <!-- Bright teal wave -->221      <path d="M0 260 C 200 210, 400 300, 600 260 C 800 220, 960 300, 1080 270" stroke="#24C7D6" stroke-width="12" fill="none"></path>222    </svg>223  </div>224 225  <!-- Playback controls -->226  <div class="controls">227    <div class="side-control left">228      <svg viewBox="0 0 100 100">229        <path d="M80 50 A30 30 0 1 1 35 25" />230        <path d="M35 25 L35 40 L50 34" />231      </svg>232    </div>233 234    <div class="round-btn">235      <div class="bar"></div>236      <div class="bar"></div>237    </div>238 239    <div class="side-control right">240      <svg viewBox="0 0 100 100">241        <path d="M20 50 A30 30 0 1 0 65 75" />242        <path d="M65 75 L65 60 L50 66" />243      </svg>244    </div>245  </div>246 247  <!-- Progress bar and time -->248  <div class="progress-wrap">249    <div class="progress-track"></div>250    <div class="progress-fill"></div>251    <div class="progress-thumb"></div>252    <div class="time">25:34</div>253  </div>254 255  <!-- Home indicator -->256  <div class="home-indicator"></div>257 258</div>259</body>260</html>