GD-ML/AndroidCode

1<html lang="en">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: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000;13    color: #fff;14  }15 16  /* Background image placeholder */17  .image-holder {18    position: absolute;19    left: 0; top: 0;20    width: 100%; height: 100%;21    background: #E0E0E0;22    border: 1px solid #BDBDBD;23    display: flex; align-items: center; justify-content: center;24    color: #757575; font-size: 32px; letter-spacing: 0.5px;25  }26  /* Soft dark overlay to match screenshot mood */27  .overlay {28    position: absolute; left: 0; top: 0; width: 100%; height: 100%;29    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.8) 100%);30    pointer-events: none;31  }32 33  /* Top bar */34  .close-btn {35    position: absolute; left: 40px; top: 60px;36    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;37    color: #fff; font-size: 54px; line-height: 54px; opacity: 0.9;38  }39  .title {40    position: absolute; top: 280px; left: 0; right: 0;41    text-align: center; font-size: 54px; font-weight: 600; letter-spacing: 1px;42    color: #f7f7f7;43  }44 45  /* Central controls */46  .circle {47    position: absolute;48    width: 320px; height: 320px;49    left: 50%; top: 50%;50    transform: translate(-50%, -35%);51    background: rgba(255,255,255,0.25);52    border-radius: 50%;53    backdrop-filter: blur(2px);54    display: flex; align-items: center; justify-content: center;55  }56  .pause-bars {57    width: 120px; height: 160px; display: flex; gap: 48px;58  }59  .pause-bars span {60    width: 28px; height: 100%;61    background: #ffffff; border-radius: 8px;62    display: inline-block;63  }64 65  .skip {66    position: absolute; width: 170px; height: 170px;67    background: rgba(255,255,255,0.18); border-radius: 50%;68    display: flex; align-items: center; justify-content: center;69    color: #fff; font-size: 44px; font-weight: 600;70  }71  .skip.left { left: 240px; top: 1120px; }72  .skip.right { right: 240px; top: 1120px; }73  .skip .arrow {74    position: absolute; bottom: 44px; font-size: 42px; opacity: 0.9;75  }76  .skip.left .arrow { content: ""; }77  .skip.right .arrow { content: ""; }78  .skip-label { position: absolute; bottom: 60px; font-size: 40px; font-weight: 600; }79 80  /* Progress area */81  .progress-wrap {82    position: absolute; left: 60px; right: 60px; bottom: 320px;83  }84  .track {85    position: relative; height: 10px; background: rgba(255,255,255,0.25);86    border-radius: 10px;87  }88  .knob {89    position: absolute; left: -8px; top: 50%;90    transform: translateY(-50%);91    width: 56px; height: 56px; border-radius: 50%;92    background: #ffffff; box-shadow: 0 0 0 6px rgba(255,255,255,0.2);93  }94  .time {95    display: flex; justify-content: space-between; margin-top: 22px;96    color: #d7d7d7; font-size: 38px;97  }98 99  /* Bottom pill */100  .music-pill {101    position: absolute; left: 60px; bottom: 200px;102    height: 130px; width: 680px;103    background: #215fa3; color: #fff;104    border-radius: 80px; display: flex; align-items: center; gap: 26px;105    padding: 0 40px;106    box-shadow: 0 8px 18px rgba(0,0,0,0.35);107  }108  .mountain {109    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;110  }111  .pill-text { display: flex; flex-direction: column; line-height: 1.25; }112  .pill-text .sub { font-size: 34px; opacity: 0.85; }113  .pill-text .main { font-size: 44px; font-weight: 600; }114 115  /* Bottom right actions */116  .actions {117    position: absolute; right: 60px; bottom: 200px; display: flex; gap: 30px;118  }119  .action-circle {120    width: 130px; height: 130px; border-radius: 50%;121    background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;122    backdrop-filter: blur(2px);123  }124  .action-circle svg { width: 58px; height: 58px; stroke: #fff; fill: none; stroke-width: 8px; }125 126  /* Home indicator */127  .home-indicator {128    position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);129    width: 320px; height: 12px; background: #cfcfcf; opacity: 0.75; border-radius: 8px;130  }131</style>132</head>133<body>134<div id="render-target">135  <div class="image-holder">[IMG: Wheat Field Close-up]</div>136  <div class="overlay"></div>137 138  <div class="close-btn">×</div>139  <div class="title">2 Minutes</div>140 141  <div class="circle">142    <div class="pause-bars">143      <span></span><span></span>144    </div>145  </div>146 147  <div class="skip left">148    <div class="skip-label">15</div>149    <div class="arrow">↺</div>150  </div>151  <div class="skip right">152    <div class="skip-label">15</div>153    <div class="arrow">↻</div>154  </div>155 156  <div class="progress-wrap">157    <div class="track">158      <div class="knob"></div>159    </div>160    <div class="time">161      <span>00:00</span>162      <span>01:59</span>163    </div>164  </div>165 166  <div class="music-pill">167    <div class="mountain">168      <svg viewBox="0 0 64 64">169        <path d="M6 50 L24 24 L42 50 Z" fill="none" stroke="#fff" stroke-width="4"/>170        <path d="M30 50 L40 36 L58 50 Z" fill="none" stroke="#fff" stroke-width="4"/>171      </svg>172    </div>173    <div class="pill-text">174      <div class="sub">Background music</div>175      <div class="main">Thunder and Rain</div>176    </div>177  </div>178 179  <div class="actions">180    <div class="action-circle">181      <svg viewBox="0 0 64 64">182        <path d="M32 54 C12 40 8 24 20 18 C25 16 30 18 32 22 C34 18 39 16 44 18 C56 24 52 40 32 54 Z"></path>183      </svg>184    </div>185    <div class="action-circle">186      <svg viewBox="0 0 64 64">187        <path d="M24 36 L40 20"></path>188        <circle cx="44" cy="16" r="6"></circle>189        <path d="M24 36 C18 36 12 40 12 48 C18 44 24 44 30 46"></path>190      </svg>191    </div>192  </div>193 194  <div class="home-indicator"></div>195</div>196</body>197</html>