GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Drifting Off with Gratitude - 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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(#0e1030 0%, #1a1650 40%, #25165a 100%);13    color: #fff;14  }15 16  /* Top star image */17  .hero {18    width: 1080px;19    height: 900px;20    background: #E0E0E0;21    border-bottom: 1px solid #BDBDBD;22    display: flex;23    align-items: center;24    justify-content: center;25    color: #424242;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29 30  /* Overlay circular buttons */31  .overlay-btn {32    position: absolute;33    top: 120px;34    left: 40px;35    width: 110px;36    height: 110px;37    border-radius: 55px;38    background: rgba(3, 7, 33, 0.85);39    display: flex;40    align-items: center;41    justify-content: center;42  }43  .overlay-btn.right {44    left: auto;45    right: 40px;46  }47  .overlay-btn svg { width: 52px; height: 52px; }48 49  /* Main card area under the image */50  .content {51    position: absolute;52    top: 900px;53    left: 0;54    right: 0;55    bottom: 0;56    background: #2a1b66;57  }58 59  .inner {60    padding: 60px;61  }62 63  .title-row {64    display: flex;65    align-items: flex-start;66    justify-content: space-between;67  }68 69  .title {70    font-size: 88px;71    line-height: 1.1;72    font-weight: 700;73    margin: 10px 0 30px 0;74  }75 76  .fav-btn {77    margin-top: 20px;78    width: 80px;79    height: 80px;80    border-radius: 20px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .fav-btn svg { width: 64px; height: 64px; }86 87  /* Author row */88  .author {89    display: flex;90    align-items: center;91    margin-top: 10px;92    gap: 26px;93  }94  .avatar {95    width: 120px;96    height: 120px;97    border-radius: 90px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #555;104    font-size: 22px;105  }106  .author-text {107    flex: 1;108  }109  .author-name {110    font-size: 44px;111    font-weight: 600;112  }113  .author-role {114    font-size: 34px;115    color: #c7c7e9;116    margin-top: 6px;117  }118  .chevron {119    width: 60px;120    height: 60px;121  }122 123  /* Play button */124  .play-btn {125    margin-top: 40px;126    background: #ffffff;127    color: #1d1d3f;128    border-radius: 90px;129    height: 150px;130    display: flex;131    align-items: center;132    justify-content: center;133    gap: 30px;134    box-shadow: 0 8px 24px rgba(0,0,0,0.35);135  }136  .play-btn svg { width: 70px; height: 70px; }137  .play-text { font-size: 56px; font-weight: 700; }138 139  .desc {140    margin-top: 40px;141    font-size: 40px;142    color: #e8e8ff;143  }144 145  /* Sections */146  .section-list {147    margin-top: 30px;148  }149  .list-item {150    padding: 40px 0;151    border-bottom: 1px solid rgba(255,255,255,0.15);152  }153  .item-row {154    display: flex;155    align-items: center;156    justify-content: space-between;157  }158  .item-left {159    display: flex;160    flex-direction: column;161  }162  .item-title {163    font-size: 46px;164    font-weight: 700;165  }166  .item-sub {167    font-size: 36px;168    color: #c7c7e9;169    margin-top: 12px;170  }171  .item-actions {172    display: flex;173    align-items: center;174    gap: 40px;175  }176  .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }177  .icon-btn svg { width: 60px; height: 60px; }178 179  /* Mini player */180  .mini-player {181    position: absolute;182    left: 0;183    right: 0;184    bottom: 180px;185    height: 160px;186    background: #0f153d;187    border-top: 1px solid rgba(255,255,255,0.08);188    display: flex;189    align-items: center;190    padding: 0 40px;191    gap: 34px;192  }193  .mini-info {194    display: flex;195    flex-direction: column;196    color: #e9ecff;197  }198  .mini-title { font-size: 42px; font-weight: 600; }199  .mini-sub { font-size: 34px; color: #c7c7e9; margin-top: 6px; }200  .close-pill {201    margin-left: auto;202    width: 74px; height: 74px;203    border-radius: 37px;204    background: #243069;205    display: flex; align-items: center; justify-content: center;206  }207 208  /* Bottom nav */209  .bottom-nav {210    position: absolute;211    bottom: 0;212    left: 0; right: 0;213    height: 180px;214    background: #141a46;215    border-top: 1px solid rgba(255,255,255,0.08);216    display: flex;217    align-items: center;218    justify-content: space-around;219  }220  .nav-item {221    display: flex;222    flex-direction: column;223    align-items: center;224    gap: 14px;225    color: #cfd3ff;226    font-size: 32px;227  }228  .nav-item.active { color: #ffffff; }229  .nav-item svg { width: 64px; height: 64px; }230 231</style>232</head>233<body>234<div id="render-target">235  <div class="hero">[IMG: Starry Night Sky over Pine Trees]</div>236 237  <!-- Back button -->238  <div class="overlay-btn">239    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">240      <path d="M15 18l-6-6 6-6"/>241    </svg>242  </div>243 244  <!-- Kebab/menu -->245  <div class="overlay-btn right">246    <svg viewBox="0 0 24 24" fill="#fff">247      <circle cx="12" cy="5" r="2.5"></circle>248      <circle cx="12" cy="12" r="2.5"></circle>249      <circle cx="12" cy="19" r="2.5"></circle>250    </svg>251  </div>252 253  <div class="content">254    <div class="inner">255      <div class="title-row">256        <div class="title">257          Drifting Off with<br>Gratitude258        </div>259        <div class="fav-btn">260          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">261            <path d="M12 21s-6.7-4.35-9.33-7.02C-0.2 11.6 1.07 7.8 4.34 6.9c2.03-.57 3.9.35 5.06 2.03C10.5 7.25 12.37 6.33 14.4 6.9c3.26.9 4.53 4.7 1.67 7.08C18.7 16.65 12 21 12 21z"/>262          </svg>263        </div>264      </div>265 266      <div class="author">267        <div class="avatar">[IMG: Avatar]</div>268        <div class="author-text">269          <div class="author-name">Tamara Levitt</div>270          <div class="author-role">Head of Mindfulness at Calm</div>271        </div>272        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">273          <path d="M9 6l6 6-6 6"/>274        </svg>275      </div>276 277      <div class="play-btn">278        <svg viewBox="0 0 24 24" fill="#1d1d3f">279          <polygon points="8,5 20,12 8,19"></polygon>280        </svg>281        <div class="play-text">Play</div>282      </div>283 284      <div class="desc">Drift off to sleep with a heart full of gratitude</div>285 286      <div class="section-list">287        <div class="list-item">288          <div class="item-row">289            <div class="item-left">290              <div class="item-title">With Music</div>291              <div class="item-sub">50 min</div>292            </div>293            <div class="item-actions">294              <div class="icon-btn">295                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">296                  <line x1="5" y1="20" x2="5" y2="10"></line>297                  <line x1="12" y1="20" x2="12" y2="6"></line>298                  <line x1="19" y1="20" x2="19" y2="14"></line>299                </svg>300              </div>301              <div class="icon-btn">302                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">303                  <path d="M12 21s-6.7-4.35-9.33-7.02C-0.2 11.6 1.07 7.8 4.34 6.9c2.03-.57 3.9.35 5.06 2.03C10.5 7.25 12.37 6.33 14.4 6.9c3.26.9 4.53 4.7 1.67 7.08C18.7 16.65 12 21 12 21z"/>304                </svg>305              </div>306            </div>307          </div>308        </div>309 310        <div class="list-item" style="border-bottom: none;">311          <div class="item-row">312            <div class="item-left">313              <div class="item-title">With Rain</div>314              <div class="item-sub">50 min</div>315            </div>316            <div class="item-actions">317              <div class="icon-btn">318                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">319                  <line x1="5" y1="20" x2="5" y2="10"></line>320                  <line x1="12" y1="20" x2="12" y2="6"></line>321                  <line x1="19" y1="20" x2="19" y2="14"></line>322                </svg>323              </div>324              <div class="icon-btn">325                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">326                  <path d="M12 21s-6.7-4.35-9.33-7.02C-0.2 11.6 1.07 7.8 4.34 6.9c2.03-.57 3.9.35 5.06 2.03C10.5 7.25 12.37 6.33 14.4 6.9c3.26.9 4.53 4.7 1.67 7.08C18.7 16.65 12 21 12 21z"/>327                </svg>328              </div>329            </div>330          </div>331        </div>332      </div>333 334    </div>335 336    <!-- Mini player bar -->337    <div class="mini-player">338      <svg viewBox="0 0 24 24" fill="#fff" width="64" height="64">339        <rect x="6" y="4" width="4" height="16"></rect>340        <rect x="14" y="4" width="4" height="16"></rect>341      </svg>342      <div class="mini-info">343        <div class="mini-title">With Music</div>344        <div class="mini-sub">Drifting Off with Gratitude</div>345      </div>346      <div class="close-pill">347        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">348          <line x1="6" y1="6" x2="18" y2="18"></line>349          <line x1="18" y1="6" x2="6" y2="18"></line>350        </svg>351      </div>352    </div>353 354    <!-- Bottom navigation -->355    <div class="bottom-nav">356      <div class="nav-item">357        <svg viewBox="0 0 24 24" fill="none" stroke="#cfd3ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">358          <path d="M3 10l9-7 9 7"></path>359          <path d="M4 10v10h16V10"></path>360        </svg>361        Home362      </div>363      <div class="nav-item active">364        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">365          <path d="M21 12.79A9 9 0 1 1 12.21 3 7 7 0 0 0 21 12.79z"></path>366        </svg>367        Sleep368      </div>369      <div class="nav-item">370        <svg viewBox="0 0 24 24" fill="none" stroke="#cfd3ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">371          <circle cx="11" cy="11" r="7"></circle>372          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>373        </svg>374        Discover375      </div>376      <div class="nav-item">377        <svg viewBox="0 0 24 24" fill="none" stroke="#cfd3ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">378          <circle cx="12" cy="8" r="4"></circle>379          <path d="M4 22c0-4.42 3.58-8 8-8s8 3.58 8 8"></path>380        </svg>381        Profile382      </div>383      <div class="nav-item">384        <svg viewBox="0 0 24 24" fill="none" stroke="#cfd3ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">385          <polygon points="12 2 15 9 22 9 16.5 13.5 18.5 21 12 16.8 5.5 21 7.5 13.5 2 9 9 9"></polygon>386        </svg>387        Premium388      </div>389    </div>390  </div>391</div>392</body>393</html>