GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Meditation Player UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #11171B; /* deep charcoal */14    color: #EAEFF2;15  }16 17  /* Top icons */18  .top-icon {19    position: absolute;20    width: 52px;21    height: 52px;22  }23  .music-icon {24    left: 54px;25    top: 80px;26    opacity: 0.7;27  }28  .close-icon {29    right: 40px;30    top: 70px;31  }32  .close-icon svg line {33    stroke: #FFFFFF;34    stroke-width: 4;35    stroke-linecap: round;36  }37 38  /* Concentric rings area */39  .ring-area {40    position: absolute;41    left: 50%;42    top: 380px;43    transform: translateX(-50%);44    width: 900px;45    height: 900px;46  }47  .ring-area::before {48    content: "";49    position: absolute;50    width: 900px;51    height: 900px;52    border-radius: 50%;53    border: 2px solid rgba(64, 199, 208, 0.28);54  }55  .ring-area::after {56    content: "";57    position: absolute;58    left: 180px;59    top: 180px;60    width: 540px;61    height: 540px;62    border-radius: 50%;63    border: 2px solid rgba(64, 199, 208, 0.45);64  }65 66  /* Center avatar placeholder */67  .avatar {68    position: absolute;69    left: 310px;70    top: 310px;71    width: 280px;72    height: 280px;73    border-radius: 50%;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 26px;81    text-align: center;82    overflow: hidden;83  }84 85  /* Small progress segment above the avatar */86  .progress-chip {87    position: absolute;88    left: 418px;89    top: 270px;90    width: 64px;91    height: 48px;92    background: #46C3C8;93    border-radius: 12px 12px 6px 6px;94    transform: rotate(-7deg);95    box-shadow: 0 0 8px rgba(70,195,200,0.4);96  }97 98  /* Bottom copy */99  .title {100    position: absolute;101    left: 0;102    top: 1550px;103    width: 100%;104    text-align: center;105    font-size: 76px;106    font-weight: 600;107    letter-spacing: 0.5px;108    color: #F6F9FB;109  }110  .author {111    position: absolute;112    left: 0;113    top: 1640px;114    width: 100%;115    text-align: center;116    font-size: 40px;117    color: #A9B4BB;118  }119  .session {120    position: absolute;121    left: 0;122    top: 1720px;123    width: 100%;124    text-align: center;125    font-size: 38px;126    color: #9AA6AD;127  }128  .timer {129    position: absolute;130    left: 0;131    top: 1820px;132    width: 100%;133    text-align: center;134    font-size: 40px;135    color: #B2BDC3;136    letter-spacing: 1px;137  }138 139  /* Play/Pause control */140  .play-btn {141    position: absolute;142    left: 50%;143    top: 1930px;144    transform: translateX(-50%);145    width: 168px;146    height: 168px;147    border-radius: 50%;148    border: 8px solid #F2F5F7;149    background: #1A2226;150    box-shadow: 0 6px 20px rgba(0,0,0,0.35);151  }152  .play-btn::before,153  .play-btn::after {154    content: "";155    position: absolute;156    top: 51px;157    width: 20px;158    height: 66px;159    background: #FFFFFF;160    border-radius: 4px;161  }162  .play-btn::before { left: 62px; }163  .play-btn::after { left: 88px; }164 165  /* Home indicator */166  .home-indicator {167    position: absolute;168    left: 50%;169    bottom: 22px;170    transform: translateX(-50%);171    width: 300px;172    height: 10px;173    background: #FFFFFF;174    border-radius: 8px;175    opacity: 0.9;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Top left music icon -->183  <div class="top-icon music-icon">184    <svg viewBox="0 0 24 24" width="52" height="52">185      <path d="M9 3v12.5a3.5 3.5 0 1 1-2-3.2V6l10-2v9.5a3.5 3.5 0 1 1-2-3.2V3L9 5z" fill="#8C949A"></path>186    </svg>187  </div>188 189  <!-- Top right close icon -->190  <div class="top-icon close-icon">191    <svg viewBox="0 0 24 24" width="52" height="52">192      <line x1="5" y1="5" x2="19" y2="19"></line>193      <line x1="19" y1="5" x2="5" y2="19"></line>194    </svg>195  </div>196 197  <!-- Concentric rings and avatar -->198  <div class="ring-area">199    <div class="progress-chip"></div>200    <div class="avatar">[IMG: Instructor Portrait]</div>201  </div>202 203  <!-- Bottom text content -->204  <div class="title">Positive Start</div>205  <div class="author">By Deborah Eden Tull</div>206  <div class="session">Session 1 - Mindful Awareness</div>207  <div class="timer">0:27 / 10:30</div>208 209  <!-- Play/Pause control -->210  <div class="play-btn"></div>211 212  <!-- Home indicator -->213  <div class="home-indicator"></div>214</div>215</body>216</html>