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: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #244B5D;13    color: #FFFFFF;14  }15 16  /* Top status/time */17  .status-bar {18    position: absolute;19    top: 28px;20    left: 40px;21    right: 40px;22    height: 70px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27    opacity: 0.95;28    font-size: 40px;29    letter-spacing: 1px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon {37    width: 42px;38    height: 42px;39  }40 41  /* Header controls */42  .close-btn {43    position: absolute;44    top: 140px;45    left: 40px;46    width: 72px;47    height: 72px;48    border-radius: 50%;49    display: grid;50    place-items: center;51    cursor: default;52  }53  .close-btn::before, .close-btn::after {54    content: "";55    position: absolute;56    width: 48px;57    height: 6px;58    background: #fff;59    border-radius: 3px;60  }61  .close-btn::before { transform: rotate(45deg); }62  .close-btn::after { transform: rotate(-45deg); }63 64  .info-btn {65    position: absolute;66    top: 140px;67    right: 40px;68    width: 76px;69    height: 76px;70    border: 4px solid #fff;71    border-radius: 50%;72    display: grid;73    place-items: center;74    font-weight: bold;75    font-size: 44px;76    color: #fff;77  }78 79  /* Center breathing dot and rings */80  .rings {81    position: absolute;82    top: 720px;83    left: 50%;84    transform: translateX(-50%);85    width: 720px;86    height: 720px;87    border-radius: 50%;88    background: radial-gradient(closest-side, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.00)),89                radial-gradient(circle at center, rgba(255,255,255,0.04) 0 35%, rgba(255,255,255,0.02) 35% 60%, rgba(255,255,255,0.00) 60% 100%);90    box-shadow:91      0 0 0 150px rgba(255,255,255,0.02),92      0 0 0 300px rgba(255,255,255,0.02);93    display: grid;94    place-items: start center;95  }96  .rings .dot {97    margin-top: -40px; /* nudge dot toward the top of the rings similar to screenshot */98    width: 22px;99    height: 22px;100    background: #fff;101    border-radius: 50%;102    box-shadow: 0 0 20px rgba(255,255,255,0.25);103  }104 105  /* Bottom inline labels above panel */106  .bottom-meta {107    position: absolute;108    left: 0;109    right: 0;110    bottom: 550px;111    padding: 0 40px;112    display: flex;113    justify-content: space-between;114    align-items: center;115    color: #fff;116    font-weight: 700;117  }118  .bottom-meta .duration { font-size: 46px; }119  .bottom-meta .option {120    font-size: 44px;121    display: flex;122    align-items: center;123    gap: 14px;124    opacity: 0.95;125  }126  .chev {127    border: solid #fff;128    border-width: 0 6px 6px 0;129    display: inline-block;130    padding: 10px;131    transform: rotate(45deg);132    margin-top: -4px;133  }134 135  /* Bottom control panel */136  .panel {137    position: absolute;138    bottom: 0;139    left: 0;140    width: 1080px;141    height: 520px;142    background: #2B3439;143  }144  .track-title {145    position: absolute;146    top: 120px;147    width: 100%;148    text-align: center;149    color: #9BAAB2;150    letter-spacing: 1px;151    font-weight: 700;152    font-size: 44px;153  }154  .controls {155    position: absolute;156    bottom: 110px;157    left: 60px;158    right: 60px;159    display: flex;160    align-items: center;161    justify-content: space-between;162  }163 164  /* Skip 15 circles */165  .skip {166    position: relative;167    width: 170px;168    height: 170px;169    border-radius: 50%;170    border: 10px solid #fff;171    display: grid;172    place-items: center;173    color: #fff;174    font-weight: 800;175    font-size: 64px;176  }177  .skip .arrow {178    position: absolute;179    top: -8px;180    left: 50%;181    transform: translateX(-50%);182    width: 46px;183    height: 46px;184  }185  .skip .arrow svg { fill: #fff; }186 187  /* Pause button */188  .pause-btn {189    width: 210px;190    height: 210px;191    border-radius: 50%;192    border: 12px solid #fff;193    display: grid;194    place-items: center;195  }196  .pause-bars {197    display: flex;198    gap: 26px;199  }200  .pause-bars span {201    width: 26px;202    height: 100px;203    background: #fff;204    border-radius: 6px;205    display: inline-block;206  }207 208  /* Gesture bar */209  .gesture {210    position: absolute;211    bottom: 24px;212    left: 50%;213    transform: translateX(-50%);214    width: 420px;215    height: 12px;216    border-radius: 8px;217    background: rgba(255,255,255,0.55);218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status Bar -->225  <div class="status-bar">226    <div class="time">3:43</div>227    <div class="status-icons">228      <!-- simple "Do not disturb" or mode dot -->229      <svg class="icon" viewBox="0 0 24 24">230        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>231        <rect x="6" y="11" width="12" height="2" fill="#fff"/>232      </svg>233      <!-- Download/indicator -->234      <svg class="icon" viewBox="0 0 24 24">235        <path d="M12 3v10m0 0l4-4m-4 4l-4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236        <rect x="4" y="17" width="16" height="2" fill="#fff"/>237      </svg>238      <!-- WiFi -->239      <svg class="icon" viewBox="0 0 24 24">240        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>241        <circle cx="12" cy="19" r="1.6" fill="#fff"/>242      </svg>243      <!-- Battery -->244      <svg class="icon" viewBox="0 0 28 24">245        <rect x="1" y="6" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>246        <rect x="24" y="10" width="3" height="4" fill="#fff"/>247        <rect x="3" y="8" width="18" height="8" fill="#fff"/>248      </svg>249    </div>250  </div>251 252  <!-- Close and Info -->253  <div class="close-btn" aria-label="Close"></div>254  <div class="info-btn">i</div>255 256  <!-- Center rings with dot -->257  <div class="rings">258    <div class="dot"></div>259  </div>260 261  <!-- Bottom metadata above panel -->262  <div class="bottom-meta">263    <div class="duration">8 min</div>264    <div class="option">None <i class="chev"></i></div>265  </div>266 267  <!-- Bottom control panel -->268  <div class="panel">269    <div class="track-title">Personalized Meditation</div>270 271    <div class="controls">272      <!-- Back 15 -->273      <div class="skip" title="Back 15 seconds">274        <div class="arrow">275          <svg viewBox="0 0 24 24">276            <path d="M12 2v6l3-3M12 8A6 6 0 1 0 18 14" />277          </svg>278        </div>279        15280      </div>281 282      <!-- Pause main -->283      <div class="pause-btn" title="Pause">284        <div class="pause-bars">285          <span></span><span></span>286        </div>287      </div>288 289      <!-- Forward 15 -->290      <div class="skip" title="Forward 15 seconds">291        <div class="arrow" style="transform: translateX(-50%) scaleX(-1);">292          <svg viewBox="0 0 24 24">293            <path d="M12 2v6l3-3M12 8A6 6 0 1 0 18 14" />294          </svg>295        </div>296        15297      </div>298    </div>299  </div>300 301  <!-- Gesture bar -->302  <div class="gesture"></div>303</div>304</body>305</html>