GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Fitness Steps - Today</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", "Segoe UI", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: linear-gradient(180deg, #0d2149 0%, #112a58 60%, #183765 100%);15 border-radius: 40px;16 box-shadow: 0 40px 80px rgba(0,0,0,0.35);17 color: #fff;18 }19 20 /* Status bar */21 .status-bar {22 height: 110px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #dbe7ff;28 font-size: 38px;29 letter-spacing: 0.5px;30 opacity: 0.95;31 }32 .status-icons { display: flex; align-items: center; gap: 26px; }33 .status-icons svg { opacity: 0.9; }34 35 /* Header */36 .page-title {37 font-size: 72px;38 font-weight: 700;39 margin: 24px 48px 10px;40 }41 42 /* Floating check button */43 .check-fab {44 position: absolute;45 right: 48px;46 top: 170px;47 width: 120px;48 height: 120px;49 background: #45c06b;50 border-radius: 60px;51 box-shadow: 0 10px 24px rgba(0,0,0,0.35);52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .check-fab .dot {57 position: absolute;58 width: 22px;59 height: 22px;60 background: #ff3b4f;61 border-radius: 50%;62 right: 6px;63 top: 6px;64 border: 3px solid rgba(0,0,0,0.15);65 }66 67 /* Cards */68 .card {69 margin: 24px 36px;70 background: linear-gradient(180deg, rgba(34,58,109,0.95) 0%, rgba(34,58,109,0.8) 100%);71 border-radius: 40px;72 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);73 }74 75 /* Steps card */76 .steps-card {77 height: 940px;78 position: relative;79 padding: 50px 56px;80 }81 .big-steps {82 font-size: 180px;83 font-weight: 800;84 line-height: 1;85 letter-spacing: 2px;86 }87 .step-goal {88 font-size: 44px;89 color: #a9bbdb;90 margin-top: 10px;91 }92 .mini-icon {93 display: inline-block;94 vertical-align: middle;95 margin-left: 20px;96 }97 /* Pause bubble on steps card */98 .pause-bubble {99 position: absolute;100 right: 44px;101 top: 280px;102 width: 120px;103 height: 120px;104 border-radius: 60px;105 background: rgba(255,255,255,0.15);106 display: flex; align-items: center; justify-content: center;107 }108 109 /* Progress bar */110 .progress {111 width: 968px;112 height: 64px;113 border-radius: 32px;114 background: rgba(255,255,255,0.15);115 margin-top: 74px;116 position: relative;117 overflow: hidden;118 }119 .progress .fill {120 width: 9%;121 height: 100%;122 background: linear-gradient(90deg, #53d56d, #79e083);123 border-radius: 32px;124 }125 126 /* Stats row */127 .stats {128 margin-top: 110px;129 display: flex;130 justify-content: space-between;131 padding-right: 60px;132 }133 .stat {134 width: 300px;135 text-align: left;136 }137 .stat-top {138 display: flex;139 align-items: center;140 gap: 18px;141 margin-bottom: 20px;142 }143 .stat-value {144 font-size: 70px;145 font-weight: 700;146 }147 .stat-label {148 font-size: 34px;149 color: #a9bbdb;150 }151 152 /* Daily average card */153 .daily-card {154 height: 420px;155 padding: 40px 56px;156 }157 .daily-title {158 font-size: 48px; color: #c9d7f1;159 }160 .daily-title b { color: #ffffff; }161 .week {162 margin-top: 60px;163 display: flex;164 gap: 46px;165 align-items: center;166 }167 .day {168 width: 110px; height: 110px;169 border-radius: 55px;170 border: 5px solid rgba(255,255,255,0.2);171 display: flex; align-items: center; justify-content: center;172 position: relative;173 }174 .day .tick {175 position: absolute;176 width: 16px; height: 16px;177 background: #53d56d;178 border-radius: 8px;179 right: 10px; bottom: 10px;180 }181 .day-labels {182 display: flex; gap: 98px;183 margin-top: 22px;184 color: #92a8cf;185 font-size: 36px;186 padding-left: 6px;187 }188 189 /* Water tracker card */190 .water-card {191 height: 520px;192 padding: 40px 56px;193 position: relative;194 }195 .water-header {196 display: flex; align-items: center; justify-content: space-between;197 margin-bottom: 24px;198 }199 .water-title {200 display: flex; align-items: center; gap: 20px;201 font-size: 48px; font-weight: 700;202 }203 .water-desc {204 margin-top: 16px;205 font-size: 40px;206 color: #cbd9f3;207 line-height: 1.4;208 }209 .unlock-btn {210 margin-top: 60px;211 width: 640px; height: 120px;212 border-radius: 60px;213 background: #49cf78;214 color: #fff; font-weight: 800; font-size: 46px; text-transform: uppercase;215 display: flex; align-items: center; justify-content: center;216 gap: 22px;217 box-shadow: 0 14px 28px rgba(0,0,0,0.35);218 }219 220 /* Ad banner placeholder */221 .ad-banner {222 margin: 20px 0 0;223 height: 180px;224 padding: 0 36px;225 }226 .ad-inner {227 height: 100%;228 border-radius: 20px;229 background: #E0E0E0;230 border: 1px solid #BDBDBD;231 display: flex; align-items: center; justify-content: center;232 color: #757575; font-size: 42px;233 }234 235 /* Bottom navigation */236 .bottom-nav {237 position: absolute;238 bottom: 90px;239 left: 0; right: 0;240 height: 220px;241 padding: 0 60px;242 background: linear-gradient(180deg, rgba(34,58,109,0.95) 0%, rgba(34,58,109,0.85) 100%);243 display: flex; align-items: center; justify-content: space-between;244 border-top-left-radius: 36px;245 border-top-right-radius: 36px;246 }247 .nav-item {248 width: 200px;249 text-align: center;250 color: #cddaf4;251 font-size: 36px;252 }253 .nav-item.active { color: #9cf1b1; font-weight: 700; }254 .nav-icon {255 width: 92px; height: 92px; margin: 0 auto 14px; display: block;256 }257 258 /* Gesture bar */259 .gesture {260 position: absolute;261 bottom: 30px;262 left: 50%;263 transform: translateX(-50%);264 width: 300px; height: 16px;265 border-radius: 8px;266 background: rgba(255,255,255,0.6);267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div>4:34</div>276 <div class="status-icons">277 <!-- mail -->278 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">279 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#cfe0ff" stroke-width="2"></rect>280 <path d="M3 7l9 6 9-6" stroke="#cfe0ff" stroke-width="2" fill="none"></path>281 </svg>282 <!-- phone -->283 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">284 <path d="M6 3c2 0 3 3 3 3s-2 2-2 3 6 7 7 7 3-2 3-2 3 1 3 3-3 3-3 3c-9 0-14-9-14-14 0 0 0-3 3-3z" stroke="#cfe0ff" stroke-width="2"></path>285 </svg>286 <!-- temperature -->287 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">288 <rect x="8" y="3" width="6" height="12" rx="3" stroke="#cfe0ff" stroke-width="2"></rect>289 <circle cx="11" cy="18" r="3" stroke="#cfe0ff" stroke-width="2"></circle>290 </svg>291 <!-- dot -->292 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#cfe0ff"/></svg>293 <!-- wifi -->294 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">295 <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2"></path>296 <path d="M5 11c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2"></path>297 <path d="M8 14c3-2 5-2 8 0" stroke="#ffffff" stroke-width="2"></path>298 <circle cx="12" cy="18" r="2" fill="#ffffff"></circle>299 </svg>300 <!-- battery -->301 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">302 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#ffffff" stroke-width="2"></rect>303 <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>304 <path d="M9 9l-2 5h4l-2 4" stroke="#ffffff" stroke-width="2"></path>305 </svg>306 </div>307 </div>308 309 <div class="page-title">Today</div>310 311 <!-- floating check -->312 <div class="check-fab">313 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">314 <path d="M4 13l4 4 12-12" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>315 </svg>316 <div class="dot"></div>317 </div>318 319 <!-- Steps card -->320 <div class="card steps-card">321 <div class="big-steps">322 87323 <span class="mini-icon">324 <!-- tiny diagonal to mimic step indicator -->325 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">326 <path d="M6 16l12-8" stroke="#cfe0ff" stroke-width="3" stroke-linecap="round"></path>327 </svg>328 </span>329 </div>330 <div class="step-goal">/6000 Steps</div>331 332 <div class="pause-bubble">333 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">334 <rect x="6" y="5" width="4" height="14" fill="#e7efff" opacity="0.9"></rect>335 <rect x="14" y="5" width="4" height="14" fill="#e7efff" opacity="0.9"></rect>336 </svg>337 </div>338 339 <div class="progress">340 <div class="fill"></div>341 </div>342 343 <div class="stats">344 <!-- distance -->345 <div class="stat">346 <div class="stat-top">347 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">348 <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z" stroke="#ffd84a" stroke-width="2" fill="none"></path>349 <circle cx="12" cy="10" r="2.5" fill="#ffd84a"></circle>350 </svg>351 <div class="stat-value">0.06</div>352 </div>353 <div class="stat-label">Km</div>354 </div>355 <!-- calories -->356 <div class="stat">357 <div class="stat-top">358 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">359 <path d="M12 3c2 3 3 4 3 7a5 5 0 1 1-10 0c0-3 2-6 7-7z" fill="#ff9b4a"></path>360 </svg>361 <div class="stat-value">3.6</div>362 </div>363 <div class="stat-label">Calories</div>364 </div>365 <!-- walking time -->366 <div class="stat">367 <div class="stat-top">368 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">369 <circle cx="12" cy="12" r="9" stroke="#7fd4ff" stroke-width="2"></circle>370 <path d="M12 6v6l4 2" stroke="#7fd4ff" stroke-width="2"></path>371 </svg>372 <div class="stat-value">0h 0m</div>373 </div>374 <div class="stat-label">Walking Time</div>375 </div>376 </div>377 </div>378 379 <!-- Daily average -->380 <div class="card daily-card">381 <div class="daily-title">Daily average: <b>87</b></div>382 383 <div class="week">384 <div class="day"></div>385 <div class="day"></div>386 <div class="day"></div>387