GD-ML/AndroidCode
13.4k
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 RESET */9 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }10 /* ROOT CONTAINER */11 #render-target {12 width: 1080px;13 height: 2400px;14 position: relative;15 overflow: hidden;16 background: linear-gradient(180deg,#103644 0%, #0b2631 30%, #06202a 55%, #04161d 75%, #031117 100%);17 border-radius: 36px;18 box-shadow: 0 24px 60px rgba(0,0,0,0.45);19 color: #fff;20 }21 22 .screen-pad { padding: 44px 40px 160px 40px; }23 24 /* Reusable */25 .blue-card {26 position: relative;27 background: #19B6FF;28 border-radius: 40px;29 padding: 36px 32px;30 margin-bottom: 28px;31 box-shadow: 0 12px 30px rgba(0,0,0,0.25);32 }33 .blue-card.big { padding: 40px 32px 32px; }34 .blue-card .title {35 font-weight: 800;36 font-size: 54px;37 letter-spacing: 0.2px;38 margin-bottom: 10px;39 }40 .blue-card .subtitle {41 font-size: 32px;42 color: #E5F7FF;43 opacity: 0.95;44 }45 .badge-pill {46 position: absolute;47 right: 24px; top: 22px;48 background: #ffffff;49 color: #0ca9ff;50 border-radius: 30px;51 padding: 14px 26px;52 font-weight: 800;53 letter-spacing: 2px;54 font-size: 24px;55 box-shadow: 0 4px 10px rgba(0,0,0,0.12);56 }57 58 /* Small status icons / checks */59 .checks { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }60 .check {61 width: 36px; height: 36px;62 border-radius: 50%;63 background: #A8D26E;64 border: 2px solid rgba(255,255,255,0.9);65 display: inline-flex; align-items: center; justify-content: center;66 }67 .check.blue { background: #67D1FF; }68 .check svg { width: 20px; height: 20px; }69 .check svg path { fill: #fff; }70 71 /* Section headers */72 .section-row {73 display: flex; align-items: center; justify-content: space-between;74 margin: 18px 6px 18px;75 }76 .section-title {77 font-size: 46px; font-weight: 800;78 }79 .view-all {80 font-size: 28px; color: #b6d9e8; font-weight: 700;81 }82 83 /* Glass card (ongoing course) */84 .glass-card {85 position: relative;86 border-radius: 40px;87 padding: 28px 32px;88 margin: 8px 0 34px;89 background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.28) 40%, rgba(219,179,142,0.35) 100%);90 border: 1px solid rgba(255,255,255,0.25);91 display: flex; align-items: center; gap: 26px;92 box-shadow: inset 0 0 30px rgba(255,255,255,0.05);93 }94 .glass-small { font-size: 30px; opacity: 0.9; }95 .glass-big { font-size: 40px; font-weight: 800; margin-top: 6px; }96 97 .play-ico {98 width: 74px; height: 74px; border-radius: 50%;99 background: rgba(255,255,255,0.22);100 display: flex; align-items: center; justify-content: center;101 border: 2px solid rgba(255,255,255,0.6);102 }103 .play-ico svg { width: 34px; height: 34px; }104 105 /* Image placeholder utility (as per instructions) */106 .img-ph {107 width: 100%; height: 100%;108 background: #E0E0E0;109 border: 1px solid #BDBDBD;110 border-radius: 36px;111 display: flex; align-items: center; justify-content: center;112 color: #757575; font-weight: 600;113 }114 115 /* Daily meditation card */116 .image-card {117 position: relative;118 border-radius: 40px;119 overflow: hidden;120 height: 580px;121 box-shadow: 0 18px 40px rgba(0,0,0,0.35);122 margin-bottom: 36px;123 }124 .image-card .shade {125 position: absolute; inset: 0;126 background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.45) 100%);127 border-radius: 40px;128 pointer-events: none;129 }130 .top-left-pill {131 position: absolute; left: 24px; top: 24px;132 display: inline-flex; align-items: center; gap: 10px;133 padding: 10px 16px;134 background: rgba(255,255,255,0.18);135 border: 1px solid rgba(255,255,255,0.35);136 color: #fff; border-radius: 24px; font-weight: 700; font-size: 28px;137 backdrop-filter: blur(4px);138 }139 .date-pill {140 position: absolute; right: 24px; top: 24px;141 padding: 12px 22px; border-radius: 26px;142 background: rgba(255,255,255,0.26);143 border: 1px solid rgba(255,255,255,0.4);144 font-weight: 800; font-size: 26px; letter-spacing: 1px;145 }146 .lock-ico {147 position: absolute; right: 24px; top: 96px;148 width: 48px; height: 48px;149 background: rgba(255,255,255,0.22);150 border: 2px solid rgba(255,255,255,0.7);151 border-radius: 12px; display: flex; align-items: center; justify-content: center;152 }153 .image-card .bottom-text {154 position: absolute; left: 30px; bottom: 28px; right: 30px;155 color: #fff;156 }157 .image-card .bt-title { font-size: 44px; font-weight: 800; margin-bottom: 8px; }158 .image-card .bt-sub { font-size: 30px; color: #DDE7EF; }159 160 /* Featured card */161 .featured-card { height: 520px; border-radius: 40px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }162 .featured-card .bottom-caption {163 position: absolute; left: 30px; bottom: 24px; color: #fff; font-size: 40px; font-weight: 800;164 text-shadow: 0 3px 8px rgba(0,0,0,0.35);165 }166 167 /* Footer navigation */168 .tabbar {169 position: absolute; left: 0; right: 0; bottom: 70px;170 height: 190px;171 background: #EDEAE7;172 border-top-left-radius: 28px; border-top-right-radius: 28px;173 box-shadow: 0 -12px 30px rgba(0,0,0,0.25);174 display: flex; align-items: center; justify-content: space-around;175 color: #6e7a83;176 padding-top: 16px;177 }178 .tab-item { width: 19%; text-align: center; }179 .tab-item svg { width: 48px; height: 48px; }180 .tab-item .label { font-size: 26px; font-weight: 700; margin-top: 8px; }181 .active { color: #19B6FF; }182 .active svg path, .active svg circle, .active svg rect { stroke: #19B6FF; fill: #19B6FF; }183 184 /* Home indicator */185 .home-indicator {186 position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);187 width: 360px; height: 10px; border-radius: 6px;188 background: #A5A5A5;189 opacity: 0.6;190 }191</style>192</head>193<body>194<div id="render-target">195 <div class="screen-pad">196 <!-- Top blue cards -->197 <div class="blue-card big">198 <div class="badge-pill">COURSE</div>199 <div class="title">Get Started</div>200 <div class="checks">201 <div class="check">202 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>203 </div>204 <div class="check">205 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>206 </div>207 <div class="check blue">208 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>209 </div>210 <div class="check blue">211 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>212 </div>213 <div class="check blue">214 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>215 </div>216 <div class="check blue">217 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4-4 1.6-1.6 2.4 2.4 7-7 1.6 1.6-8.6 9.2z"/></svg>218 </div>219 </div>220 </div>221 222 <div class="blue-card">223 <div class="title">Cleanse the Moment</div>224 <div class="subtitle">by Liselotte Ellegaard</div>225 </div>226 227 <div class="blue-card">228 <div class="title">Meditations</div>229 <div class="subtitle">Guided, Silent and Personalized</div>230 </div>231 232 <!-- Ongoing Course -->233 <div class="section-row">234 <div class="section-title">Ongoing Course</div>235 <div class="view-all">View all</div>236 </div>237 238 <div class="glass-card">239 <div class="play-ico">240 <svg viewBox="0 0 24 24">241 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>242 <path d="M10 8l8 4-8 4z" fill="#fff"></path>243 </svg>244 </div>245 <div class="text">246 <div class="glass-small">Continue listening • 0% completed</div>247 <div class="glass-big">Natural Awareness</div>248 </div>249 </div>250 251 <!-- Daily Meditation -->252 <div class="section-title" style="margin: 18px 6px;">Daily Meditation</div>253 254 <div class="image-card">255 <div class="img-ph">[IMG: Person floating in water]</div>256 <div class="shade"></div>257 258 <div class="top-left-pill">259 <svg viewBox="0 0 24 24" width="26" height="26">260 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>261 <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>262 </svg>263 <span>6 min</span>264 </div>265 266 <div class="date-pill">DECEMBER 11</div>267 268 <div class="lock-ico">269 <svg viewBox="0 0 24 24" width="28" height="28">270 <rect x="6" y="10" width="12" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>271 <path d="M8 10V8a4 4 0 018 0v2" fill="none" stroke="#fff" stroke-width="2"></path>272 </svg>273 </div>274 275 <div class="bottom-text">276 <div class="bt-title">Affirmations For Me & My Body</div>277 <div class="bt-sub">With Reuben Lowe</div>278 </div>279 </div>280 281 <!-- Featured -->282 <div class="section-title" style="margin: 18px 6px;">Featured</div>283 <div class="featured-card" style="position: relative; margin-bottom: 540px;">284 <div class="img-ph">[IMG: Snowy winter forest]</div>285 <div class="shade"></div>286 <div class="bottom-caption">Winter Meditation</div>287 </div>288 </div>289 290 <!-- Bottom Navigation -->291 <div class="tabbar">292 <div class="tab-item active">293 <svg viewBox="0 0 24 24">294 <path d="M12 4c-2 2-3 3-3.5 5 1.7-.6 3.1-.6 3.5-.6s1.8 0 3.5.6C15 7 14 6 12 4z" fill="#19B6FF"/>295 <path d="M6 14c2.5-1.6 5-2 6-2s3.5.4 6 2c-2.5 2-5 3-6 3s-3.5-1-6-3z" fill="#19B6FF"/>296 </svg>297 <div class="label">Meditate</div>298 </div>299 <div class="tab-item">300 <svg viewBox="0 0 24 24">301 <path d="M12 21s-7-4.35-7-10a4 4 0 017-2 4 4 0 017 2c0 5.65-7 10-7 10z" fill="#6e7a83"></path>302 </svg>303 <div class="label">Favorites</div>304 </div>305 <div class="tab-item">306 <svg viewBox="0 0 24 24">307 <circle cx="12" cy="8" r="4" fill="#6e7a83"></circle>308 <path d="M4 20c2.2-3.5 5.8-4.5 8-4.5s5.8 1 8 4.5" stroke="#6e7a83" stroke-width="2" fill="none" stroke-linecap="round"></path>309 </svg>310 <div class="label">Profile</div>311 </div>312 <div class="tab-item">313 <svg viewBox="0 0 24 24">314 <circle cx="10" cy="10" r="6" stroke="#6e7a83" stroke-width="2" fill="none"></circle>315 <path d="M15.5 15.5L21 21" stroke="#6e7a83" stroke-width="2" stroke-linecap="round"></path>316 </svg>317 <div class="label">Discover</div>318 </div>319 <div class="tab-item">320 <svg viewBox="0 0 24 24">321 <path d="M4 6h16M4 12h16M4 18h16" stroke="#6e7a83" stroke-width="2" stroke-linecap="round"></path>322 </svg>323 <div class="label">Settings</div>324 </div>325 </div>326 327 <div class="home-indicator"></div>328</div>329</body>330</html>