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 - Deep Sleep</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: #1f262a; /* dark charcoal */15    color: #e9f0f2;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;17  }18 19  /* Header icons */20  .icon {21    position: absolute;22    width: 56px;23    height: 56px;24    fill: none;25    stroke: #cfd8dc;26    stroke-width: 6;27    opacity: 0.9;28  }29  .icon.note {30    left: 72px;31    top: 140px;32    stroke: #8aa0a8;33    opacity: 0.4;34  }35  .icon.close {36    right: 72px;37    top: 140px;38    stroke: #ffffff;39    opacity: 0.9;40  }41 42  /* Central visualizer */43  .audio-canvas {44    position: absolute;45    left: 50%;46    transform: translateX(-50%);47    top: 320px;48    width: 980px;49    height: 980px;50  }51  .ring {52    position: absolute;53    border-radius: 50%;54    border: 2px solid rgba(86, 198, 208, 0.25);55  }56  .ring.outer {57    width: 900px;58    height: 900px;59    left: 40px;60    top: 40px;61  }62  .ring.inner {63    width: 470px;64    height: 470px;65    left: 255px;66    top: 255px;67    border-width: 3px;68    border-color: rgba(86, 198, 208, 0.55);69  }70  .progress-cap {71    position: absolute;72    width: 36px;73    height: 30px;74    background: #5ac7d2;75    border-radius: 6px 6px 3px 3px;76    left: 50%;77    top: 240px; /* sits just above inner ring */78    transform: translateX(-50%);79    box-shadow: 0 0 12px rgba(90,199,210,0.6);80  }81 82  .avatar {83    position: absolute;84    left: 50%;85    top: 50%;86    width: 300px;87    height: 300px;88    transform: translate(-50%, -50%);89    border-radius: 50%;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #616161;96    font-size: 34px;97    text-align: center;98    padding: 16px;99    box-shadow: inset 0 0 0 18px rgba(0,0,0,0.25);100  }101 102  /* Bottom details */103  .details {104    position: absolute;105    bottom: 350px;106    left: 0;107    right: 0;108    text-align: center;109    padding: 0 80px;110  }111  .title {112    font-size: 88px;113    line-height: 1.2;114    margin: 0 0 18px 0;115    font-weight: 600;116    color: #e9f0f2;117    letter-spacing: 0.5px;118  }119  .byline {120    font-size: 42px;121    color: #90a4ae;122    margin: 0 0 28px 0;123  }124  .session {125    font-size: 46px;126    color: #8fa3aa;127    margin: 0 0 28px 0;128  }129  .time {130    font-size: 40px;131    color: #a7b6bb;132    letter-spacing: 1px;133    margin-bottom: 42px;134  }135 136  /* Play/Pause button */137  .controls {138    position: absolute;139    left: 50%;140    transform: translateX(-50%);141    bottom: 210px;142  }143  .pause-btn {144    width: 162px;145    height: 162px;146    border-radius: 50%;147    border: 8px solid #e6eff2;148    background: transparent;149    position: relative;150    box-shadow: 0 0 0 2px rgba(255,255,255,0.04) inset;151  }152  .pause-bars {153    position: absolute;154    width: 60px;155    height: 74px;156    left: 50%;157    top: 50%;158    transform: translate(-50%, -50%);159    display: flex;160    justify-content: space-between;161  }162  .pause-bars span {163    width: 22px;164    height: 100%;165    background: #e6eff2;166    border-radius: 4px;167  }168 169  /* Gesture bar */170  .gesture {171    position: absolute;172    left: 50%;173    transform: translateX(-50%);174    bottom: 28px;175    width: 300px;176    height: 10px;177    background: #ffffff;178    opacity: 0.9;179    border-radius: 10px;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Music note (top-left) -->187  <svg class="icon note" viewBox="0 0 24 24">188    <path d="M9 4v10.5a3.5 3.5 0 1 1-2-3.15V6l10-2v8.5a3.5 3.5 0 1 1-2-3.15V4.5L9 6V4z" fill="#8aa0a8" stroke="none"/>189  </svg>190 191  <!-- Close (top-right) -->192  <svg class="icon close" viewBox="0 0 24 24">193    <path d="M5 5l14 14M19 5L5 19" />194  </svg>195 196  <!-- Central visualizer with concentric rings and avatar placeholder -->197  <div class="audio-canvas">198    <div class="ring outer"></div>199    <div class="ring inner"></div>200    <div class="progress-cap"></div>201    <div class="avatar">[IMG: Author Portrait]</div>202  </div>203 204  <!-- Bottom information -->205  <div class="details">206    <h1 class="title">Deep Sleep</h1>207    <div class="byline">By Anne Douglas</div>208    <div class="session">Session 1 - Deep Breath</div>209    <div class="time">0:07 / 5:14</div>210  </div>211 212  <!-- Controls -->213  <div class="controls">214    <div class="pause-btn" aria-label="Pause">215      <div class="pause-bars">216        <span></span>217        <span></span>218      </div>219    </div>220  </div>221 222  <!-- Gesture bar (system handle) -->223  <div class="gesture"></div>224 225</div>226</body>227</html>