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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #111a23; /* dark navy background */13    color: #ffffff;14  }15 16  /* Status bar */17  .statusbar {18    height: 90px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #fff;24    font-size: 34px;25    letter-spacing: 0.5px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .icon {33    display: inline-block;34    width: 44px; height: 44px;35  }36  .icon svg { width: 100%; height: 100%; }37 38  /* App bar */39  .appbar {40    padding: 10px 40px 0 40px;41  }42  .title-row {43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .app-title {48    font-size: 66px;49    font-weight: 700;50  }51  .search-icon { width: 56px; height: 56px; }52  .tabbar {53    margin-top: 26px;54    display: flex;55    align-items: flex-end;56    justify-content: space-between;57    padding: 0 20px 0 6px;58  }59  .tab {60    font-size: 34px;61    color: #8892a2;62    padding: 22px 14px 16px;63  }64  .tab.active {65    color: #d8f3f6;66    border-bottom: 6px solid #67d2df;67  }68 69  /* Top banner */70  .top-banner {71    margin: 20px 40px;72    height: 120px;73    border-radius: 16px;74    background: #cfdbe4;75    position: relative;76  }77  .top-banner .mins {78    position: absolute;79    right: 22px;80    top: 24px;81    color: #2c3e50;82    font-size: 34px;83    opacity: 0.9;84  }85 86  /* Sections */87  .section-title {88    margin: 18px 40px 0 40px;89    font-size: 54px;90    font-weight: 700;91  }92 93  /* Card grid */94  .card-row {95    display: flex;96    gap: 36px;97    padding: 28px 40px 6px 40px;98  }99  .card {100    width: 500px;101    position: relative;102  }103  .card-image {104    height: 360px;105    border-radius: 18px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 26px;113  }114  .badge-plus {115    position: absolute;116    right: 22px;117    top: 20px;118    width: 58px; height: 58px;119    border-radius: 14px;120    background: rgba(255,255,255,0.95);121    display: flex; align-items: center; justify-content: center;122    box-shadow: 0 2px 6px rgba(0,0,0,0.25);123  }124  .badge-crown {125    position: absolute;126    left: 22px;127    top: 20px;128    width: 58px; height: 58px;129    border-radius: 14px;130    background: #f4c6d8;131    display: flex; align-items: center; justify-content: center;132    box-shadow: 0 2px 6px rgba(0,0,0,0.2);133  }134  .card-title {135    margin-top: 22px;136    font-size: 44px;137    font-weight: 700;138  }139  .card-sub {140    margin-top: 10px;141    font-size: 32px;142    color: #9aa5b1;143  }144 145  /* Bottom navigation */146  .bottom-nav {147    position: absolute;148    bottom: 0;149    left: 0;150    width: 1080px;151    height: 180px;152    background: #1b222c;153    display: flex;154    align-items: center;155    justify-content: space-around;156    border-top: 1px solid rgba(255,255,255,0.08);157  }158  .nav-item {159    text-align: center;160    color: #cfd5de;161    font-size: 32px;162  }163  .nav-icon {164    width: 84px; height: 84px;165    margin: 0 auto 10px auto;166  }167  .nav-item.active .nav-icon {168    background: none;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="statusbar">177    <div>10:49</div>178    <div class="status-right">179      <!-- WiFi icon -->180      <span class="icon">181        <svg viewBox="0 0 24 24" fill="none">182          <path d="M2 9c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>183          <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>184          <path d="M8 15c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>185          <circle cx="12" cy="19" r="1.8" fill="#ffffff"/>186        </svg>187      </span>188      <!-- Battery icon -->189      <span class="icon">190        <svg viewBox="0 0 28 24" fill="none">191          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>192          <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>193          <rect x="22" y="9" width="3" height="6" rx="1" fill="#ffffff"/>194        </svg>195      </span>196    </div>197  </div>198 199  <!-- App Bar -->200  <div class="appbar">201    <div class="title-row">202      <div class="app-title">Meditate</div>203      <div class="search-icon">204        <svg viewBox="0 0 24 24" fill="none">205          <circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="2"/>206          <path d="M16.5 16.5L22 22" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>207        </svg>208      </div>209    </div>210 211    <div class="tabbar">212      <div class="tab">ON THE GO</div>213      <div class="tab active">SERIES</div>214      <div class="tab">TEACHERS</div>215    </div>216  </div>217 218  <!-- Top banner slider -->219  <div class="top-banner">220    <div class="mins">5 mins</div>221  </div>222 223  <!-- Section: For your morning -->224  <div class="section-title">For your morning</div>225  <div class="card-row">226    <!-- Card 1 -->227    <div class="card">228      <div class="card-image">[IMG: Green plant close-up]</div>229      <div class="badge-plus">230        <svg viewBox="0 0 24 24" fill="none">231          <path d="M12 5v14M5 12h14" stroke="#1b2128" stroke-width="2" stroke-linecap="round"/>232        </svg>233      </div>234      <div class="card-title">31 Day Fresh Start</div>235      <div class="card-sub">7 mins</div>236    </div>237 238    <!-- Card 2 -->239    <div class="card">240      <div class="card-image">[IMG: Coffee latte in white cup]</div>241      <div class="badge-crown">242        <svg viewBox="0 0 24 24" fill="#e77fb0">243          <path d="M3 16h18l-2-8-4 4-4-5-4 5-4-4z" fill="#ffffff"/>244        </svg>245      </div>246      <div class="badge-plus">247        <svg viewBox="0 0 24 24" fill="none">248          <path d="M12 5v14M5 12h14" stroke="#1b2128" stroke-width="2" stroke-linecap="round"/>249        </svg>250      </div>251      <div class="card-title">Coffee Meditation</div>252      <div class="card-sub">5 mins</div>253    </div>254  </div>255 256  <!-- Section: New on Simple Habit -->257  <div class="section-title" style="margin-top: 40px;">New on Simple Habit</div>258  <div class="card-row">259    <!-- Card 3 -->260    <div class="card">261      <div class="card-image">[IMG: Morning window & sunrise]</div>262      <div class="badge-crown">263        <svg viewBox="0 0 24 24" fill="#e77fb0">264          <path d="M3 16h18l-2-8-4 4-4-5-4 5-4-4z" fill="#ffffff"/>265        </svg>266      </div>267      <div class="badge-plus">268        <svg viewBox="0 0 24 24" fill="none">269          <path d="M12 5v14M5 12h14" stroke="#1b2128" stroke-width="2" stroke-linecap="round"/>270        </svg>271      </div>272      <div class="card-title">Start Your Day with Intention</div>273      <div class="card-sub">15 mins</div>274    </div>275 276    <!-- Card 4 -->277    <div class="card">278      <div class="card-image">[IMG: Soft yellow flowers]</div>279      <div class="badge-crown">280        <svg viewBox="0 0 24 24" fill="#e77fb0">281          <path d="M3 16h18l-2-8-4 4-4-5-4 5-4-4z" fill="#ffffff"/>282        </svg>283      </div>284      <div class="badge-plus">285        <svg viewBox="0 0 24 24" fill="none">286          <path d="M12 5v14M5 12h14" stroke="#1b2128" stroke-width="2" stroke-linecap="round"/>287        </svg>288      </div>289      <div class="card-title">Calming Body Scan</div>290      <div class="card-sub">20 mins</div>291    </div>292 293    <!-- Partial third card (not fully visible in screenshot) -->294    <div class="card" style="opacity:0.5;">295      <div class="card-image">[IMG: Blurred card preview]</div>296    </div>297  </div>298 299  <!-- Bottom Navigation -->300  <div class="bottom-nav">301    <div class="nav-item active">302      <div class="nav-icon">303        <svg viewBox="0 0 64 64" fill="none">304          <circle cx="32" cy="32" r="28" stroke="#ffffff" stroke-width="4"/>305          <path d="M27 22l16 10-16 10V22z" fill="#ffffff"/>306        </svg>307      </div>308      <div>Meditate</div>309    </div>310    <div class="nav-item">311      <div class="nav-icon">312        <svg viewBox="0 0 64 64" fill="none">313          <circle cx="32" cy="22" r="10" stroke="#cfd5de" stroke-width="4"/>314          <path d="M12 54c0-10 9-18 20-18s20 8 20 18" stroke="#cfd5de" stroke-width="4" stroke-linecap="round"/>315        </svg>316      </div>317      <div>Me</div>318    </div>319    <div class="nav-item">320      <div class="nav-icon">321        <svg viewBox="0 0 64 64" fill="#cfd5de">322          <circle cx="16" cy="32" r="5" />323          <circle cx="32" cy="32" r="5" />324          <circle cx="48" cy="32" r="5" />325        </svg>326      </div>327      <div>More</div>328    </div>329  </div>330 331</div>332</body>333</html>