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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target{8    position: relative;9    overflow: hidden;10    width:1080px;11    height:2400px;12    background: linear-gradient(180deg,#f6c8a2 0%, #eaac83 38%, #d18e69 56%, #a06e53 80%, #7b563f 100%);13    color:#fff;14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; top:24px; left:0; right:0; height:90px; padding:0 40px;19    display:flex; align-items:center; justify-content:space-between; color:#2f1f17;20    opacity:.9; font-weight:600;21  }22  .status-bar .time{ font-size:44px; letter-spacing:1px; }23  .right-icons{ display:flex; align-items:center; gap:24px; }24  .dot{ width:10px; height:10px; background:#2f1f17; border-radius:50%; opacity:.8; }25  /* Simple signal/wifi/battery icons */26  .icon-battery, .icon-signal, .icon-wifi { display:inline-block; }27  .icon-battery{ width:56px; height:28px; border:4px solid #2f1f17; border-radius:6px; position:relative; }28  .icon-battery:after{ content:""; position:absolute; right:-10px; top:6px; width:8px; height:16px; background:#2f1f17; border-radius:2px; }29  .icon-battery .fill{ position:absolute; left:4px; top:4px; bottom:4px; width:34px; background:#2f1f17; }30  .icon-signal{ width:34px; height:34px; position:relative; }31  .icon-signal i{ position:absolute; bottom:0; width:6px; background:#2f1f17; border-radius:2px; }32  .icon-signal i:nth-child(1){ left:0; height:10px; }33  .icon-signal i:nth-child(2){ left:10px; height:16px; }34  .icon-signal i:nth-child(3){ left:20px; height:22px; }35  .icon-signal i:nth-child(4){ left:30px; height:28px; }36  .icon-wifi{ width:44px; height:28px; position:relative; }37  .icon-wifi:before, .icon-wifi:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); border:3px solid #2f1f17; border-top:none; border-left-color:transparent; border-right-color:transparent; border-bottom-left-radius:30px; border-bottom-right-radius:30px; }38  .icon-wifi:before{ width:44px; height:22px; bottom:0; }39  .icon-wifi:after{ width:28px; height:14px; bottom:0; }40  /* Close button */41  .close{42    position:absolute; top:80px; right:48px; width:110px; height:110px;43    background:rgba(90,60,45,.35); border-radius:55px; display:flex; align-items:center; justify-content:center;44    backdrop-filter: blur(2px);45  }46  .close svg{ width:44px; height:44px; }47  .close line{ stroke:#fff; stroke-width:8; stroke-linecap:round; }48 49  /* Decorative clouds */50  .cloud{ position:absolute; top:230px; left:70px; width:420px; height:120px; }51  .cloud span{52    position:absolute; background:#f6d7be; opacity:.7; border-radius:100px;53  }54  .cloud span:nth-child(1){ width:220px; height:120px; left:0; top:0; }55  .cloud span:nth-child(2){ width:170px; height:100px; left:180px; top:10px; }56  .cloud2{ position:absolute; top:260px; left:340px; width:260px; height:120px; }57  .cloud2 span{ position:absolute; background:#f6d7be; opacity:.65; border-radius:100px; }58  .cloud2 span:nth-child(1){ width:150px; height:90px; left:0; top:10px; }59  .cloud2 span:nth-child(2){ width:140px; height:100px; left:110px; top:0; }60 61  /* Title */62  .title{63    position:absolute; top:380px; left:60px; right:60px; text-align:center;64    font-size:84px; font-weight:700; letter-spacing:1px; color:#fff;65  }66 67  /* Author chip */68  .chip{69    position:absolute; top:560px; left:50%; transform:translateX(-50%);70    display:flex; align-items:center; gap:24px;71    background:rgba(160,110,80,.45); color:#fff;72    padding:24px 36px; border-radius:80px; backdrop-filter: blur(2px);73  }74  .avatar{75    width:110px; height:110px; border-radius:55px; overflow:hidden;76    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; text-align:center; padding:6px;77  }78  .chip span{ font-size:46px; font-weight:600; }79 80  /* Player main button */81  .player{ position:absolute; top:820px; left:0; right:0; text-align:center; }82  .pause-btn{83    margin:0 auto; width:460px; height:460px; background:#c58f6f; border-radius:230px;84    box-shadow: inset 0 8px 20px rgba(0,0,0,.12);85    position:relative;86  }87  .pause-btn:before, .pause-btn:after{88    content:""; position:absolute; top:140px; width:44px; height:180px; background:#fff; border-radius:16px;89  }90  .pause-btn:before{ left:174px; }91  .pause-btn:after{ right:174px; }92 93  /* 10 sec icons */94  .skip{ position:absolute; top:970px; width:160px; height:160px; color:#fff; }95  .skip.left{ left:120px; }96  .skip.right{ right:120px; }97  .skip svg{ width:160px; height:160px; }98  .skip text{ font-size:64px; font-weight:700; fill:#fff; }99 100  /* Butterflies (decorative) */101  .bf{ position:absolute; font-size:120px; opacity:.75; }102  .bf.left{ left:170px; top:720px; transform:rotate(-12deg); }103  .bf.right{ right:120px; top:1580px; transform:rotate(10deg); }104 105  /* Rings around flower */106  .ring{107    position:absolute; left:50%; transform:translateX(-50%);108    border:8px dashed rgba(255,255,255,.5); border-radius:50%;109  }110  .ring.r1{ top:1250px; width:820px; height:820px; }111  .ring.r2{ top:1400px; width:610px; height:610px; border-color:rgba(255,255,255,.45); }112  .ring.r3{ top:1540px; width:420px; height:420px; border-color:rgba(255,255,255,.35); }113 114  .timer{115    position:absolute; top:1220px; left:0; right:0; text-align:center; font-size:58px; font-weight:800;116    text-shadow:0 2px 4px rgba(0,0,0,.25);117  }118 119  /* Lotus illustration */120  .lotus{121    position:absolute; top:1440px; left:50%; transform:translateX(-50%);122    width:560px; height:560px;123  }124  .petal{125    position:absolute; background:#bf784d; border-radius:280px 280px 60px 60px; box-shadow: inset 0 8px 20px rgba(0,0,0,.15);126  }127  .petal.center{ width:220px; height:300px; left:170px; top:150px; background:#c98055; }128  .petal.left{ width:220px; height:280px; left:60px; top:220px; transform: rotate(-18deg); }129  .petal.right{ width:220px; height:280px; right:60px; top:220px; transform: rotate(18deg); }130  .petal.back-left{ width:220px; height:240px; left:110px; top:80px; opacity:.85; }131  .petal.back-right{ width:220px; height:240px; right:110px; top:80px; opacity:.85; }132  .stem{133    position:absolute; left:50%; bottom:-320px; transform:translateX(-50%);134    width:24px; height:450px; background:#8e5e40; border-radius:12px;135  }136 137  /* Bottom actions */138  .actions{139    position:absolute; bottom:260px; left:0; right:0; display:flex; justify-content:space-between;140    padding:0 120px; align-items:center; color:#fff;141  }142  .action{ width:140px; height:140px; display:flex; align-items:center; justify-content:center; }143  .action svg{ width:110px; height:110px; stroke:#fff; fill:none; stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }144 145  /* Slider */146  .slider{147    position:absolute; left:60px; right:60px; bottom:180px; height:50px;148  }149  .track{150    position:absolute; top:22px; left:0; right:0; height:6px; background:rgba(255,255,255,.55); border-radius:4px;151  }152  .thumb{153    position:absolute; top:10px; left:0; width:56px; height:56px; background:#fff; border-radius:28px; box-shadow:0 4px 10px rgba(0,0,0,.25);154  }155 156  /* Home indicator */157  .home-indicator{158    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);159    width:360px; height:10px; background:#fff; border-radius:8px; opacity:.85;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <div class="status-bar">167    <div class="time">9:40</div>168    <div class="right-icons">169      <div class="dot"></div>170      <div class="icon-signal"><i></i><i></i><i></i><i></i></div>171      <div class="icon-wifi"></div>172      <div class="icon-battery"><div class="fill"></div></div>173    </div>174  </div>175 176  <div class="close">177    <svg viewBox="0 0 24 24">178      <line x1="5" y1="5" x2="19" y2="19"></line>179      <line x1="19" y1="5" x2="5" y2="19"></line>180    </svg>181  </div>182 183  <div class="cloud">184    <span></span><span></span>185  </div>186  <div class="cloud2">187    <span></span><span></span>188  </div>189 190  <div class="title">calm your racing mind</div>191 192  <div class="chip">193    <div class="avatar">[IMG: User Avatar]</div>194    <span>by Anshul</span>195  </div>196 197  <div class="player">198    <div class="pause-btn"></div>199  </div>200 201  <!-- 10 sec back/forward -->202  <div class="skip left">203    <svg viewBox="0 0 100 100">204      <defs></defs>205      <path d="M50 12 A38 38 0 1 0 82 44" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round"/>206      <polyline points="70,10 83,11 79,23" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>207      <text x="32" y="67">10</text>208    </svg>209  </div>210  <div class="skip right">211    <svg viewBox="0 0 100 100">212      <path d="M50 12 A38 38 0 1 1 18 44" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round"/>213      <polyline points="30,10 17,11 21,23" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>214      <text x="32" y="67">10</text>215    </svg>216  </div>217 218  <div class="bf left">🦋</div>219  <div class="bf right">🦋</div>220 221  <div class="timer">00:02</div>222  <div class="ring r1"></div>223  <div class="ring r2"></div>224  <div class="ring r3"></div>225 226  <div class="lotus">227    <div class="petal back-left"></div>228    <div class="petal back-right"></div>229    <div class="petal left"></div>230    <div class="petal right"></div>231    <div class="petal center"></div>232    <div class="stem"></div>233  </div>234 235  <div class="actions">236    <div class="action like">237      <svg viewBox="0 0 24 24">238        <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.6 6 6.7 6c2 0 3.1 1.2 3.3 1.5C10.3 7.2 11.4 6 13.3 6 16.4 6 18.5 9 21 12.5 19 16.5 12 21 12 21z"></path>239      </svg>240    </div>241    <div class="action share">242      <svg viewBox="0 0 24 24">243        <circle cx="5" cy="12" r="2.2"></circle>244        <circle cx="19" cy="6" r="2.2"></circle>245        <circle cx="19" cy="18" r="2.2"></circle>246        <path d="M7 11l10-4M7 13l10 4"></path>247      </svg>248    </div>249    <div class="action music">250      <svg viewBox="0 0 24 24">251        <path d="M9 19a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM17 21a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"></path>252        <path d="M11.5 14.5V6.5l8-2v8"></path>253      </svg>254    </div>255  </div>256 257  <div class="slider">258    <div class="track"></div>259    <div class="thumb"></div>260  </div>261 262  <div class="home-indicator"></div>263</div>264</body>265</html>