GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Meditation App UI - Calm Lake</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family: "Helvetica Neue", Arial, sans-serif;}7 #render-target{8 width:1080px;height:2400px;position:relative;overflow:hidden;9 background: linear-gradient(#8fc2ea 0%, #a8d0f1 30%, #0f2f47 30%, #0f2f47 100%);10 border-radius:26px;11 }12 13 /* Top hero image */14 .hero{15 position:absolute;left:0;top:0;width:1080px;height:960px;16 display:flex;align-items:center;justify-content:center;17 background:#E0E0E0;border-bottom:1px solid #BDBDBD;color:#3f3f3f;font-weight:600;18 }19 .status-bar{20 position:absolute;left:32px;top:32px;width:1016px;height:60px;color:#fff;font-size:34px;display:flex;align-items:center;justify-content:space-between;21 }22 .status-left{display:flex;align-items:center;gap:20px;}23 .status-right{display:flex;align-items:center;gap:22px;}24 .stat-icon{width:34px;height:34px;border:2px solid rgba(255,255,255,0.8);border-radius:50%;}25 .back-arrow{26 position:absolute;left:60px;top:180px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0.95;27 border:2px solid rgba(255,255,255,0.9);color:#fff;28 }29 .back-arrow svg{width:30px;height:30px;}30 .share-btn{31 position:absolute;right:60px;top:180px;width:68px;height:68px;border-radius:14px;border:2px solid rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0.95;32 background:rgba(255,255,255,0.1);33 }34 .share-btn svg{width:34px;height:34px;}35 36 /* Dark content panel */37 .panel{38 position:absolute;left:0;top:880px;width:1080px;height:1520px;background:#123d59;border-top-left-radius:40px;border-top-right-radius:40px;color:#eaf6ff;39 box-shadow:0 -10px 30px rgba(0,0,0,0.25);40 }41 42 /* Unlock button and side icons */43 .unlock-wrap{position:absolute;left:60px;top:-40px;width:960px;height:140px;display:flex;align-items:center;gap:28px;}44 .unlock-btn{45 background:#66b8ff;color:#083a59;border-radius:24px;height:120px;flex:1;display:flex;align-items:center;gap:22px;padding:0 36px;font-size:46px;font-weight:700;46 box-shadow:0 8px 16px rgba(0,0,0,0.15);47 }48 .round-icon{width:120px;height:120px;background:#2e6285;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}49 .round-icon svg{width:46px;height:46px;fill:#fff;}50 51 /* Header block in panel */52 .avatar{53 width:140px;height:140px;border-radius:20px;background:#E0E0E0;border:1px solid #BDBDBD;color:#555;display:flex;align-items:center;justify-content:center;54 }55 .header-row{position:absolute;left:60px;top:140px;display:flex;align-items:center;gap:34px;}56 .title{font-size:64px;font-weight:800;margin-bottom:12px;}57 .meta{font-size:34px;opacity:0.85;letter-spacing:1px;}58 .clock-icon{width:28px;height:28px;border:2px solid #eaf6ff;border-radius:50%;display:inline-block;margin-right:8px;position:relative;top:4px;}59 .clock-icon:before{content:"";position:absolute;left:12px;top:6px;width:2px;height:8px;background:#eaf6ff;}60 .clock-icon:after{content:"";position:absolute;left:12px;top:14px;width:8px;height:2px;background:#eaf6ff;}61 62 .desc{position:absolute;left:60px;top:320px;width:960px;font-size:36px;line-height:1.5;color:#d9ecfa;}63 .show-more{color:#98d3ff;text-decoration:none;font-weight:700;}64 65 /* Similar content */66 .section-title{position:absolute;left:60px;top:670px;font-size:44px;font-weight:800;letter-spacing:0.5px;}67 .list{position:absolute;left:60px;top:740px;width:960px;}68 .item{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid rgba(255,255,255,0.12);}69 .thumb{70 width:160px;height:160px;border-radius:18px;background:#E0E0E0;border:1px solid #BDBDBD;color:#555;display:flex;align-items:center;justify-content:center;font-size:26px;text-align:center;71 }72 .item-info{flex:1;margin-left:34px;}73 .item-title{font-size:44px;font-weight:700;margin-bottom:6px;}74 .item-meta{font-size:32px;opacity:0.85;}75 .lock-mini{width:46px;height:46px;border-radius:12px;border:2px solid #9bd0ff;display:flex;align-items:center;justify-content:center;color:#9bd0ff;}76 .lock-mini svg{width:26px;height:26px;fill:#9bd0ff;}77 78 /* Preview bar */79 .preview{80 position:absolute;left:40px;bottom:260px;width:1000px;background:#69b9ff;color:#083a59;border-radius:26px;padding:26px 30px;box-shadow:0 8px 20px rgba(0,0,0,0.25);81 }82 .preview .label{font-size:34px;opacity:0.85;font-weight:800;letter-spacing:1px;}83 .preview .p-title{font-size:44px;font-weight:800;margin:6px 0 12px 0;}84 .progress{85 height:10px;background:rgba(8,58,89,0.25);border-radius:10px;margin:16px 0;overflow:hidden;86 }87 .progress-inner{width:10%;height:100%;background:#083a59;}88 .time-row{display:flex;align-items:center;justify-content:space-between;color:#083a59;font-weight:700;font-size:32px;}89 .p-icons{position:absolute;right:34px;top:86px;display:flex;gap:24px;}90 .mini-round{width:76px;height:76px;background:#98d3ff;border-radius:50%;display:flex;align-items:center;justify-content:center;}91 .mini-round svg{width:34px;height:34px;fill:#083a59;}92 93 /* Bottom navigation */94 .bottom-nav{95 position:absolute;left:0;bottom:0;width:1080px;height:200px;background:#0e334d;display:flex;align-items:center;justify-content:space-around;color:#cde8ff;96 border-top:1px solid rgba(255,255,255,0.08);97 }98 .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:32px;}99 .nav-icon{100 width:74px;height:74px;border-radius:20px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;101 }102 .nav-item.active .nav-icon{background:#65b7ff;}103 .nav-item.active{color:#65b7ff;font-weight:800;}104 105 /* Utility SVG styles */106 svg{display:block}107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Top hero image -->113 <div class="hero">[IMG: Lake landscape with mountains and water]</div>114 115 <!-- Status bar -->116 <div class="status-bar">117 <div class="status-left">118 <div>3:46</div>119 <div class="stat-icon"></div>120 <div class="stat-icon"></div>121 </div>122 <div class="status-right">123 <!-- simple wifi icon -->124 <svg width="44" height="34">125 <path d="M2 12 C12 4,32 4,42 12" stroke="#fff" stroke-width="3" fill="none"/>126 <path d="M8 18 C18 12,26 12,36 18" stroke="#fff" stroke-width="3" fill="none"/>127 <circle cx="22" cy="24" r="3" fill="#fff"/>128 </svg>129 <!-- battery icon -->130 <svg width="50" height="28">131 <rect x="2" y="4" width="40" height="20" stroke="#fff" fill="none" stroke-width="3" rx="3"/>132 <rect x="44" y="9" width="6" height="10" fill="#fff"/>133 <rect x="6" y="8" width="24" height="12" fill="#fff"/>134 </svg>135 </div>136 </div>137 138 <!-- Back and Share -->139 <div class="back-arrow">140 <svg viewBox="0 0 24 24">141 <path d="M15 4 L7 12 L15 20" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142 </svg>143 </div>144 <div class="share-btn">145 <svg viewBox="0 0 24 24">146 <rect x="5" y="6" width="12" height="12" stroke="#fff" fill="none" stroke-width="2"/>147 <path d="M12 6 L12 2 M12 2 L15 5 M12 2 L9 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>148 </svg>149 </div>150 151 <!-- Content Panel -->152 <div class="panel">153 154 <!-- Floating Unlock and round buttons -->155 <div class="unlock-wrap">156 <div class="unlock-btn">157 <svg width="48" height="48" viewBox="0 0 24 24">158 <path d="M7 11 V8 a5 5 0 1 1 10 0" stroke="#083a59" stroke-width="2.5" fill="none"/>159 <rect x="5" y="11" width="14" height="10" rx="2" fill="#083a59"/>160 </svg>161 <div>Unlock Meditation</div>162 </div>163 <div class="round-icon">164 <!-- pause -->165 <svg viewBox="0 0 24 24">166 <rect x="6" y="4" width="4" height="16"/>167 <rect x="14" y="4" width="4" height="16"/>168 </svg>169 </div>170 <div class="round-icon">171 <!-- heart -->172 <svg viewBox="0 0 24 24">173 <path d="M12 21 C12 21,3 14,3 8 C3 5,5 3,8 3 C10 3,12 5,12 5 C12 5,14 3,16 3 C19 3,21 5,21 8 C21 14,12 21,12 21 Z" />174 </svg>175 </div>176 </div>177 178 <!-- Header row -->179 <div class="header-row">180 <div class="avatar">[IMG: Lake thumbnail]</div>181 <div>182 <div class="title">Calm Lake</div>183 <div class="meta">184 <span class="clock-icon"></span>185 30 MIN | SOOTHING SOUNDS186 </div>187 </div>188 </div>189 190 <!-- Description -->191 <div class="desc">192 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.193 <br><br>194 In popular culture, these calls have become a<span> </span><a href="#" class="show-more">show more</a>195 </div>196 197 <!-- Similar Content -->198 <div class="section-title">Similar Content</div>199 <div class="list">200 <!-- Item 1 -->201 <div class="item">202 <div class="thumb">[IMG: Waterfall]</div>203 <div class="item-info">204 <div class="item-title">Healing Water</div>205 <div class="item-meta">30 MIN | SOOTHING SOUNDS</div>206 </div>207 <div class="lock-mini">208 <svg viewBox="0 0 24 24">209 <path d="M7 10 V7 a5 5 0 1 1 10 0" fill="none" stroke="#9bd0ff" stroke-width="2"/>210 <rect x="5" y="10" width="14" height="10" rx="2"/>211 </svg>212 </div>213 </div>214 <!-- Item 2 -->215 <div class="item">216 <div class="thumb">[IMG: Mountain lake]</div>217 <div class="item-info">218 <div class="item-title">Lake Meditation</div>219 <div class="item-meta">10 MIN | CATHERINE POLAN ORZECH</div>220 </div>221 <div class="lock-mini">222 <svg viewBox="0 0 24 24">223 <path d="M7 10 V7 a5 5 0 1 1 10 0" fill="none" stroke="#9bd0ff" stroke-width="2"/>224 <rect x="5" y="10" width="14" height="10" rx="2"/>225 </svg>226 </div>227 </div>228 </div>229 230 </div>231 232 <!-- Preview floating bar -->233 <div class="preview">234 <div class="label">PREVIEW</div>235 <div class="p-title">Calm Lake</div>236 <div class="p-icons">237 <div class="mini-round">238 <svg viewBox="0 0 24 24">239 <rect x="6" y="4" width="4" height="16"/>240 <rect x="14" y="4" width="4" height="16"/>241 </svg>242 </div>243 <div class="mini-round">244 <svg viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="8" fill="none" stroke="#083a59" stroke-width="2"/>246 </svg>247 </div>248 </div>249 <div class="progress"><div class="progress-inner"></div></div>250 <div class="time-row">251 <div>00:01</div>252 <div>00:30</div>253 </div>254 </div>255 256 <!-- Bottom Navigation -->257 <div class="bottom-nav">258 <div class="nav-item">259 <div class="nav-icon">260 <!-- lotus / meditate -->261 <svg width="40" height="40" viewBox="0 0 24 24">262 <path d="M12 3 C9 6,9 9,12 10 C15 9,15 6,12 3 Z" fill="#cde8ff"/>263 <path d="M5 14 C8 12,10 12,12 14 C14 12,16 12,19 14 C16 17,8 17,5 14 Z" fill="#cde8ff"/>264 </svg>265 </div>266 <div>Meditate</div>267 </div>268 <div class="nav-item">269 <div class="nav-icon">270 <svg width="40" height="40" viewBox="0 0 24 24">271 <path d="M12 21 C12 21,3 14,3 8 C3 5,5 3,8 3 C10 3,12 5,12 5 C12 5,14 3,16 3 C19 3,21 5,21 8 C21 14,12 21,12 21 Z" fill="#cde8ff"/>272 </svg>273 </div>274 <div>Favorites</div>275 </div>276 <div class="nav-item">277 <div class="nav-icon">278 <svg width="40" height="40" viewBox="0 0 24 24">279 <circle cx="12" cy="8" r="4" fill="#cde8ff"/>280 <path d="M4 21 C4 15,20 15,20 21" fill="#cde8ff"/>281 </svg>282 </div>283 <div>Profile</div>284 </div>285 <div class="nav-item active">286 <div class="nav-icon">287 <svg width="40" height="40" viewBox="0 0 24 24">288 <circle cx="10" cy="10" r="6" fill="#083a59"/>289 <line x1="15" y1="15" x2="21" y2="21" stroke="#083a59" stroke-width="3"/>290 </svg>291 </div>292 <div>Discover</div>293 </div>294 <div class="nav-item">295 <div class="nav-icon">296 <svg width="40" height="40" viewBox="0 0 24 24">297 <rect x="5" y="6" width="14" height="2" fill="#cde8ff"/>298 <rect x="5" y="11" width="14" height="2" fill="#cde8ff"/>299 <rect x="5" y="16" width="14" height="2" fill="#cde8ff"/>300 </svg>301 </div>302 <div>Settings</div>303 </div>304 </div>305 306</div>307</body>308</html>