GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Dark Fitness App UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #121212;14 color: #E6E6E6;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 color: #F5F5F5;26 font-weight: 600;27 font-size: 42px;28 letter-spacing: 1px;29 display: flex;30 align-items: center;31 padding: 0 36px;32 }33 .status-right {34 margin-left: auto;35 display: flex;36 gap: 22px;37 align-items: center;38 }39 .sb-icon {40 width: 34px; height: 34px; border-radius: 50%;41 background: #2A2A2A;42 }43 44 /* Top small icons */45 .top-icons {46 position: absolute;47 top: 170px;48 right: 36px;49 display: flex;50 gap: 28px;51 align-items: center;52 }53 .circle-button {54 width: 64px; height: 64px; border-radius: 50%;55 background: #1E1E1E;56 border: 1px solid #2C2C2C;57 display: flex; align-items: center; justify-content: center;58 color: #A0A0A0; font-weight: 700;59 }60 61 /* Center rings */62 .rings {63 position: absolute;64 top: 260px;65 left: 50%;66 transform: translateX(-50%);67 width: 640px;68 height: 640px;69 border-radius: 50%;70 background: radial-gradient(closest-side, rgba(53,53,53,0.35), rgba(18,18,18,0) 70%);71 box-shadow:72 inset 0 0 0 3px rgba(130,130,130,0.12),73 inset 0 0 0 22px rgba(130,130,130,0.06);74 display: flex;75 align-items: center;76 justify-content: center;77 color: #B8B8B8;78 }79 .rings .main-zero {80 font-size: 140px;81 color: #BDBDBD;82 line-height: 1;83 text-align: center;84 }85 .rings .sub-zero {86 margin-top: -12px;87 font-size: 72px;88 color: #707070;89 }90 91 /* Heart Pts & Steps */92 .metrics-row {93 position: absolute;94 top: 900px;95 left: 0;96 width: 100%;97 display: flex;98 justify-content: center;99 gap: 120px;100 color: #9ED3AE;101 font-size: 46px;102 letter-spacing: .3px;103 }104 .metric {105 display: flex; align-items: center; gap: 18px;106 color: #98C7A7;107 }108 .metric svg { width: 40px; height: 40px; }109 110 /* Stats row */111 .stats {112 position: absolute;113 top: 980px;114 left: 0;115 width: 100%;116 display: flex;117 justify-content: space-evenly;118 text-align: center;119 }120 .stat {121 color: #E2E2E2;122 }123 .stat .value { font-size: 70px; font-weight: 700; }124 .stat .label { font-size: 40px; color: #8E8E8E; margin-top: 10px; }125 126 /* Card */127 .card {128 position: absolute;129 left: 36px;130 top: 1120px;131 width: 1008px;132 height: 170px;133 border-radius: 28px;134 background: #1A1A1A;135 box-shadow: 0 2px 0 rgba(0,0,0,0.5);136 padding: 32px;137 color: #DCDCDC;138 }139 .card-title {140 font-size: 56px; font-weight: 700;141 }142 .card-sub {143 margin-top: 10px;144 color: #7DA57D;145 font-size: 36px;146 }147 .card-foot {148 margin-top: 12px;149 color: #8E8E8E;150 font-size: 36px;151 }152 .card-arrow {153 position: absolute;154 right: 30px; top: 70px;155 width: 24px; height: 24px; border-right: 4px solid #6D6D6D; border-top: 4px solid #6D6D6D;156 transform: rotate(45deg);157 }158 159 /* Expanded FAB actions */160 .fab-item {161 position: absolute;162 right: 36px;163 display: flex;164 align-items: center;165 gap: 26px;166 color: #DADADA;167 font-size: 48px;168 }169 .fab-item .bubble {170 width: 120px; height: 120px; border-radius: 60px;171 background: #2D3B58;172 border: 3px solid #4B5A7A;173 display: flex; align-items: center; justify-content: center;174 }175 .fab-item svg { width: 60px; height: 60px; }176 177 .fab-bp { top: 1360px; }178 .fab-weight { top: 1560px; }179 .fab-activity { top: 1760px; }180 .fab-track { top: 1960px; }181 182 /* Close big bubble */183 .fab-close {184 position: absolute;185 right: 54px;186 bottom: 250px;187 width: 160px; height: 160px; border-radius: 80px;188 background: #2A2A2A;189 border: 3px solid #3A3A3A;190 display: flex; align-items: center; justify-content: center;191 }192 .fab-close:before, .fab-close:after {193 content: "";194 position: absolute;195 width: 80px; height: 4px; background: #DADADA;196 }197 .fab-close:before { transform: rotate(45deg); }198 .fab-close:after { transform: rotate(-45deg); }199 200 /* Weekly target placeholder card */201 .weekly-card {202 position: absolute;203 left: 36px;204 top: 1960px;205 width: 840px;206 height: 210px;207 border-radius: 26px;208 background: #161616;209 border: 1px solid #222;210 color: #8F8F8F;211 padding: 28px;212 }213 .weekly-card .title { font-size: 48px; color: #CFCFCF; }214 .weekly-card .subtitle { margin-top: 10px; font-size: 34px; }215 .weekly-card .progress {216 margin-top: 28px;217 width: 90%; height: 20px;218 background: #232323; border-radius: 12px;219 }220 221 /* Bottom navigation bar */222 .bottom-nav {223 position: absolute;224 bottom: 90px;225 left: 0; width: 100%;226 height: 160px;227 background: #141414;228 display: flex; justify-content: space-around; align-items: center;229 color: #AFAFAF;230 font-size: 34px;231 }232 .nav-item {233 display: flex; flex-direction: column; align-items: center; gap: 16px;234 }235 .nav-icon {236 width: 60px; height: 60px; border-radius: 16px; background: #222;237 border: 2px solid #2E2E2E;238 }239 .nav-item.active { color: #E0E0E0; }240 .gesture {241 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);242 width: 300px; height: 10px; border-radius: 8px; background: #EDEDED;243 opacity: 0.85;244 }245 246 /* Subtle separators / misc */247 .muted { color: #8E8E8E; }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div>8:09</div>256 <div class="status-right">257 <div class="sb-icon"></div>258 <div class="sb-icon"></div>259 <div class="sb-icon"></div>260 <div class="sb-icon"></div>261 <div class="sb-icon"></div>262 <div class="sb-icon"></div>263 </div>264 </div>265 266 <!-- Top info and avatar -->267 <div class="top-icons">268 <div class="circle-button">i</div>269 <div class="circle-button">V</div>270 </div>271 272 <!-- Central rings and numbers -->273 <div class="rings">274 <div style="text-align:center;">275 <div class="main-zero">0</div>276 <div class="sub-zero">0</div>277 </div>278 </div>279 280 <!-- Heart points & steps -->281 <div class="metrics-row">282 <div class="metric">283 <svg viewBox="0 0 24 24">284 <path fill="#8BC48A" d="M12 21s-7-4.35-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.65-7 9-11 9z"/>285 </svg>286 <div>Heart Pts</div>287 </div>288 <div class="metric" style="color:#9AB7D3;">289 <svg viewBox="0 0 24 24">290 <path fill="#9AB7D3" d="M8 3l2 2-2 3h8l-2-3 2-2H8zm-1 9l-3 9h4l2-5 2 5h4l-3-9H7z"/>291 </svg>292 <div>Steps</div>293 </div>294 </div>295 296 <!-- Stats -->297 <div class="stats">298 <div class="stat">299 <div class="value">1,350</div>300 <div class="label">Cal</div>301 </div>302 <div class="stat">303 <div class="value">0</div>304 <div class="label">mi</div>305 </div>306 <div class="stat">307 <div class="value">1</div>308 <div class="label">Move Min</div>309 </div>310 </div>311 312 <!-- Activity card -->313 <div class="card">314 <div class="card-title">Walking <span class="muted" style="font-size:40px; margin-left:12px;">Active</span></div>315 <div class="card-sub">Tap to see workout</div>316 <div class="card-arrow"></div>317 </div>318 319 <!-- Expanded FAB items -->320 <div class="fab-item fab-bp">321 <div>Add blood pressure</div>322 <div class="bubble">323 <!-- simple keyboard icon -->324 <svg viewBox="0 0 24 24">325 <rect x="3" y="7" width="18" height="10" rx="2" fill="#A8C0FF"/>326 <path d="M6 10h2M10 10h2M14 10h2M6 13h8" stroke="#334A91" stroke-width="2" stroke-linecap="round"/>327 </svg>328 </div>329 </div>330 331 <div class="fab-item fab-weight">332 <div>Add weight</div>333 <div class="bubble">334 <!-- scale icon -->335 <svg viewBox="0 0 24 24">336 <rect x="4" y="5" width="16" height="14" rx="3" fill="#A8C0FF"/>337 <circle cx="12" cy="10" r="3" fill="#334A91"/>338 </svg>339 </div>340 </div>341 342 <div class="fab-item fab-activity">343 <div>Add activity</div>344 <div class="bubble">345 <!-- pencil icon -->346 <svg viewBox="0 0 24 24">347 <path d="M3 17l2-6 10-7 4 4-7 10-6 2z" fill="#A8C0FF"/>348 <path d="M14 4l6 6" stroke="#334A91" stroke-width="2"/>349 </svg>350 </div>351 </div>352 353 <div class="fab-item fab-track">354 <div>Track workout</div>355 <div class="bubble">356 <!-- runner icon -->357 <svg viewBox="0 0 24 24">358 <circle cx="16" cy="5" r="3" fill="#A8C0FF"/>359 <path d="M8 12l5-3 2 4 3 2-2 4M8 12l-4 2 2 3" stroke="#334A91" stroke-width="2" fill="none" stroke-linecap="round"/>360 </svg>361 </div>362 </div>363 364 <!-- Close bubble -->365 <div class="fab-close"></div>366 367 <!-- Weekly target card placeholder -->368 <div class="weekly-card">369 <div class="title">Your weekly target</div>370 <div class="subtitle">Oct 15 – 21</div>371 <div class="progress"></div>372 </div>373 374 <!-- Bottom navigation -->375 <div class="bottom-nav">376 <div class="nav-item active">377 <div class="nav-icon"></div>378 <div>Home</div>379 </div>380 <div class="nav-item">381 <div class="nav-icon"></div>382 <div>Journal</div>383 </div>384 <div class="nav-item">385 <div class="nav-icon"></div>386 <div>Browse</div>387 </div>388 <div class="nav-item">389 <div class="nav-icon"></div>390 <div>Profile</div>391 </div>392 </div>393 394 <div class="gesture"></div>395 396</div>397</body>398</html>