GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Meditation Player UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: "SF Pro Display", Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#000;13  }14 15  /* Top segmented control */16  .top-bar{17    position:absolute;18    top:120px;19    left:50%;20    transform:translateX(-50%);21    width:720px;22    height:96px;23    background:#1f2126;24    border-radius:56px;25    display:flex;26    align-items:center;27    padding:6px;28    box-sizing:border-box;29  }30  .seg{31    flex:1;32    height:84px;33    border-radius:48px;34    display:flex;35    align-items:center;36    justify-content:center;37    color:#fff;38    font-weight:600;39    font-size:38px;40    letter-spacing:1px;41  }42  .seg.active{43    background:#ffffff;44    color:#151515;45    box-shadow:0 2px 0 rgba(255,255,255,0.6) inset;46  }47 48  /* Heart icon */49  .heart{50    position:absolute;51    top:120px;52    right:70px;53    width:70px;54    height:70px;55  }56  .heart svg{width:100%;height:100%;}57  .heart path{58    fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;59  }60 61  /* Title */62  .title{63    position:absolute;64    top:380px;65    width:100%;66    text-align:center;67    color:#fff;68    font-size:96px;69    font-weight:600;70    letter-spacing:1px;71  }72  .subtitle{73    position:absolute;74    top:510px;75    width:100%;76    text-align:center;77    color:#d46b63;78    font-size:44px;79    font-weight:600;80  }81 82  /* Waves background */83  .wave{84    position:absolute;85    border-radius:50%;86    filter:blur(0.2px);87  }88  .wave.wave-a{89    width:1900px;height:900px;90    background:#2f3d3f;91    opacity:0.85;92    top:860px;left:-260px;93    transform:rotate(18deg);94  }95  .wave.wave-b{96    width:2200px;height:950px;97    background:#435153;98    opacity:0.9;99    top:820px;left:-420px;100    transform:rotate(8deg);101  }102  .wave.wave-c{103    width:2200px;height:1350px;104    background:#5f7173;105    opacity:0.92;106    top:1050px;left:-600px;107    transform:rotate(3deg);108  }109 110  /* Timer */111  .timer{112    position:absolute;113    top:1180px;114    width:100%;115    text-align:center;116    font-size:180px;117    color:#fff;118    font-weight:600;119    letter-spacing:12px;120  }121 122  /* Player controls */123  .controls{124    position:absolute;125    bottom:260px;126    width:100%;127    display:flex;128    justify-content:center;129    align-items:center;130    gap:220px;131  }132  .icon-btn{133    width:88px;height:88px;134  }135  .icon-btn svg{width:100%;height:100%;}136  .icon-btn path,.icon-btn polygon,.icon-btn rect{137    fill:#ffffff;138  }139 140  /* Progress bar */141  .progress-wrap{142    position:absolute;143    bottom:190px;144    left:60px;145    width:960px;146  }147  .track{148    height:6px;149    background:#98a6a8;150    opacity:0.6;151    border-radius:6px;152    position:relative;153  }154  .thumb{155    position:absolute;156    top:-18px;157    left:28px; /* knob position */158    width:28px;height:28px;159    background:#fff;border-radius:50%;160    box-shadow:0 0 0 2px rgba(255,255,255,0.2);161  }162  .time-labels{163    display:flex;164    justify-content:space-between;165    color:#cfd7d8;166    font-size:36px;167    margin-top:22px;168  }169 170  /* Home indicator */171  .home-indicator{172    position:absolute;173    bottom:40px;174    left:50%;175    transform:translateX(-50%);176    width:360px;height:10px;177    background:#fff;border-radius:6px;178    opacity:0.85;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Segmented control -->186  <div class="top-bar">187    <div class="seg">LEARN</div>188    <div class="seg active">MEDITATE</div>189  </div>190 191  <!-- Heart icon -->192  <div class="heart">193    <svg viewBox="0 0 48 48">194      <path d="M24 40s-11-8.6-16.2-13.7C3.9 22.4 4.2 14.7 10 12c4.3-2 8.2 0.1 10 3.3 1.8-3.2 5.7-5.3 10-3.3 5.8 2.7 6.1 10.4 2.2 14.3C35 31.4 24 40 24 40z"/>195    </svg>196  </div>197 198  <!-- Title -->199  <div class="title">The Basics</div>200  <div class="subtitle">Session 2</div>201 202  <!-- Background waves -->203  <div class="wave wave-a"></div>204  <div class="wave wave-b"></div>205  <div class="wave wave-c"></div>206 207  <!-- Timer -->208  <div class="timer">4 : 41</div>209 210  <!-- Controls -->211  <div class="controls">212    <!-- Previous -->213    <div class="icon-btn">214      <svg viewBox="0 0 100 100">215        <polygon points="60,20 30,50 60,80"></polygon>216        <polygon points="45,20 15,50 45,80"></polygon>217      </svg>218    </div>219    <!-- Pause -->220    <div class="icon-btn">221      <svg viewBox="0 0 100 100">222        <rect x="30" y="18" width="12" height="64" rx="3"></rect>223        <rect x="58" y="18" width="12" height="64" rx="3"></rect>224      </svg>225    </div>226    <!-- Next -->227    <div class="icon-btn">228      <svg viewBox="0 0 100 100">229        <polygon points="40,20 70,50 40,80"></polygon>230        <polygon points="55,20 85,50 55,80"></polygon>231      </svg>232    </div>233  </div>234 235  <!-- Progress bar -->236  <div class="progress-wrap">237    <div class="track">238      <div class="thumb"></div>239    </div>240    <div class="time-labels">241      <div>0:14</div>242      <div>4:55</div>243    </div>244  </div>245 246  <!-- Home indicator -->247  <div class="home-indicator"></div>248 249</div>250</body>251</html>