GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Meditation App UI</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background: linear-gradient(180deg, #1b78b7 0%, #0e4f7a 35%, #0b3a52 60%, #072e40 100%);12  }13 14  /* Status bar */15  .statusbar {16    position:absolute; top:24px; left:36px; right:36px; height:48px; color:#fff;17    display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:32px;18    opacity:0.95;19  }20  .status-icons { display:flex; align-items:center; gap:22px; }21  .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.9; }22  .wifi, .battery {23    width:40px; height:28px;24  }25  .wifi path, .battery rect, .battery path { stroke:#fff; fill:none; stroke-width:4; }26 27  /* Hero */28  .hero {29    position:absolute; left:0; right:0; top:0; height:720px; text-align:center;30    display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;31    padding-top:60px;32  }33  .hero .img {34    position:absolute; inset:0; margin:0;35    display:flex; align-items:center; justify-content:center;36    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; font-size:32px;37  }38  .hero .greeting { position:relative; margin-top:140px; font-size:36px; font-weight:600; letter-spacing:0.5px; }39  .hero .title { position:relative; margin-top:18px; font-size:72px; font-weight:800; line-height:1.2; }40 41  /* Promo card */42  .promo {43    position:absolute; left:36px; right:36px; top:660px;44    background:#26A9FF; border-radius:36px; color:#fff; height:220px;45    display:flex; align-items:center; justify-content:space-between; padding:0 36px;46    box-shadow:0 10px 20px rgba(0,0,0,0.25);47  }48  .promo .left { display:flex; align-items:center; gap:28px; }49  .promo .badge {50    width:120px; height:120px; border-radius:24px; background:rgba(255,255,255,0.18);51    display:flex; align-items:center; justify-content:center;52  }53  .promo .badge svg { width:72px; height:72px; }54  .promo .text { display:flex; flex-direction:column; gap:12px; }55  .promo .title { font-size:42px; font-weight:800; }56  .promo .subtitle { font-size:28px; font-weight:700; opacity:0.85; letter-spacing:1px; }57  .promo .arrow svg { width:40px; height:40px; }58 59  /* Sections */60  .section {61    position:absolute; left:36px; right:36px; top:920px; color:#fff;62  }63  .section-title {64    font-size:56px; font-weight:800; margin-bottom:30px;65  }66 67  /* Cards */68  .card {69    background:#25A8FF; border-radius:36px; padding:36px; margin-bottom:26px; color:#fff;70    box-shadow:0 6px 12px rgba(0,0,0,0.25);71  }72  .card .row { display:flex; align-items:center; justify-content:space-between; }73  .card .heading { font-size:44px; font-weight:800; }74  .pill {75    background:#ffffff; color:#0c6aa0; padding:14px 28px; border-radius:999px; font-weight:900; letter-spacing:2px; font-size:26px;76  }77  .progress { margin-top:18px; display:flex; align-items:center; gap:16px; }78  .progress .circle {79    width:36px; height:36px; border-radius:50%; background:#74d0ff; display:flex; align-items:center; justify-content:center;80    border:2px solid rgba(255,255,255,0.7);81  }82  .progress .circle.done { background:#c8f1c8; border-color:#a8e1a8; }83  .progress .circle svg { width:22px; height:22px; }84  .sub { margin-top:8px; font-size:30px; opacity:0.9; }85 86  /* Ongoing header */87  .ongoing { position:absolute; left:36px; right:36px; top:1530px; color:#fff; display:flex; align-items:center; justify-content:space-between; }88  .ongoing .title { font-size:56px; font-weight:800; }89  .ongoing .view { font-size:32px; font-weight:700; opacity:0.9; }90 91  /* Bottom nav */92  .tabbar {93    position:absolute; left:0; right:0; bottom:0; height:190px;94    background:#e9e9ea; border-top:1px solid #cfcfd2;95    display:flex; align-items:center; justify-content:space-around; padding-bottom:28px;96  }97  .tab { display:flex; flex-direction:column; align-items:center; gap:14px; color:#3b6080; font-weight:700; }98  .tab svg { width:50px; height:50px; stroke:#3b6080; fill:none; stroke-width:4; }99  .tab .emoji { font-size:46px; line-height:46px; }100  .home-indicator {101    position:absolute; left:360px; right:360px; bottom:20px; height:12px; background:#777; border-radius:10px; opacity:0.6;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="statusbar">110    <div class="time">10:24</div>111    <div class="status-icons">112      <svg class="wifi" viewBox="0 0 60 40">113        <path d="M6 18c8-8 40-8 48 0" />114        <path d="M14 26c6-6 26-6 32 0" />115        <path d="M24 32c4-4 8-4 12 0" />116        <circle cx="30" cy="36" r="2" fill="#fff"/>117      </svg>118      <div class="dot"></div>119      <svg class="battery" viewBox="0 0 60 30">120        <rect x="2" y="6" width="48" height="18" rx="4"></rect>121        <rect x="50" y="11" width="6" height="8" rx="2"></rect>122        <rect x="6" y="10" width="36" height="10" rx="2" fill="#fff" stroke="none"></rect>123      </svg>124    </div>125  </div>126 127  <!-- Hero area with image placeholder -->128  <div class="hero">129    <div class="img">[IMG: Sunrise Mountains Banner]</div>130    <div class="greeting">Good Morning Cole</div>131    <div class="title">Explore the possibilities</div>132  </div>133 134  <!-- Promo card -->135  <div class="promo">136    <div class="left">137      <div class="badge">138        <svg viewBox="0 0 64 64">139          <path d="M32 54s-20-12-20-24a12 12 0 0 1 20-8 12 12 0 0 1 20 8c0 12-20 24-20 24z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>140        </svg>141      </div>142      <div class="text">143        <div class="title">Self-Care Christmas</div>144        <div class="subtitle">ENDS IN 13:35:21</div>145      </div>146    </div>147    <div class="arrow">148      <svg viewBox="0 0 48 48">149        <path d="M16 10l16 14-16 14" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>150      </svg>151    </div>152  </div>153 154  <!-- Sections -->155  <div class="section">156    <div class="section-title">For You</div>157 158    <div class="card">159      <div class="row">160        <div class="heading">Get Started</div>161        <div class="pill">COURSE</div>162      </div>163      <div class="progress">164        <div class="circle done">165          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#2d7b2d" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>166        </div>167        <div class="circle">168          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#fff" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>169        </div>170        <div class="circle">171          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#fff" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>172        </div>173        <div class="circle">174          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#fff" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>175        </div>176        <div class="circle">177          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#fff" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>178        </div>179      </div>180    </div>181 182    <div class="card">183      <div class="heading">Cleanse the Moment</div>184      <div class="sub">by Liselotte Ellegaard</div>185    </div>186 187    <div class="card">188      <div class="heading">Meditations</div>189      <div class="sub">Guided, Silent and Personalized</div>190    </div>191  </div>192 193  <!-- Ongoing Course header -->194  <div class="ongoing">195    <div class="title">Ongoing Course</div>196    <div class="view">View all</div>197  </div>198 199  <!-- Bottom navigation -->200  <div class="tabbar">201    <div class="tab">202      <div class="emoji">🌼</div>203      <div>Meditate</div>204    </div>205    <div class="tab">206      <svg viewBox="0 0 48 48">207        <path d="M24 40s-14-8-14-16a8 8 0 0 1 14-5 8 8 0 0 1 14 5c0 8-14 16-14 16z"></path>208      </svg>209      <div>Favorites</div>210    </div>211    <div class="tab">212      <svg viewBox="0 0 48 48">213        <circle cx="24" cy="16" r="8"></circle>214        <path d="M8 42c3-8 29-8 32 0" ></path>215      </svg>216      <div>Profile</div>217    </div>218    <div class="tab">219      <svg viewBox="0 0 48 48">220        <circle cx="21" cy="21" r="12"></circle>221        <path d="M32 32l10 10"></path>222      </svg>223      <div>Discover</div>224    </div>225    <div class="tab">226      <svg viewBox="0 0 48 48">227        <path d="M8 14h32M8 24h32M8 34h32"></path>228      </svg>229      <div>Settings</div>230    </div>231  </div>232  <div class="home-indicator"></div>233 234</div>235</body>236</html>