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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #0F2E3C 0%, #0D2733 55%, #0B2130 100%);15    color: #FFFFFF;16  }17 18  /* Scrollable content area */19  .content {20    position: absolute;21    left: 0; top: 0; right: 0;22    bottom: 300px; /* space for home indicator + tab bar */23    overflow-y: auto;24    -webkit-overflow-scrolling: touch;25    padding-bottom: 40px;26  }27 28  /* Top instructors row */29  .instructors {30    display: flex;31    gap: 70px;32    padding: 40px 40px 20px 40px;33    align-items: flex-start;34  }35  .instructor {36    width: 220px;37    text-align: center;38  }39  .avatar-img {40    width: 220px; height: 220px; border-radius: 50%;41    background: #E0E0E0;42    border: 1px solid #BDBDBD;43    display: flex; justify-content: center; align-items: center;44    color: #757575; font-size: 28px;45  }46  .instructor-name {47    margin-top: 16px;48    font-weight: 700;49    font-size: 36px;50    line-height: 40px;51  }52 53  /* Section headers */54  .section {55    margin-top: 18px;56  }57  .section-header {58    display: flex;59    justify-content: space-between;60    align-items: center;61    padding: 18px 36px;62  }63  .section-title {64    font-size: 64px;65    font-weight: 800;66    letter-spacing: 0.5px;67  }68  .view-all {69    font-size: 40px;70    color: #BBD3DE;71    text-decoration: none;72  }73 74  /* Card grid */75  .card-grid {76    display: grid;77    grid-template-columns: 1fr 1fr;78    gap: 36px;79    padding: 0 36px 20px 36px;80  }81  .card {82    position: relative;83    border-radius: 40px;84    overflow: hidden;85  }86  .img-placeholder {87    width: 100%;88    height: 420px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex; justify-content: center; align-items: center;92    color: #757575; font-size: 34px;93  }94  .card-title {95    position: absolute;96    left: 32px; bottom: 28px;97    font-size: 44px;98    font-weight: 800;99    text-shadow: 0 2px 2px rgba(0,0,0,0.25);100  }101 102  /* Home indicator (above tab bar) */103  .home-indicator {104    position: absolute;105    bottom: 240px;106    left: 50%;107    transform: translateX(-50%);108    width: 320px;109    height: 16px;110    background: #A9AFB7;111    border-radius: 8px;112    opacity: 0.6;113  }114 115  /* Bottom tab bar */116  .tab-bar {117    position: absolute;118    bottom: 0; left: 0; right: 0;119    height: 240px;120    background: #F6F7F9;121    border-top: 1px solid rgba(0,0,0,0.06);122    display: flex;123    justify-content: space-around;124    align-items: center;125    padding: 20px 0;126  }127  .tab-item {128    width: 20%;129    display: flex;130    flex-direction: column;131    align-items: center;132    gap: 16px;133    color: #8FA1B4;134    text-align: center;135    font-size: 34px;136    font-weight: 600;137  }138  .tab-item.active { color: #4A90E2; }139  .tab-item svg {140    width: 72px; height: 72px;141    stroke: currentColor; fill: none; stroke-width: 2.5;142  }143 144  /* Slight rounded corners on card images to mimic design */145  .card .img-placeholder { border-radius: 40px; }146 147  /* Reduce scrollbar visibility for cleaner render */148  .content::-webkit-scrollbar { width: 0; height: 0; }149</style>150</head>151<body>152<div id="render-target">153  <div class="content">154    <!-- Instructors row -->155    <div class="instructors">156      <div class="instructor">157        <div class="avatar-img">[IMG: Speaker Avatar]</div>158        <div class="instructor-name">Instructor A</div>159      </div>160      <div class="instructor">161        <div class="avatar-img">[IMG: Speaker Avatar]</div>162        <div class="instructor-name">Instructor B</div>163      </div>164      <div class="instructor">165        <div class="avatar-img">[IMG: Speaker Avatar]</div>166        <div class="instructor-name">Instructor C</div>167      </div>168      <div class="instructor">169        <div class="avatar-img">[IMG: Speaker Avatar]</div>170        <div class="instructor-name">Instructor D</div>171      </div>172    </div>173 174    <!-- Categories -->175    <div class="section">176      <div class="section-header">177        <div class="section-title">Categories</div>178        <a class="view-all" href="#">View all</a>179      </div>180      <div class="card-grid">181        <div class="card">182          <div class="img-placeholder">[IMG: Wheat Field]</div>183          <div class="card-title">Compassion</div>184        </div>185        <div class="card">186          <div class="img-placeholder">[IMG: Night Sky]</div>187          <div class="card-title">Sleep</div>188        </div>189      </div>190    </div>191 192    <!-- Courses -->193    <div class="section">194      <div class="section-header">195        <div class="section-title">Courses</div>196        <a class="view-all" href="#">View all</a>197      </div>198      <div class="card-grid">199        <div class="card">200          <div class="img-placeholder">[IMG: Paragliding Over Mountains]</div>201          <div class="card-title">Overcoming Fear of Failure</div>202        </div>203        <div class="card">204          <div class="img-placeholder">[IMG: Tree Bark Close-up]</div>205          <div class="card-title">Meditation for Beginners</div>206        </div>207      </div>208    </div>209 210    <!-- Applied Mindfulness -->211    <div class="section">212      <div class="section-header">213        <div class="section-title">Applied Mindfulness</div>214        <a class="view-all" href="#">View all</a>215      </div>216      <div class="card-grid">217        <div class="card">218          <div class="img-placeholder">[IMG: Person Resting With Headphones]</div>219          <div class="card-title">Mindfulness and Sleep</div>220        </div>221        <div class="card">222          <div class="img-placeholder">[IMG: Person In Field At Sunset]</div>223          <div class="card-title">Mindfulness and The Mind</div>224        </div>225      </div>226    </div>227  </div>228 229  <!-- Home indicator -->230  <div class="home-indicator"></div>231 232  <!-- Bottom navigation bar -->233  <div class="tab-bar">234    <div class="tab-item active">235      <!-- Meditate (simple lotus-like icon built from leaves) -->236      <svg viewBox="0 0 24 24">237        <path d="M12 19c3.5 0 6-2.2 6-4.1-2.1.3-3.7-.6-4.7-2.1-.6 1.6-2.1 2.6-3.3 2.6-1.5 0-3-.9-3.7-2.6-1 1.5-2.6 2.4-4.3 2.1 0 1.9 2.5 4.1 6 4.1z"/>238        <path d="M12 11c1.7 0 3-1.7 3-3.4-1 .4-2 .2-3-.8-1 1-2 .9-3 .5 0 1.7 1.3 3.7 3 3.7z"/>239      </svg>240      <div>Meditate</div>241    </div>242    <div class="tab-item">243      <!-- Favorites (heart outline) -->244      <svg viewBox="0 0 24 24">245        <path d="M12 21s-6.5-4.4-8.3-7.1C2 11.9 2.7 9 5.4 8c1.8-.7 3.7.1 4.6 1.6.9-1.5 2.8-2.3 4.6-1.6 2.7 1 3.4 3.9 1.7 5.9C18.5 16.6 12 21 12 21z"/>246      </svg>247      <div>Favorites</div>248    </div>249    <div class="tab-item">250      <!-- Profile (user outline) -->251      <svg viewBox="0 0 24 24">252        <circle cx="12" cy="8" r="4"></circle>253        <path d="M4 20c0-3.5 4-6 8-6s8 2.5 8 6"></path>254      </svg>255      <div>Profile</div>256    </div>257    <div class="tab-item">258      <!-- Discover (magnifying glass) -->259      <svg viewBox="0 0 24 24">260        <circle cx="11" cy="11" r="5"></circle>261        <path d="M16 16l5 5"></path>262      </svg>263      <div>Discover</div>264    </div>265    <div class="tab-item">266      <!-- Settings (sliders) -->267      <svg viewBox="0 0 24 24">268        <path d="M3 6h14M18 6h3"></path>269        <circle cx="11" cy="6" r="2"></circle>270        <path d="M3 12h7M12 12h9"></path>271        <circle cx="8" cy="12" r="2"></circle>272        <path d="M3 18h10M15 18h6"></path>273        <circle cx="14" cy="18" r="2"></circle>274      </svg>275      <div>Settings</div>276    </div>277  </div>278</div>279</body>280</html>