GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Music Player Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    color: #ffffff;15    font-family: "Helvetica Neue", Arial, sans-serif;16  }17 18  /* Background image placeholder */19  .bg { position: absolute; inset: 0; }20  .img-placeholder {21    width: 100%; height: 100%;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex; align-items: center; justify-content: center;25    color: #757575; font-size: 36px; letter-spacing: 0.5px;26  }27  .overlay {28    position: absolute; inset: 0;29    background: linear-gradient(to bottom, rgba(10,12,26,0.85) 0%, rgba(10,12,26,0.65) 25%, rgba(10,12,26,0.7) 60%, rgba(10,12,26,0.85) 100%);30    mix-blend-mode: multiply;31    pointer-events: none;32  }33 34  /* Top buttons */35  .circle {36    width: 120px; height: 120px; border-radius: 50%;37    background: #202856;38    display: flex; align-items: center; justify-content: center;39  }40  .top-btn {41    position: absolute; top: 90px;42    box-shadow: 0 8px 20px rgba(0,0,0,0.35);43  }44  #back-btn { left: 60px; }45  #download-btn { right: 60px; }46 47  .title {48    position: absolute; top: 200px; left: 0; width: 100%;49    text-align: center; font-size: 84px; font-weight: 600;50  }51  .subtitle-label {52    position: absolute; top: 420px; left: 0; width: 100%;53    text-align: center; font-size: 34px; letter-spacing: 2px;54    color: rgba(255,255,255,0.75);55  }56  .subtitle {57    position: absolute; top: 480px; left: 0; width: 100%;58    text-align: center; font-size: 46px; font-weight: 500;59  }60 61  /* Bottom actions */62  .bottom-actions {63    position: absolute; left: 0; width: 100%; top: 1700px;64    display: flex; justify-content: space-evenly; align-items: flex-start;65    padding: 0 70px;66  }67  .action { text-align: center; }68  .action .circle { width: 128px; height: 128px; }69  .label {70    margin-top: 18px; font-size: 36px; color: rgba(255,255,255,0.9);71  }72 73  /* Player controls */74  .player-controls {75    position: absolute; left: 0; width: 100%; top: 1910px;76    display: flex; align-items: center; justify-content: center; gap: 150px;77  }78  .tiny { width: 98px; height: 98px; }79  .pause {80    width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; gap: 22px;81  }82  .pause .bar {83    width: 22px; height: 94px; background: #ffffff; border-radius: 6px;84    box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset;85  }86  .stop {87    position: absolute; top: 1936px; right: 90px;88    width: 44px; height: 44px; background: #ffffff; border-radius: 6px; opacity: 0.9;89  }90 91  /* Progress */92  .progress {93    position: absolute; top: 2040px; left: 90px; width: 900px;94  }95  .track {96    position: relative; height: 10px; background: rgba(255,255,255,0.25);97    border-radius: 6px;98  }99  .fill {100    height: 10px; background: #ffffff; border-radius: 6px 0 0 6px;101    width: 450px;102  }103  .thumb {104    position: absolute; top: 50%; left: 450px; transform: translate(-50%, -50%);105    width: 34px; height: 34px; border-radius: 50%; background: #ffffff;106    box-shadow: 0 2px 8px rgba(0,0,0,0.35);107  }108 109  .time-left, .time-right {110    position: absolute; top: 2120px; font-size: 36px; color: rgba(255,255,255,0.95);111  }112  .time-left { left: 90px; }113  .time-right { right: 90px; }114 115  /* SVG helpers */116  svg { display: block; }117</style>118</head>119<body>120<div id="render-target">121 122  <div class="bg">123    <div class="img-placeholder">[IMG: Forest Texture Background]</div>124    <div class="overlay"></div>125  </div>126 127  <!-- Top round buttons -->128  <div class="circle top-btn" id="back-btn">129    <svg width="56" height="56" viewBox="0 0 56 56">130      <path d="M12 20 L28 36 L44 20" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>131    </svg>132  </div>133  <div class="circle top-btn" id="download-btn">134    <svg width="64" height="64" viewBox="0 0 64 64">135      <!-- Cloud -->136      <path d="M22 40h22c6 0 10-4 10-9s-4-9-9-9c-1-7-7-11-13-11-8 0-14 6-14 14-5 1-9 5-9 10 0 5 4 9 9 9h4"137            fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>138      <!-- Arrow down -->139      <path d="M32 24v18M24 34l8 8 8-8" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>140    </svg>141  </div>142 143  <!-- Titles -->144  <div class="title">Nature's Bliss</div>145  <div class="subtitle-label">ARTIST</div>146  <div class="subtitle">Lucho Ripley</div>147 148  <!-- Action buttons row -->149  <div class="bottom-actions">150    <div class="action">151      <div class="circle">152        <svg width="70" height="70" viewBox="0 0 64 64">153          <!-- Simple thumbs up -->154          <path d="M20 36H12V20h8v16zM24 36l10-16c2-3 7-3 7 2v10h7c3 0 4 2 4 4s-1 4-4 4H32c-3 0-6-2-8-4z"155                fill="#FFFFFF"/>156        </svg>157      </div>158      <div class="label">Rate</div>159    </div>160 161    <div class="action">162      <div class="circle">163        <svg width="70" height="70" viewBox="0 0 64 64">164          <path d="M32 50s-9-7-13-12c-4-6-3-14 5-17 5-2 9 2 8 4 1-2 5-6 10-4 8 3 9 11 5 17-4 5-15 12-15 12z"165                fill="#FFFFFF"/>166        </svg>167      </div>168      <div class="label">Favorite</div>169    </div>170 171    <div class="action">172      <div class="circle">173        <svg width="70" height="70" viewBox="0 0 64 64">174          <circle cx="16" cy="48" r="5" fill="#FFFFFF"/>175          <circle cx="48" cy="16" r="5" fill="#FFFFFF"/>176          <circle cx="48" cy="48" r="5" fill="#FFFFFF"/>177          <path d="M20 46 L44 20 M44 42 L44 22" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>178        </svg>179      </div>180      <div class="label">Share</div>181    </div>182 183    <div class="action">184      <div class="circle">185        <svg width="70" height="70" viewBox="0 0 64 64">186          <circle cx="32" cy="32" r="22" stroke="#FFFFFF" stroke-width="4" fill="none"/>187          <path d="M32 20v14l10 6" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>188        </svg>189      </div>190      <div class="label">Timer</div>191    </div>192  </div>193 194  <!-- Playback controls -->195  <div class="player-controls">196    <div class="circle tiny">197      <svg width="78" height="78" viewBox="0 0 78 78">198        <circle cx="39" cy="39" r="34" stroke="#FFFFFF" stroke-width="4" fill="none"/>199        <path d="M24 44c1 8 10 12 18 8" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>200        <path d="M28 30l-8 4 8 4" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201        <text x="39" y="46" font-size="18" text-anchor="middle" fill="#FFFFFF" font-family="Arial">15</text>202      </svg>203    </div>204 205    <div class="pause">206      <div class="bar"></div>207      <div class="bar"></div>208    </div>209 210    <div class="circle tiny">211      <svg width="78" height="78" viewBox="0 0 78 78">212        <circle cx="39" cy="39" r="34" stroke="#FFFFFF" stroke-width="4" fill="none"/>213        <path d="M54 34c-1-8-10-12-18-8" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>214        <path d="M50 48l8-4-8-4" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215        <text x="39" y="46" font-size="18" text-anchor="middle" fill="#FFFFFF" font-family="Arial">15</text>216      </svg>217    </div>218  </div>219 220  <div class="stop"></div>221 222  <!-- Progress bar -->223  <div class="progress">224    <div class="track">225      <div class="fill"></div>226      <div class="thumb"></div>227    </div>228  </div>229 230  <div class="time-left">1:22</div>231  <div class="time-right">5:10</div>232 233</div>234</body>235</html>