GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Meditate UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1f2732; color: #ffffff; font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Header */16 .header {17 height: 230px;18 background: #3a434d;19 display: flex;20 align-items: center;21 justify-content: space-between;22 padding: 0 40px;23 box-sizing: border-box;24 }25 .header-title {26 font-size: 72px; font-weight: 700; letter-spacing: 1px;27 }28 .search-icon {29 width: 56px; height: 56px;30 }31 .search-icon svg { width: 100%; height: 100%; }32 33 /* Tabs */34 .tabs {35 height: 110px;36 background: #3a434d;37 display: flex;38 align-items: flex-end;39 gap: 140px;40 padding: 0 40px 0 40px;41 box-sizing: border-box;42 border-bottom: 1px solid rgba(255,255,255,0.08);43 }44 .tab {45 color: #cfd8dc;46 font-size: 44px;47 font-weight: 700;48 padding-bottom: 30px;49 }50 .tab.active {51 color: #ffffff;52 position: relative;53 }54 .tab.active::after {55 content: "";56 position: absolute;57 left: 0; bottom: 0;58 width: 220px; height: 6px;59 background: #5fd3cc;60 border-radius: 3px;61 }62 63 /* Main content */64 .content {65 position: absolute;66 top: 340px;67 left: 0; right: 0;68 bottom: 360px;69 }70 71 /* Wheel */72 .wheel {73 width: 980px; height: 980px;74 margin: 110px auto 0;75 position: relative; border-radius: 50%;76 background: conic-gradient(77 #37c6c4 0deg 36deg,78 #29bfc0 36deg 72deg,79 #43c9c7 72deg 108deg,80 #2fbec0 108deg 144deg,81 #48cbc9 144deg 180deg,82 #30bfc0 180deg 216deg,83 #46c9c7 216deg 252deg,84 #29bcc0 252deg 288deg,85 #41c8c6 288deg 324deg,86 #2abec1 324deg 360deg87 );88 }89 .wheel .center {90 position: absolute;91 width: 430px; height: 430px;92 top: 50%; left: 50%;93 transform: translate(-50%, -50%);94 background: #2a3238;95 border-radius: 50%;96 display: flex; align-items: center; justify-content: center;97 text-align: center; padding: 30px; box-sizing: border-box;98 font-size: 46px; line-height: 1.25; font-weight: 700; color: #ffffff;99 }100 101 .slice-label {102 position: absolute;103 width: 200px;104 display: flex;105 flex-direction: column;106 align-items: center;107 text-align: center;108 color: #ffffff;109 gap: 18px;110 font-size: 34px;111 font-weight: 700;112 filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2));113 }114 .slice-label .icon {115 width: 86px; height: 86px;116 }117 .slice-label svg { width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }118 119 /* Positions around the wheel */120 .label-sleep { top: 110px; left: 390px; }121 .label-bigevent { top: 170px; left: 240px; }122 .label-sos { top: 190px; left: 740px; }123 .label-walking { top: 380px; left: 820px; }124 .label-morning { top: 600px; left: 780px; }125 .label-afterwork { top: 760px; left: 620px; }126 .label-break { top: 800px; left: 420px; }127 .label-atwork { top: 700px; left: 230px; }128 .label-toughday { top: 520px; left: 140px; }129 .label-commute { top: 360px; left: 190px; }130 131 /* Minutes selector */132 .minutes {133 position: absolute;134 left: 0; right: 0;135 bottom: 210px;136 display: flex; justify-content: center; align-items: center;137 gap: 42px;138 font-size: 44px; font-weight: 800; letter-spacing: 2px;139 color: #ffffff;140 }141 .pill {142 width: 78px; height: 78px; border-radius: 50%;143 background: #3b4a53; display: flex; align-items: center; justify-content: center;144 font-size: 42px; font-weight: 800; color: #d8e0e3;145 }146 147 /* Bottom navigation */148 .bottom-nav {149 position: absolute; left: 0; right: 0; bottom: 0;150 height: 180px; background: #2f393f;151 display: flex; justify-content: space-around; align-items: center;152 box-shadow: 0 -2px 6px rgba(0,0,0,0.2);153 }154 .nav-item {155 width: 200px; display: flex; flex-direction: column; align-items: center; gap: 18px;156 color: #cfd8dc; font-size: 34px; font-weight: 700;157 }158 .nav-item.active { color: #ffffff; }159 .nav-icon { width: 76px; height: 76px; }160 .nav-icon svg { width: 100%; height: 100%; stroke: #cfd8dc; fill: none; stroke-width: 5; }161 .nav-item.active .nav-icon svg { stroke: #ffffff; }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Header -->168 <div class="header">169 <div class="header-title">Meditate</div>170 <div class="search-icon">171 <svg viewBox="0 0 24 24">172 <circle cx="11" cy="11" r="7"></circle>173 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>174 </svg>175 </div>176 </div>177 178 <!-- Tabs -->179 <div class="tabs">180 <div class="tab active">ON THE GO</div>181 <div class="tab">SERIES</div>182 <div class="tab">TEACHERS</div>183 </div>184 185 <!-- Content -->186 <div class="content">187 <div class="wheel">188 <!-- Labels around the wheel -->189 <div class="slice-label label-bigevent">190 <div class="icon">191 <svg viewBox="0 0 24 24">192 <rect x="3" y="6" width="18" height="14" rx="2"></rect>193 <line x1="7" y1="3" x2="7" y2="6"></line>194 <line x1="17" y1="3" x2="17" y2="6"></line>195 <rect x="8" y="10" width="8" height="6"></rect>196 </svg>197 </div>198 <div>Big Event</div>199 </div>200 201 <div class="slice-label label-sleep">202 <div class="icon">203 <svg viewBox="0 0 24 24">204 <rect x="3" y="11" width="18" height="6" rx="1"></rect>205 <rect x="5" y="8" width="8" height="3" rx="1"></rect>206 </svg>207 </div>208 <div>Sleep</div>209 </div>210 211 <div class="slice-label label-sos">212 <div class="icon">213 <svg viewBox="0 0 24 24">214 <circle cx="12" cy="12" r="9"></circle>215 <line x1="12" y1="7" x2="12" y2="13"></line>216 <circle cx="12" cy="17" r="1.5"></circle>217 </svg>218 </div>219 <div>SOS</div>220 </div>221 222 <div class="slice-label label-walking">223 <div class="icon">224 <svg viewBox="0 0 24 24">225 <circle cx="12" cy="5" r="2"></circle>226 <path d="M10 8 l4 2 l-2 3 l3 5"></path>227 <path d="M9 10 l-3 4"></path>228 </svg>229 </div>230 <div>Walking</div>231 </div>232 233 <div class="slice-label label-morning">234 <div class="icon">235 <svg viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="3"></circle>237 <line x1="12" y1="3" x2="12" y2="7"></line>238 <line x1="3" y1="12" x2="7" y2="12"></line>239 <line x1="17" y1="12" x2="21" y2="12"></line>240 <line x1="6" y1="6" x2="9" y2="9"></line>241 <line x1="15" y1="15" x2="18" y2="18"></line>242 </svg>243 </div>244 <div>Morning</div>245 </div>246 247 <div class="slice-label label-afterwork">248 <div class="icon">249 <svg viewBox="0 0 24 24">250 <path d="M5 12 L12 6 L19 12"></path>251 <rect x="7" y="12" width="10" height="8"></rect>252 </svg>253 </div>254 <div>After Work</div>255 </div>256 257 <div class="slice-label label-break">258 <div class="icon">259 <svg viewBox="0 0 24 24">260 <rect x="4" y="9" width="12" height="9" rx="2"></rect>261 <path d="M16 11 h3 a2 2 0 0 1 0 4 h-3"></path>262 </svg>263 </div>264 <div>Taking A<br>Break</div>265 </div>266 267 <div class="slice-label label-atwork">268 <div class="icon">269 <svg viewBox="0 0 24 24">270 <rect x="5" y="9" width="14" height="9" rx="2"></rect>271 <rect x="8" y="5" width="8" height="4" rx="1"></rect>272 </svg>273 </div>274 <div>At Work</div>275 </div>276 277 <div class="slice-label label-toughday">278 <div class="icon">279 <svg viewBox="0 0 24 24">280 <circle cx="12" cy="12" r="8"></circle>281 <circle cx="9" cy="10" r="1.2"></circle>282 <circle cx="15" cy="10" r="1.2"></circle>283 <line x1="9" y1="15" x2="15" y2="15"></line>284 </svg>285 </div>286 <div>Tough Day</div>287 </div>288 289 <div class="slice-label label-commute">290 <div class="icon">291 <svg viewBox="0 0 24 24">292 <rect x="4" y="6" width="16" height="10" rx="2"></rect>293 <circle cx="8" cy="17" r="1.8"></circle>294 <circle cx="16" cy="17" r="1.8"></circle>295 </svg>296 </div>297 <div>Commute</div>298 </div>299 300 <div class="center">What are you doing?</div>301 </div>302 303 <!-- Minutes selector -->304 <div class="minutes">305 <div>I HAVE</div>306 <div class="pill">5</div>307 <div>10</div>308 <div>20</div>309 <div>MINUTES</div>310 </div>311 </div>312 313 <!-- Bottom Navigation -->314 <div class="bottom-nav">315 <div class="nav-item active">316 <div class="nav-icon">317 <svg viewBox="0 0 24 24">318 <circle cx="12" cy="12" r="10"></circle>319 <path d="M10 8 L16 12 L10 16 Z" fill="#ffffff" stroke="none"></path>320 </svg>321 </div>322 <div>Meditate</div>323 </div>324 <div class="nav-item">325 <div class="nav-icon">326 <svg viewBox="0 0 24 24">327 <circle cx="12" cy="8" r="3"></circle>328 <path d="M5 20 a7 7 0 0 1 14 0" ></path>329 </svg>330 </div>331 <div>Me</div>332 </div>333 <div class="nav-item">334 <div class="nav-icon">335 <svg viewBox="0 0 24 24">336 <circle cx="6" cy="12" r="1.8"></circle>337 <circle cx="12" cy="12" r="1.8"></circle>338 <circle cx="18" cy="12" r="1.8"></circle>339 </svg>340 </div>341 <div>More</div>342 </div>343 </div>344 345</div>346</body>347</html>