GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Sleep UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #2C1C6A; /* deep purple */18    color: #FFFFFF;19  }20 21  /* Top header */22  .topbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    padding: 40px 40px 20px 40px;28  }29  .back-btn {30    width: 96px;31    height: 96px;32    border-radius: 48px;33    background: #3A2A80;34    display: flex;35    align-items: center;36    justify-content: center;37  }38  .back-btn svg { width: 40px; height: 40px; }39  .header-title {40    position: absolute;41    top: 54px;42    left: 0;43    width: 100%;44    text-align: center;45    font-weight: 700;46    font-size: 60px;47    letter-spacing: 0.5px;48  }49 50  /* Tabs */51  .tabs {52    position: absolute;53    top: 160px;54    left: 40px;55    right: 40px;56    display: flex;57    gap: 20px;58  }59  .tab {60    padding: 20px 28px;61    border-radius: 40px;62    background: rgba(255,255,255,0.08);63    color: #D7CCFF;64    font-size: 34px;65    white-space: nowrap;66    border: 1px solid rgba(255,255,255,0.15);67  }68  .tab.active {69    background: #FFFFFF;70    color: #2C1C6A;71    font-weight: 700;72    border-color: #FFFFFF;73  }74 75  /* Featured short descriptions above cards */76  .featured-row {77    position: absolute;78    top: 260px;79    left: 40px;80    right: 40px;81    display: grid;82    grid-template-columns: 1fr 1fr;83    gap: 40px;84    color: #EDE8FF;85  }86  .feature {87    font-size: 36px;88    line-height: 1.35;89  }90  .feature .sub {91    font-size: 30px;92    opacity: 0.8;93    margin-top: 8px;94  }95 96  /* Cards grid */97  .grid {98    position: absolute;99    top: 420px;100    left: 40px;101    right: 40px;102    display: grid;103    grid-template-columns: 1fr 1fr;104    gap: 40px 40px;105  }106  .card {107    display: flex;108    flex-direction: column;109  }110  .img {111    height: 370px;112    border-radius: 30px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    color: #757575;116    display: flex;117    align-items: center;118    justify-content: center;119    font-size: 28px;120    position: relative;121  }122  .lock-badge {123    position: absolute;124    left: 24px;125    bottom: 24px;126    width: 58px;127    height: 58px;128    background: rgba(0,0,0,0.55);129    border-radius: 16px;130    display: flex;131    align-items: center;132    justify-content: center;133  }134  .lock-badge svg { width: 28px; height: 28px; fill: #FFFFFF; }135 136  .play-pill {137    position: absolute;138    left: 24px;139    bottom: 24px;140    background: rgba(0,0,0,0.55);141    color: #FFFFFF;142    border-radius: 22px;143    padding: 8px 16px;144    font-size: 28px;145    display: flex;146    align-items: center;147    gap: 10px;148  }149  .play-pill svg { width: 24px; height: 24px; fill: #FFFFFF; }150 151  .title {152    margin-top: 24px;153    font-size: 44px;154    font-weight: 700;155  }156  .subtitle {157    margin-top: 8px;158    font-size: 32px;159    color: #D7CCFF;160  }161 162  /* Mini player */163  .mini-player {164    position: absolute;165    left: 0;166    right: 0;167    bottom: 220px;168    background: #241653;169    height: 140px;170    display: flex;171    align-items: center;172    padding: 0 40px;173    gap: 24px;174    border-top: 1px solid rgba(255,255,255,0.08);175  }176  .mini-cover {177    width: 160px;178    height: 100px;179    background: #E0E0E0;180    border: 1px solid #BDBDBD;181    color: #757575;182    display: flex;183    align-items: center;184    justify-content: center;185    font-size: 26px;186  }187  .pause-btn {188    width: 80px;189    height: 80px;190    border-radius: 16px;191    background: #3A2A80;192    display: flex;193    align-items: center;194    justify-content: center;195    margin-left: 20px;196  }197  .pause-btn svg { width: 32px; height: 32px; fill: #FFFFFF; }198  .track-info {199    display: flex;200    flex-direction: column;201    color: #FFFFFF;202  }203  .track-title { font-size: 40px; font-weight: 700; }204  .track-artist { font-size: 30px; color: #D7CCFF; margin-top: 6px; }205  .close-pill {206    margin-left: auto;207    width: 68px;208    height: 68px;209    border-radius: 34px;210    background: #3A2A80;211    display: flex;212    align-items: center;213    justify-content: center;214  }215  .close-pill svg { width: 28px; height: 28px; stroke: #FFFFFF; }216 217  /* Bottom navigation */218  .bottom-nav {219    position: absolute;220    left: 0;221    right: 0;222    bottom: 0;223    height: 220px;224    background: #1E1346;225    display: flex;226    align-items: center;227    justify-content: space-around;228    border-top: 1px solid rgba(255,255,255,0.08);229  }230  .nav-item {231    display: flex;232    flex-direction: column;233    align-items: center;234    gap: 18px;235    color: #D7CCFF;236    font-size: 32px;237  }238  .nav-item.active { color: #FFFFFF; }239  .nav-item svg { width: 56px; height: 56px; fill: currentColor; }240 241</style>242</head>243<body>244<div id="render-target">245 246  <!-- Header -->247  <div class="topbar">248    <div class="back-btn">249      <svg viewBox="0 0 24 24">250        <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12l10.2-9.5 1.8 2z"></path>251      </svg>252    </div>253    <div class="header-title">Sleep</div>254  </div>255 256  <!-- Tabs -->257  <div class="tabs">258    <div class="tab">Sleep Stories</div>259    <div class="tab">All</div>260    <div class="tab active">Meditations</div>261    <div class="tab">Tools</div>262    <div class="tab">Music</div>263  </div>264 265  <!-- Featured descriptors -->266  <div class="featured-row">267    <div class="feature">268      Ease269      <div class="sub">Dr. Eric López, Ph.D.</div>270    </div>271    <div class="feature">272      Mountaintop273      <div class="sub">Meditation • Dr. Eric López, Ph.D.</div>274    </div>275  </div>276 277  <!-- Cards Grid -->278  <div class="grid">279    <!-- Card 1 -->280    <div class="card">281      <div class="img">[IMG: Cozy lamp-lit bed with books]282        <div class="lock-badge">283          <svg viewBox="0 0 24 24">284            <path d="M17 9h-1V7a4 4 0 00-8 0v2H7a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2v-7a2 2 0 00-2-2zm-7 0V7a3 3 0 016 0v2H10z"></path>285          </svg>286        </div>287      </div>288      <div class="title">Quieting the Mind and Body</div>289      <div class="subtitle">Meditation • Prof. Megan Reitz</div>290    </div>291 292    <!-- Card 2 -->293    <div class="card">294      <div class="img">[IMG: Night city view from bedroom window]295        <div class="lock-badge">296          <svg viewBox="0 0 24 24">297            <path d="M17 9h-1V7a4 4 0 00-8 0v2H7a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2v-7a2 2 0 00-2-2zm-7 0V7a3 3 0 016 0v2H10z"></path>298          </svg>299        </div>300      </div>301      <div class="title">Unwind Into Sleep</div>302      <div class="subtitle">Meditation • Chibs Okereke</div>303    </div>304 305    <!-- Card 3 -->306    <div class="card">307      <div class="img">[IMG: A-frame cabin bed at night]308        <div class="lock-badge">309          <svg viewBox="0 0 24 24">310            <path d="M17 9h-1V7a4 4 0 00-8 0v2H7a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2v-7a2 2 0 00-2-2zm-7 0V7a3 3 0 016 0v2H10z"></path>311          </svg>312        </div>313      </div>314      <div class="title">Nighttime Gratitude</div>315      <div class="subtitle">Meditation • Kirat Randhawa</div>316    </div>317 318    <!-- Card 4 -->319    <div class="card">320      <div class="img">[IMG: Bedroom with snowy forest outside]321        <div class="play-pill">322          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"></path></svg>323          32 min324        </div>325      </div>326      <div class="title">Gratitude Body Scan for Sleep</div>327      <div class="subtitle">Meditation • Jay Shetty</div>328    </div>329  </div>330 331  <!-- Mini Player -->332  <div class="mini-player">333    <div class="pause-btn">334      <svg viewBox="0 0 24 24">335        <rect x="5" y="4" width="5" height="16"></rect>336        <rect x="14" y="4" width="5" height="16"></rect>337      </svg>338    </div>339    <div class="track-info">340      <div class="track-title">Nature's Bliss</div>341      <div class="track-artist">Lucho Ripley</div>342    </div>343    <div class="close-pill">344      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">345        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor"></path>346      </svg>347    </div>348  </div>349 350  <!-- Bottom Navigation -->351  <div class="bottom-nav">352    <div class="nav-item">353      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"></path></svg>354      <div>Home</div>355    </div>356    <div class="nav-item active">357      <svg viewBox="0 0 24 24"><path d="M17 12a7 7 0 01-7 7c3.866-3.5 3.866-10.5 0-14a7 7 0 017 7z"></path></svg>358      <div>Sleep</div>359    </div>360    <div class="nav-item">361      <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 104.24 10.24l5.1 5.1 1.42-1.42-5.1-5.1A6 6 0 0010 4zm0 10a4 4 0 110-8 4 4 0 010 8z"></path></svg>362      <div>Discover</div>363    </div>364    <div class="nav-item">365      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-2a6 6 0 0112 0v2H5z"></path></svg>366      <div>Profile</div>367    </div>368    <div class="nav-item">369      <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4L17 20l-5-2.7L7 20l1.5-6.7L4 8.9 10 8l2-6z"></path></svg>370      <div>Premium</div>371    </div>372  </div>373 374</div>375</body>376</html>