GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Meditate UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121923;13    color: #EAEFF6;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #DCE3EE;24    font-size: 34px;25    letter-spacing: 1px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 24px;31    opacity: 0.85;32  }33  .wifi, .battery { width: 36px; height: 36px; }34 35  /* Header */36  .header {37    padding: 8px 36px 0 36px;38  }39  .topbar {40    height: 132px;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .title {46    font-size: 68px;47    font-weight: 700;48    color: #EDF3FF;49  }50  .icon-btn {51    width: 72px;52    height: 72px;53    display: flex;54    align-items: center;55    justify-content: center;56    border-radius: 36px;57  }58  .icon-btn svg { fill: #E5ECF7; width: 44px; height: 44px; }59 60  /* Tabs */61  .tabs {62    display: flex;63    gap: 80px;64    margin-top: 8px;65    border-bottom: 2px solid rgba(255,255,255,0.06);66  }67  .tab {68    position: relative;69    padding: 24px 0;70    text-transform: uppercase;71    letter-spacing: 2px;72    font-size: 30px;73    color: #98A7BE;74  }75  .tab.active {76    color: #DDE7F7;77  }78  .tab.active::after {79    content: "";80    position: absolute;81    left: 0;82    bottom: -2px;83    width: 100%;84    height: 6px;85    background: #66D2D3;86    border-radius: 6px 6px 0 0;87  }88 89  /* Top slider card */90  .slider-card {91    margin: 24px 36px;92    height: 120px;93    border-radius: 18px;94    background: rgba(200,220,230,0.15);95    display: flex;96    align-items: center;97    justify-content: flex-end;98    padding: 0 24px;99    color: #CFE6FF;100    font-size: 36px;101  }102 103  /* Sections */104  .section-title {105    margin: 32px 36px 12px 36px;106    font-size: 56px;107    font-weight: 700;108    color: #E7EFFC;109  }110 111  /* Card grid */112  .card-row {113    display: flex;114    gap: 32px;115    padding: 0 36px;116  }117  .card {118    width: 456px;119    background: #182230;120    border-radius: 16px;121  }122  .img {123    height: 300px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    border-radius: 12px;127    color: #757575;128    display: flex;129    align-items: center;130    justify-content: center;131    font-size: 30px;132    position: relative;133  }134  .plus-badge {135    position: absolute;136    right: 18px;137    top: 18px;138    width: 60px;139    height: 60px;140    border-radius: 30px;141    background: rgba(255,255,255,0.92);142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .plus-badge svg { width: 32px; height: 32px; fill: #0D1B2A; }147  .crown-badge {148    position: absolute;149    left: 18px;150    top: 18px;151    width: 64px;152    height: 64px;153    border-radius: 32px;154    background: rgba(255,255,255,0.95);155    display: flex;156    align-items: center;157    justify-content: center;158  }159  .crown-badge svg { width: 34px; height: 34px; fill: #E6A800; }160 161  .card .title {162    font-size: 46px;163    font-weight: 700;164    padding: 18px 8px 0 8px;165    color: #EAF2FF;166  }167  .card .subtitle {168    font-size: 34px;169    color: #9EB0C8;170    padding: 8px 8px 24px 8px;171  }172 173  /* Larger new cards */174  .large-card {175    width: 500px;176  }177  .large-card .img { height: 360px; }178 179  /* Bottom nav */180  .bottom-nav {181    position: absolute;182    left: 0;183    bottom: 0;184    height: 170px;185    width: 100%;186    background: #0E1620;187    display: flex;188    align-items: center;189    justify-content: space-around;190    border-top: 1px solid rgba(255,255,255,0.06);191  }192  .nav-item {193    text-align: center;194    color: #A5B3C7;195    font-size: 34px;196  }197  .nav-item.active { color: #EAF2FF; }198  .nav-icon {199    width: 88px; height: 88px; margin: 0 auto 8px auto;200    display: flex; align-items: center; justify-content: center;201  }202  .nav-item.active .nav-icon {203    background: #1A2837;204    border-radius: 44px;205  }206  .nav-icon svg { fill: currentColor; width: 46px; height: 46px; }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div>10:49</div>215    <div class="status-icons">216      <!-- wifi icon -->217      <svg class="wifi" viewBox="0 0 24 24">218        <path fill="#E6EFFA" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-4-3a7 7 0 0 1 8 0l-1.5 1.5a5 5 0 0 0-5 0L8 15.5Zm-3.8-3.8a12 12 0 0 1 15.6 0L17.9 13a9 9 0 0 0-11.8 0L4.2 11.7Z"/>219      </svg>220      <!-- battery icon -->221      <svg class="battery" viewBox="0 0 24 24">222        <rect x="1" y="7" width="18" height="10" rx="2" ry="2" fill="#E6EFFA"></rect>223        <rect x="3" y="9" width="12" height="6" fill="#121923"></rect>224        <rect x="20" y="10" width="3" height="4" rx="1" fill="#E6EFFA"></rect>225      </svg>226    </div>227  </div>228 229  <!-- Header with title and search -->230  <div class="header">231    <div class="topbar">232      <div class="title">Meditate</div>233      <div class="icon-btn">234        <svg viewBox="0 0 24 24">235          <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 2a6 6 0 1 0 0 12A6 6 0 0 0 10 4Zm8.7 15.3-3.6-3.6-1.4 1.4 3.6 3.6a1 1 0 0 0 1.4-1.4Z"/>236        </svg>237      </div>238    </div>239 240    <!-- Tabs -->241    <div class="tabs">242      <div class="tab">ON THE GO</div>243      <div class="tab active">SERIES</div>244      <div class="tab">TEACHERS</div>245    </div>246  </div>247 248  <!-- Top slider card -->249  <div class="slider-card">5 mins</div>250 251  <!-- Section: For your morning -->252  <div class="section-title">For your morning</div>253  <div class="card-row">254    <!-- Card 1 -->255    <div class="card">256      <div class="img">257        [IMG: Pillows / Morning bed]258        <div class="plus-badge">259          <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>260        </div>261      </div>262      <div class="title" style="font-size:48px;">Rise and Greet the Day</div>263      <div class="subtitle">5 mins</div>264    </div>265 266    <!-- Card 2 -->267    <div class="card">268      <div class="img">269        [IMG: Sunrise sky gradient]270        <div class="crown-badge">271          <svg viewBox="0 0 24 24"><path d="M3 18h18l-1-9-4 3-5-5-5 5-4-3 1 9z"/></svg>272        </div>273        <div class="plus-badge">274          <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>275        </div>276      </div>277      <div class="title" style="font-size:48px;">Wake up to a Beautiful Day</div>278      <div class="subtitle">10 mins</div>279    </div>280  </div>281 282  <!-- Section: New on Simple Habit -->283  <div class="section-title" style="margin-top: 40px;">New on Simple Habit</div>284  <div class="card-row">285    <div class="card large-card">286      <div class="img">287        [IMG: Soft morning light through curtains]288        <div class="crown-badge">289          <svg viewBox="0 0 24 24"><path d="M3 18h18l-1-9-4 3-5-5-5 5-4-3 1 9z"/></svg>290        </div>291        <div class="plus-badge">292          <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>293        </div>294      </div>295      <div class="title">Start Your Day with Intention</div>296      <div class="subtitle">15 mins</div>297    </div>298 299    <div class="card large-card">300      <div class="img">301        [IMG: Yellow flowers bokeh]302        <div class="crown-badge">303          <svg viewBox="0 0 24 24"><path d="M3 18h18l-1-9-4 3-5-5-5 5-4-3 1 9z"/></svg>304        </div>305        <div class="plus-badge">306          <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>307        </div>308      </div>309      <div class="title">Calming Body Scan</div>310      <div class="subtitle">20 mins</div>311    </div>312  </div>313 314  <!-- Bottom navigation -->315  <div class="bottom-nav">316    <div class="nav-item active">317      <div class="nav-icon">318        <svg viewBox="0 0 24 24"><path d="M8 5v14l10-7-10-7z"/></svg>319      </div>320      Meditate321    </div>322    <div class="nav-item">323      <div class="nav-icon">324        <svg viewBox="0 0 24 24"><path d="M12 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 7c-3.3 0-6 2.2-6 5v1h12v-1c0-2.8-2.7-5-6-5z"/></svg>325      </div>326      Me327    </div>328    <div class="nav-item">329      <div class="nav-icon">330        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>331      </div>332      More333    </div>334  </div>335 336</div>337</body>338</html>