GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Meditate UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #1f2630;13    color: #e9eef6;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #e9eef6;24    font-weight: 600;25    font-size: 42px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .icon {33    width: 40px; height: 40px;34  }35 36  /* App header */37  .app-header {38    background: #2a313c;39    padding: 26px 36px 0 36px;40    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);41  }42  .header-top {43    display: flex;44    align-items: center;45    justify-content: space-between;46    padding-bottom: 20px;47  }48  .title {49    font-size: 64px;50    font-weight: 700;51    letter-spacing: 0.5px;52  }53  .search-btn svg { width: 54px; height: 54px; fill: none; stroke: #e9eef6; stroke-width: 6; }54 55  .tabs {56    display: flex;57    gap: 60px;58    margin-top: 10px;59    padding-bottom: 26px;60    position: relative;61  }62  .tab {63    font-size: 34px;64    color: #b7c0ce;65    letter-spacing: 1px;66  }67  .tab.active {68    color: #e9eef6;69    font-weight: 700;70  }71  .active-underline {72    position: absolute;73    left: 330px; /* under "SERIES" */74    bottom: 0;75    width: 170px;76    height: 6px;77    background: #5fd0cf;78    border-radius: 3px;79  }80 81  /* small pale strip with time */82  .mini-banner {83    background: rgba(255,255,255,0.1);84    margin: 0 36px 24px;85    height: 120px;86    border-radius: 16px;87    display: flex;88    align-items: center;89    justify-content: flex-end;90    padding-right: 26px;91    color: #cbd3df;92    font-size: 36px;93  }94 95  /* Sections */96  .section {97    padding: 26px 36px;98  }99  .section h2 {100    margin: 18px 0 22px;101    font-size: 56px;102    font-weight: 700;103  }104 105  /* Card rows */106  .card-row {107    display: flex;108    gap: 28px;109  }110  .card {111    width: 330px;112    background: #2a313c;113    border-radius: 18px;114    overflow: hidden;115  }116  .img {117    width: 100%;118    height: 240px;119    background: #E0E0E0;120    border-bottom: 1px solid #BDBDBD;121    display: flex;122    align-items: center;123    justify-content: center;124    color: #757575;125    font-size: 28px;126    position: relative;127  }128  .plus-badge {129    position: absolute;130    right: 18px; top: 18px;131    width: 58px; height: 58px;132    border-radius: 50%;133    background: rgba(255,255,255,0.18);134    display: flex; align-items: center; justify-content: center;135    border: 2px solid rgba(255,255,255,0.35);136    color: #ffffff;137    font-size: 42px; line-height: 42px;138  }139  .card .content {140    padding: 20px;141  }142  .card .title {143    font-size: 42px; font-weight: 700;144  }145  .card .meta {146    margin-top: 8px;147    font-size: 34px; color: #b7c0ce;148  }149 150  /* Wide cards */151  .wide-card {152    width: 500px;153    background: #2a313c;154    border-radius: 18px;155    overflow: hidden;156  }157  .wide-card .img { height: 260px; }158  .wide-card .title { font-size: 44px; }159  .wide-card .meta { font-size: 34px; color: #b7c0ce; }160 161  /* Bottom nav */162  .bottom-nav {163    position: absolute;164    bottom: 80px;165    left: 0; right: 0;166    height: 170px;167    background: #2a313c;168    display: flex; justify-content: space-around; align-items: center;169  }170  .nav-item {171    display: flex; flex-direction: column; align-items: center; gap: 14px;172    color: #b7c0ce; font-size: 34px;173  }174  .nav-item.active { color: #e9eef6; font-weight: 700; }175  .nav-item svg { width: 70px; height: 70px; stroke: #b7c0ce; fill: none; stroke-width: 6; }176  .nav-item.active svg { stroke: #e9eef6; }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    bottom: 20px;182    left: 50%;183    transform: translateX(-50%);184    width: 360px; height: 14px;185    background: rgba(255,255,255,0.8);186    border-radius: 7px;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status bar -->194  <div class="status-bar">195    <div>10:48</div>196    <div class="status-icons">197      <!-- WiFi -->198      <svg class="icon" viewBox="0 0 24 24">199        <path d="M2 8c5-4 15-4 20 0" stroke="#e9eef6" stroke-width="2" fill="none"/>200        <path d="M5 12c4-3 10-3 14 0" stroke="#e9eef6" stroke-width="2" fill="none"/>201        <path d="M9 16c2-2 4-2 6 0" stroke="#e9eef6" stroke-width="2" fill="none"/>202        <circle cx="12" cy="19" r="1.2" fill="#e9eef6"/>203      </svg>204      <!-- Battery -->205      <svg class="icon" viewBox="0 0 28 18">206        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#e9eef6" stroke-width="2" fill="none"/>207        <rect x="3" y="5" width="16" height="8" fill="#e9eef6"/>208        <rect x="24" y="6" width="3" height="6" rx="1" fill="#e9eef6"/>209      </svg>210    </div>211  </div>212 213  <!-- App header with tabs -->214  <div class="app-header">215    <div class="header-top">216      <div class="title">Meditate</div>217      <div class="search-btn">218        <svg viewBox="0 0 24 24">219          <circle cx="10" cy="10" r="6"></circle>220          <line x1="15" y1="15" x2="22" y2="22"></line>221        </svg>222      </div>223    </div>224    <div class="tabs">225      <div class="tab">ON THE GO</div>226      <div class="tab active">SERIES</div>227      <div class="tab">TEACHERS</div>228      <div class="active-underline"></div>229    </div>230  </div>231 232  <div class="mini-banner">5 mins</div>233 234  <!-- Section: For your morning -->235  <div class="section">236    <h2>For your morning</h2>237    <div class="card-row">238      <div class="card">239        <div class="img">240          [IMG: Soft Pink Flower]241          <div class="plus-badge">+</div>242        </div>243        <div class="content">244          <div class="title">Start Your Day With Gratitude</div>245          <div class="meta">5 mins</div>246        </div>247      </div>248      <div class="card">249        <div class="img">250          [IMG: Minimal Plant]251          <div class="plus-badge">+</div>252        </div>253        <div class="content">254          <div class="title">Positive Start</div>255          <div class="meta">10 mins</div>256        </div>257      </div>258      <div class="card">259        <div class="img">260          [IMG: Calm Sky]261          <div class="plus-badge">+</div>262        </div>263        <div class="content">264          <div class="title">30 Days of Positive Thinking</div>265          <div class="meta">5 mins</div>266        </div>267      </div>268    </div>269  </div>270 271  <!-- Section: New on Simple Habit -->272  <div class="section" style="padding-top: 10px;">273    <h2>New on Simple Habit</h2>274    <div class="card-row">275      <div class="wide-card">276        <div class="img">277          [IMG: Sunrise Curtain View]278          <div class="plus-badge">+</div>279        </div>280        <div class="content">281          <div class="title">Start Your Day with Intention</div>282          <div class="meta">15 mins</div>283        </div>284      </div>285      <div class="wide-card">286        <div class="img">287          [IMG: Yellow Flowers Soft Focus]288          <div class="plus-badge">+</div>289        </div>290        <div class="content">291          <div class="title">Calming Body Scan</div>292          <div class="meta">20 mins</div>293        </div>294      </div>295      <div class="wide-card">296        <div class="img">297          [IMG: Gentle Light Blur]298          <div class="plus-badge">+</div>299        </div>300        <div class="content">301          <div class="title">Relax & Unwind</div>302          <div class="meta">5 mins</div>303        </div>304      </div>305    </div>306  </div>307 308  <!-- Bottom navigation -->309  <div class="bottom-nav">310    <div class="nav-item active">311      <svg viewBox="0 0 24 24">312        <circle cx="12" cy="12" r="10"></circle>313        <polygon points="10,8 16,12 10,16" fill="#e9eef6" stroke="none"/>314      </svg>315      <div>Meditate</div>316    </div>317    <div class="nav-item">318      <svg viewBox="0 0 24 24">319        <circle cx="12" cy="8" r="4"></circle>320        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" />321      </svg>322      <div>Me</div>323    </div>324    <div class="nav-item">325      <svg viewBox="0 0 24 24">326        <circle cx="5" cy="12" r="2"></circle>327        <circle cx="12" cy="12" r="2"></circle>328        <circle cx="19" cy="12" r="2"></circle>329      </svg>330      <div>More</div>331    </div>332  </div>333 334  <div class="home-indicator"></div>335</div>336</body>337</html>