GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Sleep UI Mock</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: #2C1B6E; /* deep purple */13    color: #FFFFFF;14  }15 16  /* Header */17  .top-bar {18    position: relative;19    padding: 32px 36px 20px 36px;20  }21  .back-btn {22    width: 88px;23    height: 88px;24    border-radius: 44px;25    background: #20105A;26    display: flex;27    align-items: center;28    justify-content: center;29    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);30  }31  .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 8; }32  .title {33    position: absolute;34    top: 42px;35    left: 170px;36    font-size: 54px;37    font-weight: 700;38    letter-spacing: 0.3px;39  }40 41  /* Filters */42  .filters {43    display: flex;44    gap: 22px;45    padding: 26px 36px 8px 36px;46  }47  .chip {48    padding: 18px 28px;49    border-radius: 28px;50    border: 1px solid rgba(255,255,255,0.25);51    color: rgba(255,255,255,0.85);52    font-size: 34px;53    white-space: nowrap;54    background: transparent;55  }56  .chip.active {57    background: #FFFFFF;58    color: #2C1B6E;59    border-color: transparent;60    font-weight: 600;61  }62 63  /* Two small header items above grid */64  .mini-row {65    display: grid;66    grid-template-columns: 1fr 1fr;67    column-gap: 36px;68    padding: 24px 36px 0 36px;69  }70  .mini-card h4 {71    margin: 0;72    font-size: 40px;73    font-weight: 800;74  }75  .mini-card p {76    margin: 10px 0 0 0;77    font-size: 28px;78    color: rgba(255,255,255,0.7);79  }80 81  /* Grid of content cards */82  .grid {83    display: grid;84    grid-template-columns: 1fr 1fr;85    column-gap: 36px;86    row-gap: 42px;87    padding: 24px 36px 280px 36px; /* bottom space for player & nav */88  }89  .card {90    background: transparent;91  }92  .img-box {93    width: 100%;94    height: 420px;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    border-radius: 24px;98    color: #757575;99    display: flex;100    align-items: center;101    justify-content: center;102    font-size: 28px;103    text-align: center;104    position: relative;105    overflow: hidden;106  }107  .lock {108    position: absolute;109    left: 22px;110    bottom: 22px;111    width: 60px;112    height: 60px;113    border-radius: 30px;114    background: rgba(32,16,90,0.85);115    display: flex;116    align-items: center;117    justify-content: center;118    box-shadow: 0 4px 10px rgba(0,0,0,0.3);119  }120  .lock svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 6; }121  .pauseBadge {122    position: absolute;123    left: 22px;124    bottom: 22px;125    width: 64px;126    height: 64px;127    border-radius: 12px;128    background: rgba(32,16,90,0.85);129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .pauseBadge .bar {134    width: 12px; height: 34px; background: #fff; border-radius: 4px; margin: 0 5px;135  }136  .card-title {137    margin: 22px 0 6px 0;138    font-size: 42px;139    font-weight: 800;140    line-height: 1.2;141  }142  .card-sub {143    margin: 0;144    font-size: 30px;145    color: rgba(255,255,255,0.75);146  }147 148  /* Bottom player */149  .player {150    position: absolute;151    left: 0;152    bottom: 168px; /* sits above nav bar */153    width: 100%;154    height: 160px;155    background: #251760;156    border-top: 1px solid rgba(255,255,255,0.08);157    display: flex;158    align-items: center;159    padding: 18px 28px;160    box-sizing: border-box;161  }162  .player-thumb {163    width: 120px;164    height: 120px;165    border-radius: 16px;166    background: #E0E0E0;167    border: 1px solid #BDBDBD;168    color: #757575;169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 20px;173    margin-right: 22px;174  }175  .player-controls {176    width: 72px; height: 72px;177    border-radius: 20px; background: #2E1B6E;178    display: flex; align-items: center; justify-content: center;179    margin-right: 20px;180  }181  .player-controls .bar { width: 12px; height: 34px; background: #fff; border-radius: 4px; margin: 0 4px; }182  .player-text {183    flex: 1;184  }185  .player-text .t1 { font-size: 40px; font-weight: 700; }186  .player-text .t2 { font-size: 28px; color: rgba(255,255,255,0.8); margin-top: 6px; }187  .player-close {188    width: 72px; height: 72px; border-radius: 36px; background: #2E1B6E;189    display: flex; align-items: center; justify-content: center; margin-left: 18px;190  }191  .player-close svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 8; fill: none; }192 193  /* Bottom nav */194  .bottom-nav {195    position: absolute;196    left: 0; bottom: 0;197    width: 100%; height: 168px;198    background: #1F1256;199    border-top: 1px solid rgba(255,255,255,0.08);200    display: flex; align-items: center; justify-content: space-around;201  }202  .nav-item {203    display: flex; flex-direction: column; align-items: center; justify-content: center;204    color: rgba(255,255,255,0.85);205    font-size: 26px;206  }207  .nav-item svg { width: 58px; height: 58px; stroke: #fff; stroke-width: 6; fill: none; }208  .nav-item.active { color: #fff; }209  .nav-item.active .moon { fill: #fff; stroke: none; }210 211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Header -->217  <div class="top-bar">218    <div class="back-btn">219      <svg viewBox="0 0 24 24">220        <path d="M15 4 L7 12 L15 20" />221      </svg>222    </div>223    <div class="title">Sleep</div>224  </div>225 226  <!-- Filters -->227  <div class="filters">228    <div class="chip">Sleep Stories</div>229    <div class="chip">All</div>230    <div class="chip active">Meditations</div>231    <div class="chip">Tools</div>232    <div class="chip">Music</div>233  </div>234 235  <!-- Mini headers row -->236  <div class="mini-row">237    <div class="mini-card">238      <h4>Ease</h4>239      <p>Dr. Eric López, Ph.D.</p>240    </div>241    <div class="mini-card">242      <h4>Mountaintop</h4>243      <p>Meditation • Dr. Eric López, Ph.D.</p>244    </div>245  </div>246 247  <!-- Cards Grid -->248  <div class="grid">249 250    <!-- Card 1 -->251    <div class="card">252      <div class="img-box">253        [IMG: Calm bedroom with bedside lamp]254        <div class="lock">255          <svg viewBox="0 0 24 24">256            <rect x="6" y="10" width="12" height="10" rx="2"></rect>257            <path d="M8 10 V7 a4 4 0 0 1 8 0 V10"></path>258          </svg>259        </div>260      </div>261      <div class="card-title">Quieting the Mind and Body</div>262      <div class="card-sub">Meditation • Prof. Megan Reitz</div>263    </div>264 265    <!-- Card 2 -->266    <div class="card">267      <div class="img-box">268        [IMG: Nighttime bed near window with city lights]269        <div class="lock">270          <svg viewBox="0 0 24 24">271            <rect x="6" y="10" width="12" height="10" rx="2"></rect>272            <path d="M8 10 V7 a4 4 0 0 1 8 0 V10"></path>273          </svg>274        </div>275      </div>276      <div class="card-title">Unwind Into Sleep</div>277      <div class="card-sub">Meditation • Chibs Okereke</div>278    </div>279 280    <!-- Card 3 -->281    <div class="card">282      <div class="img-box">283        [IMG: Cozy attic bedroom with window]284        <div class="lock">285          <svg viewBox="0 0 24 24">286            <rect x="6" y="10" width="12" height="10" rx="2"></rect>287            <path d="M8 10 V7 a4 4 0 0 1 8 0 V10"></path>288          </svg>289        </div>290      </div>291      <div class="card-title">Nighttime Gratitude</div>292      <div class="card-sub">Meditation • Kirat Randhawa</div>293    </div>294 295    <!-- Card 4 -->296    <div class="card">297      <div class="img-box">298        [IMG: Bed by window with snowy trees under moonlight]299        <div class="pauseBadge">300          <div class="bar"></div><div class="bar"></div>301        </div>302      </div>303      <div class="card-title">Gratitude Body Scan for Sleep</div>304      <div class="card-sub">Meditation • Jay Shetty</div>305    </div>306 307  </div>308 309  <!-- Bottom player -->310  <div class="player">311    <div class="player-thumb">[IMG: Sleep track artwork]</div>312    <div class="player-controls">313      <div class="bar"></div><div class="bar"></div>314    </div>315    <div class="player-text">316      <div class="t1">Gratitude Body Scan for Sleep</div>317      <div class="t2">Jay Shetty</div>318    </div>319    <div class="player-close">320      <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"></path></svg>321    </div>322  </div>323 324  <!-- Bottom navigation -->325  <div class="bottom-nav">326    <div class="nav-item">327      <svg viewBox="0 0 24 24"><path d="M4 10 L12 4 L20 10"></path><path d="M6 10 V19 H18 V10"></path></svg>328      <div>Home</div>329    </div>330    <div class="nav-item active">331      <svg class="moon" viewBox="0 0 24 24">332        <path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16"></path>333      </svg>334      <div>Sleep</div>335    </div>336    <div class="nav-item">337      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20 L16 16"></path></svg>338      <div>Discover</div>339    </div>340    <div class="nav-item">341      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5"></circle><path d="M4 22 a8 8 0 0 1 16 0"></path></svg>342      <div>Profile</div>343    </div>344    <div class="nav-item">345      <svg viewBox="0 0 24 24"><path d="M12 3 L14.7 8.5 L20.6 9.2 L16.3 13.2 L17.5 19 L12 16.2 L6.5 19 L7.7 13.2 L3.4 9.2 L9.3 8.5 Z"></path></svg>346      <div>Premium</div>347    </div>348  </div>349 350</div>351</body>352</html>