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>Meditation App UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #0e2e3f 0%, #0b1d2d 60%, #091624 100%);15    border-radius: 32px;16  }17 18  .content {19    position: absolute;20    left: 0;21    top: 0;22    width: 1080px;23    height: 2400px;24    overflow: hidden;25  }26 27  .section {28    padding: 48px;29  }30 31  .title {32    font-weight: 800;33    font-size: 64px;34    color: #ffffff;35    letter-spacing: 0.2px;36    margin: 24px 0 24px 0;37  }38 39  /* Featured card */40  .featured-card {41    width: calc(100% - 96px);42    height: 520px;43    margin: 0 48px;44    border-radius: 36px;45    position: relative;46    overflow: hidden;47  }48  .img-placeholder {49    width: 100%;50    height: 100%;51    background: #E0E0E0;52    border: 1px solid #BDBDBD;53    display: flex;54    justify-content: center;55    align-items: center;56    color: #757575;57    font-weight: 600;58    font-size: 34px;59  }60  .featured-overlay {61    position: absolute;62    left: 0; right: 0; bottom: 0;63    padding: 40px;64    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(9,22,36,0.6) 40%, rgba(9,22,36,0.9) 100%);65    color: #fff;66  }67  .featured-title {68    font-size: 48px;69    font-weight: 750;70    margin-bottom: 10px;71  }72  .featured-sub {73    font-size: 30px;74    color: #dbe7ef;75  }76 77  /* Premium CTA */78  .cta {79    text-align: center;80    margin: 36px 0 28px;81    color: #ffffff;82  }83  .cta .headline {84    font-size: 44px;85    font-weight: 800;86    line-height: 1.3;87  }88  .cta .sub {89    font-size: 36px;90    font-weight: 700;91    margin-top: 8px;92    color: #eaf3fb;93  }94  .cta-button {95    width: 880px;96    height: 120px;97    margin: 34px auto 0;98    border-radius: 60px;99    background: linear-gradient(180deg, #69b5ff 0%, #4fa6ff 100%);100    color: #ffffff;101    font-size: 40px;102    font-weight: 800;103    letter-spacing: 0.3px;104    display: flex;105    align-items: center;106    justify-content: center;107    box-shadow: 0 10px 20px rgba(79,166,255,0.35);108  }109 110  /* Section headers with "View all" */111  .section-header {112    display: flex;113    align-items: baseline;114    justify-content: space-between;115    padding: 0 48px;116    margin-top: 20px;117  }118  .section-header .title {119    margin: 0;120  }121  .view-all {122    color: #d2e4f3;123    font-size: 34px;124    font-weight: 700;125  }126 127  /* Teachers row */128  .teachers-row {129    display: flex;130    gap: 40px;131    padding: 24px 48px 0 48px;132  }133  .teacher {134    width: 220px;135    text-align: center;136  }137  .avatar {138    width: 220px;139    height: 220px;140    border-radius: 50%;141    overflow: hidden;142    background: #E0E0E0;143    border: 1px solid #BDBDBD;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #757575;148    font-weight: 600;149    font-size: 26px;150  }151  .teacher-name {152    margin-top: 22px;153    color: #ffffff;154    font-size: 34px;155    font-weight: 800;156    line-height: 1.24;157  }158 159  /* Categories grid */160  .categories-grid {161    display: grid;162    grid-template-columns: 1fr 1fr;163    gap: 36px;164    padding: 24px 48px 240px 48px; /* leave space above bottom nav */165  }166  .category-card {167    height: 320px;168    border-radius: 32px;169    overflow: hidden;170    position: relative;171  }172  .category-card .img-placeholder {173    font-size: 30px;174  }175  .category-label {176    position: absolute;177    left: 24px;178    bottom: 20px;179    background: rgba(9,22,36,0.65);180    color: #ffffff;181    padding: 10px 16px;182    border-radius: 20px;183    font-weight: 750;184    font-size: 30px;185  }186 187  /* Bottom navigation */188  .bottom-nav {189    position: absolute;190    left: 0;191    bottom: 0;192    width: 1080px;193    height: 200px;194    background: #f1f1f1;195    border-top-left-radius: 24px;196    border-top-right-radius: 24px;197    box-shadow: 0 -6px 18px rgba(0,0,0,0.15);198    display: flex;199    align-items: center;200    justify-content: space-around;201    padding: 24px 20px;202  }203  .nav-item {204    width: 180px;205    text-align: center;206    color: #7a8690;207    font-size: 28px;208    font-weight: 700;209  }210  .nav-icon {211    width: 56px;212    height: 56px;213    margin: 0 auto 12px;214    display: block;215  }216  .active {217    color: #2997ff;218    font-weight: 800;219  }220  .active svg path, .active svg circle, .active svg rect {221    fill: #2997ff;222    stroke: #2997ff;223  }224  .nav-label {225    display: block;226    margin-top: 2px;227  }228</style>229</head>230<body>231<div id="render-target">232  <div class="content">233    <div class="section">234      <div class="title">Featured</div>235    </div>236 237    <div class="featured-card">238      <div class="img-placeholder">[IMG: Snowy Forest - Winter Meditation]</div>239      <div class="featured-overlay">240        <div class="featured-title">Winter Meditation</div>241        <div class="featured-sub">Ground yourself with focus on the breath</div>242      </div>243    </div>244 245    <div class="section cta">246      <div class="headline">Want to improve your well-being?</div>247      <div class="sub">Try our exclusive premium content</div>248      <div class="cta-button">Explore Premium</div>249    </div>250 251    <div class="section-header">252      <div class="title">Teachers</div>253      <div class="view-all">View all</div>254    </div>255 256    <div class="teachers-row">257      <div class="teacher">258        <div class="avatar">[IMG: Teacher Avatar]</div>259        <div class="teacher-name">Tara Brach</div>260      </div>261      <div class="teacher">262        <div class="avatar">[IMG: Teacher Avatar]</div>263        <div class="teacher-name">Kelly<br>McGonigal</div>264      </div>265      <div class="teacher">266        <div class="avatar">[IMG: Teacher Avatar]</div>267        <div class="teacher-name">Joseph<br>Goldstein</div>268      </div>269      <div class="teacher">270        <div class="avatar">[IMG: Teacher Avatar]</div>271        <div class="teacher-name">Anna</div>272      </div>273    </div>274 275    <div class="section-header" style="margin-top: 36px;">276      <div class="title">Categories</div>277      <div class="view-all">View all</div>278    </div>279 280    <div class="categories-grid">281      <div class="category-card">282        <div class="img-placeholder">[IMG: Calm Nature Hand]</div>283        <div class="category-label">Mindfulness</div>284      </div>285      <div class="category-card">286        <div class="img-placeholder">[IMG: Night Sky]</div>287        <div class="category-label">Sleep</div>288      </div>289    </div>290 291    <div class="bottom-nav">292      <div class="nav-item active">293        <svg class="nav-icon" viewBox="0 0 24 24">294          <path d="M12 4c-1.8 1-3.5 2.3-4.2 4.1C7 9 7.2 10 8 10.8c.8.8 2 .9 3 .4-.6 1.1-.6 2.4.3 3.3.9.9 2.2.9 3.3.3-.5 1.1-.4 2.3.4 3.1.8.8 2 .9 3 .3-1.4 1.8-3.6 3.8-6 3.8-2.4 0-4.6-2-6-3.8 1 .5 2.2.4 3-.3.8-.8.9-2 .4-3.1 1 .6 2.3.6 3.3-.3.9-.9.9-2.2.3-3.3 1 .5 2.3.4 3.1-.4.8-.8.9-2 .1-2.7C15.4 6.2 13.8 5 12 4z" fill="#7a8690"></path>295        </svg>296        <span class="nav-label">Meditate</span>297      </div>298      <div class="nav-item">299        <svg class="nav-icon" viewBox="0 0 24 24">300          <path d="M12 21s-6-4.3-8.2-6.6C2 13.6 2 11.4 3.4 10c1.2-1.2 3.2-1.3 4.6-.1L12 13l4-3.1c1.4-1.2 3.4-1.1 4.6.1 1.4 1.4 1.4 3.6-.4 4.4C18 16.7 12 21 12 21z" fill="#7a8690"></path>301        </svg>302        <span class="nav-label">Favorites</span>303      </div>304      <div class="nav-item">305        <svg class="nav-icon" viewBox="0 0 24 24">306          <circle cx="12" cy="8" r="4" fill="#7a8690"></circle>307          <path d="M4 20c0-4.4 3.6-6 8-6s8 1.6 8 6" fill="#7a8690"></path>308        </svg>309        <span class="nav-label">Profile</span>310      </div>311      <div class="nav-item">312        <svg class="nav-icon" viewBox="0 0 24 24">313          <circle cx="10" cy="10" r="6" stroke="#7a8690" stroke-width="2" fill="none"></circle>314          <rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)" fill="#7a8690"></rect>315        </svg>316        <span class="nav-label">Discover</span>317      </div>318      <div class="nav-item">319        <svg class="nav-icon" viewBox="0 0 24 24">320          <rect x="4" y="6" width="16" height="2" fill="#7a8690"></rect>321          <rect x="4" y="11" width="16" height="2" fill="#7a8690"></rect>322          <rect x="4" y="16" width="16" height="2" fill="#7a8690"></rect>323        </svg>324        <span class="nav-label">Settings</span>325      </div>326    </div>327  </div>328</div>329</body>330</html>