GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sleep Meditations UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: radial-gradient(1200px 1200px at 540px 0px, #3b2f7a 0%, #2a1b56 60%, #25184a 100%);14    color: #fff;15  }16 17  /* Header */18  .top-bar {19    position: relative;20    padding: 64px 48px 16px;21  }22  .back-btn {23    position: absolute;24    left: 36px;25    top: 72px;26    width: 88px;27    height: 88px;28    border-radius: 44px;29    background: rgba(255,255,255,0.08);30    display: flex;31    align-items: center;32    justify-content: center;33  }34  .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 6; }35 36  .title {37    text-align: center;38    font-size: 64px;39    font-weight: 700;40    letter-spacing: 0.5px;41    margin-top: 20px;42  }43 44  /* Tabs */45  .tabs {46    display: flex;47    gap: 20px;48    padding: 20px 24px 4px 24px;49    margin: 8px 24px 8px;50    overflow: hidden;51  }52  .tab {53    padding: 18px 34px;54    border-radius: 40px;55    font-size: 34px;56    color: #d9cfff;57    border: 1px solid rgba(255,255,255,0.15);58    white-space: nowrap;59    background: transparent;60  }61  .tab.active {62    background: #ffffff;63    color: #3a2b74;64    border-color: #ffffff;65    font-weight: 700;66  }67 68  /* Grid */69  .content {70    padding: 8px 48px 280px;71  }72  .grid {73    display: flex;74    flex-wrap: wrap;75    gap: 24px;76  }77  .card {78    width: 480px;79    color: #fff;80  }81  .img {82    position: relative;83    width: 100%;84    height: 420px;85    background: #E0E0E0;86    border: 1px solid #BDBDBD;87    border-radius: 22px;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #5f5f5f;92    font-size: 28px;93    text-align: center;94    line-height: 1.2;95  }96  .lock {97    position: absolute;98    left: 18px;99    bottom: 18px;100    width: 54px;101    height: 54px;102    border-radius: 27px;103    background: rgba(0,0,0,0.55);104    display: flex;105    align-items: center;106    justify-content: center;107  }108  .lock svg { width: 28px; height: 28px; fill: #fff; }109 110  .title-text {111    margin-top: 20px;112    font-size: 44px;113    font-weight: 700;114    line-height: 1.15;115  }116  .subtitle {117    margin-top: 6px;118    font-size: 30px;119    color: #cbb8ff;120  }121 122  /* Mini Player */123  .mini-player {124    position: absolute;125    left: 0;126    right: 0;127    bottom: 184px;128    height: 160px;129    background: rgba(12, 8, 32, 0.6);130    backdrop-filter: blur(6px);131    display: flex;132    align-items: center;133    padding: 0 28px;134    border-top: 1px solid rgba(255,255,255,0.08);135  }136  .thumb {137    width: 160px;138    height: 120px;139    border-radius: 14px;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #6a6a6a;146    font-size: 24px;147    overflow: hidden;148  }149  .player-info {150    flex: 1;151    padding: 0 28px;152    display: flex;153    flex-direction: column;154    justify-content: center;155  }156  .track-title { font-size: 36px; font-weight: 700; }157  .track-artist { margin-top: 6px; font-size: 28px; color: #d0c6ff; }158  .pause-btn {159    width: 88px;160    height: 88px;161    border-radius: 44px;162    background: rgba(255,255,255,0.15);163    display: flex;164    align-items: center;165    justify-content: center;166    margin-right: 18px;167  }168  .pause-btn div {169    width: 12px; height: 40px; background: #fff; margin: 0 6px; border-radius: 2px;170  }171  .close-btn {172    width: 72px; height: 72px; border-radius: 36px;173    background: rgba(255,255,255,0.18);174    display: flex; align-items: center; justify-content: center;175  }176  .close-btn svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 6; fill: none; }177 178  /* Bottom Nav */179  .bottom-nav {180    position: absolute;181    left: 0; right: 0; bottom: 64px;182    height: 120px;183    display: flex;184    justify-content: space-around;185    align-items: center;186  }187  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #cbb8ff; font-size: 28px; }188  .nav-item.active { color: #ffffff; }189  .nav-item svg { width: 46px; height: 46px; }190  .home-indicator {191    position: absolute;192    left: 50%;193    transform: translateX(-50%);194    bottom: 16px;195    width: 360px;196    height: 10px;197    background: rgba(255,255,255,0.8);198    border-radius: 6px;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <div class="top-bar">206    <div class="back-btn">207      <svg viewBox="0 0 24 24">208        <path d="M14 18l-6-6 6-6"/>209      </svg>210    </div>211    <div class="title">Sleep</div>212  </div>213 214  <div class="tabs">215    <div class="tab">Sleep Stories</div>216    <div class="tab">All</div>217    <div class="tab active">Meditations</div>218    <div class="tab">Tools</div>219    <div class="tab">Music</div>220  </div>221 222  <div class="content">223    <div class="grid">224      <!-- Card 1 -->225      <div class="card">226        <div class="img">227          [IMG: Sunlit forest with purple flowers]228          <div class="lock">229            <svg viewBox="0 0 24 24">230              <path d="M6 10h12v10H6z"></path>231              <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"></path>232            </svg>233          </div>234        </div>235        <div class="title-text">A Woodland Stroll to Sleep</div>236        <div class="subtitle">Meditation • Prof. Megan Reitz</div>237      </div>238 239      <!-- Card 2 -->240      <div class="card">241        <div class="img">242          [IMG: Cozy bed in dim bedroom]243          <div class="lock">244            <svg viewBox="0 0 24 24">245              <path d="M6 10h12v10H6z"></path>246              <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"></path>247            </svg>248          </div>249        </div>250        <div class="title-text">Soften Into Sleep</div>251        <div class="subtitle">Meditation • Chibs Okereke</div>252      </div>253 254      <!-- Card 3 -->255      <div class="card">256        <div class="img">257          [IMG: Northern lights over snowy trees]258          <div class="lock">259            <svg viewBox="0 0 24 24">260              <path d="M6 10h12v10H6z"></path>261              <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"></path>262            </svg>263          </div>264        </div>265        <div class="title-text">Falling Back to Sleep With Ease</div>266        <div class="subtitle">Dr. Eric López, Ph.D.</div>267      </div>268 269      <!-- Card 4 -->270      <div class="card">271        <div class="img">272          [IMG: Moonlit forested mountains]273          <div class="lock">274            <svg viewBox="0 0 24 24">275              <path d="M6 10h12v10H6z"></path>276              <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"></path>277            </svg>278          </div>279        </div>280        <div class="title-text">Journey to Rest on the Mountaintop</div>281        <div class="subtitle">Meditation • Dr. Eric López, Ph.D.</div>282      </div>283    </div>284  </div>285 286  <!-- Mini Player -->287  <div class="mini-player">288    <div class="thumb">[IMG: Nature’s Bliss]</div>289    <div class="pause-btn">290      <div></div><div></div>291    </div>292    <div class="player-info">293      <div class="track-title">Nature's Bliss</div>294      <div class="track-artist">Lucho Ripley</div>295    </div>296    <div class="close-btn">297      <svg viewBox="0 0 24 24">298        <path d="M6 6l12 12M18 6L6 18"></path>299      </svg>300    </div>301  </div>302 303  <!-- Bottom Navigation -->304  <div class="bottom-nav">305    <div class="nav-item">306      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">307        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2z"></path>308      </svg>309      <div>Home</div>310    </div>311    <div class="nav-item active">312      <svg viewBox="0 0 24 24" fill="currentColor">313        <path d="M12 2a8.5 8.5 0 100 17 7 7 0 010-17z"></path>314      </svg>315      <div>Sleep</div>316    </div>317    <div class="nav-item">318      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">319        <circle cx="11" cy="11" r="7"></circle>320        <path d="M20 20l-3-3"></path>321      </svg>322      <div>Discover</div>323    </div>324    <div class="nav-item">325      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">326        <circle cx="12" cy="8" r="4"></circle>327        <path d="M4 22c0-4 4-7 8-7s8 3 8 7"></path>328      </svg>329      <div>Profile</div>330    </div>331    <div class="nav-item">332      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">333        <path d="M12 2l2.5 6 6.5.5-5 4 1.7 6.5L12 16l-5.7 3 1.7-6.5-5-4 6.5-.5z"></path>334      </svg>335      <div>Premium</div>336    </div>337  </div>338 339  <div class="home-indicator"></div>340</div>341</body>342</html>