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>Meditation Player Mock</title>7<style>8  /* Reset and base */9  html, body { margin: 0; padding: 0; }10  body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #1f272b; /* Dark slate */17    color: #e8eff2;18  }19  /* Top status black strip (notch/safe area) */20  .status-strip {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000;27  }28 29  /* Top action icons */30  .top-icons {31    position: absolute;32    top: 150px;33    left: 0;34    right: 0;35    height: 48px;36    pointer-events: none;37  }38  .icon-note {39    position: absolute;40    left: 60px;41    top: 0;42    width: 44px;43    height: 44px;44    opacity: 0.45;45  }46  .icon-close {47    position: absolute;48    right: 50px;49    top: -4px;50    width: 52px;51    height: 52px;52  }53 54  /* Concentric rings area */55  .rings-wrap {56    position: absolute;57    left: 0;58    right: 0;59    top: 500px;60    height: 920px;61    pointer-events: none;62  }63  .ring-outer, .ring-inner {64    position: absolute;65    border-radius: 50%;66  }67  .ring-outer {68    width: 900px;69    height: 900px;70    left: 90px; /* centered since width is 1080 */71    top: 0;72    border: 3px solid rgba(18, 114, 122, 0.35); /* deep teal, subtle */73  }74  .ring-inner {75    width: 530px;76    height: 530px;77    left: 275px;78    top: 185px;79    border: 4px solid rgba(0, 180, 190, 0.6);80  }81 82  /* Central disc/avatar */83  .center-disc {84    position: absolute;85    width: 340px;86    height: 340px;87    left: 370px;88    top: 280px;89    background: #36464e;90    border-radius: 50%;91    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);92  }93  /* Minimal "stacked stones" motif */94  .stone-head {95    position: absolute;96    width: 86px;97    height: 86px;98    background: #55707b;99    border-radius: 50%;100    left: 50%;101    transform: translateX(-50%);102    top: 84px;103    opacity: 0.9;104  }105  .stone-1, .stone-2 {106    position: absolute;107    left: 50%;108    transform: translateX(-50%);109    height: 26px;110    background: #4b6772;111    border-radius: 20px;112    opacity: 0.9;113  }114  .stone-1 { width: 180px; top: 188px; }115  .stone-2 { width: 220px; top: 224px; }116 117  /* Progress tick at top of inner ring */118  .progress-tick {119    position: absolute;120    width: 16px;121    height: 46px;122    left: 50%;123    top: 165px; /* aligns to top edge of inner ring */124    transform: translateX(-50%);125    background: linear-gradient(to bottom, #7ff0ef 0%, #1a5f66 100%);126    border-radius: 3px;127    box-shadow: 0 0 6px rgba(127,240,239,0.6);128  }129 130  /* Title and meta */131  .track-info {132    position: absolute;133    top: 1680px;134    left: 0;135    width: 100%;136    text-align: center;137  }138  .track-title {139    font-size: 86px;140    line-height: 1.1;141    font-weight: 600;142    color: #e8f1f4;143    letter-spacing: 0.5px;144    margin: 0 0 16px 0;145  }146  .track-sub {147    font-size: 42px;148    color: #8fa1aa;149    margin: 0 0 22px 0;150  }151  .track-time {152    font-size: 38px;153    color: #94a6ae;154    letter-spacing: 1px;155    margin: 0;156  }157 158  /* Pause button */159  .controls {160    position: absolute;161    top: 1950px;162    left: 0;163    width: 100%;164    text-align: center;165  }166  .btn-pause {167    display: inline-block;168    width: 160px;169    height: 160px;170    border-radius: 50%;171    border: 6px solid #e8eff2;172    position: relative;173    box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;174  }175  .btn-pause:before, .btn-pause:after {176    content: "";177    position: absolute;178    top: 44px;179    width: 20px;180    height: 72px;181    background: #e8eff2;182    border-radius: 6px;183  }184  .btn-pause:before { left: 56px; }185  .btn-pause:after { right: 56px; }186 187  /* Home indicator */188  .home-indicator {189    position: absolute;190    bottom: 22px;191    left: 50%;192    transform: translateX(-50%);193    width: 300px;194    height: 10px;195    background: rgba(255,255,255,0.85);196    border-radius: 8px;197  }198</style>199</head>200<body>201  <div id="render-target">202    <div class="status-strip"></div>203 204    <div class="top-icons">205      <!-- Music note (simple quaver) -->206      <svg class="icon-note" viewBox="0 0 24 24" fill="#9aa2a6">207        <path d="M9 3v10.2a3.2 3.2 0 1 1-2-3V7.5l9-2.2v6.9a3.2 3.2 0 1 1-2-3V5.2L9 6.7V3z" />208      </svg>209 210      <!-- Close X -->211      <svg class="icon-close" viewBox="0 0 24 24" stroke="#e9eef1" stroke-width="2.2" fill="none" stroke-linecap="round">212        <path d="M5 5 L19 19 M19 5 L5 19" />213      </svg>214    </div>215 216    <div class="rings-wrap">217      <div class="ring-outer"></div>218      <div class="ring-inner"></div>219 220      <div class="progress-tick"></div>221 222      <div class="center-disc">223        <div class="stone-head"></div>224        <div class="stone-1"></div>225        <div class="stone-2"></div>226      </div>227    </div>228 229    <div class="track-info">230      <h1 class="track-title">Morning</h1>231      <div class="track-sub">Morning Meditation</div>232      <p class="track-time">0:03 / 4:25</p>233    </div>234 235    <div class="controls">236      <div class="btn-pause"></div>237    </div>238 239    <div class="home-indicator"></div>240  </div>241</body>242</html>