GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Exercise List UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 150px;24 background: #9e9e9e;25 display: flex;26 align-items: center;27 padding: 0 40px;28 color: #fff;29 box-sizing: border-box;30 }31 .status-left { font-size: 46px; font-weight: 600; }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .dot {39 width: 28px; height: 28px; background: #fff; border-radius: 50%;40 opacity: 0.9;41 }42 43 /* Header with back + search */44 .header {45 position: absolute;46 top: 150px;47 left: 0;48 width: 1080px;49 padding: 24px 32px 8px 32px;50 box-sizing: border-box;51 background: #f7f7f7;52 }53 .header-row {54 display: grid;55 grid-template-columns: 80px 1fr 96px;56 align-items: center;57 gap: 18px;58 }59 .back-btn {60 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;61 }62 .search-input {63 height: 90px;64 background: #ffffff;65 border: 1px solid #d9d9d9;66 border-radius: 50px;67 padding: 0 32px;68 font-size: 40px;69 color: #777;70 display: flex;71 align-items: center;72 box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);73 }74 .search-input span { flex: 1; }75 .filter-btn {76 width: 90px; height: 90px; background: #ffffff; border: 1px solid #d9d9d9; border-radius: 50%;77 display: flex; align-items: center; justify-content: center;78 }79 80 /* Primary chips */81 .chip-row {82 margin-top: 22px;83 display: flex;84 gap: 18px;85 }86 .chip {87 padding: 26px 38px;88 border-radius: 20px;89 font-size: 38px;90 border: 1px solid #cfd8dc;91 background: #eaf2ff;92 color: #1e6ee7;93 display: inline-flex;94 align-items: center;95 gap: 16px;96 }97 .chip.blue {98 background: #4fa8ff;99 color: #ffffff;100 border-color: #4fa8ff;101 }102 .chip .arrow {103 width: 26px; height: 26px;104 border-left: 6px solid currentColor;105 border-bottom: 6px solid currentColor;106 transform: rotate(-45deg);107 margin-top: 4px;108 }109 110 /* View From section */111 .view-from {112 margin-top: 26px;113 font-size: 40px;114 font-weight: 700;115 color: #222;116 }117 .segmented {118 margin-top: 20px;119 display: flex;120 gap: 18px;121 flex-wrap: wrap;122 }123 .segment {124 padding: 24px 32px;125 border-radius: 20px;126 font-size: 36px;127 border: 1px solid #d9d9d9;128 color: #555;129 background: #f6f7f9;130 }131 .segment.active {132 background: #4fa8ff;133 color: #fff;134 border-color: #4fa8ff;135 }136 137 .clear-done {138 margin-top: 26px;139 display: flex;140 justify-content: space-between;141 align-items: center;142 color: #6f6f6f;143 font-size: 40px;144 padding: 0 4px;145 }146 .clear-done .done {147 color: #1e6ee7;148 font-weight: 700;149 }150 151 /* Blue banner */152 .banner {153 margin-top: 28px;154 width: 100%;155 background: #56b5ff;156 color: #fff;157 font-size: 42px;158 font-weight: 700;159 padding: 28px 32px;160 box-sizing: border-box;161 display: flex;162 align-items: center;163 gap: 18px;164 }165 .banner .bolt {166 width: 28px; height: 28px; background: #fff; border-radius: 50%;167 }168 .banner .spacer { flex: 1; }169 .banner .end-btn {170 font-weight: 700;171 background: #86d0ff;172 color: #fff;173 border: 3px solid #cfeaff;174 border-radius: 20px;175 padding: 18px 28px;176 font-size: 40px;177 }178 179 /* List area */180 .content {181 position: absolute;182 top: 630px;183 left: 0;184 right: 0;185 bottom: 120px;186 overflow-y: auto;187 padding: 24px 32px 140px 32px;188 box-sizing: border-box;189 background: #f9fbff;190 }191 .item {192 background: #ffffff;193 border-radius: 24px;194 padding: 22px 24px;195 box-sizing: border-box;196 display: grid;197 grid-template-columns: 150px 1fr 220px;198 align-items: center;199 gap: 26px;200 margin-bottom: 22px;201 border: 1px solid #eef1f5;202 }203 .thumb-wrap {204 position: relative;205 width: 150px; height: 150px;206 }207 .thumb {208 width: 150px; height: 150px; border-radius: 50%;209 background: #E0E0E0; border: 1px solid #BDBDBD;210 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 10px;211 }212 .audio-icon {213 position: absolute;214 right: -6px; top: -6px;215 background: #48d15a;216 width: 46px; height: 46px; border-radius: 50%;217 display: flex; align-items: center; justify-content: center;218 border: 3px solid #e9ffe9;219 }220 .item-text .title {221 font-size: 52px; color: #222; font-weight: 800; margin-bottom: 12px;222 }223 .item-text .sub {224 font-size: 36px; color: #888;225 }226 .item-actions {227 display: flex;228 justify-content: flex-end;229 align-items: center;230 gap: 22px;231 padding-right: 12px;232 }233 .circle-btn {234 width: 120px; height: 90px;235 background: #fff;236 border: 1px solid #d9d9d9;237 border-radius: 28px;238 display: flex; align-items: center; justify-content: center;239 }240 241 /* Bottom home bar */242 .home-bar {243 position: absolute;244 bottom: 0;245 left: 0;246 width: 1080px;247 height: 120px;248 background: #000;249 opacity: 0.9;250 border-top-left-radius: 24px;251 border-top-right-radius: 24px;252 }253 254 /* Helper SVG styling */255 svg { display: block; }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status Bar -->262 <div class="status-bar">263 <div class="status-left">1:38</div>264 <div class="status-right">265 <div class="dot"></div>266 <div class="dot"></div>267 <div class="dot"></div>268 <div style="width:34px;height:34px;border:3px solid #fff;border-radius:50%;"></div>269 </div>270 </div>271 272 <!-- Header -->273 <div class="header">274 <div class="header-row">275 <div class="back-btn">276 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">277 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 </div>280 <div class="search-input">281 <span>Search Exercises</span>282 </div>283 <div class="filter-btn">284 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">285 <path d="M3 6h18M6 12h12M10 18h4" stroke="#555" stroke-width="2.8" stroke-linecap="round"/>286 </svg>287 </div>288 </div>289 290 <div class="chip-row">291 <div class="chip blue">Jefit <span class="arrow"></span></div>292 <div class="chip">Muscle <span class="arrow"></span></div>293 <div class="chip">Equipment <span class="arrow"></span></div>294 </div>295 296 <div class="view-from">View From</div>297 298 <div class="segmented">299 <div class="segment active">Jefit Exercises</div>300 <div class="segment">My Favorite</div>301 </div>302 <div class="segmented" style="margin-top:14px;">303 <div class="segment">Recently Performed</div>304 <div class="segment">My Custom Exercises</div>305 </div>306 307 <div class="clear-done">308 <div>CLEAR</div>309 <div class="done">DONE</div>310 </div>311 312 <div class="banner">313 <div style="font-size:46px;">⚡ Quick Workout Mode: Pick And Do It!</div>314 <div class="spacer"></div>315 <div class="end-btn">END</div>316 </div>317 </div>318 319 <!-- Content List -->320 <div class="content">321 322 <!-- Item 1 -->323 <div class="item">324 <div class="thumb-wrap">325 <div class="thumb">[IMG: Bench Press]</div>326 <div class="audio-icon">327 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">328 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>329 </svg>330 </div>331 </div>332 <div class="item-text">333 <div class="title">Barbell Bench Press</div>334 <div class="sub">Bench, Bench Press, Chest Press</div>335 </div>336 <div class="item-actions"></div>337 </div>338 339 <!-- Item 2 -->340 <div class="item">341 <div class="thumb-wrap">342 <div class="thumb">[IMG: Cable Lat Pulldown]</div>343 <div class="audio-icon">344 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">345 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>346 </svg>347 </div>348 </div>349 <div class="item-text">350 <div class="title">Cable Lat Pulldown (Wide Grip)</div>351 <div class="sub">Lat Pulldown, Pull-down, Pulldowns</div>352 </div>353 <div class="item-actions"></div>354 </div>355 356 <!-- Item 3 -->357 <div class="item">358 <div class="thumb-wrap">359 <div class="thumb">[IMG: Dumbbell Lateral Raise]</div>360 <div class="audio-icon">361 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">362 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>363 </svg>364 </div>365 </div>366 <div class="item-text">367 <div class="title">Dumbbell Lateral Raise</div>368 <div class="sub">Dumbbell Raise, Lateral Raise, Side Lateral Raise</div>369 </div>370 <div class="item-actions"></div>371 </div>372 373 <!-- Item 4 -->374 <div class="item">375 <div class="thumb-wrap">376 <div class="thumb">[IMG: Dumbbell Incline Bench]</div>377 <div class="audio-icon">378 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">379 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>380 </svg>381 </div>382 </div>383 <div class="item-text">384 <div class="title">Dumbbell Incline Bench Press</div>385 <div class="sub">Dumbbell Chest Press, Incline Bench, Incline...</div>386 </div>387 <div class="item-actions"></div>388 </div>389 390 <!-- Item 5 -->391 <div class="item">392 <div class="thumb-wrap">393 <div class="thumb">[IMG: Machine Leg Extension]</div>394 <div class="audio-icon">395 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">396 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>397 </svg>398 </div>399 </div>400 <div class="item-text">401 <div class="title">Machine Leg Extension</div>402 <div class="sub">Machine Leg Extension</div>403 </div>404 <div class="item-actions"></div>405 </div>406 407 <!-- Item 6 with trailing icons -->408 <div class="item">409 <div class="thumb-wrap">410 <div class="thumb">[IMG: Barbell Squat]</div>411 <div class="audio-icon">412 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">413 <path d="M6 9v6h3l4 3V6l-4 3H6z" fill="#fff"/>414 </svg>415 </div>416 </div>417 <div class="item-text">418 <div class="title">Barbell Squat</div>419 <div class="sub">Squat</div>420 </div>421 <div class="item-actions">422 <div class="circle-btn">423 <!-- record circle icon -->424 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">425 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2.4"/>426 <circle cx="12" cy="12" r="3.4" fill="#333"/>427 </svg>428 </div>429 <div class="circle-btn">430 <!-- list icon -->431 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">432 <path d="M6 7h12M6 12h12M6 17h12" stroke="#333" stroke-width="2.6" stroke-linecap="round"/>433 </svg>434 </div>435 <div class="circle-btn">436 <!-- lightning bolt -->437 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">438 <path d="M13 2L6 14h5l-1 8 8-12h-5l1-8z" fill="#4fa8ff"/>439 </svg>440 </div>441 </div>442 </div>443 444 </div>445 446 <div class="home-bar"></div>447</div>448</body>449</html>