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>Home Workout 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: #f4f6f8;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #1c1c1c;17 }18 19 /* Header */20 .header {21 position: relative;22 height: 660px;23 background: linear-gradient(180deg, #4f8cf9 0%, #2b65f3 100%);24 color: #fff;25 border-bottom-left-radius: 36px;26 border-bottom-right-radius: 36px;27 overflow: hidden;28 }29 .status-bar {30 display: flex;31 justify-content: space-between;32 align-items: center;33 padding: 24px 32px 0 32px;34 font-size: 28px;35 opacity: 0.95;36 }37 .status-left, .status-right {38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .status-left span, .status-right span { display: inline-flex; align-items: center; }43 .status-icon { width: 32px; height: 32px; fill: #fff; opacity: 0.95; }44 45 .header-content {46 padding: 24px 40px 0 40px;47 }48 .title {49 font-weight: 900;50 font-size: 64px;51 letter-spacing: 1px;52 margin-top: 52px;53 }54 .gift {55 position: absolute;56 top: 200px;57 right: 34px;58 width: 86px;59 height: 86px;60 border-radius: 18px;61 background: rgba(255,255,255,0.2);62 display: flex;63 align-items: center;64 justify-content: center;65 }66 .gift-badge {67 position: absolute;68 bottom: -6px;69 right: -6px;70 background: #2b65f3;71 color: #fff;72 border-radius: 16px;73 padding: 2px 10px;74 font-size: 22px;75 border: 2px solid #fff;76 }77 78 .stats {79 display: flex;80 justify-content: space-between;81 padding: 80px 70px 0 70px;82 }83 .stat {84 text-align: center;85 width: 300px;86 }87 .stat .value {88 font-size: 84px;89 font-weight: 800;90 line-height: 1;91 }92 .stat .label {93 margin-top: 10px;94 font-size: 28px;95 letter-spacing: 2px;96 opacity: 0.85;97 }98 99 /* Week Goal card */100 .week-card {101 position: relative;102 margin: -40px 40px 24px 40px;103 background: #ffffff;104 height: 340px;105 border-radius: 36px;106 box-shadow: 0 10px 26px rgba(20, 38, 90, 0.15);107 padding: 28px 32px;108 }109 .week-header {110 display: flex;111 align-items: center;112 justify-content: space-between;113 }114 .week-title {115 font-size: 40px;116 font-weight: 800;117 letter-spacing: 1px;118 }119 .week-title svg { width: 28px; height: 28px; margin-left: 12px; vertical-align: middle; }120 .week-progress {121 position: absolute;122 left: 24px;123 right: 24px;124 top: 110px;125 height: 180px;126 border-radius: 24px;127 background: #F1F3F6;128 border: 1px solid #D6D9DE;129 display: flex;130 align-items: center;131 justify-content: center;132 color: #7a8594;133 font-size: 34px;134 }135 .week-qty {136 color: #2b65f3;137 font-size: 34px;138 font-weight: 800;139 }140 141 /* Section titles */142 .section {143 padding: 18px 40px;144 }145 .section .section-title {146 font-size: 40px;147 font-weight: 900;148 color: #686e77;149 text-transform: uppercase;150 letter-spacing: 1px;151 }152 153 /* Image cards */154 .card {155 position: relative;156 margin: 16px 40px;157 height: 300px;158 border-radius: 28px;159 overflow: hidden;160 background: #E0E0E0;161 border: 1px solid #BDBDBD;162 display: flex;163 align-items: center;164 justify-content: center;165 color: #757575;166 font-size: 34px;167 }168 .card .img-label {169 position: relative;170 z-index: 1;171 }172 .card .text-overlay {173 position: absolute;174 left: 28px;175 bottom: 26px;176 color: #fff;177 font-weight: 900;178 text-shadow: 0 2px 8px rgba(0,0,0,0.35);179 line-height: 1.15;180 }181 .overlay-title { font-size: 54px; }182 .overlay-sub { font-size: 34px; opacity: 0.95; }183 184 /* Bottom navigation */185 .nav-bar {186 position: absolute;187 left: 0;188 right: 0;189 bottom: 0;190 height: 180px;191 background: #ffffff;192 border-top: 1px solid #e5e7eb;193 display: flex;194 align-items: center;195 justify-content: space-around;196 z-index: 5;197 }198 .nav-item {199 display: flex;200 flex-direction: column;201 align-items: center;202 gap: 12px;203 color: #7a8594;204 font-size: 28px;205 }206 .nav-item svg { width: 46px; height: 46px; }207 .nav-item.active { color: #2b65f3; }208 .nav-item.active svg { fill: #2b65f3; }209 .home-indicator {210 position: absolute;211 bottom: 12px;212 left: 50%;213 transform: translateX(-50%);214 width: 320px;215 height: 10px;216 border-radius: 6px;217 background: rgba(0,0,0,0.8);218 z-index: 6;219 }220</style>221</head>222<body>223<div id="render-target">224 <!-- Gradient Header -->225 <div class="header">226 <div class="status-bar">227 <div class="status-left">228 <span style="font-weight:700;">2:00</span>229 <span>230 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 6h12v2H3v-2zm0 6h18v2H3v-2z"/></svg>231 </span>232 <span>83°</span>233 <span>234 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 110 12A6 6 0 0112 6z"/></svg>235 </span>236 <span style="opacity:.8;">Calm</span>237 <span style="font-size: 36px; line-height: 1;">•</span>238 </div>239 <div class="status-right">240 <span>241 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 8l10 10L22 8" fill="none" stroke="#fff" stroke-width="2"/></svg>242 </span>243 <span>244 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 7h18v10H3z" fill="none" stroke="#fff" stroke-width="2"/><rect x="4" y="8" width="12" height="8" fill="#fff"/></svg>245 </span>246 </div>247 </div>248 249 <div class="header-content">250 <div class="title">HOME WORKOUT</div>251 252 <div class="gift">253 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">254 <path d="M4 8h16v3H4V8zm0 5h7v7H4v-7zm9 0h7v7h-7v-7zM8 6a2 2 0 104-0c0-1.1-0.9-2-2-2S8 4.9 8 6zm8 0a2 2 0 10-4 0 2 2 0 004 0z"/>255 </svg>256 <div class="gift-badge">AD</div>257 </div>258 259 <div class="stats">260 <div class="stat">261 <div class="value">0</div>262 <div class="label">WORKOUT</div>263 </div>264 <div class="stat">265 <div class="value">0</div>266 <div class="label">KCAL</div>267 </div>268 <div class="stat">269 <div class="value">0</div>270 <div class="label">MINUTE</div>271 </div>272 </div>273 </div>274 </div>275 276 <!-- Week Goal Card -->277 <div class="week-card">278 <div class="week-header">279 <div class="week-title">280 WEEK GOAL281 <svg viewBox="0 0 24 24" fill="#9aa3ad">282 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>283 </svg>284 </div>285 <div class="week-qty">0/4</div>286 </div>287 <div class="week-progress">[Progress / Calendar Placeholder]</div>288 </div>289 290 <!-- 7x4 Challenge Section -->291 <div class="section">292 <div class="section-title">7x4 Challenge</div>293 </div>294 295 <div class="card">296 <div class="img-label">[IMG: Gym - Full Body Training]</div>297 <div class="text-overlay">298 <div class="overlay-title">FULL BODY</div>299 <div class="overlay-sub">7x4 CHALLENGE</div>300 </div>301 </div>302 303 <div class="card">304 <div class="img-label">[IMG: Gym - Lower Body Workout]</div>305 <div class="text-overlay">306 <div class="overlay-title">LOWER BODY</div>307 <div class="overlay-sub">7x4 CHALLENGE</div>308 </div>309 </div>310 311 <!-- Beginner Section -->312 <div class="section" style="padding-top: 30px;">313 <div class="section-title">Beginner</div>314 </div>315 316 <div class="card">317 <div class="img-label">[IMG: Abs Beginner Exercise]</div>318 <div class="text-overlay">319 <div class="overlay-title">ABS BEGINNER</div>320 </div>321 </div>322 323 <!-- Bottom Navigation -->324 <div class="nav-bar">325 <div class="nav-item active">326 <svg viewBox="0 0 24 24" fill="#2b65f3">327 <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6C6.48 2 2 6.48 2 12h2a8 8 0 1116 0h2c0-5.52-4.48-10-10-10z"/>328 </svg>329 <div>Training</div>330 </div>331 <div class="nav-item">332 <svg viewBox="0 0 24 24" fill="#7a8594">333 <path d="M12 2l3 7h7l-5.5 4.2 2.1 7L12 16l-6.6 4.2 2.1-7L2 9h7z"/>334 </svg>335 <div>Discover</div>336 </div>337 <div class="nav-item">338 <svg viewBox="0 0 24 24" fill="#7a8594">339 <path d="M4 10h3v10H4V10zm6-4h3v14h-3V6zm6 7h3v7h-3v-7z"/>340 </svg>341 <div>Report</div>342 </div>343 <div class="nav-item">344 <svg viewBox="0 0 24 24" fill="#7a8594">345 <path d="M19.4 13a7.6 7.6 0 000-2l2-1.5-2-3.5-2.4 1a7.7 7.7 0 00-1.7-1L13 2h-4l-.3 2.5a7.7 7.7 0 00-1.7 1l-2.4-1L2.6 8l2 1.5a7.6 7.6 0 000 2L2.6 13l2 3.5 2.4-1c.5.4 1.1.8 1.7 1L9 22h4l.3-2.5c.6-.2 1.2-.6 1.7-1l2.4 1 2-3.5-2-1.5zM11 9h2v6h-2V9z"/>346 </svg>347 <div>Settings</div>348 </div>349 </div>350 <div class="home-indicator"></div>351</div>352</body>353</html>