GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Sleep - Meditations</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0D0D0D; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header / hero */18  .hero {19    position: relative;20    height: 760px;21    background: linear-gradient(180deg, #0a2a67 0%, #1a65c5 60%, #1e7bdc 100%);22    color: #fff;23  }24  .status-bar {25    height: 70px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 28px;31    opacity: 0.95;32  }33  .top-row {34    margin-top: 28px;35    padding: 0 36px;36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .title {41    font-size: 64px;42    font-weight: 800;43    letter-spacing: 0.3px;44  }45  .back-btn {46    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;47  }48  .tabs {49    position: absolute;50    bottom: 128px;51    left: 48px;52    right: 48px;53    display: flex;54    align-items: center;55    justify-content: space-between;56    color: rgba(255,255,255,0.9);57  }58  .tab {59    font-size: 46px;60    font-weight: 800;61    letter-spacing: 1px;62    opacity: 0.85;63  }64  .tab.inactive {65    color: rgba(255,255,255,0.6);66    font-weight: 700;67  }68  .tab-underline {69    position: absolute;70    bottom: 96px;71    left: 48px;72    width: 320px;73    height: 8px;74    background: #f7a018;75    border-radius: 8px;76  }77  .hero-image {78    position: absolute;79    left: 48px;80    right: 48px;81    top: 160px;82    height: 360px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    color: #757575;86    display: flex;87    align-items: center;88    justify-content: center;89    font-size: 34px;90    border-radius: 18px;91    opacity: 0.25;92  }93  .hero-curve {94    position: absolute;95    bottom: -140px;96    left: -15%;97    width: 130%;98    height: 300px;99    background: #ffffff;100    border-radius: 0 0 50% 50%;101  }102 103  /* Content */104  .content {105    position: relative;106    padding: 36px 0 220px 0;107    background: #ffffff;108  }109  .sort-row {110    display: flex;111    justify-content: flex-end;112    align-items: center;113    padding: 24px 48px 0 48px;114    color: #2a7bdc;115    font-size: 34px;116  }117  .item {118    padding: 36px 48px;119    display: flex;120    align-items: center;121    gap: 28px;122    position: relative;123  }124  .item + .item { border-top: 1px solid #E6E6E6; }125  .thumb {126    width: 128px;127    height: 128px;128    border-radius: 50%;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    display: flex; align-items: center; justify-content: center;132    color: #757575;133    font-size: 24px;134    text-align: center;135    line-height: 1.1;136    padding: 8px;137    flex: 0 0 128px;138  }139  .meta {140    flex: 1;141  }142  .title-txt {143    font-size: 48px;144    font-weight: 800;145    margin-bottom: 10px;146  }147  .subtitle {148    font-size: 34px;149    color: #8E8E93;150    font-weight: 500;151  }152  .lock {153    width: 48px; height: 48px;154    opacity: 0.35;155  }156 157  /* Promo */158  .promo {159    margin: 36px 48px 12px 48px;160    padding: 40px 24px 52px 24px;161    border-radius: 22px;162    background: #fff;163  }164  .promo h3 {165    margin: 8px 0 18px 0;166    font-size: 46px;167    font-weight: 800;168    text-align: center;169  }170  .promo p {171    margin: 0 0 36px 0;172    font-size: 36px;173    text-align: center;174    font-weight: 600;175  }176  .cta {177    display: flex; justify-content: center;178  }179  .cta button {180    border: none;181    background: #1f90ff;182    color: #fff;183    font-weight: 800;184    font-size: 42px;185    padding: 34px 80px;186    border-radius: 80px;187    cursor: default;188    box-shadow: 0 6px 14px rgba(31,144,255,0.35);189  }190 191  /* Bottom navigation */192  .bottom-nav {193    position: absolute;194    bottom: 0;195    left: 0; right: 0;196    height: 180px;197    background: #F6F6F7;198    border-top: 1px solid #E3E3E6;199    display: flex;200    align-items: center;201    justify-content: space-around;202    padding-bottom: 18px;203  }204  .nav-item {205    display: flex; flex-direction: column; align-items: center; gap: 10px;206    color: #8e8e93; font-size: 30px; font-weight: 700;207  }208  .nav-item.active { color: #1f90ff; }209  .nav-icon { width: 56px; height: 56px; }210 211  /* Small helpers */212  .chevron {213    transform: rotate(90deg);214  }215</style>216</head>217<body>218<div id="render-target">219 220  <div class="hero">221    <div class="status-bar">222      <div style="color:#fff;">10:44</div>223      <div style="display:flex; align-items:center; gap:22px; color:#fff; opacity:.9;">224        <svg width="38" height="28" viewBox="0 0 24 24"><circle cx="3" cy="12" r="2" fill="#fff"/><circle cx="9" cy="12" r="2" fill="#fff"/><circle cx="15" cy="12" r="2" fill="#fff"/></svg>225        <svg width="32" height="28" viewBox="0 0 24 24"><path d="M3 17h18l-9-10-9 10z" fill="#fff"/></svg>226        <svg width="38" height="28" viewBox="0 0 24 24"><path d="M20 7h-4l-4-4-4 4H4v12h16V7z" fill="#fff" opacity=".9"/></svg>227      </div>228    </div>229 230    <div class="top-row">231      <div class="back-btn">232        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 19L8.5 12l7-7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>233      </div>234      <div class="title">Sleep</div>235    </div>236 237    <div class="hero-image">[IMG: Night sky over mountains]</div>238 239    <div class="tabs">240      <div class="tab">MEDITATIONS</div>241      <div class="tab inactive">COURSES</div>242    </div>243    <div class="tab-underline"></div>244 245    <div class="hero-curve"></div>246  </div>247 248  <div class="content">249    <div class="sort-row">250      <span style="margin-right:10px;">by Title</span>251      <svg class="chevron" width="26" height="26" viewBox="0 0 24 24" fill="#2a7bdc"><path d="M7 10l5 5 5-5z"/></svg>252    </div>253 254    <div class="item" style="margin-top:10px;">255      <div class="thumb">[IMG: Cloudy night]</div>256      <div class="meta">257        <div class="title-txt">A Sleepy Walk</div>258        <div class="subtitle">9 min - Stephanie Lewis</div>259      </div>260      <svg class="lock" viewBox="0 0 24 24" fill="#000"><path d="M6 10h12v10H6z" opacity=".2"/><path d="M12 4a4 4 0 00-4 4v2h2V8a2 2 0 114 0v2h2V8a4 4 0 00-4-4z" opacity=".35"/></svg>261    </div>262 263    <div class="item">264      <div class="thumb">[IMG: Forest path]</div>265      <div class="meta">266        <div class="title-txt">Alice’s Adventures in Wonderland</div>267        <div class="subtitle">31 min - Catherine Polan Orzech</div>268      </div>269      <svg class="lock" viewBox="0 0 24 24" fill="#000"><path d="M6 10h12v10H6z" opacity=".2"/><path d="M12 4a4 4 0 00-4 4v2h2V8a2 2 0 114 0v2h2V8a4 4 0 00-4-4z" opacity=".35"/></svg>270    </div>271 272    <div class="item">273      <div class="thumb">[IMG: Full moon]</div>274      <div class="meta">275        <div class="title-txt">An Inner Image</div>276        <div class="subtitle">5 min - Catherine Polan Orzech</div>277      </div>278      <svg class="lock" viewBox="0 0 24 24" fill="#000"><path d="M6 10h12v10H6z" opacity=".2"/><path d="M12 4a4 4 0 00-4 4v2h2V8a2 2 0 114 0v2h2V8a4 4 0 00-4-4z" opacity=".35"/></svg>279    </div>280 281    <div class="promo">282      <h3>Want to improve your well-being?</h3>283      <p>Try our exclusive premium content</p>284      <div class="cta">285        <button>Explore Premium</button>286      </div>287    </div>288 289    <!-- Extra spacer to allow scroll above bottom bar if rendered -->290    <div style="height: 420px;"></div>291  </div>292 293  <div class="bottom-nav">294    <div class="nav-item active">295      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#1f90ff" stroke-width="2"><path d="M12 3l3 4-3 4-3-4 3-4z"/><circle cx="12" cy="17" r="3" stroke="#1f90ff"/></svg>296      <div>Meditate</div>297    </div>298    <div class="nav-item">299      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-6-4.35-8-8a6 6 0 1112 0c-2 3.65-8 8-8 8z"/></svg>300      <div>Favorites</div>301    </div>302    <div class="nav-item">303      <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="currentColor"/></svg>304      <div>Profile</div>305    </div>306    <div class="nav-item">307      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="10" cy="10" r="7"/><path d="M21 21l-5.2-5.2"/></svg>308      <div>Discover</div>309    </div>310    <div class="nav-item">311      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>312      <div>Settings</div>313    </div>314  </div>315 316</div>317</body>318</html>