GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Discover - Meditation App</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#0a0a0a;13    color:#fff;14  }15 16  /* Header */17  .header {18    width:100%;19    height:540px;20    background: radial-gradient(1200px 600px at 540px -160px, #2e3746 0%, #1f2632 55%, #161c24 100%);21    border-bottom-left-radius:320px;22    border-bottom-right-radius:320px;23    box-shadow: inset 0 -40px 120px rgba(0,0,0,0.5);24    position:relative;25  }26  .header-inner {27    padding: 120px 60px 0 60px;28  }29  .title-row {30    display:flex;31    align-items:center;32    justify-content:space-between;33  }34  .title {35    font-size:92px;36    font-weight:800;37    letter-spacing:1px;38  }39  .search-btn {40    width:128px;41    height:128px;42    border-radius:64px;43    background: rgba(255,255,255,0.06);44    display:flex;45    align-items:center;46    justify-content:center;47    border: 2px solid rgba(255,255,255,0.15);48  }49 50  .tabs {51    margin-top: 60px;52    display:flex;53    gap:36px;54  }55  .tab {56    padding:26px 42px;57    border-radius:60px;58    font-size:44px;59    border:1px solid rgba(255,255,255,0.18);60    color:#d0d7df;61    background: transparent;62  }63  .tab.active {64    background: rgba(255,255,255,0.14);65    color:#fff;66    border-color: transparent;67    box-shadow: 0 6px 18px rgba(0,0,0,0.25) inset;68  }69 70  /* Grid */71  .content {72    padding: 40px 40px 220px 40px;73    position:relative;74    top: -40px; /* bring cards a bit closer to header curve */75  }76  .grid {77    display:grid;78    grid-template-columns: repeat(2, 1fr);79    grid-gap: 36px 36px;80  }81  .card {82    height: 470px;83    border-radius:28px;84    position:relative;85    overflow:hidden;86    box-shadow: 0 16px 40px rgba(0,0,0,0.35);87    background:#E0E0E0;88    border:1px solid #BDBDBD;89    display:flex;90    align-items:flex-end;91    justify-content:flex-start;92  }93  .card::after {94    /* dark overlay for readability */95    content:"";96    position:absolute;97    left:0; right:0; top:0; bottom:0;98    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05));99    pointer-events:none;100  }101  .card-label {102    position:relative;103    z-index:2;104    font-size:56px;105    font-weight:700;106    padding: 0 28px 28px 28px;107    text-shadow: 0 2px 10px rgba(0,0,0,0.45);108  }109  .img-text {110    position:absolute;111    inset:0;112    display:flex;113    align-items:center;114    justify-content:center;115    color:#757575;116    font-size:38px;117    z-index:0;118  }119 120  .lock-badge {121    position:absolute;122    right:22px;123    top:22px;124    width:80px;125    height:80px;126    border-radius:40px;127    background: rgba(0,0,0,0.45);128    display:flex;129    align-items:center;130    justify-content:center;131    z-index:3;132    border:1px solid rgba(255,255,255,0.18);133  }134 135  /* Bottom Nav */136  .bottom-nav {137    position:absolute;138    bottom:0;139    left:0;140    right:0;141    height:190px;142    background:#0a0a0a;143    border-top: 1px solid rgba(255,255,255,0.08);144    display:flex;145    align-items:center;146    justify-content:space-around;147    padding-bottom:10px;148  }149  .nav-item {150    display:flex;151    flex-direction:column;152    align-items:center;153    gap:14px;154    color:#c5c5c5;155    font-size:38px;156  }157  .nav-item.active {158    color:#ffffff;159  }160  .icon-wrap {161    width:96px; height:96px;162    display:flex; align-items:center; justify-content:center;163  }164 165  /* Helpers for mini lock on card middle row left (smaller) */166  .lock-badge.small {167    width:74px; height:74px; border-radius:37px;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <div class="header">175    <div class="header-inner">176      <div class="title-row">177        <div class="title">Discover</div>178        <div class="search-btn" aria-label="Search">179          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">180            <circle cx="11" cy="11" r="7"></circle>181            <line x1="16.5" y1="16.5" x2="22" y2="22"></line>182          </svg>183        </div>184      </div>185 186      <div class="tabs">187        <div class="tab">Programs</div>188        <div class="tab active">Quick Start</div>189        <div class="tab">Blog</div>190      </div>191    </div>192  </div>193 194  <div class="content">195    <div class="grid">196      <!-- Row 1 -->197      <div class="card">198        <div class="img-text">[IMG: Wheat field at sunset]</div>199        <div class="card-label">2 Minutes</div>200      </div>201 202      <div class="card">203        <div class="img-text">[IMG: Sunset lake with dock]</div>204        <div class="lock-badge" title="Locked">205          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">206            <rect x="4" y="10" width="16" height="10" rx="2"></rect>207            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>208          </svg>209        </div>210        <div class="card-label">3 Minutes</div>211      </div>212 213      <!-- Row 2 -->214      <div class="card">215        <div class="img-text">[IMG: Stars over cloud layer]</div>216        <div class="card-label">Sleep</div>217      </div>218 219      <div class="card">220        <div class="img-text">[IMG: Mountain sunrise]</div>221        <div class="lock-badge" title="Locked">222          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">223            <rect x="4" y="10" width="16" height="10" rx="2"></rect>224            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>225          </svg>226        </div>227        <div class="card-label">Morning</div>228      </div>229 230      <!-- Row 3 -->231      <div class="card">232        <div class="img-text">[IMG: Hazy mountains at dawn]</div>233        <div class="lock-badge small" title="Locked">234          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">235            <rect x="4" y="10" width="16" height="10" rx="2"></rect>236            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>237          </svg>238        </div>239        <div class="card-label">5 minutes</div>240      </div>241 242      <div class="card">243        <div class="img-text">[IMG: Rolling hills at dusk]</div>244        <div class="lock-badge" title="Locked">245          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">246            <rect x="4" y="10" width="16" height="10" rx="2"></rect>247            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>248          </svg>249        </div>250        <div class="card-label">10 minutes</div>251      </div>252    </div>253  </div>254 255  <!-- Bottom Navigation -->256  <div class="bottom-nav">257    <div class="nav-item">258      <div class="icon-wrap">259        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">260          <path d="M3 11l9-8 9 8"></path>261          <path d="M5 10v10h14V10"></path>262        </svg>263      </div>264      <div>Today</div>265    </div>266 267    <div class="nav-item active">268      <div class="icon-wrap">269        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">270          <circle cx="12" cy="12" r="8"></circle>271          <circle cx="12" cy="12" r="3"></circle>272        </svg>273      </div>274      <div>Meditation</div>275    </div>276 277    <div class="nav-item">278      <div class="icon-wrap">279        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">280          <path d="M21 14.5a6.5 6.5 0 1 1-9-9" />281          <path d="M19 2v6h-6" />282        </svg>283      </div>284      <div>Sleep</div>285    </div>286 287    <div class="nav-item">288      <div class="icon-wrap">289        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">290          <path d="M9 18V5l8-2v13"></path>291          <circle cx="7" cy="18" r="1.2" fill="currentColor"></circle>292          <circle cx="17" cy="18" r="1.2" fill="currentColor"></circle>293        </svg>294      </div>295      <div>Music</div>296    </div>297 298    <div class="nav-item">299      <div class="icon-wrap">300        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">301          <circle cx="12" cy="8" r="4"></circle>302          <path d="M4 20c2-4 6-5 8-5s6 1 8 5"></path>303        </svg>304      </div>305      <div>Profile</div>306    </div>307  </div>308 309</div>310</body>311</html>