GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Meditations UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background: linear-gradient(180deg, #274f68 0%, #143648 40%, #0e2c3c 100%);11 color:#eaf6ff;12 }13 14 /* Top bars */15 .status-bar {16 height:90px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px;19 color:#d8ecf7; font-weight:600; font-size:36px;20 }21 .status-icons { display:flex; align-items:center; gap:26px; }22 .title-bar {23 height:140px;24 display:flex; align-items:center; justify-content:center;25 position:relative;26 }27 .back-btn {28 position:absolute; left:28px; top:50%; transform:translateY(-50%);29 width:70px; height:70px; display:flex; align-items:center; justify-content:center;30 }31 .back-btn svg { width:42px; height:42px; fill:none; stroke:#d8ecf7; stroke-width:6; }32 .screen-title { font-size:64px; font-weight:800; letter-spacing:0.5px; }33 34 .content {35 position:absolute; left:0; right:0; top:230px; bottom:0;36 padding:40px 44px 320px;37 background: #0e2c3c;38 }39 40 /* Section headings */41 .section {42 margin-top:18px; margin-bottom:26px;43 display:flex; align-items:center; justify-content:space-between;44 }45 .section .label { font-size:56px; font-weight:800; }46 .circle-info {47 width:54px; height:54px; border-radius:50%; border:2px solid #88a7b7;48 display:flex; align-items:center; justify-content:center; color:#88a7b7; font-weight:700;49 }50 51 /* Timed panel */52 .timed-panel {53 background:#132f41; border-radius:36px; padding:28px; border:1px solid #1e4b60;54 position:relative; margin-bottom:34px;55 }56 .timed-panel .info-top {57 position:absolute; right:26px; top:22px;58 }59 .minutes-grid {60 display:flex; gap:26px; padding-top:34px; padding-bottom:34px;61 }62 .min-card {63 flex:1; min-width:0; height:220px;64 background:#0f2a39; border:2px solid #2e566d; border-radius:28px;65 display:flex; flex-direction:column; align-items:center; justify-content:center;66 }67 .min-card .num { font-size:96px; font-weight:800; }68 .min-card .sub { font-size:36px; opacity:0.9; margin-top:10px; }69 70 .std-row {71 background:#0f2a39; border:2px solid #2e566d; border-radius:26px;72 height:120px; display:flex; align-items:center; justify-content:space-between;73 padding:0 30px;74 }75 .std-row .text { font-size:46px; font-weight:800; }76 .chev {77 width:42px; height:42px;78 }79 .chev svg { width:100%; height:100%; fill:none; stroke:#cfe8f6; stroke-width:7; }80 81 /* Personalized card */82 .card-blue {83 background:#5fb2ff; color:#0b2a3b; border-radius:32px; padding:36px;84 display:flex; align-items:center; justify-content:space-between;85 box-shadow:0 6px 0 rgba(0,0,0,0.15);86 }87 .card-blue .left { display:flex; flex-direction:column; gap:12px; }88 .card-blue .big { font-size:96px; font-weight:800; color:#ffffff; }89 .card-blue .mid { font-size:50px; font-weight:800; color:#ffffff; }90 .card-blue .sub { font-size:44px; color:#eaf6ff; }91 .edit-area { display:flex; align-items:center; gap:22px; }92 .edit-area .edit { font-size:44px; color:#06324a; font-weight:700; }93 .pencil {94 width:68px; height:68px; border-radius:16px;95 display:flex; align-items:center; justify-content:center;96 }97 .pencil svg { width:60px; height:60px; fill:none; stroke:#06324a; stroke-width:6; }98 99 /* Saved */100 .saved-placeholder {101 height:220px; border-radius:28px; border:2px dashed #2e566d;102 display:flex; align-items:center; justify-content:center; color:#88a7b7; margin-top:16px;103 font-size:40px;104 }105 106 /* Button */107 .cta {108 position:absolute; left:44px; right:44px; bottom:300px;109 height:140px; background:#5fb2ff; border-radius:80px;110 display:flex; align-items:center; justify-content:center;111 color:#083248; font-size:56px; font-weight:800;112 box-shadow:0 10px 0 rgba(0,0,0,0.18);113 }114 115 /* Bottom nav */116 .home-line {117 position:absolute; bottom:252px; left:50%; transform:translateX(-50%);118 width:420px; height:10px; background:#cfe8f6; border-radius:6px; opacity:0.7;119 }120 .bottom-nav {121 position:absolute; left:0; right:0; bottom:0;122 height:240px; background:#0b2432; border-top:1px solid #163a4c;123 display:flex; align-items:flex-start; justify-content:space-around; padding-top:40px;124 color:#9cc3d6;125 }126 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; font-size:40px; }127 .nav-icon {128 width:88px; height:88px; border-radius:24px; display:flex; align-items:center; justify-content:center;129 }130 .nav-icon svg { width:58px; height:58px; fill:none; stroke:#9cc3d6; stroke-width:6; }131 .nav-item.active .nav-icon { background:#132f41; }132 .nav-item.active .nav-icon svg { stroke:#5fb2ff; }133 .nav-item.active { color:#5fb2ff; font-weight:700; }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status bar -->140 <div class="status-bar">141 <div>3:43</div>142 <div class="status-icons">143 <!-- simple wifi icon -->144 <svg width="44" height="44" viewBox="0 0 24 24">145 <path d="M2 8c5-4 15-4 20 0" stroke="#d8ecf7" stroke-width="2" fill="none"/>146 <path d="M5 12c3-2 11-2 14 0" stroke="#d8ecf7" stroke-width="2" fill="none"/>147 <circle cx="12" cy="16" r="2" fill="#d8ecf7"/>148 </svg>149 <!-- battery icon -->150 <svg width="48" height="44" viewBox="0 0 28 18">151 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#d8ecf7" fill="none" stroke-width="2"/>152 <rect x="3" y="5" width="18" height="8" fill="#d8ecf7"/>153 <rect x="24" y="6" width="3" height="6" rx="1" ry="1" fill="#d8ecf7"/>154 </svg>155 </div>156 </div>157 158 <!-- Title bar -->159 <div class="title-bar">160 <div class="back-btn">161 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>162 </div>163 <div class="screen-title">Meditations</div>164 </div>165 166 <!-- Content -->167 <div class="content">168 169 <div class="section">170 <div class="label">Timed Meditations</div>171 <div class="circle-info">i</div>172 </div>173 174 <div class="timed-panel">175 <div class="info-top circle-info">i</div>176 177 <div class="minutes-grid">178 <div class="min-card">179 <div class="num">3</div>180 <div class="sub">Minutes</div>181 </div>182 <div class="min-card">183 <div class="num">5</div>184 <div class="sub">Minutes</div>185 </div>186 <div class="min-card">187 <div class="num">10</div>188 <div class="sub">Minutes</div>189 </div>190 <div class="min-card">191 <div class="num">15</div>192 <div class="sub">Minutes</div>193 </div>194 </div>195 196 <div class="std-row">197 <div class="text">Standard Meditation</div>198 <div class="chev">199 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>200 </div>201 </div>202 </div>203 204 <div class="section">205 <div class="label">Personalized Meditations</div>206 <div class="circle-info">i</div>207 </div>208 209 <div class="card-blue">210 <div class="left">211 <div class="big">8 Min Silent</div>212 <div class="sub">with <span style="font-weight:800; color:#ffffff;">bells every 1 Min</span></div>213 </div>214 <div class="edit-area">215 <div class="pencil">216 <svg viewBox="0 0 24 24">217 <path d="M4 16l1 4 4-1L19 9l-4-4L4 16z" />218 </svg>219 </div>220 <div class="edit">Edit</div>221 </div>222 </div>223 224 <div class="section" style="margin-top:60px;">225 <div class="label">Saved Meditations</div>226 <div class="circle-info">i</div>227 </div>228 <div class="saved-placeholder">No saved meditations yet</div>229 230 </div>231 232 <div class="cta">Start Meditate</div>233 <div class="home-line"></div>234 235 <!-- Bottom Navigation -->236 <div class="bottom-nav">237 <div class="nav-item active">238 <div class="nav-icon">239 <!-- simple lotus-like icon -->240 <svg viewBox="0 0 24 24">241 <path d="M12 19c4-1 6-4 6-7-3 2-6 1-6-2-1 3-4 4-6 2 0 3 2 6 6 7z"/>242 </svg>243 </div>244 <div>Meditate</div>245 </div>246 <div class="nav-item">247 <div class="nav-icon">248 <svg viewBox="0 0 24 24">249 <path d="M12 21s-6-4-6-9a6 6 0 0 1 12 0c0 5-6 9-6 9z"/>250 </svg>251 </div>252 <div>Favorites</div>253 </div>254 <div class="nav-item">255 <div class="nav-icon">256 <svg viewBox="0 0 24 24">257 <circle cx="12" cy="8" r="4"></circle>258 <path d="M4 22c0-4 4-6 8-6s8 2 8 6"/>259 </svg>260 </div>261 <div>Profile</div>262 </div>263 <div class="nav-item">264 <div class="nav-icon">265 <svg viewBox="0 0 24 24">266 <circle cx="11" cy="11" r="7"></circle>267 <path d="M21 21l-4-4"/>268 </svg>269 </div>270 <div>Discover</div>271 </div>272 <div class="nav-item">273 <div class="nav-icon">274 <svg viewBox="0 0 24 24">275 <path d="M12 1v4M4 5l2 3M20 5l-2 3M3 13h18M6 18h12"/>276 </svg>277 </div>278 <div>Settings</div>279 </div>280 </div>281 282</div>283</body>284</html>