GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Meditation App - Discover</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0F2331; /* deep navy */14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 30px 48px 0 48px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #DDE7EF;25    font-weight: 600;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    gap: 28px;31    align-items: center;32  }33  .icon {34    width: 34px;35    height: 34px;36  }37 38  /* Search bar */39  .search-wrap {40    padding: 24px 48px 0 48px;41  }42  .search-bar {43    height: 120px;44    border-radius: 60px;45    border: 2px solid rgba(255,255,255,0.35);46    display: flex;47    align-items: center;48    padding: 0 36px;49    gap: 28px;50    color: rgba(255,255,255,0.85);51    font-size: 40px;52    font-weight: 500;53    letter-spacing: 0.2px;54  }55  .search-icon {56    width: 56px;57    height: 56px;58  }59 60  /* Headings */61  .section-head {62    margin: 36px 48px 18px 48px;63    display: flex;64    align-items: center;65    justify-content: space-between;66  }67  .section-title {68    font-size: 64px;69    font-weight: 800;70    letter-spacing: 0.2px;71  }72  .action-link {73    font-size: 40px;74    color: #B8D3FF;75    font-weight: 700;76  }77 78  /* Cards grid */79  .topics {80    padding: 0 48px;81    display: grid;82    grid-template-columns: 1fr 1fr;83    gap: 36px;84  }85  .card {86    position: relative;87    height: 520px;88    border-radius: 36px;89    overflow: hidden;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96    font-size: 38px;97    font-weight: 600;98    text-align: center;99  }100  .card-title {101    position: absolute;102    left: 36px;103    bottom: 28px;104    font-size: 56px;105    font-weight: 800;106    color: #FFFFFF;107    text-shadow: 0 2px 12px rgba(0,0,0,0.35);108  }109  .dark-overlay {110    position: absolute;111    inset: 0;112    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.1));113    pointer-events: none;114  }115 116  /* Popular Meditations */117  .pop-head {118    margin: 48px 48px 24px 48px;119  }120  .banner {121    margin: 0 48px;122    height: 700px;123    border-radius: 36px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    position: relative;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 42px;132    font-weight: 600;133    text-align: center;134  }135  .banner .card-title {136    font-size: 58px;137  }138 139  /* Premium CTA */140  .cta {141    margin: 72px 64px 0 64px;142    text-align: center;143    color: #EAF3FF;144    font-size: 48px;145    font-weight: 800;146    line-height: 1.35;147  }148  .cta-sub {149    margin-top: 18px;150    font-size: 44px;151    font-weight: 700;152    color: #D3E6FF;153  }154  .cta-btn {155    margin: 42px auto 0 auto;156    width: 900px;157    height: 128px;158    border-radius: 64px;159    background: #5EA7FF;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #0F2331;164    font-size: 48px;165    font-weight: 800;166    box-shadow: 0 10px 24px rgba(94,167,255,0.35);167  }168 169  /* Bottom navigation */170  .bottom-nav {171    position: absolute;172    bottom: 0;173    left: 0;174    width: 1080px;175    height: 220px;176    background: rgba(12,28,38,0.95);177    border-top: 1px solid rgba(255,255,255,0.08);178    display: flex;179    align-items: center;180    justify-content: space-around;181    padding-bottom: 40px;182  }183  .nav-item {184    display: flex;185    flex-direction: column;186    align-items: center;187    gap: 14px;188    color: #CFE0EF;189    font-size: 34px;190    font-weight: 700;191  }192  .nav-item svg {193    width: 72px;194    height: 72px;195    fill: #CFE0EF;196    opacity: 0.9;197  }198  .nav-item.active { color: #76B6FF; }199  .nav-item.active svg { fill: #76B6FF; }200 201  /* Home indicator */202  .home-indicator {203    position: absolute;204    bottom: 16px;205    left: 50%;206    transform: translateX(-50%);207    width: 540px;208    height: 12px;209    background: rgba(255,255,255,0.65);210    border-radius: 10px;211  }212 213  /* spacing before bottom nav */214  .spacer {215    height: 280px;216  }217</style>218</head>219<body>220<div id="render-target">221 222  <!-- Status Bar -->223  <div class="status-bar">224    <div class="status-left">3:44</div>225    <div class="status-right">226      <!-- simple wifi icon -->227      <svg class="icon" viewBox="0 0 24 24">228        <path fill="#DDE7EF" d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6-6c3.3-3.3 8.7-3.3 12 0l1.4-1.4c-4.1-4.1-10.7-4.1-14.8 0L6 14zm-3-3c5-5 13-5 18 0l1.4-1.4C16.6 3.8 7.4 3.8 2.6 9.6L3 11z"/>229      </svg>230      <!-- battery icon -->231      <svg class="icon" viewBox="0 0 24 24">232        <path fill="#DDE7EF" d="M18 6h1c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1h-1v2H4v-2H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h1V4h14v2zm-1 2H5v8h12V8z"/>233      </svg>234    </div>235  </div>236 237  <!-- Search -->238  <div class="search-wrap">239    <div class="search-bar">240      <svg class="search-icon" viewBox="0 0 24 24">241        <path fill="#DDE7EF" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>242      </svg>243      <div>Teacher, topic or duration</div>244    </div>245  </div>246 247  <!-- Explore by Topic -->248  <div class="section-head">249    <div class="section-title">Explore by Topic</div>250    <div class="action-link">View all</div>251  </div>252 253  <div class="topics">254    <!-- Left card -->255    <div class="card">256      [IMG: Candle in dark evening]257      <div class="dark-overlay"></div>258      <div class="card-title">Evening</div>259    </div>260    <!-- Right card -->261    <div class="card">262      [IMG: Night sky with crescent moon]263      <div class="dark-overlay"></div>264      <div class="card-title">At Night</div>265    </div>266  </div>267 268  <!-- Popular Meditations -->269  <div class="pop-head">270    <div class="section-title">Popular Meditations</div>271  </div>272 273  <div class="banner">274    [IMG: Fireworks sparkler close-up]275    <div class="dark-overlay"></div>276    <div class="card-title">New Year Meditation</div>277  </div>278 279  <!-- CTA -->280  <div class="cta">281    Want to improve your well-being?282    <div class="cta-sub">Try our exclusive premium content</div>283    <div class="cta-btn">Explore Premium</div>284  </div>285 286  <div class="spacer"></div>287 288  <!-- Bottom Navigation -->289  <div class="bottom-nav">290    <div class="nav-item">291      <svg viewBox="0 0 24 24">292        <path d="M12 3l4 4-4 4-4-4 4-4zm0 8l7 7H5l7-7z"/>293      </svg>294      <div>Meditate</div>295    </div>296    <div class="nav-item">297      <svg viewBox="0 0 24 24">298        <path d="M12 21.35l-7.4-6.6C2.1 12.4 2 10.7 3.2 9.6c1.4-1.3 3.5-1 4.8.4L12 13l4-3c1.3-1.4 3.4-1.7 4.8-.4 1.2 1.1 1.1 2.8-.4 4.2L12 21.35z"/>299      </svg>300      <div>Favorites</div>301    </div>302    <div class="nav-item">303      <svg viewBox="0 0 24 24">304        <path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/>305      </svg>306      <div>Profile</div>307    </div>308    <div class="nav-item active">309      <svg viewBox="0 0 24 24">310        <path d="M10 4h10v4H10V4zM4 12h16v4H4v-4zm6 8h10v4H10v-4z"/>311      </svg>312      <div>Discover</div>313    </div>314    <div class="nav-item">315      <svg viewBox="0 0 24 24">316        <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8 4c0-1.1-.2-2.1-.6-3l2.1-2.1-2.8-2.8L16.6 4.6c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L8.5 2.5 5.7 5.3 7.8 7.4c-.4.9-.6 1.9-.6 3s.2 2.1.6 3l-2.1 2.1 2.8 2.8 2.1-2.1c.9.4 1.9.6 3 .6s2.1-.2 3-.6l2.1 2.1 2.8-2.8-2.1-2.1c.4-.9.6-1.9.6-3z"/>317      </svg>318      <div>Settings</div>319    </div>320  </div>321 322  <div class="home-indicator"></div>323</div>324</body>325</html>