GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Exercise Search UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 28px;12 box-shadow: 0 0 0 rgba(0,0,0,0.02);13 }14 15 /* Status bar */16 .status-bar {17 height: 138px;18 background: #9FA0A4;19 color: #fff;20 display: flex; align-items: center;21 padding: 0 40px;22 font-weight: 600; font-size: 40px;23 }24 .status-left { display:flex; align-items:center; gap:18px; }25 .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }26 27 /* Top search and filters */28 .top-area { background:#FFFFFF; }29 .search-row {30 display:flex; align-items:center; gap:26px;31 padding: 28px 32px 10px 32px;32 }33 .back-btn svg { width:48px; height:48px; }34 .search-input {35 position: relative;36 flex: 1;37 height: 96px;38 border: 1px solid #E3E5EA;39 background: #F3F4F7;40 border-radius: 48px;41 display:flex; align-items:center;42 padding: 0 110px 0 40px;43 color:#A0A6AD; font-size: 34px; font-weight: 600;44 }45 .filter-circle {46 position:absolute; right: 12px; top: 50%; transform: translateY(-50%);47 width: 72px; height:72px; border-radius: 50%;48 background:#FFFFFF; border:1px solid #D7DAE0;49 display:flex; align-items:center; justify-content:center;50 }51 .filter-row {52 display:flex; gap:18px; padding: 10px 32px 18px 32px;53 }54 .filter-btn {55 padding: 18px 28px; border-radius: 16px;56 font-size: 32px; font-weight: 700; color:#fff;57 background:#69B6FF; border:1px solid #58A9F7;58 display:flex; align-items:center; gap:12px;59 }60 .filter-btn .caret {61 width: 22px; height: 22px; display:inline-block;62 border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg);63 margin-left: 6px;64 }65 66 .view-from { padding: 4px 32px; font-size: 34px; font-weight: 800; color:#222; }67 .tag-row { padding: 12px 32px; display:flex; gap:16px; flex-wrap: wrap; }68 .tag {69 padding: 18px 26px; border-radius: 18px; font-size: 30px; font-weight: 700;70 border: 1px solid #DFE3E8; color: #6C7682; background: #EEF1F5;71 }72 .tag.active { background:#6EB5FF; color:#fff; border-color:#6EB5FF; }73 74 .clear-done { padding: 14px 32px 8px 32px; display:flex; align-items:center; justify-content: space-between; }75 .clear-done .clear { color:#9098A0; font-size: 30px; font-weight: 800; letter-spacing: 0.8px; }76 .clear-done .done { color:#5BAAF7; font-size: 32px; font-weight: 800; }77 78 /* List section */79 .list-section { background:#F3F5F7; margin-top: 12px; }80 .exercise-item {81 display:flex; gap:28px; align-items:flex-start;82 padding: 28px 32px; border-bottom: 1px solid #E4E7EB;83 }84 .thumb {85 width: 120px; height:120px; border-radius: 50%;86 background:#E0E0E0; border:1px solid #BDBDBD;87 display:flex; align-items:center; justify-content:center;88 color:#757575; font-size: 24px; text-align:center; position:relative; overflow:hidden;89 }90 .speaker {91 position:absolute; left:-6px; top:-6px;92 width: 44px; height:44px; border-radius:50%;93 background:#EFFFF1; border:2px solid #34C759;94 display:flex; align-items:center; justify-content:center;95 }96 .item-text { flex: 1; min-width: 0; }97 .item-title {98 font-size: 44px; font-weight: 700; color:#2B2F33; line-height: 1.18;99 }100 .item-sub {101 font-size: 30px; color:#8A95A2; margin-top: 6px;102 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;103 }104 105 /* Floating toolbar (right) */106 .floating-toolbar {107 position:absolute; right: 20px; top: 1480px;108 width: 480px; height: 112px; background:#fff;109 border:1px solid #DADDE2; border-radius: 22px;110 box-shadow: 0 8px 16px rgba(0,0,0,0.12);111 display:flex; align-items:center; justify-content: space-around;112 }113 .chip-circle {114 width: 84px; height: 84px; border-radius:50%;115 border:1px solid #DADDE2; display:flex; align-items:center; justify-content:center;116 background:#FFFFFF; font-weight:800; color:#333;117 }118 119 /* Ad banner */120 .ad-banner {121 position:absolute; left:0; right:0; bottom: 110px;122 height: 160px; background:#FFFFFF; border-top: 1px solid #E1E4E8;123 display:flex; align-items:center; padding: 0 24px; gap: 18px;124 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);125 }126 .ad-logo {127 width: 110px; height: 110px; border-radius: 12px; background:#E0E0E0; border:1px solid #BDBDBD;128 display:flex; align-items:center; justify-content:center; color:#555; font-size:24px;129 }130 .ad-text { flex:1; }131 .ad-title { font-size: 32px; font-weight: 800; color:#2B2F33; }132 .ad-sub { font-size: 28px; color:#707A84; margin-top: 4px; }133 .ad-cta {134 background:#111; color:#fff; padding: 18px 28px; border-radius: 12px; font-size: 28px; font-weight: 800;135 }136 137 /* Home indicator */138 .home-indicator {139 position:absolute; bottom: 30px; left:50%; transform: translateX(-50%);140 width: 240px; height: 14px; border-radius: 10px; background:#000; opacity: 0.85;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div class="status-left">150 <span>3:52</span>151 <svg width="32" height="32" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true">152 <path d="M8 5l11 7-11 7z"></path>153 </svg>154 </div>155 <div class="status-right">156 <!-- Location -->157 <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true">158 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path>159 </svg>160 <!-- WiFi -->161 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" aria-hidden="true">162 <path d="M2 8c5-5 15-5 20 0"></path>163 <path d="M5 11c3-3 11-3 14 0"></path>164 <path d="M8 14c2-2 6-2 8 0"></path>165 <circle cx="12" cy="18" r="1.5" fill="#FFFFFF"></circle>166 </svg>167 <!-- Battery -->168 <svg width="52" height="40" viewBox="0 0 28 16" fill="none" stroke="#FFFFFF" stroke-width="2" aria-hidden="true">169 <rect x="1" y="3" width="22" height="10" rx="2"></rect>170 <rect x="24" y="6" width="3" height="4"></rect>171 <rect x="3" y="5" width="16" height="6" fill="#FFFFFF" stroke="none"></rect>172 </svg>173 </div>174 </div>175 176 <!-- Top Area -->177 <div class="top-area">178 <div class="search-row">179 <div class="back-btn" aria-hidden="true">180 <svg viewBox="0 0 24 24" width="54" height="54" fill="none" stroke="#444" stroke-width="3">181 <path d="M15 5L8 12l7 7"></path>182 </svg>183 </div>184 <div class="search-input">185 Search Exercises186 <div class="filter-circle" title="Filter">187 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#4A5568" stroke-width="2">188 <path d="M3 5h18l-7 8v5l-4-2v-3z"></path>189 </svg>190 </div>191 </div>192 </div>193 194 <div class="filter-row">195 <div class="filter-btn">Jefit <span class="caret"></span></div>196 <div class="filter-btn">Muscle <span class="caret"></span></div>197 <div class="filter-btn">Equipment <span class="caret"></span></div>198 </div>199 200 <div class="view-from">View From</div>201 <div class="tag-row">202 <div class="tag active">Jefit Exercises</div>203 <div class="tag">My Favorite</div>204 <div class="tag">Recently Performed</div>205 <div class="tag">My Custom Exercises</div>206 </div>207 208 <div class="clear-done">209 <div class="clear">CLEAR</div>210 <div class="done">DONE</div>211 </div>212 </div>213 214 <!-- List Section -->215 <div class="list-section">216 217 <div class="exercise-item">218 <div class="thumb">219 [IMG: Barbell Bench Press]220 <div class="speaker">221 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">222 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>223 <path d="M16 8a3 3 0 0 1 0 8"></path>224 </svg>225 </div>226 </div>227 <div class="item-text">228 <div class="item-title">Barbell Bench Press</div>229 <div class="item-sub">Bench, Bench Press, Chest Press</div>230 </div>231 </div>232 233 <div class="exercise-item">234 <div class="thumb">235 [IMG: Dumbbell Lateral Raise]236 <div class="speaker">237 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">238 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>239 <path d="M16 8a3 3 0 0 1 0 8"></path>240 </svg>241 </div>242 </div>243 <div class="item-text">244 <div class="item-title">Dumbbell Lateral Raise</div>245 <div class="item-sub">Dumbbell Raise, Lateral Raise, Side Lateral Raise</div>246 </div>247 </div>248 249 <div class="exercise-item">250 <div class="thumb">251 [IMG: Cable Lat Pulldown Wide Grip]252 <div class="speaker">253 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">254 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>255 <path d="M16 8a3 3 0 0 1 0 8"></path>256 </svg>257 </div>258 </div>259 <div class="item-text">260 <div class="item-title">Cable Lat Pulldown (Wide Grip)</div>261 <div class="item-sub">Lat Pulldown, Pull-down, Pulldowns</div>262 </div>263 </div>264 265 <div class="exercise-item">266 <div class="thumb">267 [IMG: Dumbbell Incline Bench Press]268 <div class="speaker">269 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">270 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>271 <path d="M16 8a3 3 0 0 1 0 8"></path>272 </svg>273 </div>274 </div>275 <div class="item-text">276 <div class="item-title">Dumbbell Incline Bench Press</div>277 <div class="item-sub">Dumbbell Chest Press, Incline Bench, Incline Chest</div>278 </div>279 </div>280 281 <div class="exercise-item">282 <div class="thumb">283 [IMG: Cable Seated Row]284 <div class="speaker">285 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">286 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>287 <path d="M16 8a3 3 0 0 1 0 8"></path>288 </svg>289 </div>290 </div>291 <div class="item-text">292 <div class="item-title">Cable Seated Row</div>293 <div class="item-sub">Cable Row, Row, Seated Row</div>294 </div>295 </div>296 297 <div class="exercise-item">298 <div class="thumb">299 [IMG: Dumbbell Seated Shoulder Press]300 <div class="speaker">301 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">302 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>303 <path d="M16 8a3 3 0 0 1 0 8"></path>304 </svg>305 </div>306 </div>307 <div class="item-text">308 <div class="item-title">Dumbbell Seated Shoulder Press</div>309 <div class="item-sub">Dumbbell Press, Shoulder Press, Shoulder Press</div>310 </div>311 </div>312 313 <div class="exercise-item">314 <div class="thumb">315 [IMG: Machine Leg Extension]316 <div class="speaker">317 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">318 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>319 <path d="M16 8a3 3 0 0 1 0 8"></path>320 </svg>321 </div>322 </div>323 <div class="item-text">324 <div class="item-title">Machine Leg Extension</div>325 <div class="item-sub">Machine Leg Extension</div>326 </div>327 </div>328 329 <div class="exercise-item">330 <div class="thumb">331 [IMG: Barbell Squat]332 <div class="speaker">333 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#34C759" stroke-width="2">334 <path d="M4 9v6h4l5 4V5L8 9H4z"></path>335 <path d="M16 8a3 3 0 0 1 0 8"></path>336 </svg>337 </div>338 </div>339 <div class="item-text">340 <div class="item-title">Barbell Squat</div>341 <div class="item-sub">Squat</div>342 </div>343 </div>344 345 <!-- Spacer to keep list clear above ad -->346 <div style="height: 220px;"></div>347 </div>348 349 <!-- Floating Toolbar -->350 <div class="floating-toolbar">351 <div class="chip-circle" title="Circle">○</div>352 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">353 <path d="M4 6h16M4 12h16M4 18h10"></path>354 </svg>355 <div class="chip-circle" style="background:#f0f6ff; border-color:#CFE1FF;" title="Count">356 <div style="font-size:28px; font-weight:900;">196</div>357 </div>358 <svg width="50" height="50" viewBox="0 0 24 24" fill="#3B82F6">359 <path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"></path>360 </svg>361 </div>362 363 <!-- Ad Banner -->364 <div class="ad-banner">365 <div class="ad-logo">[IMG: Ad Logo]</div>366 <div class="ad-text">367 <div class="ad-title">realme India</div>368 <div class="ad-sub">120Hz Curved Vision Display</div>369 </div>370 <div class="ad-cta">Shop Now</div>371 </div>372 373 <!-- Home Indicator -->374 <div class="home-indicator"></div>375 376</div>377</body>378</html>