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, Helvetica, Arial, sans-serif; }7  * { box-sizing: border-box; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(#0f0f1f, #1f1b55 35%, #211a62 60%, #1e1b52 100%);14    color: #fff;15  }16 17  /* Banner */18  .banner {19    width: 1080px;20    height: 900px;21    background: #E0E0E0;22    border: 1px solid #BDBDBD;23    display: flex;24    justify-content: center;25    align-items: center;26    color: #757575;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30 31  /* Top floating buttons */32  .top-btn {33    position: absolute;34    top: 60px;35    width: 112px;36    height: 112px;37    border-radius: 56px;38    background: rgba(17, 22, 64, 0.85);39    display: flex;40    justify-content: center;41    align-items: center;42  }43  .top-btn.back { left: 40px; }44  .top-btn.menu { right: 40px; }45  .top-btn svg { fill: none; stroke: #fff; stroke-width: 8; }46 47  /* Content area below banner */48  .content {49    position: absolute;50    left: 0;51    top: 900px;52    width: 100%;53    height: 1500px;54    padding: 60px;55    background: linear-gradient(180deg, rgba(45,30,110,0.98), rgba(35,29,100,1));56  }57 58  .title-wrap { position: relative; padding-right: 120px; }59  .title {60    font-weight: 700;61    font-size: 74px;62    line-height: 86px;63    margin: 0 0 10px 0;64  }65  .title + .title { margin-top: 6px; }66  .title-heart {67    position: absolute;68    right: 10px;69    top: 12px;70    width: 72px;71    height: 72px;72    display: flex;73    justify-content: center;74    align-items: center;75  }76  .title-heart svg { width: 64px; height: 64px; stroke: #cfc9ff; fill: none; stroke-width: 6; }77 78  /* Instructor row */79  .instructor {80    display: flex;81    align-items: center;82    margin-top: 38px;83  }84  .avatar {85    width: 132px;86    height: 132px;87    border-radius: 66px;88    overflow: hidden;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 24px;96  }97  .instructor-info { margin-left: 28px; }98  .instructor-info .name {99    font-size: 44px;100    font-weight: 600;101    margin: 0;102  }103  .instructor-info .role {104    margin-top: 10px;105    font-size: 34px;106    color: #c9c6e9;107  }108  .chevron {109    margin-left: auto;110    margin-right: 6px;111    width: 60px;112    height: 60px;113    display: flex;114    align-items: center;115    justify-content: center;116  }117  .chevron svg { stroke: #cfc9ff; stroke-width: 10; fill: none; }118 119  /* Play button */120  .play-btn {121    margin-top: 50px;122    width: 960px;123    height: 150px;124    border-radius: 75px;125    background: #fff;126    color: #1e1b52;127    display: flex;128    align-items: center;129    justify-content: center;130    gap: 32px;131    font-size: 52px;132    font-weight: 700;133  }134  .play-icon {135    width: 84px;136    height: 84px;137    border-radius: 42px;138    background: #eceaf9;139    display: flex;140    align-items: center;141    justify-content: center;142  }143  .play-icon svg { fill: #231b7a; }144 145  .desc {146    margin-top: 36px;147    font-size: 38px;148    color: #d8d5f5;149  }150 151  /* List */152  .list {153    margin-top: 40px;154    border-top: 1px solid rgba(255,255,255,0.2);155  }156  .list-item {157    padding: 38px 0;158    border-bottom: 1px solid rgba(255,255,255,0.08);159    display: flex;160    align-items: center;161  }162  .item-text {163    display: flex;164    flex-direction: column;165    gap: 12px;166  }167  .item-title {168    font-size: 46px;169    font-weight: 700;170  }171  .item-sub {172    font-size: 34px;173    color: #c9c6e9;174  }175  .item-heart {176    margin-left: auto;177    width: 70px;178    height: 70px;179    display: flex;180    align-items: center;181    justify-content: center;182  }183  .item-heart svg { width: 60px; height: 60px; stroke: #d1cfff; stroke-width: 6; fill: none; }184 185  /* Bottom nav */186  .bottom-nav {187    position: absolute;188    left: 0;189    bottom: 0;190    width: 1080px;191    height: 170px;192    background: #0f123a;193    display: flex;194    border-top: 1px solid rgba(255,255,255,0.08);195    padding-top: 14px;196  }197  .nav-item {198    flex: 1;199    display: flex;200    flex-direction: column;201    align-items: center;202    justify-content: center;203    color: #c8c6e8;204    gap: 10px;205  }206  .nav-item svg { width: 64px; height: 64px; stroke: #c8c6e8; fill: none; stroke-width: 6; }207  .nav-label { font-size: 34px; }208  .nav-item.active .nav-label { color: #ffffff; font-weight: 700; }209  .nav-item.active svg { stroke: none; fill: #ffffff; }210 211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Top banner image placeholder -->217  <div class="banner">[IMG: Starry night sky over pine trees]</div>218 219  <!-- Back button -->220  <div class="top-btn back">221    <svg viewBox="0 0 120 120">222      <polyline points="70,30 40,60 70,90" />223    </svg>224  </div>225 226  <!-- Menu button -->227  <div class="top-btn menu">228    <svg viewBox="0 0 120 120">229      <circle cx="40" cy="60" r="8" fill="#fff"></circle>230      <circle cx="60" cy="60" r="8" fill="#fff"></circle>231      <circle cx="80" cy="60" r="8" fill="#fff"></circle>232    </svg>233  </div>234 235  <!-- Content Section -->236  <div class="content">237    <div class="title-wrap">238      <h1 class="title">Drifting Off with</h1>239      <h1 class="title">Gratitude</h1>240      <div class="title-heart">241        <svg viewBox="0 0 24 24">242          <path d="M12 21s-6.5-4.35-9-7.5C1 11.5 2.5 8 6 8c2 0 3.2 1.1 4 2.2C10.8 9.1 12 8 14 8c3.5 0 5 3.5 3 5.9-2.5 3.15-9 7.1-9 7.1z"/>243        </svg>244      </div>245    </div>246 247    <div class="instructor">248      <div class="avatar">[IMG: Instructor Avatar]</div>249      <div class="instructor-info">250        <div class="name">Tamara Levitt</div>251        <div class="role">Head of Mindfulness at Calm</div>252      </div>253      <div class="chevron">254        <svg viewBox="0 0 60 60">255          <polyline points="20,15 40,30 20,45"></polyline>256        </svg>257      </div>258    </div>259 260    <div class="play-btn">261      <div class="play-icon">262        <svg viewBox="0 0 60 60">263          <polygon points="22,15 45,30 22,45"></polygon>264        </svg>265      </div>266      <div>Play</div>267    </div>268 269    <div class="desc">Drift off to sleep with a heart full of gratitude</div>270 271    <div class="list">272      <div class="list-item">273        <div class="item-text">274          <div class="item-title">With Music</div>275          <div class="item-sub">50 min</div>276        </div>277        <div class="item-heart">278          <svg viewBox="0 0 24 24">279            <path d="M12 21s-6.5-4.35-9-7.5C1 11.5 2.5 8 6 8c2 0 3.2 1.1 4 2.2C10.8 9.1 12 8 14 8c3.5 0 5 3.5 3 5.9-2.5 3.15-9 7.1-9 7.1z"/>280          </svg>281        </div>282      </div>283 284      <div class="list-item">285        <div class="item-text">286          <div class="item-title">With Rain</div>287          <div class="item-sub">50 min</div>288        </div>289        <div class="item-heart">290          <svg viewBox="0 0 24 24">291            <path d="M12 21s-6.5-4.35-9-7.5C1 11.5 2.5 8 6 8c2 0 3.2 1.1 4 2.2C10.8 9.1 12 8 14 8c3.5 0 5 3.5 3 5.9-2.5 3.15-9 7.1-9 7.1z"/>292          </svg>293        </div>294      </div>295 296      <div class="list-item">297        <div class="item-text">298          <div class="item-title">Vocal Only</div>299        </div>300        <div class="item-heart">301          <svg viewBox="0 0 24 24">302            <path d="M12 21s-6.5-4.35-9-7.5C1 11.5 2.5 8 6 8c2 0 3.2 1.1 4 2.2C10.8 9.1 12 8 14 8c3.5 0 5 3.5 3 5.9-2.5 3.15-9 7.1-9 7.1z"/>303          </svg>304        </div>305      </div>306    </div>307  </div>308 309  <!-- Bottom navigation -->310  <div class="bottom-nav">311    <div class="nav-item">312      <svg viewBox="0 0 64 64">313        <path d="M10 28 L32 12 L54 28 V54 H38 V40 H26 V54 H10 Z"/>314      </svg>315      <div class="nav-label">Home</div>316    </div>317    <div class="nav-item active">318      <svg viewBox="0 0 64 64">319        <path d="M32 8 A20 20 0 1 0 32 48 A20 20 0 1 0 32 8 Z"/>320      </svg>321      <div class="nav-label">Sleep</div>322    </div>323    <div class="nav-item">324      <svg viewBox="0 0 64 64">325        <circle cx="28" cy="28" r="16"></circle>326        <line x1="42" y1="42" x2="56" y2="56"></line>327      </svg>328      <div class="nav-label">Discover</div>329    </div>330    <div class="nav-item">331      <svg viewBox="0 0 64 64">332        <circle cx="32" cy="22" r="12"></circle>333        <path d="M12 56 C14 40 50 40 52 56 Z"></path>334      </svg>335      <div class="nav-label">Profile</div>336    </div>337    <div class="nav-item">338      <svg viewBox="0 0 64 64">339        <polygon points="32,10 38,26 55,26 41,36 46,52 32,42 18,52 23,36 9,26 26,26"/>340      </svg>341      <div class="nav-label">Premium</div>342    </div>343  </div>344 345</div>346</body>347</html>