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">6<title>Profile UI</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: #222;17 box-sizing: border-box;18 }19 20 /* Status bar */21 .statusbar {22 height: 120px;23 padding: 30px 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #333;28 font-size: 36px;29 }30 .status-right { display: flex; align-items: center; gap: 26px; }31 .sb-dot { width: 12px; height: 12px; background:#666; border-radius:50%; }32 .icon {33 width: 38px; height: 38px;34 }35 36 /* Page header */37 .page-header {38 padding: 10px 56px 0 56px;39 }40 .title-row {41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .title-row h1 {46 margin: 0;47 font-size: 64px;48 font-weight: 700;49 letter-spacing: 0.2px;50 }51 .header-actions { display:flex; align-items:center; gap:36px; }52 .gear {53 width: 72px; height: 72px; border: 2px solid #111; border-radius: 50%;54 position: relative;55 }56 .gear::before, .gear::after {57 content: "";58 position: absolute;59 left: 50%; top: 50%;60 width: 26px; height: 26px;61 border: 2px solid #111; border-radius: 50%;62 transform: translate(-50%, -50%);63 background: #fff;64 }65 .bubble {66 position: relative;67 width: 88px; height: 64px;68 border: 2px solid #111; border-radius: 18px;69 display: flex; align-items: center; justify-content: center;70 font-size: 40px; font-weight: 600;71 }72 .bubble::after {73 content: "";74 position: absolute;75 right: 12px;76 bottom: -14px;77 border-width: 14px 10px 0 10px;78 border-style: solid;79 border-color: #111 transparent transparent transparent;80 }81 82 /* Profile info */83 .profile-row {84 margin-top: 36px;85 display: flex;86 align-items: center;87 gap: 28px;88 }89 .avatar {90 width: 120px; height: 120px;91 background: #0A8B79;92 border-radius: 50%;93 display: flex; align-items: center; justify-content: center;94 color: #fff; font-size: 56px; font-weight: 700;95 }96 .name { font-size: 42px; color: #333; }97 98 /* Tabs */99 .tabs {100 margin-top: 48px;101 border-bottom: 1px solid #E6E6E6;102 display: flex; gap: 48px;103 padding: 0 56px;104 }105 .tab {106 padding: 28px 0;107 font-size: 34px;108 color: #777;109 }110 .tab.active { color: #111; position: relative; }111 .tab.active::after {112 content: "";113 position: absolute;114 left: 0; bottom: -2px; width: 100px; height: 5px; background: #333;115 }116 117 /* Sub tabs */118 .subtabs {119 display: flex; gap: 36px;120 padding: 24px 56px;121 color: #888;122 font-size: 32px;123 }124 .chip {125 padding: 16px 26px;126 border-radius: 20px;127 }128 .chip.active {129 color: #C24E77;130 border: 2px solid #E7B5C4;131 background: #ffffff;132 }133 134 /* Stats grid */135 .stats {136 margin-top: 20px;137 padding: 0 32px;138 display: grid;139 grid-template-columns: 1fr 1fr;140 grid-auto-rows: 420px;141 gap: 0;142 }143 .stat {144 border: 1px solid #EAEAEA;145 display: flex; flex-direction: column;146 align-items: center; justify-content: center;147 text-align: center;148 padding: 20px;149 }150 .stat .value {151 font-size: 110px; font-weight: 700; color: #333; line-height: 1;152 margin-bottom: 24px;153 }154 .stat .label {155 font-size: 36px; color: #555;156 max-width: 80%;157 }158 159 .section-title {160 font-size: 44px; font-weight: 600; color: #333;161 margin: 52px 56px;162 }163 164 /* Bottom navigation */165 .bottom-bar {166 position: absolute; left: 24px; right: 24px; bottom: 120px;167 height: 150px;168 background: #fff;169 border: 1px solid #ECECEC;170 border-radius: 48px;171 box-shadow: 0 10px 30px rgba(0,0,0,0.08);172 display: flex; align-items: center; justify-content: space-around;173 padding: 0 26px;174 }175 .nav-item { display:flex; flex-direction: column; align-items:center; gap: 10px; color:#8A8A8A; font-size: 30px; }176 .nav-item.active { color: #D57995; }177 .home-indicator {178 position: absolute; bottom: 40px; left: 50%;179 transform: translateX(-50%);180 width: 240px; height: 12px; background: #D0D0D0; border-radius: 6px;181 }182 183 /* Simple icons for bottom bar */184 .nav-icon { width: 44px; height: 44px; }185 .icon-stroke { stroke: currentColor; fill: none; stroke-width: 3; }186 .icon-fill { fill: currentColor; }187</style>188</head>189<body>190<div id="render-target">191 <!-- Status bar -->192 <div class="statusbar">193 <div>8:05</div>194 <div class="status-right">195 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#bbb"/></svg>196 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#bbb"/></svg>197 <svg class="icon" viewBox="0 0 24 24"><path d="M4 18h16M4 12h16M4 6h16" stroke="#bbb" stroke-width="2"/></svg>198 <div class="sb-dot"></div>199 <svg class="icon" viewBox="0 0 24 24"><path d="M3 16l9-12 9 12H3z" fill="#777"/></svg>200 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="#777"/></svg>201 </div>202 </div>203 204 <!-- Page header -->205 <div class="page-header">206 <div class="title-row">207 <h1>Profile</h1>208 <div class="header-actions">209 <div class="gear"></div>210 <div class="bubble">?</div>211 </div>212 </div>213 214 <div class="profile-row">215 <div class="avatar">J</div>216 <div class="name">Janedbw Persona-test</div>217 </div>218 219 <div class="tabs">220 <div class="tab active">My Stats</div>221 <div class="tab">Compare</div>222 <div class="tab">Mood Check-in</div>223 <div class="tab">Favourites</div>224 </div>225 226 <div class="subtabs">227 <div class="chip active">Last 7 Days</div>228 <div class="chip">Last 30 Days</div>229 <div class="chip">Last 90 Days</div>230 <div class="chip">Total</div>231 </div>232 </div>233 234 <!-- Stats grid -->235 <div class="stats">236 <div class="stat">237 <div class="value">2</div>238 <div class="label">Total Meditations Completed</div>239 </div>240 <div class="stat">241 <div class="value">35</div>242 <div class="label">Total Mindful Minutes</div>243 </div>244 <div class="stat">245 <div class="value">5</div>246 <div class="label">Daily Avg. Mindful Minutes</div>247 </div>248 <div class="stat">249 <div class="value">20</div>250 <div class="label">Longest Meditation (in minutes)</div>251 </div>252 <div class="stat">253 <div class="value">0</div>254 <div class="label">Live Sessions Attended</div>255 </div>256 <div class="stat">257 <div class="label" style="font-size:32px; color:#999;"> </div>258 </div>259 </div>260 261 <div class="section-title">My Meditation History</div>262 263 <!-- Bottom navigation bar -->264 <div class="bottom-bar">265 <div class="nav-item">266 <svg class="nav-icon" viewBox="0 0 24 24"><path class="icon-stroke" d="M3 10l9-7 9 7v10H3z"/><path class="icon-stroke" d="M9 20v-6h6v6"/></svg>267 <div>Home</div>268 </div>269 <div class="nav-item">270 <svg class="nav-icon" viewBox="0 0 24 24"><circle class="icon-stroke" cx="11" cy="11" r="7"/><path class="icon-stroke" d="M20 20l-4-4"/></svg>271 <div>Discover</div>272 </div>273 <div class="nav-item">274 <svg class="nav-icon" viewBox="0 0 24 24"><rect class="icon-stroke" x="4" y="5" width="16" height="12" rx="2"/><path class="icon-stroke" d="M10 9l5 3-5 3"/></svg>275 <div>Live Events</div>276 </div>277 <div class="nav-item">278 <svg class="nav-icon" viewBox="0 0 24 24"><circle class="icon-stroke" cx="12" cy="8" r="4"/><path class="icon-stroke" d="M4 21c2-4 6-6 8-6s6 2 8 6"/></svg>279 <div>Self Practice</div>280 </div>281 <div class="nav-item active">282 <svg class="nav-icon" viewBox="0 0 24 24"><circle class="icon-stroke" cx="12" cy="8" r="4"/><path class="icon-stroke" d="M4 21c2-4 6-6 8-6s6 2 8 6"/></svg>283 <div>Profile</div>284 </div>285 </div>286 287 <div class="home-indicator"></div>288</div>289</body>290</html>