GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Meditate UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121826; /* deep blue/gray */14    color: #FFFFFF;15  }16 17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #E6EEF7;24    font-size: 34px;25    letter-spacing: 1px;26  }27  .status-icons { display: flex; gap: 22px; align-items: center; }28 29  .app-bar {30    height: 140px;31    padding: 0 32px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    border-bottom: 1px solid rgba(255,255,255,0.06);36  }37  .title { font-size: 64px; font-weight: 700; letter-spacing: 0.5px; }38 39  .tabs {40    height: 96px;41    display: flex;42    align-items: flex-end;43    gap: 60px;44    padding: 0 32px;45    border-bottom: 1px solid rgba(255,255,255,0.08);46  }47  .tab {48    font-size: 32px;49    color: #9FA8B7;50    padding-bottom: 22px;51    position: relative;52  }53  .tab.active {54    color: #D7E7F6;55  }56  .tab.active::after {57    content: "";58    position: absolute;59    left: 50%;60    transform: translateX(-50%);61    bottom: 0px;62    width: 180px;63    height: 6px;64    background: #6BC8D8;65    border-radius: 3px;66  }67 68  .top-strip {69    margin: 24px 32px 8px 32px;70    height: 150px;71    background: #DFE7EF;72    border-radius: 14px;73    display: flex;74    align-items: center;75    justify-content: flex-end;76    padding: 0 24px;77    color: #293241;78    font-size: 36px;79  }80 81  .section {82    padding: 32px;83  }84  .section h2 {85    margin: 10px 0 22px 0;86    font-size: 54px;87    font-weight: 700;88  }89 90  .grid {91    display: flex;92    flex-wrap: wrap;93    gap: 20px;94  }95  .card {96    width: calc(50% - 10px);97  }98  .img {99    width: 100%;100    height: 360px;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    border-radius: 10px;104    color: #757575;105    display: flex;106    align-items: center;107    justify-content: center;108    position: relative;109    text-align: center;110    padding: 12px;111    box-sizing: border-box;112    line-height: 1.3;113  }114  .plus {115    position: absolute;116    right: 18px;117    top: 18px;118    width: 64px;119    height: 64px;120    background: rgba(255,255,255,0.1);121    border: 2px solid rgba(255,255,255,0.9);122    border-radius: 16px;123    display: flex;124    align-items: center;125    justify-content: center;126  }127  .card-title {128    margin-top: 18px;129    font-size: 44px;130    font-weight: 700;131    color: #FFFFFF;132  }133  .duration {134    margin-top: 8px;135    font-size: 34px;136    color: #9FA8B7;137  }138 139  /* Bottom navigation */140  .bottom-nav {141    position: absolute;142    left: 0;143    right: 0;144    bottom: 0;145    height: 180px;146    padding: 18px 80px 36px;147    background: #121826;148    border-top: 1px solid rgba(255,255,255,0.08);149    display: flex;150    align-items: center;151    justify-content: space-between;152  }153  .nav-item {154    width: 240px;155    display: flex;156    flex-direction: column;157    align-items: center;158    color: #9FA8B7;159    font-size: 32px;160    gap: 16px;161  }162  .nav-item.active { color: #FFFFFF; }163  .play-circle {164    width: 92px;165    height: 92px;166    background: #FFFFFF;167    color: #121826;168    border-radius: 50%;169    display: flex;170    align-items: center;171    justify-content: center;172  }173 174  /* Utility */175  .spacer-16 { height: 16px; }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status Bar -->182  <div class="status-bar">183    <div>10:49</div>184    <div class="status-icons">185      <!-- simple wifi -->186      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">187        <path d="M2 8c4.5-3.5 15.5-3.5 20 0" stroke="#E6EEF7" stroke-width="2" stroke-linecap="round"/>188        <path d="M5 11c3-2.2 11-2.2 14 0" stroke="#E6EEF7" stroke-width="2" stroke-linecap="round"/>189        <path d="M8.5 14.5c2-1.2 5-1.2 7 0" stroke="#E6EEF7" stroke-width="2" stroke-linecap="round"/>190        <circle cx="12" cy="18" r="1.5" fill="#E6EEF7"/>191      </svg>192      <!-- battery -->193      <svg width="56" height="44" viewBox="0 0 28 18" fill="none">194        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#E6EEF7" stroke-width="2"/>195        <rect x="3" y="5" width="18" height="8" fill="#E6EEF7"/>196        <rect x="24" y="7" width="3" height="4" rx="1" fill="#E6EEF7"/>197      </svg>198    </div>199  </div>200 201  <!-- App Bar -->202  <div class="app-bar">203    <div class="title">Meditate</div>204    <!-- search icon -->205    <svg width="56" height="56" viewBox="0 0 24 24" fill="none">206      <circle cx="11" cy="11" r="7" stroke="#FFFFFF" stroke-width="2"/>207      <path d="M20 20l-4.2-4.2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>208    </svg>209  </div>210 211  <!-- Tabs -->212  <div class="tabs">213    <div class="tab">ON THE GO</div>214    <div class="tab active">SERIES</div>215    <div class="tab">TEACHERS</div>216  </div>217 218  <!-- Light top card -->219  <div class="top-strip">5 mins</div>220 221  <!-- For your morning -->222  <div class="section">223    <h2>For your morning</h2>224    <div class="grid">225      <!-- Card 1 -->226      <div class="card">227        <div class="img">228          <div class="plus">229            <svg width="34" height="34" viewBox="0 0 24 24">230              <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>231            </svg>232          </div>233          [IMG: Umbrella and lifeguard chair]234        </div>235        <div class="card-title">30 Days to Boost Positive Thinking</div>236        <div class="duration">5 mins</div>237      </div>238 239      <!-- Card 2 -->240      <div class="card">241        <div class="img" style="background:#E0E0E0;">242          <div class="plus">243            <svg width="34" height="34" viewBox="0 0 24 24">244              <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>245            </svg>246          </div>247          [IMG: Person holding oranges]248        </div>249        <div class="card-title">Making Today Great</div>250        <div class="duration">8 mins</div>251      </div>252    </div>253  </div>254 255  <!-- New on Simple Habit -->256  <div class="section" style="padding-top: 10px;">257    <h2>New on Simple Habit</h2>258    <div class="grid">259      <div class="card">260        <div class="img">261          <div class="plus">262            <svg width="34" height="34" viewBox="0 0 24 24">263              <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>264            </svg>265          </div>266          [IMG: Sunny window light]267        </div>268        <div class="card-title">Start Your Day with Intention</div>269        <div class="duration">15 mins</div>270      </div>271 272      <div class="card">273        <div class="img">274          <div class="plus">275            <svg width="34" height="34" viewBox="0 0 24 24">276              <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>277            </svg>278          </div>279          [IMG: Yellow flowers macro]280        </div>281        <div class="card-title">Calming Body Scan</div>282        <div class="duration">20 mins</div>283      </div>284    </div>285  </div>286 287  <!-- Bottom Navigation -->288  <div class="bottom-nav">289    <div class="nav-item active">290      <div class="play-circle">291        <!-- play triangle -->292        <svg width="40" height="40" viewBox="0 0 24 24" fill="#121826">293          <path d="M8 5l12 7-12 7V5z"/>294        </svg>295      </div>296      <div>Meditate</div>297    </div>298    <div class="nav-item">299      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">300        <path d="M12 12a5 5 0 100-10 5 5 0 000 10z" stroke="#9FA8B7" stroke-width="2"/>301        <path d="M4 22c0-4.4 4-8 8-8s8 3.6 8 8" stroke="#9FA8B7" stroke-width="2" stroke-linecap="round"/>302      </svg>303      <div>Me</div>304    </div>305    <div class="nav-item">306      <svg width="72" height="72" viewBox="0 0 24 24" fill="#9FA8B7">307        <circle cx="5" cy="12" r="2.2"/>308        <circle cx="12" cy="12" r="2.2"/>309        <circle cx="19" cy="12" r="2.2"/>310      </svg>311      <div>More</div>312    </div>313  </div>314 315</div>316</body>317</html>