GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Meditation App UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0b2b40;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 24px;20 left: 36px;21 right: 36px;22 height: 60px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #ffffff;27 z-index: 5;28 font-weight: 600;29 }30 .status-right {31 display: flex;32 gap: 24px;33 align-items: center;34 }35 .icon-sm svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3; }36 37 /* Hero lake image placeholder */38 .hero {39 position: absolute;40 top: 0;41 left: 0;42 width: 1080px;43 height: 980px;44 }45 .hero .img {46 width: 100%;47 height: 100%;48 background: #E0E0E0;49 border-bottom: 1px solid #BDBDBD;50 display: flex;51 align-items: flex-end;52 justify-content: center;53 color: #4f4f4f;54 font-size: 30px;55 letter-spacing: 0.5px;56 }57 58 /* Back and share icons over hero */59 .top-actions {60 position: absolute;61 top: 120px;62 left: 36px;63 right: 36px;64 display: flex;65 justify-content: space-between;66 align-items: center;67 z-index: 6;68 }69 .top-actions .round {70 width: 72px;71 height: 72px;72 border-radius: 36px;73 background: rgba(255,255,255,0.25);74 display: flex;75 align-items: center;76 justify-content: center;77 backdrop-filter: blur(2px);78 }79 .top-actions svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 5; fill: none; }80 81 /* Preview speech bubble */82 .preview-bubble {83 position: absolute;84 top: 370px;85 left: 48px;86 width: 884px;87 background: #61B6FF;88 color: #fff;89 border-radius: 28px;90 padding: 34px 36px;91 box-shadow: 0 8px 18px rgba(0,0,0,0.2);92 z-index: 7;93 font-weight: 700;94 }95 .preview-bubble::after {96 content: "";97 position: absolute;98 right: 64px;99 bottom: -24px;100 width: 0; height: 0;101 border-left: 18px solid transparent;102 border-right: 18px solid transparent;103 border-top: 24px solid #61B6FF;104 }105 .preview-title { font-size: 42px; margin-bottom: 10px; }106 .preview-sub { font-size: 32px; font-weight: 500; opacity: 0.95; }107 108 /* Unlock + side buttons */109 .controls {110 position: absolute;111 top: 610px;112 left: 48px;113 right: 48px;114 display: flex;115 align-items: center;116 gap: 28px;117 z-index: 7;118 }119 .unlock-btn {120 flex: 1;121 height: 120px;122 background: #61B6FF;123 border-radius: 60px;124 display: flex;125 align-items: center;126 padding: 0 40px;127 font-size: 44px;128 font-weight: 800;129 color: #fff;130 box-shadow: 0 10px 24px rgba(0,0,0,0.25);131 }132 .unlock-btn .lock-ic {133 width: 64px; height: 64px; margin-right: 24px;134 }135 .unlock-btn svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 6; fill: none; }136 .circle-btn {137 width: 140px;138 height: 140px;139 border-radius: 70px;140 background: #69C1FF;141 display: flex;142 align-items: center; justify-content: center;143 box-shadow: 0 10px 24px rgba(0,0,0,0.25);144 }145 .circle-btn svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 6; fill: none; }146 147 /* Content panel */148 .panel {149 position: absolute;150 top: 820px;151 left: 0;152 width: 1080px;153 height: 1580px;154 background: #133B57;155 border-top-left-radius: 48px;156 border-top-right-radius: 48px;157 padding: 50px 48px 260px 48px;158 box-sizing: border-box;159 }160 .title-row {161 display: flex;162 align-items: center;163 gap: 28px;164 }165 .avatar {166 width: 120px; height: 120px; border-radius: 60px;167 background: #E0E0E0; border: 1px solid #BDBDBD;168 display: flex; align-items: center; justify-content: center;169 color: #757575; font-size: 22px;170 }171 .title-row .name {172 font-size: 60px; font-weight: 800;173 }174 .subtitle {175 margin-left: 148px;176 margin-top: 12px;177 color: #c6d6e2;178 font-size: 30px;179 letter-spacing: 1px;180 }181 182 .description {183 margin-top: 30px;184 font-size: 34px;185 line-height: 1.5;186 color: #d7e6f2;187 }188 .show-more {189 color: #b7dbff;190 font-weight: 700;191 font-size: 34px;192 position: absolute;193 right: 48px;194 top: 540px;195 }196 197 .section-title {198 margin-top: 80px;199 font-size: 44px; font-weight: 800;200 color: #ffffff;201 }202 203 /* List items */204 .list {205 margin-top: 30px;206 display: flex;207 flex-direction: column;208 gap: 34px;209 }210 .item {211 display: flex;212 align-items: center;213 padding: 22px 0;214 border-bottom: 1px solid rgba(255,255,255,0.1);215 }216 .thumb {217 width: 170px; height: 170px; border-radius: 26px;218 background: #E0E0E0; border: 1px solid #BDBDBD;219 display: flex; align-items: center; justify-content: center;220 color: #757575; font-size: 24px;221 flex-shrink: 0;222 }223 .meta {224 margin-left: 34px;225 flex: 1;226 }227 .meta .title { font-size: 44px; font-weight: 800; }228 .meta .sub { margin-top: 6px; font-size: 30px; color: #c6d6e2; }229 .item .lock {230 width: 54px; height: 54px; margin-left: 18px;231 }232 .item .lock svg { width: 54px; height: 54px; stroke: #c9d6e4; stroke-width: 5; fill: none; }233 234 /* Bottom navigation */235 .bottom-nav {236 position: absolute;237 bottom: 0;238 left: 0;239 width: 1080px;240 height: 180px;241 background: #0f2e46;242 display: flex;243 align-items: center;244 justify-content: space-around;245 color: #cfe3f2;246 }247 .nav-item {248 display: flex;249 flex-direction: column;250 align-items: center;251 gap: 12px;252 font-size: 28px;253 font-weight: 600;254 }255 .nav-item svg { width: 52px; height: 52px; stroke: #cfe3f2; stroke-width: 4; fill: none; }256 .nav-item.active { color: #61B6FF; }257 .nav-item.active svg { stroke: #61B6FF; }258 259 /* iOS home bar */260 .home-bar {261 position: absolute;262 bottom: 200px;263 left: 50%;264 transform: translateX(-50%);265 width: 520px;266 height: 12px;267 border-radius: 6px;268 background: rgba(255,255,255,0.6);269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status Bar -->276 <div class="status-bar">277 <div class="status-left" style="display:flex;align-items:center;gap:18px;">278 <div style="font-size:42px;">3:45</div>279 </div>280 <div class="status-right">281 <div class="icon-sm">282 <!-- simple wifi -->283 <svg viewBox="0 0 24 24">284 <path d="M2 8c5-5 15-5 20 0"/>285 <path d="M6 12c3-3 9-3 12 0"/>286 <path d="M10 16c1.8-1.8 5.2-1.8 7 0"/>287 <circle cx="12" cy="20" r="2"></circle>288 </svg>289 </div>290 <div class="icon-sm">291 <!-- battery -->292 <svg viewBox="0 0 26 24">293 <rect x="2" y="6" width="18" height="12" rx="2"></rect>294 <rect x="20" y="10" width="3" height="4"></rect>295 </svg>296 </div>297 </div>298 </div>299 300 <!-- Hero Image -->301 <div class="hero">302 <div class="img">[IMG: Lake & Mountains Background]</div>303 </div>304 305 <!-- Top Actions -->306 <div class="top-actions">307 <div class="round">308 <!-- back chevron -->309 <svg viewBox="0 0 24 24">310 <polyline points="15,4 7,12 15,20"></polyline>311 </svg>312 </div>313 <div class="round">314 <!-- share/external -->315 <svg viewBox="0 0 24 24">316 <rect x="4" y="6" width="14" height="14" rx="2"></rect>317 <path d="M10 8h6v6"></path>318 <path d="M10 14l6-6"></path>319 </svg>320 </div>321 </div>322 323 <!-- Preview bubble -->324 <div class="preview-bubble">325 <div class="preview-title">Preview Meditation</div>326 <div class="preview-sub">Tap to listen to 30 sec of this meditation</div>327 </div>328 329 <!-- Unlock + circular buttons -->330 <div class="controls">331 <div class="unlock-btn">332 <div class="lock-ic">333 <svg viewBox="0 0 24 24">334 <rect x="5" y="10" width="14" height="10" rx="2"></rect>335 <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>336 </svg>337 </div>338 Unlock Meditation339 </div>340 <div class="circle-btn">341 <!-- play -->342 <svg viewBox="0 0 24 24">343 <polygon points="8,5 20,12 8,19"></polygon>344 </svg>345 </div>346 <div class="circle-btn">347 <!-- heart -->348 <svg viewBox="0 0 24 24">349 <path d="M12 21s-7-4.6-9.5-8.3C0.7 9.7 2.2 6 5.8 6c2.1 0 3.6 1.1 4.2 2.3C11.6 7.1 13.1 6 15.2 6c3.6 0 5.1 3.7 3.3 6.7C19 16.4 12 21 12 21z"></path>350 </svg>351 </div>352 </div>353 354 <!-- Content Panel -->355 <div class="panel">356 <div class="title-row">357 <div class="avatar">[IMG]</div>358 <div class="name">Calm Lake</div>359 </div>360 <div class="subtitle">30 MIN | SOOTHING SOUNDS</div>361 362 <div class="description">363 This sound is a combination of water lapping and the iconic sound of the Loon bird. Loon calls have a distinct quality that has enchanted humans for centuries.364 <br><br>365 In popular culture, these calls have become a...366 </div>367 <div class="show-more">show more</div>368 369 <div class="section-title">Similar Content</div>370 371 <div class="list">372 <!-- Item 1 -->373 <div class="item">374 <div class="thumb">[IMG: Mountain Lake]</div>375 <div class="meta">376 <div class="title">Healing Water</div>377 <div class="sub">30 MIN | SOOTHING SOUNDS</div>378 </div>379 <div class="lock">380 <svg viewBox="0 0 24 24">381 <rect x="5" y="10" width="14" height="10" rx="2"></rect>382 <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>383 </svg>384 </div>385 </div>386 387 <!-- Item 2 -->388 <div class="item">389 <div class="thumb">[IMG: Lake Meditation]</div>390 <div class="meta">391 <div class="title">Lake Meditation</div>392 <div class="sub">10 MIN | CATHERINE POLAN ORZECH</div>393 </div>394 <div class="lock">395 <svg viewBox="0 0 24 24">396 <rect x="5" y="10" width="14" height="10" rx="2"></rect>397 <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>398 </svg>399 </div>400 </div>401 402 <!-- Item 3 -->403 <div class="item">404 <div class="thumb">[IMG: Night Sky]</div>405 <div class="meta">406 <div class="title">Mind Like Sky Meditation</div>407 <div class="sub">28 MIN | JACK KORNFIELD</div>408 </div>409 <div class="lock">410 <svg viewBox="0 0 24 24">411 <rect x="5" y="10" width="14" height="10" rx="2"></rect>412 <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>413 </svg>414 </div>415 </div>416 </div>417 </div>418 419 <!-- iOS Home bar indicator -->420 <div class="home-bar"></div>421 422 <!-- Bottom Navigation -->423 <div class="bottom-nav">424 <div class="nav-item">425 <svg viewBox="0 0 24 24">426 <path d="M12 2l10 9h-3v9H5v-9H2z"></path>427 </svg>428 <div>Meditate</div>429 </div>430 <div class="nav-item">431 <svg viewBox="0 0 24 24">432 <path d="M12 21s-7-4.6-9.5-8.3C0.7 9.7 2.2 6 5.8 6c2.1 0 3.6 1.1 4.2 2.3C11.6 7.1 13.1 6 15.2 6c3.6 0 5.1 3.7 3.3 6.7C19 16.4 12 21 12 21z"></path>433 </svg>434 <div>Favorites</div>435 </div>436 <div class="nav-item">437 <svg viewBox="0 0 24 24">438 <circle cx="12" cy="7" r="4"></circle>439 <path d="M4 22c0-4 4-7 8-7s8 3 8 7"></path>440 </svg>441 <div>Profile</div>442 </div>443 <div class="nav-item active">444 <svg viewBox="0 0 24 24">445 <circle cx="11" cy="11" r="8"></circle>446 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>447 </svg>448 <div>Discover</div>449 </div>450 <div class="nav-item">451 <svg viewBox="0 0 24 24">452 <circle cx="12" cy="12" r="3"></circle>453 <path d="M19.4 15a7.8 7.8 0 0 0 0-6"></path>454 <path d="M4.6 9a7.8 7.8 0 0 0 0 6"></path>455 </svg>456 <div>Settings</div>457 </div>458 </div>459 460</div>461</body>462</html>