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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #333;17 }18 19 /* Top header section */20 .header {21 position: relative;22 width: 100%;23 height: 760px;24 }25 .header .bg-img {26 position: absolute;27 left: 0; top: 0;28 width: 100%; height: 100%;29 background: #E0E0E0;30 border-bottom: 1px solid #BDBDBD;31 display: flex; align-items: center; justify-content: center;32 color: #757575; font-size: 28px;33 }34 35 /* Status bar */36 .status-bar {37 position: absolute;38 top: 24px; left: 36px; right: 36px;39 height: 48px;40 display: flex; align-items: center; justify-content: space-between;41 color: #3a3a3a; font-weight: 600; font-size: 34px;42 }43 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }44 .status-icon {45 width: 28px; height: 28px;46 }47 48 /* Floating action icons */49 .float-icons { position: absolute; right: 36px; top: 150px; display: flex; gap: 22px; }50 .circle-btn {51 width: 104px; height: 104px; border-radius: 52px;52 background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.15);53 display: flex; align-items: center; justify-content: center;54 }55 .circle-btn svg { width: 56px; height: 56px; }56 57 /* Greeting row */58 .greeting {59 position: absolute; left: 48px; top: 220px; right: 240px;60 display: flex; align-items: center;61 }62 .avatar {63 width: 160px; height: 160px; border-radius: 80px; background: #0f8b80;64 display: flex; align-items: center; justify-content: center;65 color: #ffffff; font-size: 88px; font-weight: 600;66 margin-right: 30px;67 }68 .greet-text .title { font-size: 64px; font-weight: 700; letter-spacing: 0.2px; }69 .greet-text .subtitle { margin-top: 18px; font-size: 40px; color: #666; }70 71 /* CTA banner */72 .cta-banner {73 position: absolute; left: 48px; right: 48px; top: 420px;74 height: 120px; border-radius: 18px; background: #ffffff;75 box-shadow: 0 8px 18px rgba(0,0,0,0.08);76 border: 1px solid #e7e7e7;77 display: flex; align-items: center; justify-content: space-between;78 padding: 0 32px; color: #4a4a4a; font-size: 38px; font-weight: 600;79 }80 .cta-banner .chev {81 width: 40px; height: 40px; margin-left: 12px;82 }83 84 /* Hero card */85 .hero-card {86 position: relative; margin: 680px 48px 0 48px;87 border-radius: 40px;88 min-height: 700px;89 background: radial-gradient(1200px 600px at 0% 0%, #efe9d7 0%, #f6e9d9 45%, #dbeff1 100%);90 box-shadow: 0 8px 16px rgba(0,0,0,0.06);91 padding: 60px 54px 44px;92 text-align: center;93 }94 .hero-card h1 { margin: 0; font-size: 58px; font-weight: 700; color: #3a3a3a; }95 .hero-card .desc { margin-top: 22px; font-size: 48px; color: #4c4c4c; font-weight: 600; }96 .hero-card .sub { margin-top: 18px; font-size: 34px; color: #7a7a7a; font-style: italic; }97 .hero-card .date-row {98 margin: 40px auto 0; width: max-content; display: flex; align-items: center; gap: 18px;99 font-size: 44px; color: #333; font-weight: 700;100 }101 .calendar-icon { width: 48px; height: 48px; }102 .hero-card .cta {103 margin: 50px auto 18px; width: 540px; height: 120px;104 border-radius: 80px; background: #0aa3b2; color: #fff;105 display: flex; align-items: center; justify-content: center;106 font-size: 44px; font-weight: 700;107 }108 .hero-card .foot-note { margin-top: 24px; font-size: 32px; color: #7b7b7b; }109 110 /* Section title */111 .section {112 margin: 48px; margin-top: 60px;113 }114 .section h2 {115 margin: 0; font-size: 52px; font-weight: 700; color: #3a3a3a;116 }117 .section .hint { margin-top: 18px; font-size: 36px; color: #7a7a7a; }118 119 /* Featured image card */120 .feat-card {121 margin-top: 28px; width: 984px; height: 440px; border-radius: 28px;122 background: #E0E0E0; border: 1px solid #BDBDBD;123 position: relative; overflow: hidden;124 display: flex; align-items: center; justify-content: center;125 color: #757575; font-size: 30px;126 }127 .feat-card .time-tag {128 position: absolute; left: 24px; bottom: 24px;129 color: #ffffff; font-size: 34px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.3);130 }131 .feat-card .lock {132 position: absolute; right: 24px; top: 24px; width: 72px; height: 72px;133 border-radius: 36px; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;134 }135 .lock svg { width: 38px; height: 38px; }136 137 /* Bottom navigation */138 .bottom-nav {139 position: absolute; bottom: 0; left: 0; width: 100%; height: 168px;140 background: #ffffff; box-shadow: 0 -6px 18px rgba(0,0,0,0.08);141 border-top-left-radius: 28px; border-top-right-radius: 28px;142 display: flex; align-items: center; justify-content: space-around;143 padding-bottom: 26px;144 }145 .nav-item {146 width: 20%; text-align: center; color: #7a7a7a;147 }148 .nav-item svg { width: 48px; height: 48px; }149 .nav-item .label { margin-top: 10px; font-size: 28px; }150 .nav-item.active { color: #ff5c8a; }151 .nav-item.active svg path { stroke: #ff5c8a; fill: none; }152 153 /* Home indicator */154 .home-indicator {155 position: absolute; bottom: 188px; left: 50%;156 transform: translateX(-50%);157 width: 420px; height: 12px; border-radius: 12px; background: rgba(0,0,0,0.22);158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Header with background image placeholder -->165 <div class="header">166 <div class="bg-img">[IMG: Watercolor Mountain Background]</div>167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="status-left">171 <div>8:05</div>172 <!-- Simple status icons -->173 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#999"/></svg>174 <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" fill="#999"/></svg>175 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 6h18M3 12h12M3 18h6" stroke="#999" stroke-width="2"/></svg>176 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#999"/></svg>177 </div>178 <div class="status-right">179 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 10h20l-2 6H4z" fill="#999"/></svg>180 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" stroke="#999" stroke-width="2" fill="none"/><rect x="6" y="9" width="12" height="6" fill="#999"/></svg>181 </div>182 </div>183 184 <!-- Floating action icons -->185 <div class="float-icons">186 <div class="circle-btn">187 <!-- Search icon -->188 <svg viewBox="0 0 24 24">189 <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"/>190 <line x1="14" y1="14" x2="20" y2="20" stroke="#333" stroke-width="2"/>191 </svg>192 </div>193 <div class="circle-btn">194 <!-- Message with question -->195 <svg viewBox="0 0 24 24">196 <rect x="3" y="5" width="18" height="12" rx="3" stroke="#333" stroke-width="2" fill="none"/>197 <path d="M8 19l3-2h6" stroke="#333" stroke-width="2" fill="none"/>198 <text x="12" y="13" text-anchor="middle" font-size="10" fill="#333">?</text>199 </svg>200 </div>201 </div>202 203 <!-- Greeting -->204 <div class="greeting">205 <div class="avatar">J</div>206 <div class="greet-text">207 <div class="title">Hello Janedbw!</div>208 <div class="subtitle">Good Morning</div>209 </div>210 </div>211 212 <!-- CTA banner -->213 <div class="cta-banner">214 <div>Try Free & Subscribe to get full access</div>215 <svg class="chev" viewBox="0 0 24 24">216 <path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 </div>220 221 <!-- Hero card -->222 <div class="hero-card">223 <h1>Saarthi</h1>224 <div class="desc">Your 21 Days Guide To Mindfulness</div>225 <div class="sub">(Available In Hindi & English)</div>226 227 <div class="date-row">228 <svg class="calendar-icon" viewBox="0 0 24 24">229 <rect x="3" y="5" width="18" height="16" rx="3" stroke="#333" stroke-width="2" fill="none"/>230 <line x1="3" y1="10" x2="21" y2="10" stroke="#333" stroke-width="2"/>231 <line x1="7" y1="2" x2="7" y2="6" stroke="#333" stroke-width="2"/>232 <line x1="17" y1="2" x2="17" y2="6" stroke="#333" stroke-width="2"/>233 </svg>234 <div>03 Jan - 23 Jan 2024</div>235 </div>236 237 <div class="cta">View Details</div>238 <div class="foot-note">67.3k People are participating</div>239 </div>240 241 <!-- Special meditation section -->242 <div class="section">243 <h2>Today's Special Meditation</h2>244 <div class="hint">This meditation will help you calm your nerves</div>245 246 <div class="feat-card">247 [IMG: Sunset Landscape Meditation Artwork]248 <div class="time-tag">15 mins</div>249 <div class="lock">250 <svg viewBox="0 0 24 24">251 <rect x="6" y="10" width="12" height="9" rx="2" fill="#fff"/>252 <path d="M8 10V8a4 4 0 018 0v2" stroke="#fff" stroke-width="2" fill="none"/>253 </svg>254 </div>255 </div>256 </div>257 258 <!-- Home indicator -->259 <div class="home-indicator"></div>260 261 <!-- Bottom navigation -->262 <div class="bottom-nav">263 <div class="nav-item active">264 <svg viewBox="0 0 24 24">265 <path d="M3 10l9-7 9 7v10H6V10" stroke="#d1d1d1" stroke-width="2" fill="none" />266 </svg>267 <div class="label">Home</div>268 </div>269 <div class="nav-item">270 <svg viewBox="0 0 24 24">271 <circle cx="11" cy="11" r="6" stroke="#777" stroke-width="2" fill="none"/>272 <line x1="16" y1="16" x2="22" y2="22" stroke="#777" stroke-width="2"/>273 </svg>274 <div class="label">Discover</div>275 </div>276 <div class="nav-item">277 <svg viewBox="0 0 24 24">278 <rect x="3" y="7" width="18" height="12" rx="3" stroke="#777" stroke-width="2" fill="none"/>279 <rect x="8" y="10" width="8" height="6" fill="#777"/>280 </svg>281 <div class="label">Live Events</div>282 </div>283 <div class="nav-item">284 <svg viewBox="0 0 24 24">285 <circle cx="12" cy="13" r="7" stroke="#777" stroke-width="2" fill="none"/>286 <line x1="12" y1="6" x2="12" y2="2" stroke="#777" stroke-width="2"/>287 </svg>288 <div class="label">Self Practice</div>289 </div>290 <div class="nav-item">291 <svg viewBox="0 0 24 24">292 <circle cx="12" cy="8" r="4" stroke="#777" stroke-width="2" fill="none"/>293 <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#777" stroke-width="2" fill="none"/>294 </svg>295 <div class="label">Profile</div>296 </div>297 </div>298 299</div>300</body>301</html>