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>Audio Player - Rain</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f0f;15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Header */20  .top-area {21    position: absolute;22    top: 90px;23    left: 0;24    width: 100%;25    height: 260px;26  }27  .top-title {28    position: absolute;29    left: 0;30    right: 0;31    top: 60px;32    text-align: center;33  }34  .top-title h1 {35    margin: 0;36    font-size: 64px;37    font-weight: 700;38    letter-spacing: 0.2px;39  }40  .top-title p {41    margin: 10px 0 0 0;42    font-size: 34px;43    color: #9e9e9e;44  }45  .icon-left, .icon-right {46    position: absolute;47    top: 40px;48    width: 60px;49    height: 60px;50  }51  .icon-left { left: 70px; }52  .icon-right { right: 70px; }53 54  /* Decorative waves */55  .waves {56    position: absolute;57    left: 0;58    width: 1080px;59    height: 320px;60    top: 1240px;61    opacity: 0.9;62  }63 64  /* Controls */65  .controls {66    position: absolute;67    left: 0;68    right: 0;69    top: 1700px;70    height: 360px;71  }72  .btn-pause {73    position: absolute;74    left: 50%;75    top: 10px;76    transform: translateX(-50%);77    width: 320px;78    height: 320px;79    background: #3f4a4f;80    border-radius: 50%;81    box-shadow: 0 4px 16px rgba(0,0,0,0.6);82    display: flex;83    align-items: center;84    justify-content: center;85  }86  .pause-bars {87    width: 120px;88    height: 140px;89    display: flex;90    justify-content: space-between;91  }92  .pause-bars span {93    display: block;94    width: 36px;95    height: 140px;96    background: #ffffff;97    border-radius: 8px;98  }99  .side-control {100    position: absolute;101    top: 110px;102    width: 140px;103    height: 140px;104  }105  .side-left { left: 160px; }106  .side-right { right: 160px; }107 108  /* Progress bar */109  .progress {110    position: absolute;111    left: 60px;112    right: 60px;113    bottom: 180px;114    height: 36px;115  }116  .progress .track {117    position: absolute;118    top: 16px;119    left: 0;120    right: 0;121    height: 4px;122    background: #2a2a2a;123    border-radius: 4px;124  }125  .progress .knob {126    position: absolute;127    left: -6px;128    top: 4px;129    width: 36px;130    height: 36px;131    background: #ffffff;132    border-radius: 50%;133    box-shadow: 0 2px 8px rgba(0,0,0,0.5);134  }135  .progress .time {136    position: absolute;137    right: 0;138    top: -6px;139    font-size: 36px;140    color: #bdbdbd;141  }142 143  /* Home indicator */144  .home-indicator {145    position: absolute;146    left: 50%;147    bottom: 56px;148    transform: translateX(-50%);149    width: 420px;150    height: 10px;151    background: #d9d9d9;152    border-radius: 10px;153    opacity: 0.9;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Top area with title and actions -->161  <div class="top-area">162    <div class="icon-left">163      <svg viewBox="0 0 60 60" width="60" height="60">164        <line x1="14" y1="14" x2="46" y2="46" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>165        <line x1="46" y1="14" x2="14" y2="46" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>166      </svg>167    </div>168    <div class="icon-right">169      <svg viewBox="0 0 60 60" width="60" height="60">170        <path d="M30 50s-16-10.8-20.5-18.3C6.2 26.3 9.3 17.9 17.4 16c5.3-1.2 9.1 1.5 12.6 5.7 3.5-4.2 7.3-6.9 12.6-5.7 8.1 1.9 11.2 10.3 7.9 15.7C46 39.2 30 50 30 50z"171              fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round"/>172      </svg>173    </div>174    <div class="top-title">175      <h1>Rain</h1>176      <p>Single</p>177    </div>178  </div>179 180  <!-- Decorative teal waves -->181  <svg class="waves" viewBox="0 0 1080 320" preserveAspectRatio="none">182    <!-- dark teal -->183    <path d="M0 200 C 200 170 340 190 520 210 C 720 235 850 250 1080 220"184          fill="none" stroke="#0f5a62" stroke-width="10" />185    <!-- bright teal main -->186    <path d="M0 220 C 250 215 430 190 610 210 C 800 230 920 270 1080 260"187          fill="none" stroke="#2ad2c9" stroke-width="12" />188    <!-- secondary bright teal -->189    <path d="M0 240 C 200 260 400 250 640 230 C 860 210 980 220 1080 230"190          fill="none" stroke="#1fb7b0" stroke-width="8" />191  </svg>192 193  <!-- Controls -->194  <div class="controls">195    <!-- Left curved arrow -->196    <div class="side-control side-left">197      <svg viewBox="0 0 140 140" width="140" height="140">198        <path d="M38 54 C 38 28 72 22 100 36" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>199        <path d="M30 54 L48 54 L39 71 Z" fill="none" stroke="#ffffff" stroke-width="3"/>200      </svg>201    </div>202 203    <!-- Pause button -->204    <div class="btn-pause">205      <div class="pause-bars">206        <span></span>207        <span></span>208      </div>209    </div>210 211    <!-- Right curved arrow -->212    <div class="side-control side-right">213      <svg viewBox="0 0 140 140" width="140" height="140">214        <path d="M102 54 C 102 28 68 22 40 36" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>215        <path d="M110 54 L92 54 L101 71 Z" fill="none" stroke="#ffffff" stroke-width="3"/>216      </svg>217    </div>218  </div>219 220  <!-- Progress bar -->221  <div class="progress">222    <div class="track"></div>223    <div class="knob"></div>224    <div class="time">9:59:57</div>225  </div>226 227  <!-- iOS home indicator -->228  <div class="home-indicator"></div>229 230</div>231</body>232</html>