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>Mobile UI Replica</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #121418;14 color: #E6EAF0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 22px;21 left: 32px;22 right: 32px;23 height: 72px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #E6EAF0;28 font-weight: 600;29 letter-spacing: 0.5px;30 }31 .sb-left {32 display: flex;33 align-items: center;34 gap: 18px;35 font-size: 40px;36 }37 .sb-right {38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .icon {43 width: 44px; height: 44px;44 }45 .icon svg { width: 100%; height: 100%; fill: none; stroke: #E6EAF0; stroke-width: 4; }46 47 /* Header actions (info + avatar) */48 .header-actions {49 position: absolute;50 top: 140px;51 right: 40px;52 display: flex;53 align-items: center;54 gap: 26px;55 }56 .circle-btn {57 width: 92px; height: 92px; border-radius: 50%;58 background: #2A2F36; border: 2px solid #2F343B;59 display: grid; place-items: center; color: #FFFFFF;60 font-size: 52px; font-weight: 600;61 }62 .circle-btn.info { background: #1F242A; }63 .circle-btn.avatar { background: #7B6259; }64 65 /* Main ring area */66 .ring-wrap {67 position: absolute;68 top: 330px;69 left: 270px;70 width: 540px;71 height: 540px;72 }73 .ring-center {74 position: absolute;75 inset: 0;76 display: grid;77 place-items: center;78 text-align: center;79 pointer-events: none;80 }81 .main-number {82 font-size: 160px;83 line-height: 1;84 color: #19D0A1;85 font-weight: 800;86 margin-top: 20px;87 }88 .sub-number {89 font-size: 64px;90 color: #8FB2FF;91 font-weight: 700;92 margin-top: 14px;93 }94 95 /* Labels under ring */96 .labels {97 position: absolute;98 top: 930px;99 width: 100%;100 display: flex;101 justify-content: center;102 gap: 160px;103 font-size: 48px;104 color: #CFE9E3;105 }106 .label-item {107 display: flex; align-items: center; gap: 18px; color: #CFE9E3;108 }109 .label-item.heart { color: #7DE8CF; }110 .label-item.steps { color: #8FB2FF; }111 .label-item svg { width: 56px; height: 56px; }112 113 /* Metric trio */114 .metrics {115 position: absolute;116 top: 1040px;117 left: 0; right: 0;118 display: flex; justify-content: center; gap: 180px;119 text-align: center;120 }121 .metric {122 color: #9FB6FF;123 }124 .metric .num { font-size: 72px; font-weight: 800; letter-spacing: 1px; }125 .metric .label { font-size: 40px; color: #B6C0D0; margin-top: 8px; }126 127 /* Cards */128 .card {129 position: absolute;130 left: 40px;131 right: 40px;132 background: #1A1F25;133 border-radius: 36px;134 box-shadow: 0 8px 24px rgba(0,0,0,0.35);135 padding: 40px 44px;136 color: #DDE3EA;137 }138 .card .title-row {139 display: flex; justify-content: space-between; align-items: center;140 }141 .card .title {142 font-size: 64px; font-weight: 700;143 }144 .card .chev {145 width: 54px; height: 54px;146 }147 .card .chev svg { width: 100%; height: 100%; stroke: #A9B1BC; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }148 .card .subtitle {149 margin-top: 10px; font-size: 40px; color: #96A1AF;150 }151 152 /* Daily goals card specifics */153 .daily { top: 1240px; height: 420px; }154 .achieved {155 margin-top: 60px;156 display: flex; align-items: baseline; gap: 16px;157 }158 .achieved .count {159 font-size: 72px; color: #7FA6FF; font-weight: 800;160 }161 .achieved .text { font-size: 40px; color: #8EA3B6; }162 .days-row {163 margin-top: 36px;164 display: flex; gap: 24px; align-items: center;165 }166 .day {167 width: 84px; height: 84px; border-radius: 50%;168 background: #172328; border: 4px solid #26343A; position: relative;169 }170 .day::after {171 content: ""; position: absolute; inset: 8px; border-radius: 50%;172 background: conic-gradient(#1AD1A3 0 20deg, transparent 20deg 360deg);173 }174 .day-labels {175 display: flex; gap: 52px; margin-top: 20px; margin-left: 10px;176 color: #7F8C98; font-size: 40px;177 }178 179 /* Weekly target card specifics */180 .weekly { top: 1710px; height: 520px; }181 .week-range { margin-top: 6px; font-size: 40px; color: #9AA6B5; }182 .progress-wrap {183 margin-top: 60px; display: flex; align-items: center; gap: 24px;184 }185 .progress-text { font-size: 72px; color: #1AD1A3; font-weight: 800; }186 .progress-bar {187 flex: 1; height: 20px; background: #1B2A2E; border-radius: 16px; overflow: hidden;188 }189 .progress-bar .fill { width: 28%; height: 100%; background: #2AD7A8; }190 .week-copy {191 margin-top: 46px; font-size: 44px; line-height: 1.4; color: #B9C5D2;192 max-width: 820px;193 }194 .aha {195 position: absolute; right: 48px; bottom: 44px;196 width: 180px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;197 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 20px;198 font-size: 34px;199 }200 201 /* Floating action button */202 .fab {203 position: absolute; right: 64px; bottom: 640px;204 width: 140px; height: 140px; border-radius: 50%;205 background: #2E3239; box-shadow: 0 10px 20px rgba(0,0,0,0.45);206 display: grid; place-items: center;207 }208 .plus-icon {209 width: 70px; height: 70px;210 }211 .plus-icon svg { width: 100%; height: 100%; }212 .plus-icon .blue { fill: #4C8BFF; }213 .plus-icon .red { fill: #FF5252; }214 .plus-icon .yellow { fill: #FFD54F; }215 .plus-icon .green { fill: #1AD1A3; }216 217 /* Bottom navigation */218 .bottom-nav {219 position: absolute; left: 0; right: 0; bottom: 110px;220 height: 130px; background: #161B20; display: flex; justify-content: space-around; align-items: center;221 box-shadow: 0 -8px 24px rgba(0,0,0,0.4);222 }223 .nav-item {224 display: flex; flex-direction: column; align-items: center; gap: 10px;225 color: #7895FF; font-size: 40px; font-weight: 700;226 }227 .nav-item .ni-icon { width: 64px; height: 64px; }228 .nav-item .ni-icon svg { width: 100%; height: 100%; stroke: #7895FF; stroke-width: 6; }229 .nav-item.inactive { color: #A0A9B6; }230 .nav-item.inactive .ni-icon svg { stroke: #A0A9B6; }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status Bar -->237 <div class="status-bar">238 <div class="sb-left">239 <div>11:42</div>240 <div class="icon">241 <svg viewBox="0 0 24 24">242 <path d="M3 19 L12 5 L21 19 Z" fill="none" stroke="#E6EAF0" stroke-width="2"></path>243 </svg>244 </div>245 </div>246 <div class="sb-right">247 <div class="icon">248 <svg viewBox="0 0 24 24">249 <path d="M4 10a8 8 0 0116 0" stroke-linecap="round"></path>250 <circle cx="12" cy="18" r="1.5" fill="#E6EAF0" stroke="none"></circle>251 </svg>252 </div>253 <div class="icon">254 <svg viewBox="0 0 24 24">255 <rect x="5" y="4" width="14" height="14" rx="3"></rect>256 <path d="M16 10 L20 14" stroke-linecap="round"></path>257 </svg>258 </div>259 <div class="icon">260 <svg viewBox="0 0 24 24">261 <rect x="3" y="6" width="18" height="12" rx="3"></rect>262 <rect x="18" y="8" width="2" height="8" rx="1" fill="#E6EAF0" stroke="none"></rect>263 </svg>264 </div>265 </div>266 </div>267 268 <!-- Info + Avatar -->269 <div class="header-actions">270 <div class="circle-btn info">i</div>271 <div class="circle-btn avatar">I</div>272 </div>273 274 <!-- Main Progress Ring -->275 <div class="ring-wrap">276 <svg width="540" height="540" viewBox="0 0 540 540">277 <!-- Outer base ring -->278 <circle cx="270" cy="270" r="230" stroke="#173430" stroke-width="40" fill="none" />279 <!-- Outer teal progress -->280 <circle cx="270" cy="270" r="230" stroke="#1AD1A3" stroke-width="40" fill="none"281 stroke-linecap="round" transform="rotate(-90 270 270)"282 stroke-dasharray="360 1445" />283 <!-- Inner base ring -->284 <circle cx="270" cy="270" r="190" stroke="#1E2A32" stroke-width="40" fill="none" />285 <!-- Inner blue progress -->286 <circle cx="270" cy="270" r="190" stroke="#8FB2FF" stroke-width="40" fill="none"287 stroke-linecap="round" transform="rotate(-90 270 270)"288 stroke-dasharray="820 1193" />289 </svg>290 <div class="ring-center">291 <div class="main-number">5</div>292 <div class="sub-number">2,511</div>293 </div>294 </div>295 296 <!-- Labels -->297 <div class="labels">298 <div class="label-item heart">299 <svg viewBox="0 0 24 24">300 <path d="M12 20 C10 17 5 14 5 9 A5 5 0 0112 8 A5 5 0 0119 9 C19 14 14 17 12 20Z" fill="none" stroke="#7DE8CF" stroke-width="2"></path>301 </svg>302 <span>Heart Pts</span>303 </div>304 <div class="label-item steps">305 <svg viewBox="0 0 24 24">306 <circle cx="8" cy="20" r="2" fill="#8FB2FF"></circle>307 <circle cx="16" cy="20" r="2" fill="#8FB2FF"></circle>308 <path d="M6 16 L10 10 L14 12 L18 8" stroke="#8FB2FF" stroke-width="2" stroke-linecap="round"></path>309 </svg>310 <span>Steps</span>311 </div>312 </div>313 314 <!-- Sub metrics -->315 <div class="metrics">316 <div class="metric">317 <div class="num">1,770</div>318 <div class="label">Cal</div>319 </div>320 <div class="metric">321 <div class="num">0</div>322 <div class="label">mi</div>323 </div>324 <div class="metric">325 <div class="num">36</div>326 <div class="label">Move Min</div>327 </div>328 </div>329 330 <!-- Daily goals card -->331 <div class="card daily">332 <div class="title-row">333 <div class="title">Your daily goals</div>334 <div class="chev">335 <svg viewBox="0 0 24 24"><path d="M8 5 L16 12 L8 19" /></svg>336 </div>337 </div>338 <div class="subtitle">Last 7 days</div>339 340 <div class="achieved">341 <div class="count">0/7</div>342 <div class="text">Achieved</div>343 </div>344 345 <div class="days-row">346 <div class="day"></div>347 <div class="day"></div>348 <div class="day"></div>349 <div class="day"></div>350 <div class="day"></div>351 <div class="day"></div>352 <div class="day"></div>353 </div>354 <div class="day-labels">355 <div>W</div><div>T</div><div>F</div><div>S</div><div>S</div><div>M</div><div>T</div>356 </div>357 </div>358 359 <!-- Weekly target card -->360 <div class="card weekly">361 <div class="title-row">362 <div class="title">Your weekly target</div>363 <div class="chev">364 <svg viewBox="0 0 24 24"><path d="M8 5 L16 12 L8 19" /></svg>365 </div>366 </div>367 <div class="week-range">Oct 1 – 7</div>368 369 <div class="progress-wrap">370 <div class="progress-text">5 of 150</div>371 <div class="progress-bar"><div class="fill"></div></div>372 </div>373 374 <div class="week-copy">375 Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood376 </div>377 378 <div class="aha">[IMG: American Heart Association]</div>379 </div>380 381 <!-- Floating action button -->382 <div class="fab">383 <div class="plus-icon">384 <svg viewBox="0 0 100 100">385 <rect class="blue" x="42" y="18" width="16" height="64" rx="8"></rect>386 <rect class="red" x="18" y="42" width="64" height="16" rx="8"></rect>387 <rect class="yellow" x="42" y="28" width="16" height="44" rx="8" opacity="0.5"></rect>388 <rect class="green" x="28" y="42" width="44" height="16" rx="8" opacity="0.5"></rect>389 </svg>390 </div>391 </div>392 393 <!-- Bottom navigation -->394 <div class="bottom-nav">395 <div class="nav-item">396 <div class="ni-icon">397 <svg viewBox="0 0 24 24"><path d="M3 12 L12 5 L21 12" /><path d="M5 11 V19 H19 V11" /></svg>398 </div>399 <div>Home</div>400 </div>401 <div class="nav-item inactive">402 <div class="ni-icon">403 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M8 9 H16" /></svg>404 </div>405 <div>Journal</div>406 </div>407 <div class="nav-item inactive">408 <div class="ni-icon">409 <svg viewBox="0 0 24 24"><path d="M4 7 H20" /><path d="M4 12 H20" /><path d="M4 17 H20" /></svg>410 </div>411 <div>Browse</div>412 </div>413 <div class="nav-item inactive">414 <div class="ni-icon">415 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20 C6 15 18 15 20 20" /></svg>416 </div>417 <div>Profile</div>418 </div>419 </div>420 421</div>422</body>423</html>