GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Audio Player Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14  }15 16  /* Background image placeholder */17  .bg {18    position: absolute;19    inset: 0;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex;24    align-items: center;25    justify-content: center;26    font-size: 28px;27    letter-spacing: 0.2px;28    text-align: center;29  }30  /* Dark scrim to mimic photo dimming */31  .scrim {32    position: absolute;33    inset: 0;34    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.65) 100%);35    pointer-events: none;36  }37 38  /* Top bar */39  .close-btn {40    position: absolute;41    top: 120px;42    left: 42px;43    width: 64px;44    height: 64px;45    color: #fff;46    opacity: 0.9;47  }48  .title {49    position: absolute;50    top: 210px;51    left: 60px;52    right: 60px;53    text-align: center;54    color: #fff;55    font-size: 46px;56    font-weight: 600;57    letter-spacing: 0.2px;58  }59 60  /* Center controls */61  .controls {62    position: absolute;63    top: 980px;64    left: 0;65    right: 0;66    height: 320px;67    display: flex;68    align-items: center;69    justify-content: center;70    gap: 220px;71  }72  .circle {73    width: 120px;74    height: 120px;75    border-radius: 50%;76    background: rgba(255,255,255,0.18);77    display: flex;78    align-items: center;79    justify-content: center;80    color: #fff;81    backdrop-filter: blur(6px);82  }83  .play {84    width: 230px;85    height: 230px;86    background: rgba(255,255,255,0.28);87  }88  .skip-label {89    position: absolute;90    bottom: 30px;91    width: 100%;92    text-align: center;93    font-size: 34px;94    font-weight: 600;95    color: #fff;96    opacity: 0.95;97    pointer-events: none;98  }99 100  /* Progress section */101  .progress-area {102    position: absolute;103    left: 60px;104    right: 60px;105    bottom: 520px;106  }107  .track {108    height: 10px;109    background: rgba(255,255,255,0.35);110    border-radius: 8px;111    position: relative;112  }113  .fill {114    position: absolute;115    height: 10px;116    width: 160px;117    background: #fff;118    border-radius: 8px 0 0 8px;119  }120  .thumb {121    position: absolute;122    top: 50%;123    transform: translate(-20px,-50%);124    width: 44px;125    height: 44px;126    background: #fff;127    border-radius: 50%;128    box-shadow: 0 2px 8px rgba(0,0,0,0.3);129  }130  .time-row {131    margin-top: 22px;132    display: flex;133    justify-content: space-between;134    color: #fff;135    font-size: 34px;136    opacity: 0.9;137  }138 139  /* Bottom action row */140  .bottom-row {141    position: absolute;142    left: 60px;143    right: 60px;144    bottom: 330px;145    display: flex;146    align-items: center;147    justify-content: space-between;148    gap: 26px;149  }150  .chip {151    flex: 1;152    max-width: 640px;153    background: linear-gradient(180deg, #1482d0 0%, #0b77c7 100%);154    color: #e9f5ff;155    padding: 28px 34px;156    height: 120px;157    border-radius: 60px;158    display: flex;159    align-items: center;160    gap: 26px;161    box-shadow: 0 6px 14px rgba(13,110,184,0.35);162  }163  .chip .texts {164    display: flex;165    flex-direction: column;166    justify-content: center;167    line-height: 1.1;168  }169  .chip .label {170    font-size: 30px;171    opacity: 0.8;172  }173  .chip .title-chip {174    font-size: 40px;175    font-weight: 600;176    color: #fff;177  }178  .round-btn {179    width: 120px;180    height: 120px;181    border-radius: 60px;182    background: rgba(255,255,255,0.18);183    display: flex;184    align-items: center;185    justify-content: center;186    backdrop-filter: blur(6px);187  }188 189  /* Home indicator */190  .home-indicator {191    position: absolute;192    bottom: 22px;193    left: 50%;194    transform: translateX(-50%);195    width: 360px;196    height: 12px;197    background: #ffffff;198    border-radius: 8px;199    opacity: 0.9;200  }201</style>202</head>203<body>204  <div id="render-target">205    <div class="bg">[IMG: Person resting with headphones]</div>206    <div class="scrim"></div>207 208    <!-- Close icon -->209    <div class="close-btn">210      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">211        <path d="M12 12 L52 52 M52 12 L12 52" stroke="white" stroke-width="4" stroke-linecap="round"/>212      </svg>213    </div>214 215    <!-- Title -->216    <div class="title">How can you get a good night's sleep?</div>217 218    <!-- Center controls -->219    <div class="controls">220      <!-- Skip back 15 -->221      <div class="circle" style="position: relative;">222        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" style="position:absolute; top:14px; left:12px; opacity:0.95">223          <path d="M12 5a7 7 0 1 0 7 7" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>224          <path d="M12 2v6l-3-2" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>225        </svg>226        <div class="skip-label">15</div>227      </div>228 229      <!-- Play/Pause -->230      <div class="circle play">231        <svg width="92" height="92" viewBox="0 0 92 92" fill="none">232          <rect x="28" y="20" width="14" height="52" rx="6" fill="white"/>233          <rect x="50" y="20" width="14" height="52" rx="6" fill="white"/>234        </svg>235      </div>236 237      <!-- Skip forward 15 -->238      <div class="circle" style="position: relative;">239        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" style="position:absolute; top:14px; right:12px; opacity:0.95">240          <path d="M12 5a7 7 0 1 1-7 7" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>241          <path d="M12 2v6l3-2" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>242        </svg>243        <div class="skip-label">15</div>244      </div>245    </div>246 247    <!-- Progress / Time -->248    <div class="progress-area">249      <div class="track">250        <div class="fill"></div>251        <div class="thumb" style="left: 180px;"></div>252      </div>253      <div class="time-row">254        <div>00:03</div>255        <div>02:05</div>256      </div>257    </div>258 259    <!-- Bottom row -->260    <div class="bottom-row">261      <div class="chip">262        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">263          <path d="M3 18l5-9 4 6 3-4 6 7H3z" stroke="#e9f5ff" stroke-width="1.8" stroke-linejoin="round"/>264        </svg>265        <div class="texts">266          <div class="label">Background music</div>267          <div class="title-chip">Crystals</div>268        </div>269      </div>270      <div class="round-btn">271        <svg width="52" height="52" viewBox="0 0 24 24" fill="none">272          <path d="M12.1 20.3s-7.1-4.2-7.1-9.1a4.1 4.1 0 0 1 7.1-2.7 4.1 4.1 0 0 1 7.1 2.7c0 4.9-7.1 9.1-7.1 9.1z" stroke="white" stroke-width="1.8" fill="none" stroke-linejoin="round"/>273        </svg>274      </div>275      <div class="round-btn">276        <svg width="52" height="52" viewBox="0 0 24 24" fill="none">277          <path d="M4 12c0-4 3.6-7 8-7" stroke="white" stroke-width="1.8" stroke-linecap="round"/>278          <path d="M12 5l0 6 6 0" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>279          <circle cx="18" cy="12" r="1.8" fill="white"/>280        </svg>281      </div>282    </div>283 284    <!-- Home indicator -->285    <div class="home-indicator"></div>286  </div>287</body>288</html>