GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Meditation App UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;12 color: #222;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #f3eee3; /* soft cream background */20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 90px;29 padding: 0 36px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #111;34 font-weight: 600;35 font-size: 34px;36 z-index: 5;37 }38 .status-icons {39 display: flex;40 gap: 24px;41 align-items: center;42 }43 .icon-dot {44 width: 12px;45 height: 12px;46 background: #111;47 border-radius: 50%;48 }49 .signal, .wifi, .battery {50 width: 38px;51 height: 24px;52 }53 .signal svg, .wifi svg, .battery svg {54 width: 100%; height: 100%;55 }56 57 /* Header sky */58 .header {59 position: absolute;60 top: 70px;61 left: 0;62 width: 1080px;63 height: 560px;64 background: #8fc7ef;65 border-bottom-left-radius: 160px;66 border-bottom-right-radius: 160px;67 overflow: hidden;68 }69 .cloud {70 position: absolute;71 background: #cfe8fb;72 border-radius: 200px;73 }74 .cloud.c1 { width: 400px; height: 140px; right: 60px; top: 60px; }75 .cloud.c2 { width: 300px; height: 120px; left: 120px; bottom: 90px; }76 .cloud.c3 { width: 180px; height: 80px; right: 240px; bottom: 160px; }77 78 .greeting {79 position: absolute;80 width: 100%;81 text-align: center;82 top: 210px;83 color: #fff;84 }85 .greeting .small {86 font-size: 42px;87 font-weight: 600;88 margin-bottom: 16px;89 }90 .greeting .large {91 font-size: 68px;92 font-weight: 700;93 letter-spacing: 0.5px;94 }95 96 .circle-btn {97 position: absolute;98 width: 124px;99 height: 124px;100 background: #7bb7e6;101 border-radius: 62px;102 display: flex;103 align-items: center;104 justify-content: center;105 color: #fff;106 box-shadow: 0 6px 14px rgba(0,0,0,0.15);107 }108 .gift-btn { left: 66px; top: 120px; font-size: 60px; }109 .user-btn { right: 66px; top: 150px; }110 .user-btn svg { width: 54px; height: 54px; }111 112 /* Content area */113 .content {114 position: absolute;115 top: 690px;116 left: 0;117 width: 100%;118 padding: 0 48px 160px;119 box-sizing: border-box;120 }121 .section-title {122 font-size: 66px;123 font-weight: 800;124 margin: 12px 0 24px;125 }126 127 .row-between {128 display: flex;129 align-items: center;130 justify-content: space-between;131 }132 .label-with-icon {133 display: flex;134 align-items: center;135 gap: 22px;136 }137 .label-with-icon .emoji {138 font-size: 52px;139 }140 .label-with-icon .text {141 font-size: 52px;142 font-weight: 800;143 }144 .see-all {145 font-size: 44px;146 color: #111;147 font-weight: 700;148 }149 .subtext {150 color: #7a7a7a;151 font-size: 36px;152 margin: 18px 0 28px;153 }154 155 /* Cards */156 .card-row {157 display: flex;158 gap: 36px;159 overflow-x: auto;160 padding-bottom: 18px;161 }162 .card {163 flex: 0 0 620px;164 background: #fffdf8;165 border-radius: 40px;166 box-shadow: 0 6px 12px rgba(0,0,0,0.06);167 border: 1px solid rgba(0,0,0,0.06);168 }169 .card .thumb {170 height: 320px;171 margin: 0;172 background: #E0E0E0;173 border-bottom: 1px solid #BDBDBD;174 border-top-left-radius: 40px;175 border-top-right-radius: 40px;176 display: flex; align-items: center; justify-content: center;177 color: #757575; font-size: 40px; font-weight: 600;178 }179 .card .body {180 padding: 34px;181 }182 .card .title {183 font-size: 46px;184 font-weight: 800;185 line-height: 1.15;186 margin-bottom: 24px;187 }188 .card .meta {189 font-size: 36px;190 color: #333;191 font-weight: 700;192 }193 .lock {194 position: absolute;195 top: 18px;196 left: 18px;197 width: 58px; height: 58px;198 background: #fff;199 border-radius: 29px;200 display: flex; align-items: center; justify-content: center;201 box-shadow: 0 4px 8px rgba(0,0,0,0.12);202 }203 .lock svg { width: 30px; height: 30px; }204 205 /* Second section */206 .section-header {207 display: flex; align-items: center; justify-content: space-between;208 margin-top: 56px;209 }210 .section-header .left {211 display: flex; align-items: center; gap: 18px;212 font-size: 54px; font-weight: 800;213 }214 .timer-note {215 color: #7a7a7a;216 font-size: 34px;217 margin: 16px 0 30px;218 }219 220 /* Bottom navigation */221 .bottom-nav {222 position: absolute;223 bottom: 80px;224 left: 0;225 width: 100%;226 padding: 24px 48px;227 box-sizing: border-box;228 }229 .nav-bar {230 background: #fffdf8;231 border: 1px solid rgba(0,0,0,0.06);232 border-radius: 36px;233 box-shadow: 0 6px 12px rgba(0,0,0,0.06);234 padding: 26px 24px;235 display: flex;236 justify-content: space-around;237 align-items: center;238 }239 .nav-item {240 display: flex;241 flex-direction: column;242 align-items: center;243 gap: 14px;244 color: #555;245 font-size: 32px;246 font-weight: 700;247 }248 .nav-item .icon {249 width: 72px; height: 72px;250 display: flex; align-items: center; justify-content: center;251 border-radius: 36px;252 color: #222;253 }254 .nav-item.active .icon {255 border: 4px solid #222;256 border-radius: 44px;257 }258 .home-indicator {259 position: absolute;260 bottom: 22px;261 left: 50%;262 transform: translateX(-50%);263 width: 480px;264 height: 14px;265 background: #000;266 border-radius: 8px;267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div>9:39</div>276 <div class="status-icons">277 <div class="signal">278 <svg viewBox="0 0 24 24">279 <rect x="1" y="14" width="3" height="8" fill="#111"></rect>280 <rect x="7" y="10" width="3" height="12" fill="#111"></rect>281 <rect x="13" y="6" width="3" height="16" fill="#111"></rect>282 <rect x="19" y="2" width="3" height="20" fill="#111"></rect>283 </svg>284 </div>285 <div class="wifi">286 <svg viewBox="0 0 24 24">287 <path d="M2 8c5-4 15-4 20 0" stroke="#111" stroke-width="2" fill="none" />288 <path d="M5 11c4-3 10-3 14 0" stroke="#111" stroke-width="2" fill="none" />289 <path d="M8 14c2-2 6-2 8 0" stroke="#111" stroke-width="2" fill="none" />290 <circle cx="12" cy="18" r="2" fill="#111"></circle>291 </svg>292 </div>293 <div class="icon-dot"></div>294 <div class="battery">295 <svg viewBox="0 0 28 16">296 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"></rect>297 <rect x="3" y="5" width="14" height="6" fill="#111"></rect>298 <rect x="24" y="5" width="3" height="6" rx="1" fill="#111"></rect>299 </svg>300 </div>301 </div>302 </div>303 304 <!-- Blue header -->305 <div class="header">306 <div class="cloud c1"></div>307 <div class="cloud c2"></div>308 <div class="cloud c3"></div>309 310 <div class="circle-btn gift-btn">🎁</div>311 312 <div class="circle-btn user-btn">313 <svg viewBox="0 0 24 24">314 <circle cx="12" cy="8" r="5" fill="#fff"></circle>315 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" fill="#fff"></path>316 </svg>317 </div>318 319 <div class="greeting">320 <div class="small">hey Cole!</div>321 <div class="large">have a lovely day</div>322 </div>323 </div>324 325 <!-- Main content -->326 <div class="content">327 328 <div class="section-title">meditation</div>329 330 <div class="row-between">331 <div class="label-with-icon">332 <div class="emoji">💙</div>333 <div class="text">Anxiety</div>334 </div>335 <div class="see-all">See All</div>336 </div>337 338 <div class="subtext">joyful meditations to help you manage anxiety</div>339 340 <!-- Cards row -->341 <div class="card-row">342 343 <div class="card">344 <div class="thumb">[IMG: Lotus & Butterfly Illustration]</div>345 <div class="body">346 <div class="title">calm your racing<br>mind</div>347 <div class="meta">9 mins</div>348 </div>349 </div>350 351 <div class="card" style="position: relative;">352 <div class="thumb">[IMG: Smiling Sun Illustration]</div>353 <div class="lock">354 <svg viewBox="0 0 24 24">355 <rect x="5" y="10" width="14" height="10" rx="2" fill="#333"></rect>356 <path d="M8 10V7a4 4 0 018 0v3" stroke="#333" stroke-width="2" fill="none"></path>357 </svg>358 </div>359 <div class="body">360 <div class="title">channelise<br>positivity</div>361 <div class="meta">9 mins</div>362 </div>363 </div>364 365 <div class="card">366 <div class="thumb">[IMG: Calm Forest Illustration]</div>367 <div class="body">368 <div class="title">deep mindful<br>breathing</div>369 <div class="meta">5 mins</div>370 </div>371 </div>372 373 </div>374 375 <!-- Second section -->376 <div class="section-header">377 <div class="left">🕰 Meditate on your own</div>378 <div class="see-all">See All</div>379 </div>380 <div class="timer-note">meditation timers with a gong at the end</div>381 382 <div class="card-row">383 <div class="card">384 <div class="thumb">[IMG: Hands Heart with Butterflies]</div>385 <div class="body">386 <div class="title">gentle timer<br>session</div>387 <div class="meta">custom</div>388 </div>389 </div>390 <div class="card">391 <div class="thumb">[IMG: Clock Illustration]</div>392 <div class="body">393 <div class="title">focus with a<br>gong timer</div>394 <div class="meta">set duration</div>395 </div>396 </div>397 <div class="card">398 <div class="thumb">[IMG: Nature Scene]</div>399 <div class="body">400 <div class="title">breathe in the<br>open</div>401 <div class="meta">guided timer</div>402 </div>403 </div>404 </div>405 406 </div>407 408 <!-- Bottom navigation -->409 <div class="bottom-nav">410 <div class="nav-bar">411 <div class="nav-item">412 <div class="icon">413 <svg viewBox="0 0 24 24" width="36" height="36">414 <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#222" stroke-width="2"></path>415 </svg>416 </div>417 <div>today</div>418 </div>419 420 <div class="nav-item active">421 <div class="icon">422 <svg viewBox="0 0 24 24" width="34" height="34">423 <circle cx="12" cy="12" r="7" fill="none" stroke="#222" stroke-width="2"></circle>424 <circle cx="12" cy="12" r="2" fill="#222"></circle>425 </svg>426 </div>427 <div>meditate</div>428 </div>429 430 <div class="nav-item">431 <div class="icon">432 <svg viewBox="0 0 24 24" width="36" height="36">433 <path d="M3 19l6-6 5 4 7-8" stroke="#222" stroke-width="2" fill="none"></path>434 <path d="M2 22h20" stroke="#222" stroke-width="2"></path>435 </svg>436 </div>437 <div>courses</div>438 </div>439 440 <div class="nav-item">441 <div class="icon">442 <svg viewBox="0 0 24 24" width="36" height="36">443 <path d="M21 15a7 7 0 1 1-14 0c0-4 4-10 7-12 3 2 7 8 7 12z" fill="none" stroke="#222" stroke-width="2"></path>444 </svg>445 </div>446 <div>sleep</div>447 </div>448 449 <div class="nav-item">450 <div class="icon">451 <svg viewBox="0 0 24 24" width="34" height="34">452 <path d="M5 3h14v18l-7-4-7 4z" fill="none" stroke="#222" stroke-width="2"></path>453 </svg>454 </div>455 <div>journal</div>456 </div>457 </div>458 </div>459 460 <div class="home-indicator"></div>461 462</div>463</body>464</html>