GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calm App UI - Mockup</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: linear-gradient(#78a7d6 0%, #2a4e78 25%, #234b78 45%, #1f4571 60%, #183c67 100%);18    color: #ffffff;19  }20 21  /* Top hero with landscape placeholder */22  .hero {23    position: relative;24    width: 100%;25    height: 900px;26  }27  .hero .img-placeholder {28    position: absolute;29    left: 0;30    top: 0;31    width: 1080px;32    height: 900px;33    background: #E0E0E0;34    border-bottom: 1px solid #BDBDBD;35    display: flex;36    justify-content: center;37    align-items: center;38    color: #555;39    font-size: 34px;40    letter-spacing: 0.5px;41  }42  .hero .logo {43    position: absolute;44    top: 170px;45    left: 60px;46    font-size: 160px;47    font-weight: 600;48    color: #ffffff;49    letter-spacing: 2px;50    font-family: "Segoe Script", "Brush Script MT", cursive;51    text-shadow: 0 3px 10px rgba(0,0,0,0.35);52  }53 54  /* Circular header buttons */55  .circle-btn {56    position: absolute;57    width: 92px;58    height: 92px;59    border-radius: 50%;60    background: rgba(14, 40, 75, 0.55);61    backdrop-filter: blur(3px);62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .btn-left { top: 80px; left: 40px; }67  .btn-right { top: 80px; right: 40px; }68 69  /* Main content */70  .content {71    position: relative;72    padding: 40px 60px 0 60px;73    margin-top: 900px; /* push below hero */74  }75  .greeting {76    font-size: 64px;77    font-weight: 600;78    margin-bottom: 40px;79  }80 81  /* Promo card */82  .promo-card {83    background: linear-gradient(180deg, #315f96, #284f84);84    border-radius: 32px;85    padding: 36px;86    display: flex;87    align-items: center;88    gap: 28px;89    box-shadow: 0 12px 30px rgba(0,0,0,0.25);90    margin-bottom: 36px;91  }92  .promo-icon {93    width: 116px;94    height: 116px;95    border-radius: 24px;96    background: linear-gradient(180deg, #9fe39d, #77c4e3);97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .promo-text h3 {102    margin: 0;103    font-size: 52px;104    font-weight: 700;105  }106  .promo-text p {107    margin: 12px 0 0 0;108    font-size: 38px;109    line-height: 1.3;110    color: #d7e6f7;111  }112  .chevron {113    margin-left: auto;114    width: 60px;115    height: 60px;116  }117 118  /* Mood row */119  .mood-row {120    background: rgba(40, 80, 128, 0.55);121    border-radius: 28px;122    padding: 26px 30px;123    display: flex;124    align-items: center;125    justify-content: space-between;126    margin: 26px 0 40px 0;127    border: 1px solid rgba(255,255,255,0.1);128  }129  .mood-row .label {130    font-size: 44px;131    color: #e8f0fb;132  }133  .mood-pill {134    display: flex;135    align-items: center;136    gap: 18px;137    background: #3e6ea9;138    padding: 20px 28px;139    border-radius: 36px;140    font-size: 44px;141    font-weight: 700;142    color: #ffffff;143  }144  .mood-pill .emoji {145    width: 44px;146    height: 44px;147  }148  .pill-close {149    width: 44px;150    height: 44px;151    margin-left: 10px;152    opacity: 0.9;153  }154 155  .section-title {156    font-size: 50px;157    font-weight: 700;158    margin: 12px 0 24px 0;159  }160 161  /* Content card */162  .content-card {163    background: #244e86;164    border-radius: 28px;165    padding: 26px;166    display: flex;167    gap: 26px;168    align-items: flex-start;169    box-shadow: 0 10px 28px rgba(0,0,0,0.3);170    margin-bottom: 24px;171  }172  .thumb {173    width: 280px;174    height: 280px;175    background: #E0E0E0;176    border: 1px solid #BDBDBD;177    display: flex;178    align-items: center;179    justify-content: center;180    color: #555;181    font-size: 28px;182    border-radius: 18px;183    position: relative;184  }185  .thumb .lock {186    position: absolute;187    left: 18px;188    bottom: 18px;189    width: 40px;190    height: 40px;191    background: rgba(27,52,88,0.8);192    border-radius: 50%;193    display: flex;194    align-items: center;195    justify-content: center;196  }197  .card-text .meta {198    font-size: 34px;199    color: #c9d9ee;200    margin-bottom: 10px;201  }202  .card-text .title {203    font-size: 62px;204    font-weight: 800;205    margin: 8px 0 14px 0;206    color: #ffffff;207  }208  .card-text .sub {209    font-size: 38px;210    color: #d3e1f5;211  }212 213  /* Bottom navigation */214  .bottom-nav {215    position: absolute;216    bottom: 80px;217    left: 0;218    width: 100%;219    height: 150px;220    background: #142744;221    display: flex;222    align-items: center;223    justify-content: space-around;224    border-top-left-radius: 24px;225    border-top-right-radius: 24px;226    box-shadow: 0 -10px 20px rgba(0,0,0,0.35);227  }228  .nav-item {229    display: flex;230    flex-direction: column;231    align-items: center;232    gap: 12px;233    color: #c6d4ea;234    font-size: 34px;235  }236  .nav-item.active {237    color: #ffffff;238    font-weight: 700;239  }240  .nav-icon {241    width: 64px;242    height: 64px;243  }244 245  /* Home indicator bar */246  .home-indicator {247    position: absolute;248    bottom: 18px;249    left: 50%;250    transform: translateX(-50%);251    width: 540px;252    height: 14px;253    background: #e9edf5;254    border-radius: 10px;255    opacity: 0.85;256  }257</style>258</head>259<body>260<div id="render-target">261 262  <!-- Top scenic hero -->263  <div class="hero">264    <div class="img-placeholder">[IMG: Mountain Lake Landscape]</div>265 266    <div class="circle-btn btn-left">267      <!-- Mountain icon -->268      <svg class="nav-icon" viewBox="0 0 24 24" fill="#ffffff">269        <path d="M4 18h16l-5-8-4 6-2-3z"></path>270      </svg>271    </div>272 273    <div class="circle-btn btn-right">274      <!-- Gift icon -->275      <svg class="nav-icon" viewBox="0 0 24 24" fill="#ffffff">276        <path d="M20 7h-3.6c.6-.5.6-1.5-.1-2.2-1.2-1.2-3.3-.3-4.3 1l-.4.6-.4-.6C6.9 3.5 4.8 4.4 3.6 5.6c-.7.7-.7 1.7-.1 2.2H0v4h2v8h8v-8h4v8h8v-8h2V7h-4zm-8 4H2V9h10v2zm10 0H12V9h10v2z"></path>277      </svg>278    </div>279 280    <div class="logo">Calm</div>281  </div>282 283  <!-- Main content -->284  <div class="content">285    <div class="greeting">Good Morning, Janedbw</div>286 287    <div class="promo-card">288      <div class="promo-icon">289        <!-- simple sparkle icon -->290        <svg viewBox="0 0 24 24" width="72" height="72" fill="#ffffff">291          <path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"></path>292        </svg>293      </div>294      <div class="promo-text">295        <h3>Start the New Year Right</h3>296        <p>10,000+ sessions for half the price<br>before January 31st</p>297      </div>298      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">299        <path d="M9 6l6 6-6 6"></path>300      </svg>301    </div>302 303    <div class="mood-row">304      <div class="label">You're feeling:</div>305      <div class="mood-pill">306        <!-- emoji -->307        <svg class="emoji" viewBox="0 0 24 24">308          <circle cx="12" cy="12" r="11" fill="#FFD54F"></circle>309          <circle cx="8" cy="10" r="1.2" fill="#6d4c00"></circle>310          <circle cx="16" cy="10" r="1.2" fill="#6d4c00"></circle>311          <path d="M8 15c2 1.5 6 1.5 8 0" stroke="#6d4c00" stroke-width="1.5" fill="none" stroke-linecap="round"></path>312        </svg>313        Calm314        <svg class="pill-close" viewBox="0 0 24 24" stroke="#ffffff" fill="none" stroke-width="2">315          <path d="M6 6l12 12M18 6L6 18"></path>316        </svg>317      </div>318    </div>319 320    <div class="section-title">For Your Mood</div>321 322    <!-- First content card -->323    <div class="content-card">324      <div class="thumb">[IMG: Person stretching indoors]325        <div class="lock">326          <svg viewBox="0 0 24 24" width="26" height="26" fill="#fff">327            <path d="M17 9h-1V7a4 4 0 10-8 0v2H7a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2v-7a2 2 0 00-2-2zm-7-2a2 2 0 114 0v2h-4V7z"></path>328          </svg>329        </div>330      </div>331      <div class="card-text">332        <div class="meta">Movement • 7 min</div>333        <div class="title">Daily Move</div>334        <div class="sub">Jan 16 - Wake Up Your Voice</div>335      </div>336    </div>337 338    <!-- Partial second card (hint of list continuation) -->339    <div class="content-card" style="opacity:0.92;">340      <div class="thumb">[IMG: Nature or activity thumbnail]</div>341      <div class="card-text">342        <div class="meta">Wisdom • 8 min</div>343        <div class="title">Breathe with the Morning</div>344        <div class="sub">Start your day with calm focus</div>345      </div>346    </div>347  </div>348 349  <!-- Bottom navigation bar -->350  <div class="bottom-nav">351    <div class="nav-item active">352      <svg class="nav-icon" viewBox="0 0 24 24" fill="#ffffff">353        <path d="M12 3l9 8h-3v9H6v-9H3z"></path>354      </svg>355      <div>Home</div>356    </div>357    <div class="nav-item">358      <svg class="nav-icon" viewBox="0 0 24 24" fill="#c6d4ea">359        <path d="M21 12.5A8.5 8.5 0 116 4a7 7 0 009 9 8.5 8.5 0 006-0.5z"></path>360      </svg>361      <div>Sleep</div>362    </div>363    <div class="nav-item">364      <svg class="nav-icon" viewBox="0 0 24 24" fill="#c6d4ea">365        <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z"></path>366      </svg>367      <div>Discover</div>368    </div>369    <div class="nav-item">370      <svg class="nav-icon" viewBox="0 0 24 24" fill="#c6d4ea">371        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.4-8 5.3V22h16v-2.7c0-2.9-3.6-5.3-8-5.3z"></path>372      </svg>373      <div>Profile</div>374    </div>375    <div class="nav-item">376      <svg class="nav-icon" viewBox="0 0 24 24" fill="#c6d4ea">377        <path d="M12 17.3l-5.2 3.2 1.4-6-4.7-4.1 6.2-.6L12 4l2.3 5.8 6.2.6-4.7 4.1 1.4 6z"></path>378      </svg>379      <div>Premium</div>380    </div>381  </div>382 383  <div class="home-indicator"></div>384</div>385</body>386</html>