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>Workout Plans UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0C0C1B;15 border-radius: 28px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 color: #EDEDF6;18 }19 20 .content { padding: 40px 36px 80px; }21 22 /* Top status line (time & small icons) */23 .status {24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: flex-end;28 gap: 18px;29 color: #D9D9E8;30 font-weight: 600;31 font-size: 28px;32 }33 .status .left { margin-right: auto; }34 .status-icon {35 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;36 opacity: 0.9;37 }38 39 /* Header */40 .header {41 display: flex; align-items: center; gap: 24px; margin-top: 8px;42 }43 .back {44 width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center;45 border-radius: 16px; background: rgba(255,255,255,0.06);46 }47 .title { font-size: 48px; font-weight: 700; letter-spacing: 0.2px; }48 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }49 .help {50 width: 64px; height: 64px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.25);51 display: flex; align-items: center; justify-content: center; color: #EDEDF6; font-weight: 700;52 background: rgba(255,255,255,0.05);53 }54 55 /* Primary actions */56 .actions { display: flex; gap: 24px; margin-top: 32px; }57 .btn {58 flex: 1; min-width: 0;59 height: 98px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 16px;60 font-size: 34px; font-weight: 600;61 }62 .btn-dark { background: rgba(255,255,255,0.08); color: #FFFFFF; }63 .btn-blue { background: #4F7CF5; color: #FFFFFF; }64 65 /* Plan selector */66 .hint { margin-top: 24px; color: #B7B7C9; font-size: 30px; }67 .plan-select {68 margin-top: 22px; height: 98px; border-radius: 20px; background: #4F7CF5; color: #fff;69 display: flex; align-items: center; padding: 0 24px; gap: 20px; font-size: 32px; font-weight: 700;70 }71 .plan-select .spacer { margin-left: auto; display: flex; align-items: center; gap: 18px; }72 .plan-note {73 margin-top: 16px; font-style: italic; color: #B7B7C9; font-size: 28px; display: flex; align-items: center; gap: 18px;74 }75 .checkbox {76 width: 44px; height: 44px; border-radius: 10px; border: 2px solid #7A7A91; display: inline-flex; align-items: center; justify-content: center;77 }78 79 /* Cards */80 .card {81 margin-top: 28px; border-radius: 26px; background: #1E2135; padding: 32px; position: relative;82 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);83 }84 .card.highlight { border: 3px solid #4F7CF5; }85 .card-header { display: flex; align-items: center; }86 .day { font-size: 36px; font-weight: 700; }87 .menu { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 8px; }88 .routine { margin-top: 10px; font-size: 34px; color: #EDEDF6; }89 90 .muscles {91 margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;92 }93 .muscle-group { display: flex; flex-direction: column; gap: 8px; }94 .muscle-label { font-size: 28px; font-weight: 700; color: #FFFFFF; }95 .img {96 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;97 display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 24px; text-align: center; padding: 6px;98 }99 100 .thumbs { margin-top: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }101 .thumb {102 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;103 display: flex; align-items: center; justify-content: center; border-radius: 18px; font-size: 22px; text-align: center; padding: 6px;104 }105 106 /* "Next workout" pill on Day 2 */107 .next-pill {108 position: absolute; top: -26px; left: 50%; transform: translateX(-50%);109 background: #4F7CF5; color: #fff; padding: 14px 28px; font-size: 30px; font-weight: 700; border-radius: 20px;110 box-shadow: 0 10px 18px rgba(79,124,245,0.35);111 }112 113 /* Green discount badge */114 .discount {115 position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px;116 background: #4CD964; color: #0E3A0E; padding: 14px 18px; border-radius: 20px; font-size: 30px; font-weight: 800;117 box-shadow: 0 8px 16px rgba(76,217,100,0.35);118 }119 .discount .time {120 background: #E9FBEF; color: #176B2C; font-weight: 800; padding: 6px 12px; border-radius: 12px; font-size: 28px;121 }122 .discount .clock {123 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;124 background: #E9FBEF; border-radius: 50%;125 }126 127 /* Floating star action */128 .floating {129 position: absolute; right: 24px; top: 24px; width: 84px; height: 84px; border-radius: 42px;130 background: #4F7CF5; display: flex; align-items: center; justify-content: center;131 box-shadow: 0 12px 24px rgba(79,124,245,0.35);132 }133 134 /* Add a day overlay */135 .add-day {136 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);137 background: rgba(0,0,0,0.75); color: #fff; border-radius: 18px; padding: 20px 30px; display: flex; align-items: center; gap: 14px;138 font-size: 34px; font-weight: 700;139 }140 141 /* Plan dropdown icons */142 .plan-icon {143 width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;144 background: rgba(255,255,255,0.18); border-radius: 12px;145 }146 147 /* Bottom home indicator */148 .home-indicator {149 position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);150 width: 240px; height: 10px; background: rgba(255,255,255,0.35); border-radius: 6px;151 }152</style>153</head>154<body>155<div id="render-target">156 <div class="content">157 <div class="status">158 <div class="left">7:56</div>159 <div class="status-icon">160 <svg width="36" height="36" viewBox="0 0 36 36"><rect x="8" y="10" width="18" height="16" rx="3" fill="#FFFFFF"/></svg>161 </div>162 <div class="status-icon">163 <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="12" stroke="#FFFFFF" stroke-width="3" fill="none"/></svg>164 </div>165 <div class="status-icon">166 <svg width="36" height="36" viewBox="0 0 36 36"><rect x="8" y="10" width="20" height="14" rx="3" fill="none" stroke="#FFFFFF" stroke-width="3"/><rect x="28" y="14" width="2" height="6" rx="1" fill="#FFFFFF"/></svg>167 </div>168 <div style="font-size:26px; opacity:0.8;">1%</div>169 </div>170 171 <div class="header">172 <div class="back">173 <svg width="48" height="48" viewBox="0 0 48 48">174 <path d="M30 10 L16 24 L30 38" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <div class="title">Workout Plans</div>178 <div class="header-actions">179 <div class="help">?</div>180 </div>181 </div>182 183 <div class="actions">184 <div class="btn btn-dark">185 <svg width="36" height="36" viewBox="0 0 36 36">186 <path d="M18 8 V28 M8 18 H28" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>187 </svg>188 <span>Empty Plan</span>189 </div>190 <div class="btn btn-blue">191 <svg width="40" height="40" viewBox="0 0 40 40">192 <path d="M20 6 L24 12 L20 18 L16 12 Z" fill="#fff" opacity="0.9"/>193 <path d="M10 22 L13 26 L10 30 L7 26 Z" fill="#fff" opacity="0.7"/>194 </svg>195 <span>AI Creator</span>196 </div>197 </div>198 199 <div class="hint">Please choose the workout plan you want to follow</div>200 201 <div class="plan-select">202 <span>4 Day Keep Fit-Full Gym Plan</span>203 <div class="spacer">204 <div class="plan-icon">205 <svg width="28" height="28" viewBox="0 0 28 28">206 <path d="M6 20 L12 14 L6 8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>207 <rect x="14" y="6" width="8" height="16" rx="3" fill="#fff" opacity="0.2"/>208 </svg>209 </div>210 <div class="plan-icon">211 <svg width="28" height="28" viewBox="0 0 28 28">212 <path d="M8 12 L14 18 L20 12" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>213 </svg>214 </div>215 </div>216 </div>217 218 <div class="plan-note">219 <span>"4 Day Keep Fit-Full Gym Plan" is your active...</span>220 <div class="checkbox">221 <svg width="28" height="28" viewBox="0 0 28 28">222 <path d="M6 14 L12 20 L22 8" stroke="#7AD76C" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 </div>226 227 <!-- Day 1 Card -->228 <div class="card">229 <div class="card-header">230 <div class="day">Day 1</div>231 <div class="menu">232 <svg width="30" height="30" viewBox="0 0 30 30">233 <circle cx="15" cy="7" r="3" fill="#AAB"/>234 <circle cx="15" cy="15" r="3" fill="#AAB"/>235 <circle cx="15" cy="23" r="3" fill="#AAB"/>236 </svg>237 </div>238 </div>239 <div class="routine">Chest-Triceps Routine</div>240 241 <div class="muscles">242 <div class="muscle-group">243 <div class="muscle-label">Chest</div>244 <div class="img">[IMG: Chest diagram]</div>245 </div>246 <div class="muscle-group">247 <div class="muscle-label">Triceps</div>248 <div class="img">[IMG: Triceps diagram]</div>249 </div>250 <div class="muscle-group">251 <div class="muscle-label">Shoulder</div>252 <div class="img">[IMG: Shoulder diagram]</div>253 </div>254 <div class="muscle-group">255 <div class="muscle-label" style="opacity:0.2;"> </div>256 <div class="img" style="opacity:0.0;"></div>257 </div>258 </div>259 260 <div class="thumbs" style="grid-template-columns: repeat(8, 120px);">261 <div class="thumb">[IMG: Exercise]</div>262 <div class="thumb">[IMG: Exercise]</div>263 <div class="thumb">[IMG: Exercise]</div>264 <div class="thumb">[IMG: Exercise]</div>265 <div class="thumb">[IMG: Exercise]</div>266 <div class="thumb">[IMG: Exercise]</div>267 <div class="thumb">[IMG: Exercise]</div>268 <div class="thumb">[IMG: Exercise]</div>269 </div>270 </div>271 272 <!-- Day 2 Card -->273 <div class="card highlight" style="margin-top: 34px;">274 <div class="next-pill">Next workout</div>275 276 <div class="card-header">277 <div class="day">Day 2</div>278 <div class="menu">279 <svg width="30" height="30" viewBox="0 0 30 30">280 <circle cx="15" cy="7" r="3" fill="#AAB"/>281 <circle cx="15" cy="15" r="3" fill="#AAB"/>282 <circle cx="15" cy="23" r="3" fill="#AAB"/>283 </svg>284 </div>285 </div>286 <div class="routine">Back-Biceps Routine</div>287 288 <div style="display:flex; gap: 28px; align-items:flex-start; margin-top: 18px; flex-wrap: wrap;">289 <div class="muscle-group">290 <div class="muscle-label">Biceps</div>291 <div class="img">[IMG: Biceps diagram]</div>292 </div>293 <div class="muscle-group">294 <div class="muscle-label">Lats</div>295 <div class="img">[IMG: Lats diagram]</div>296 </div>297 <div class="muscle-group">298 <div class="muscle-label">Forearms</div>299 <div class="img">[IMG: Forearms diagram]</div>300 </div>301 <div class="muscle-group">302 <div class="muscle-label">Shoulder</div>303 <div class="img">[IMG: Shoulder diagram]</div>304 </div>305 <div class="muscle-group">306 <div class="muscle-label">Traps</div>307 <div class="img">[IMG: Traps diagram]</div>308 </div>309 </div>310 311 <div class="thumbs" style="grid-template-columns: repeat(9, 120px); margin-top: 18px;">312 <div class="thumb">[IMG: Exercise]</div>313 <div class="thumb">[IMG: Exercise]</div>314 <div class="thumb">[IMG: Exercise]</div>315 <div class="thumb">[IMG: Exercise]</div>316 <div class="thumb">[IMG: Exercise]</div>317 <div class="thumb">[IMG: Exercise]</div>318 <div class="thumb">[IMG: Exercise]</div>319 <div class="thumb">[IMG: Exercise]</div>320 <div class="thumb">[IMG: Exercise]</div>321 </div>322 323 <div class="discount">324 <div class="clock">325 <svg width="24" height="24" viewBox="0 0 24 24">326 <circle cx="12" cy="12" r="9" stroke="#176B2C" stroke-width="2" fill="none"/>327 <path d="M12 12 L12 6 M12 12 L16 14" stroke="#176B2C" stroke-width="2" stroke-linecap="round"/>328 </svg>329 </div>330 <span>50% discount!</span>331 <div class="time">04:20</div>332 </div>333 </div>334 335 <!-- Day 3 Card -->336 <div class="card" style="margin-top: 34px;">337 <div class="floating">338 <svg width="40" height="40" viewBox="0 0 40 40">339 <path d="M20 6 L23 15 L32 15 L25 21 L28 30 L20 24 L12 30 L15 21 L8 15 L17 15 Z" fill="#fff"/>340 </svg>341 </div>342 343 <div class="card-header">344 <div class="day">Day 3</div>345 <div class="menu">346 <svg width="30" height="30" viewBox="0 0 30 30">347 <circle cx="15" cy="7" r="3" fill="#AAB"/>348 <circle cx="15" cy="15" r="3" fill="#AAB"/>349 <circle cx="15" cy="23" r="3" fill="#AAB"/>350 </svg>351 </div>352 </div>353 <div class="routine">Legs-Shoulders-Abs Routine</div>354 355 <div style="display:flex; gap: 28px; align-items:flex-start; margin-top: 18px; flex-wrap: wrap;">356 <div class="muscle-group">357 <div class="muscle-label">Quads</div>358 <div class="img">[IMG: Quads diagram]</div>359 </div>360 <div class="muscle-group">361 <div class="muscle-label">Abs</div>362 <div class="img">[IMG: Abs diagram]</div>363 </div>364 <div class="muscle-group">365 <div class="muscle-label">Glutes</div>366 <div class="img">[IMG: Glutes diagram]</div>367 </div>368 <div class="muscle-group">369 <div class="muscle-label">Shoulder</div>370 <div class="img">[IMG: Shoulder diagram]</div>371 </div>372 <div class="muscle-group">373 <div class="muscle-label">Calves</div>374 <div class="img">[IMG: Calves diagram]</div>375 </div>376 </div>377 378 <div class="thumbs" style="grid-template-columns: repeat(8, 120px); margin-top: 18px;">379 <div class="thumb">[IMG: Exercise]</div>380 <div class="thumb">[IMG: Exercise]</div>381 <div class="thumb">[IMG: Exercise]</div>382 <div class="thumb">[IMG: Exercise]</div>383 <div class="thumb">[IMG: Exercise]</div>384 <div class="thumb">[IMG: Exercise]</div>385 <div class="thumb">[IMG: Exercise]</div>386 <div class="thumb">[IMG: Exercise]</div>387 </div>388 389 <div class="add-day">390 <svg width="36" height="36" viewBox="0 0 36 36">391 <path d="M18 6 V30 M6 18 H30" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>392 </svg>393 <span>Add a day</span>394 </div>395 </div>396 </div>397 398 <div class="home-indicator"></div>399</div>400</body>401</html>