GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Home Workout UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #333;26 font-size: 36px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 26px;32 }33 .status-dot {34 width: 14px; height: 14px; background: #333; border-radius: 50%;35 display: inline-block;36 }37 38 /* Page title */39 .title {40 font-weight: 800;41 font-size: 72px;42 letter-spacing: 0.5px;43 margin: 16px 56px 32px;44 }45 46 /* Stats row */47 .stats {48 display: flex;49 justify-content: space-between;50 margin: 0 56px 36px;51 }52 .stat {53 text-align: center;54 width: 300px;55 }56 .stat .value {57 font-size: 72px;58 font-weight: 800;59 line-height: 1.1;60 }61 .stat .label {62 margin-top: 6px;63 font-size: 28px;64 color: #333;65 letter-spacing: 1.4px;66 }67 68 /* Week goal card */69 .week-card {70 margin: 20px 40px 40px;71 background: #F6F6F8;72 border-radius: 42px;73 box-shadow: 0 8px 20px rgba(0,0,0,0.06);74 height: 280px;75 padding: 36px 40px;76 position: relative;77 }78 .week-card .header {79 display: flex;80 justify-content: space-between;81 align-items: center;82 }83 .week-card .header .text {84 font-size: 42px;85 font-weight: 800;86 color: #222;87 }88 .week-card .header .progress {89 font-size: 34px;90 color: #1E5AFF;91 font-weight: 700;92 }93 .week-days {94 margin-top: 28px;95 display: flex;96 gap: 26px;97 }98 .day-circle {99 width: 110px;100 height: 110px;101 border-radius: 55px;102 background: #ECEDEF;103 color: #777;104 border: 2px solid #E0E1E5;105 display: flex;106 align-items: center;107 justify-content: center;108 font-size: 42px;109 font-weight: 700;110 }111 112 /* Challenge cards scroller */113 .challenge-row {114 margin: 0 40px 32px;115 display: flex;116 gap: 28px;117 }118 .challenge-card {119 background: #1E5AFF;120 border-radius: 40px;121 width: 900px;122 height: 520px;123 position: relative;124 padding: 40px;125 box-shadow: 0 10px 22px rgba(30,90,255,0.25);126 color: #fff;127 }128 .challenge-card h2 {129 margin: 0;130 font-size: 62px;131 font-weight: 900;132 line-height: 1.05;133 letter-spacing: 0.5px;134 width: 560px;135 }136 .challenge-card p {137 margin: 24px 0 0;138 font-size: 32px;139 line-height: 1.4;140 opacity: 0.92;141 width: 620px;142 }143 .challenge-card .cta {144 position: absolute;145 left: 40px;146 bottom: 38px;147 width: 480px;148 height: 100px;149 border-radius: 60px;150 background: #fff;151 color: #1E5AFF;152 display: flex;153 align-items: center;154 justify-content: center;155 font-size: 40px;156 font-weight: 900;157 letter-spacing: 1px;158 }159 .challenge-card .img-placeholder {160 position: absolute;161 right: 28px;162 bottom: 24px;163 width: 460px;164 height: 420px;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 border-radius: 22px;168 display: flex;169 align-items: center;170 justify-content: center;171 color: #757575;172 font-size: 30px;173 text-align: center;174 padding: 16px;175 }176 177 /* Section header */178 .section-title {179 margin: 24px 56px 20px;180 font-size: 52px;181 font-weight: 900;182 letter-spacing: 0.5px;183 }184 185 /* Beginner card */186 .beginner-card {187 margin: 0 40px;188 height: 420px;189 border-radius: 40px;190 overflow: hidden;191 position: relative;192 box-shadow: 0 8px 18px rgba(0,0,0,0.10);193 background: #000;194 }195 .beginner-card .img-cover {196 position: absolute;197 inset: 0;198 display: flex;199 align-items: center;200 justify-content: center;201 background: #E0E0E0;202 border: 1px solid #BDBDBD;203 color: #757575;204 font-size: 34px;205 }206 .beginner-card .overlay {207 position: absolute;208 inset: 0;209 background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.15) 100%);210 }211 .beginner-card .text-block {212 position: absolute;213 left: 40px;214 bottom: 40px;215 right: 40px;216 color: #fff;217 }218 .beginner-card .badge-row {219 position: absolute;220 left: 40px;221 top: 28px;222 display: flex;223 gap: 12px;224 }225 .bolt {226 width: 18px;227 height: 30px;228 transform: skewX(-10deg);229 background: #4F79FF;230 border-radius: 4px;231 opacity: 0.9;232 }233 .bolt.dim { background: #C9D2FF; opacity: 0.9; }234 .beginner-card .title {235 font-size: 56px;236 font-weight: 900;237 margin: 0 0 6px;238 }239 .beginner-card .subtitle {240 font-size: 32px;241 opacity: 0.9;242 }243 244 /* Bottom navigation */245 .bottom-nav {246 position: absolute;247 left: 0;248 right: 0;249 bottom: 120px;250 height: 190px;251 background: #FFFFFF;252 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);253 border-top-left-radius: 28px;254 border-top-right-radius: 28px;255 display: flex;256 align-items: center;257 justify-content: space-around;258 padding: 20px 0;259 }260 .nav-item {261 display: flex;262 flex-direction: column;263 align-items: center;264 gap: 16px;265 color: #777;266 width: 220px;267 }268 .nav-item.active { color: #1E5AFF; }269 .nav-label {270 font-size: 30px;271 font-weight: 700;272 }273 .nav-icon svg { width: 60px; height: 60px; }274 275 /* Home indicator */276 .home-indicator {277 position: absolute;278 bottom: 52px;279 left: 50%;280 transform: translateX(-50%);281 width: 300px;282 height: 18px;283 background: #111;284 border-radius: 10px;285 opacity: 0.9;286 }287</style>288</head>289<body>290<div id="render-target">291 292 <!-- Status bar -->293 <div class="status-bar">294 <div>1:37</div>295 <div class="status-icons">296 <div class="status-dot"></div>297 <div class="status-dot" style="width:22px;height:22px;"></div>298 <div class="status-dot"></div>299 <svg width="36" height="36" viewBox="0 0 24 24" fill="#555" xmlns="http://www.w3.org/2000/svg">300 <path d="M6 18h12l-1.5-10h-9L6 18zM9 4h6v2H9V4z"/>301 </svg>302 </div>303 </div>304 305 <!-- Title -->306 <div class="title">HOME WORKOUT</div>307 308 <!-- Stats -->309 <div class="stats">310 <div class="stat">311 <div class="value">0</div>312 <div class="label">WORKOUT</div>313 </div>314 <div class="stat">315 <div class="value">0</div>316 <div class="label">KCAL</div>317 </div>318 <div class="stat">319 <div class="value">0</div>320 <div class="label">MINUTE</div>321 </div>322 </div>323 324 <!-- Week Goal Card -->325 <div class="week-card">326 <div class="header">327 <div class="text">WEEK GOAL</div>328 <div class="progress">0/1</div>329 </div>330 <div class="week-days">331 <div class="day-circle">1</div>332 <div class="day-circle">2</div>333 <div class="day-circle">3</div>334 <div class="day-circle">4</div>335 <div class="day-circle">5</div>336 <div class="day-circle">6</div>337 </div>338 </div>339 340 <!-- Challenge Cards -->341 <div class="challenge-row">342 <div class="challenge-card">343 <h2>FULL BODY 7X4 CHALLENGE</h2>344 <p>Start your body-toning journey to target all muscle groups and build your dream body in 4 weeks!</p>345 <div class="cta">START</div>346 <div class="img-placeholder">[IMG: Fitness athlete torso on blue background]</div>347 </div>348 <div class="challenge-card" style="background:#49A8FF;">349 <h2>LOWER BODY CHALLENGE</h2>350 <p>In just 4 weeks, strengthen and sculpt your lower body step by step.</p>351 <div class="cta" style="color:#49A8FF;">START</div>352 <div class="img-placeholder">[IMG: Athlete lunging silhouette]</div>353 </div>354 </div>355 356 <!-- Beginner Section -->357 <div class="section-title">BEGINNER</div>358 359 <div class="beginner-card">360 <div class="img-cover">[IMG: Abs workout on floor]</div>361 <div class="overlay"></div>362 <div class="badge-row">363 <div class="bolt"></div>364 <div class="bolt dim"></div>365 <div class="bolt dim"></div>366 </div>367 <div class="text-block">368 <div class="title">ABS BEGINNER</div>369 <div class="subtitle">20 MINS • 16 EXERCISES</div>370 </div>371 </div>372 373 <!-- Bottom Navigation -->374 <div class="bottom-nav">375 <div class="nav-item active">376 <div class="nav-icon">377 <!-- Clock icon -->378 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">379 <circle cx="12" cy="12" r="9" fill="currentColor" opacity="0.15"/>380 <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>381 </svg>382 </div>383 <div class="nav-label">Training</div>384 </div>385 <div class="nav-item">386 <div class="nav-icon">387 <!-- Compass icon -->388 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">389 <circle cx="12" cy="12" r="9" fill="currentColor" opacity="0.12"/>390 <path d="M9 15l6-3-3-6-3 9z" fill="currentColor"/>391 </svg>392 </div>393 <div class="nav-label">Discover</div>394 </div>395 <div class="nav-item">396 <div class="nav-icon">397 <!-- Bar chart icon -->398 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">399 <rect x="4" y="12" width="4" height="6" fill="currentColor" opacity="0.4"/>400 <rect x="10" y="9" width="4" height="9" fill="currentColor" opacity="0.7"/>401 <rect x="16" y="6" width="4" height="12" fill="currentColor"/>402 </svg>403 </div>404 <div class="nav-label">Report</div>405 </div>406 <div class="nav-item">407 <div class="nav-icon">408 <!-- Gear icon -->409 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">410 <circle cx="12" cy="12" r="3" fill="currentColor"/>411 <path d="M12 2l2 2 3-1 1 3 3 1-1 3 2 2-2 2 1 3-3 1-1 3-3-1-2 2-2-2-3 1-1-3-3-1 1-3-2-2 2-2-1-3 3-1 1-3 3 1 2-2z"412 fill="currentColor" opacity="0.2"/>413 </svg>414 </div>415 <div class="nav-label">Settings</div>416 </div>417 </div>418 419 <!-- Home indicator -->420 <div class="home-indicator"></div>421 422</div>423</body>424</html>