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 Screen</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: #1c1c1c;15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";17  }18 19  /* Status bar */20  .status-bar {21    height: 100px;22    color: #eaeaea;23    font-size: 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    opacity: 0.9;29  }30  .status-left { display: flex; align-items: center; gap: 16px; }31  .status-right { display: flex; align-items: center; gap: 22px; }32  .dot {33    width: 20px; height: 20px; border-radius: 50%; background: #eaeaea; opacity: 0.85;34  }35  .icon-triangle {36    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 22px solid #eaeaea;37  }38  .signal {39    width: 38px; height: 22px; border: 2px solid #eaeaea; border-radius: 4px; position: relative;40  }41  .signal::after { content: ""; position: absolute; bottom: 2px; right: 2px; width: 20px; height: 16px; background: #eaeaea; }42 43  /* Top close row */44  .top-close {45    display: flex;46    align-items: center;47    padding: 18px 34px;48    margin-top: 8px;49  }50  .close-btn {51    width: 56px; height: 56px; border-radius: 50%;52    display: flex; align-items: center; justify-content: center;53    color: #fff; font-size: 52px; line-height: 0; cursor: default;54  }55 56  /* Album art */57  .art-wrap {58    padding: 0 60px;59    margin-top: 12px;60  }61  .album-art {62    width: 960px;63    height: 960px;64    border-radius: 40px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex; align-items: center; justify-content: center;68    color: #555;69    font-size: 40px;70    text-align: center;71    padding: 24px;72  }73 74  /* Title */75  .title {76    margin: 44px 60px 10px 60px;77    font-size: 84px;78    font-weight: 700;79    letter-spacing: -1px;80    font-family: Georgia, "Times New Roman", Times, serif;81    white-space: nowrap;82    overflow: hidden;83    text-overflow: ellipsis;84  }85 86  /* Progress */87  .progress-area {88    padding: 28px 80px 0 80px;89  }90  .progress-track {91    position: relative;92    height: 18px;93    background: #34343a;94    border-radius: 10px;95  }96  .progress-fill {97    position: absolute; top: 0; left: 0; height: 100%;98    width: 220px;99    background: #d9d9e0;100    border-radius: 10px;101  }102  .progress-knob {103    position: absolute; top: 50%; left: 220px;104    transform: translate(-50%, -50%);105    width: 30px; height: 30px; border-radius: 50%;106    background: #fff;107  }108  .time-row {109    display: flex; justify-content: space-between; margin-top: 14px;110    font-size: 32px; color: #bfbfc6; letter-spacing: 1px;111  }112 113  /* Controls */114  .controls {115    margin-top: 80px;116    display: flex; align-items: center; justify-content: space-around;117    padding: 0 120px;118  }119  .ctrl {120    width: 150px; height: 150px; display: flex; align-items: center; justify-content: center;121    color: #fff;122  }123  .pause-btn {124    width: 190px; height: 190px; border-radius: 50%;125    border: 12px solid #fff; display: flex; align-items: center; justify-content: center;126  }127  .pause-bars {128    width: 68px; height: 84px; display: flex; justify-content: space-between;129  }130  .pause-bars span { width: 24px; background: #fff; border-radius: 6px; }131 132  /* Secondary row */133  .secondary {134    margin-top: 90px;135    display: flex; justify-content: space-around; align-items: center;136    padding: 0 120px; color: #eaeaea;137  }138  .secondary .label { font-size: 40px; opacity: 0.9; }139  .heart {140    width: 60px; height: 60px; border: 6px solid #fff; border-radius: 8px; transform: rotate(45deg);141    border-top-color: transparent; border-left-color: transparent; position: relative;142  }143  .heart::before, .heart::after {144    content: ""; position: absolute; width: 60px; height: 60px; border: 6px solid #fff; border-radius: 50%;145    border-bottom-color: transparent; border-right-color: transparent;146  }147  .heart::before { top: -32px; left: -6px; }148  .heart::after { left: -32px; top: -6px; }149 150  /* Gesture bar */151  .gesture {152    position: absolute; bottom: 34px; left: 50%;153    width: 460px; height: 12px; background: #bdbdbd; border-radius: 8px; transform: translateX(-50%);154    opacity: 0.9;155  }156 157  /* Simple icon helpers */158  svg { display: block; }159  .icon10 { width: 110px; height: 110px; }160  .small-icon { width: 64px; height: 64px; }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div class="status-left">169      <div>6:13</div>170      <div style="font-weight: 700; font-size: 30px;">ib</div>171      <div class="dot"></div>172      <div class="icon-triangle"></div>173      <div class="dot" style="opacity: 0.6;"></div>174    </div>175    <div class="status-right">176      <div class="signal"></div>177      <div style="width: 20px; height: 36px; border: 3px solid #eaeaea; border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative;">178        <div style="position:absolute; bottom:0; left:0; right:0; height:18px; background:#eaeaea;"></div>179      </div>180    </div>181  </div>182 183  <!-- Close button -->184  <div class="top-close">185    <div class="close-btn">×</div>186  </div>187 188  <!-- Album art -->189  <div class="art-wrap">190    <div class="album-art">[IMG: Sleeping cat by a lake under a starry night and full moon]</div>191  </div>192 193  <!-- Title -->194  <div class="title">Getting back to sleep</div>195 196  <!-- Progress -->197  <div class="progress-area">198    <div class="progress-track">199      <div class="progress-fill"></div>200      <div class="progress-knob"></div>201    </div>202    <div class="time-row">203      <div>00:27</div>204      <div>16:56</div>205    </div>206  </div>207 208  <!-- Primary Controls -->209  <div class="controls">210    <!-- Rewind 10 -->211    <div class="ctrl">212      <svg class="icon10" viewBox="0 0 100 100">213        <path d="M50 18 A32 32 0 1 0 82 50" fill="none" stroke="#fff" stroke-width="6"/>214        <polygon points="48,15 35,25 48,35" fill="#fff"/>215        <text x="58" y="75" font-size="28" fill="#fff" font-weight="700">10</text>216      </svg>217    </div>218 219    <!-- Pause -->220    <div class="pause-btn">221      <div class="pause-bars"><span></span><span></span></div>222    </div>223 224    <!-- Forward 10 -->225    <div class="ctrl">226      <svg class="icon10" viewBox="0 0 100 100">227        <path d="M50 18 A32 32 0 1 1 18 50" fill="none" stroke="#fff" stroke-width="6"/>228        <polygon points="52,15 65,25 52,35" fill="#fff"/>229        <text x="26" y="75" font-size="28" fill="#fff" font-weight="700">10</text>230      </svg>231    </div>232  </div>233 234  <!-- Secondary row -->235  <div class="secondary">236    <!-- Download circle -->237    <svg class="small-icon" viewBox="0 0 100 100">238      <circle cx="50" cy="50" r="40" fill="none" stroke="#fff" stroke-dasharray="6 10" stroke-width="6"/>239      <path d="M50 25v36" stroke="#fff" stroke-width="8" />240      <polygon points="40,54 50,72 60,54" fill="#fff"/>241    </svg>242 243    <!-- Music note -->244    <svg class="small-icon" viewBox="0 0 100 100">245      <path d="M36 24v44a12 12 0 1 0 8-11V36l28-8v32a12 12 0 1 0 8-11V18L36 28" fill="#fff"/>246    </svg>247 248    <!-- Speed label -->249    <div class="label">X1</div>250 251    <!-- Heart outline (simple SVG) -->252    <svg class="small-icon" viewBox="0 0 100 100">253      <path d="M72 20c-10 0-16 7-22 14-6-7-12-14-22-14C13 20 6 30 8 41c4 22 42 41 42 41s38-19 42-41c2-11-5-21-20-21z"254            fill="none" stroke="#fff" stroke-width="6"/>255    </svg>256  </div>257 258  <!-- Gesture bar -->259  <div class="gesture"></div>260 261</div>262</body>263</html>