GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Exercises UI</title>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: 32px;15 box-shadow: 0 10px 40px rgba(0,0,0,0.15);16 }17 18 /* Status bar */19 .status-bar {20 height: 140px;21 background: #9EA0A3;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 36px;26 font-size: 40px;27 letter-spacing: 0.5px;28 }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-icon {36 width: 38px;37 height: 38px;38 opacity: 0.95;39 }40 41 /* Header & search */42 .header {43 padding: 28px 36px 24px 36px;44 background: #ffffff;45 }46 .top-row {47 display: flex;48 align-items: center;49 gap: 24px;50 margin-top: 8px;51 }52 .back-btn {53 width: 80px;54 height: 80px;55 border-radius: 40px;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .search-bar {61 flex: 1;62 height: 106px;63 background: #F2F3F5;64 border: 1px solid #E0E0E0;65 border-radius: 53px;66 display: flex;67 align-items: center;68 padding: 0 24px;69 position: relative;70 }71 .search-icon {72 width: 48px;73 height: 48px;74 margin-right: 18px;75 opacity: 0.6;76 }77 .search-placeholder {78 color: #7A7E85;79 font-size: 38px;80 }81 .filter-pill {82 position: absolute;83 right: 12px;84 top: 50%;85 transform: translateY(-50%);86 width: 90px;87 height: 90px;88 background: #eceef1;89 border: 1px solid #D7D9DD;90 border-radius: 45px;91 display: flex;92 align-items: center;93 justify-content: center;94 }95 .filter-icon { width: 44px; height: 44px; opacity: 0.75; }96 97 /* Blue filter chips */98 .filter-chip-row {99 display: flex;100 gap: 24px;101 margin-top: 28px;102 }103 .chip-blue {104 background: #5DB5FF;105 color: #fff;106 height: 110px;107 padding: 0 36px;108 border-radius: 22px;109 font-size: 38px;110 display: inline-flex;111 align-items: center;112 gap: 16px;113 }114 .chip-blue svg { width: 30px; height: 30px; }115 116 /* View From & secondary chips */117 .view-from {118 font-weight: 700;119 font-size: 40px;120 color: #222;121 margin-top: 34px;122 margin-bottom: 22px;123 }124 .chip-row {125 display: flex;126 flex-wrap: wrap;127 gap: 18px;128 }129 .chip-outline {130 background: #EDEFF2;131 color: #4E545B;132 height: 100px;133 padding: 0 30px;134 border-radius: 22px;135 font-size: 34px;136 display: inline-flex;137 align-items: center;138 border: 1px solid #D7DADE;139 }140 .chip-outline.active {141 background: #5DB5FF;142 color: #fff;143 border-color: #5DB5FF;144 }145 146 /* Clear / Done */147 .actions-row {148 display: flex;149 align-items: center;150 margin-top: 26px;151 margin-bottom: 10px;152 padding-right: 36px;153 }154 .clear {155 color: #8B8F96;156 font-size: 36px;157 font-weight: 700;158 letter-spacing: 1px;159 }160 .done {161 margin-left: auto;162 color: #5DB5FF;163 font-size: 38px;164 font-weight: 700;165 }166 167 /* List area */168 .list-area {169 background: #F3F5F8;170 padding-top: 16px;171 height: 1700px;172 overflow: hidden;173 }174 .card {175 background: #F6F8FB;176 padding: 28px 36px;177 }178 .exercise {179 display: flex;180 align-items: center;181 gap: 28px;182 padding: 22px 0;183 border-bottom: 1px solid #E4E7EB;184 }185 .thumb {186 width: 138px;187 height: 138px;188 border-radius: 69px;189 background: #E0E0E0;190 border: 1px solid #BDBDBD;191 display: flex;192 align-items: center;193 justify-content: center;194 color: #757575;195 font-size: 22px;196 position: relative;197 flex-shrink: 0;198 overflow: hidden;199 text-align: center;200 padding: 10px;201 }202 .speaker {203 position: absolute;204 top: -6px;205 left: -6px;206 width: 46px;207 height: 46px;208 background: #5ED063;209 border-radius: 23px;210 border: 2px solid #ffffff;211 display: flex;212 align-items: center;213 justify-content: center;214 }215 .speaker svg { width: 26px; height: 26px; fill: #fff; }216 .ex-texts {217 flex: 1;218 }219 .title {220 font-size: 44px;221 color: #2B2F33;222 margin-bottom: 10px;223 font-weight: 600;224 }225 .subtitle {226 font-size: 28px;227 color: #84898F;228 line-height: 1.3;229 }230 231 /* Floating widget (right side overlay) */232 .floating-widget {233 position: absolute;234 right: 28px;235 top: 1180px;236 width: 460px;237 height: 118px;238 background: #ffffff;239 border: 1px solid #DADDE1;240 border-radius: 22px;241 box-shadow: 0 6px 16px rgba(0,0,0,0.10);242 display: flex;243 align-items: center;244 padding: 0 18px;245 gap: 22px;246 }247 .fw-btn {248 width: 96px;249 height: 96px;250 border-radius: 18px;251 border: 1px solid #DADDE1;252 display: flex;253 align-items: center;254 justify-content: center;255 }256 257 /* Ad banner */258 .ad-banner {259 position: absolute;260 left: 0; right: 0;261 bottom: 120px;262 height: 170px;263 background: #E0E0E0;264 border-top: 1px solid #BDBDBD;265 border-bottom: 1px solid #BDBDBD;266 display: flex;267 align-items: center;268 justify-content: space-between;269 padding: 0 24px;270 color: #555;271 font-size: 34px;272 }273 .ad-left {274 display: flex;275 align-items: center;276 gap: 20px;277 }278 .ad-pill {279 width: 54px;280 height: 54px;281 border-radius: 16px;282 border: 1px solid #BDBDBD;283 background: #F6F6F6;284 display: flex;285 align-items: center;286 justify-content: center;287 color: #757575;288 font-size: 30px;289 }290 .ad-cta {291 background: #1E1E1E;292 color: #fff;293 padding: 22px 30px;294 border-radius: 18px;295 font-size: 34px;296 }297 298 /* Gesture bar */299 .gesture {300 position: absolute;301 left: 50%;302 bottom: 36px;303 transform: translateX(-50%);304 width: 360px;305 height: 12px;306 background: #1F1F1F;307 border-radius: 6px;308 opacity: 0.85;309 }310</style>311</head>312<body>313<div id="render-target">314 315 <!-- Status bar -->316 <div class="status-bar">317 <div>3:54</div>318 <div class="status-right">319 <!-- simple inline icons -->320 <svg class="status-icon" viewBox="0 0 24 24">321 <circle cx="12" cy="12" r="10" fill="#fff" opacity="0.9"></circle>322 </svg>323 <svg class="status-icon" viewBox="0 0 24 24">324 <path d="M3 18h18l-9-12-9 12z" fill="#fff"></path>325 </svg>326 <svg class="status-icon" viewBox="0 0 24 24">327 <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="#fff"></rect>328 </svg>329 </div>330 </div>331 332 <!-- Header -->333 <div class="header">334 <div class="top-row">335 <div class="back-btn">336 <svg width="50" height="50" viewBox="0 0 24 24">337 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>338 </svg>339 </div>340 <div class="search-bar">341 <svg class="search-icon" viewBox="0 0 24 24">342 <circle cx="11" cy="11" r="7" stroke="#6E747B" stroke-width="2" fill="none"></circle>343 <path d="M20 20l-4.2-4.2" stroke="#6E747B" stroke-width="2" fill="none" stroke-linecap="round"></path>344 </svg>345 <div class="search-placeholder">Search Exercises</div>346 <div class="filter-pill">347 <svg class="filter-icon" viewBox="0 0 24 24">348 <path d="M3 6h18l-7 8v4l-4 2v-6L3 6z" fill="#6E747B"></path>349 </svg>350 </div>351 </div>352 </div>353 354 <div class="filter-chip-row">355 <div class="chip-blue">356 Jefit357 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#fff"></path></svg>358 </div>359 <div class="chip-blue">360 Muscle361 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#fff"></path></svg>362 </div>363 <div class="chip-blue">364 Equipment365 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#fff"></path></svg>366 </div>367 </div>368 369 <div class="view-from">View From</div>370 <div class="chip-row">371 <div class="chip-outline active">Jefit Exercises</div>372 <div class="chip-outline">My Favorite</div>373 <div class="chip-outline">Recently Performed</div>374 <div class="chip-outline">My Custom Exercises</div>375 </div>376 377 <div class="actions-row">378 <div class="clear">CLEAR</div>379 <div class="done">DONE</div>380 </div>381 </div>382 383 <!-- List of exercises -->384 <div class="list-area">385 <div class="card">386 <div class="exercise">387 <div class="thumb">388 [IMG: Barbell bench on bench]389 <div class="speaker">390 <svg viewBox="0 0 24 24">391 <path d="M8 9v6l4-3 4 3V9l-4 3-4-3z" fill="#fff"></path>392 </svg>393 </div>394 </div>395 <div class="ex-texts">396 <div class="title">Barbell Bench Press</div>397 <div class="subtitle">Bench, Bench Press, Chest Press</div>398 </div>399 </div>400 401 <div class="exercise">402 <div class="thumb">403 [IMG: Dumbbell lateral raise]404 <div class="speaker">405 <svg viewBox="0 0 24 24"><path d="M5 8h4l5-3v14l-5-3H5z" fill="#fff"></path></svg>406 </div>407 </div>408 <div class="ex-texts">409 <div class="title">Dumbbell Lateral Raise</div>410 <div class="subtitle">Dumbbell Raise, Lateral Raise, Side Lateral Raise</div>411 </div>412 </div>413 414 <div class="exercise">415 <div class="thumb">416 [IMG: Cable lat pulldown machine]417 <div class="speaker">418 <svg viewBox="0 0 24 24"><path d="M4 10h4v4H4zM11 6h4v12h-4z" fill="#fff"></path></svg>419 </div>420 </div>421 <div class="ex-texts">422 <div class="title">Cable Lat Pulldown (Wide Grip)</div>423 <div class="subtitle">Lat Pulldown, Pull-down, Pulldowns</div>424 </div>425 </div>426 427 <div class="exercise">428 <div class="thumb">429 [IMG: Dumbbell incline bench press]430 <div class="speaker">431 <svg viewBox="0 0 24 24"><path d="M7 9h4l3-2v10l-3-2H7z" fill="#fff"></path></svg>432 </div>433 </div>434 <div class="ex-texts">435 <div class="title">Dumbbell Incline Bench Press</div>436 <div class="subtitle">Dumbbell Chest Press, Incline Bench, Incline Chest</div>437 </div>438 </div>439 440 <div class="exercise">441 <div class="thumb">442 [IMG: Cable seated row]443 <div class="speaker">444 <svg viewBox="0 0 24 24"><path d="M6 8h3l5 4-5 4H6z" fill="#fff"></path></svg>445 </div>446 </div>447 <div class="ex-texts">448 <div class="title">Cable Seated Row</div>449 <div class="subtitle">Cable Row, Row, Seated Row</div>450 </div>451 </div>452 453 <div class="exercise">454 <div class="thumb">455 [IMG: Dumbbell shoulder press seated]456 <div class="speaker">457 <svg viewBox="0 0 24 24"><path d="M10 7l6 5-6 5V7z" fill="#fff"></path></svg>458 </div>459 </div>460 <div class="ex-texts">461 <div class="title">Dumbbell Seated Shoulder Press</div>462 <div class="subtitle">Dumbbell Press, Shoulder Press</div>463 </div>464 </div>465 466 <div class="exercise">467 <div class="thumb">468 [IMG: Machine leg extension]469 <div class="speaker">470 <svg viewBox="0 0 24 24"><path d="M8 8h3l5 4-5 4H8z" fill="#fff"></path></svg>471 </div>472 </div>473 <div class="ex-texts">474 <div class="title">Machine Leg Extension</div>475 <div class="subtitle">Machine Leg Extension</div>476 </div>477 </div>478 479 <div class="exercise">480 <div class="thumb">481 [IMG: Barbell squat]482 <div class="speaker">483 <svg viewBox="0 0 24 24"><path d="M6 10h4v4H6zM14 8h4v8h-4z" fill="#fff"></path></svg>484 </div>485 </div>486 <div class="ex-texts">487 <div class="title">Barbell Squat</div>488 <div class="subtitle">Squat</div>489 </div>490 </div>491 </div>492 </div>493 494 <!-- Floating widget overlay -->495 <div class="floating-widget">496 <div class="fw-btn">497 <svg width="42" height="42" viewBox="0 0 24 24">498 <circle cx="12" cy="12" r="9" fill="#2C7BE5"></circle>499 </svg>500 </div>501 <div class="fw-btn">502 <svg width="42" height="42" viewBox="0 0 24 24">503 <path d="M4 7h16v2H4zm0 4h16v2H4zm0 4h10v2H4z" fill="#2C2C2C"></path>504 </svg>505 </div>506 <div style="margin-left:auto; font-size:36px; color:#2C2C2C;">196</div>507 <div class="fw-btn">508 <svg width="42" height="42" viewBox="0 0 24 24">509 <path d="M13 3l-2 6h6l-8 12 2-8H5l8-10z" fill="#2C2C2C"></path>510 </svg>511 </div>512 </div>513 514 <!-- Ad banner -->515 <div class="ad-banner">516 <div class="ad-left">517 <div class="ad-pill">i</div>518 <div>[IMG: Ad Banner - realme India 120Hz Curved Vision Display]</div>519 </div>520 <div class="ad-cta">Shop Now</div>521 </div>522 523 <!-- Gesture bar -->524 <div class="gesture"></div>525</div>526</body>527</html>