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>Exercise UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #9E9E9E;25 color: #ffffff;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 font-size: 40px;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 24px;36 opacity: 0.95;37 }38 .status-right {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .status-icon svg { display: block; }44 45 /* Header */46 .header {47 position: absolute;48 top: 120px;49 left: 0;50 width: 1080px;51 height: 180px;52 background: #ffffff;53 border-bottom: 1px solid #e6e6e6;54 display: flex;55 align-items: center;56 justify-content: space-between;57 padding: 0 40px;58 }59 .title {60 font-size: 86px;61 font-weight: 800;62 color: #111111;63 letter-spacing: -0.5px;64 }65 .goals {66 display: flex;67 align-items: center;68 gap: 18px;69 color: #555555;70 font-size: 42px;71 font-weight: 700;72 }73 .goals svg { width: 48px; height: 48px; fill: #555555; }74 75 /* Content grid */76 .content {77 position: absolute;78 top: 300px; /* 120 + 180 */79 left: 0;80 right: 0;81 bottom: 480px; /* space for ad + bottom nav + home indicator */82 overflow-y: auto;83 -webkit-overflow-scrolling: touch;84 background: #ffffff;85 }86 .grid {87 display: grid;88 grid-template-columns: repeat(3, 1fr);89 padding: 40px 40px 30px;90 gap: 40px 30px;91 }92 .muscle-item {93 display: flex;94 flex-direction: column;95 align-items: center;96 }97 .thumb {98 width: 300px;99 height: 300px;100 background: #E0E0E0;101 border: 2px solid #BDBDBD;102 border-radius: 50%;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 font-size: 34px;108 text-align: center;109 line-height: 1.2;110 }111 .label {112 margin-top: 22px;113 font-size: 38px;114 color: #444444;115 }116 117 /* Ad banner */118 .ad-banner {119 position: absolute;120 left: 90px;121 right: 90px;122 bottom: 300px;123 height: 220px;124 background: #ffffff;125 border: 1px solid #d9d9d9;126 box-shadow: 0 2px 6px rgba(0,0,0,0.08);127 border-radius: 12px;128 display: flex;129 align-items: center;130 padding: 24px 28px;131 gap: 24px;132 }133 .ad-logo {134 width: 120px;135 height: 120px;136 background: #E0E0E0;137 border: 1px solid #BDBDBD;138 display: flex;139 align-items: center;140 justify-content: center;141 color: #757575;142 font-size: 28px;143 }144 .ad-text {145 flex: 1;146 color: #222;147 }148 .ad-text .brand { font-size: 36px; color: #666; margin-bottom: 6px; }149 .ad-text .headline { font-size: 42px; font-weight: 700; }150 .ad-action {151 background: #111111;152 color: #ffffff;153 border-radius: 10px;154 padding: 22px 30px;155 font-size: 34px;156 font-weight: 700;157 }158 159 /* Bottom navigation */160 .bottom-nav {161 position: absolute;162 left: 0;163 bottom: 60px;164 width: 1080px;165 height: 220px;166 background: #f2f2f2;167 border-top: 1px solid #dcdcdc;168 display: flex;169 align-items: center;170 justify-content: space-around;171 }172 .nav-item {173 width: 200px;174 height: 180px;175 display: flex;176 flex-direction: column;177 align-items: center;178 justify-content: center;179 color: #9a9a9a;180 font-size: 32px;181 gap: 16px;182 }183 .nav-item svg { width: 70px; height: 70px; fill: none; stroke: #9a9a9a; stroke-width: 4; }184 .nav-item.active { color: #1E88E5; }185 .nav-item.active svg { stroke: #1E88E5; }186 187 /* Home indicator */188 .home-indicator {189 position: absolute;190 left: 50%;191 bottom: 20px;192 transform: translateX(-50%);193 width: 360px;194 height: 12px;195 background: #000000;196 opacity: 0.85;197 border-radius: 6px;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Status Bar -->205 <div class="status-bar">206 <div class="status-left">207 <div>3:50</div>208 <div class="status-icon">209 <svg width="34" height="34" viewBox="0 0 24 24">210 <path d="M8 5l10 7-10 7z" fill="#ffffff"></path>211 </svg>212 </div>213 </div>214 <div class="status-right">215 <div class="status-icon">216 <!-- Location pin -->217 <svg width="36" height="36" viewBox="0 0 24 24">218 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.6 6 11.1 6 11.1s6-6.5 6-11.1C18 5.6 15.3 3 12 3zm0 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#ffffff"></path>219 </svg>220 </div>221 <div class="status-icon">222 <!-- WiFi -->223 <svg width="36" height="36" viewBox="0 0 24 24">224 <path d="M12 18.5l1.5 1.5-1.5 1.5-1.5-1.5 1.5-1.5zm-6.5-6a12 12 0 0 1 13 0l-1.5 1.7a9 9 0 0 0-10 0L5.5 12.5zm-3-3.7a16 16 0 0 1 19 0l-1.7 1.8a13 13 0 0 0-15.6 0L2.5 8.8z" fill="#ffffff"></path>225 </svg>226 </div>227 <div class="status-icon">228 <!-- Battery -->229 <svg width="48" height="36" viewBox="0 0 28 16">230 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>231 <rect x="23" y="5" width="3" height="6" rx="1" fill="#ffffff"></rect>232 <rect x="3" y="5" width="14" height="6" fill="#ffffff"></rect>233 </svg>234 </div>235 </div>236 </div>237 238 <!-- Header -->239 <div class="header">240 <div class="title">Exercise</div>241 <div class="goals">242 <svg viewBox="0 0 24 24">243 <path d="M6 3h2v18H6V3zm4 2h7l-2.5 3L17 11H10V5z"></path>244 </svg>245 <div>MY GOALS</div>246 </div>247 </div>248 249 <!-- Scrollable content grid -->250 <div class="content">251 <div class="grid">252 <div class="muscle-item">253 <div class="thumb">[IMG: Triceps Diagram]</div>254 <div class="label">Triceps</div>255 </div>256 <div class="muscle-item">257 <div class="thumb">[IMG: Chest Diagram]</div>258 <div class="label">Chest</div>259 </div>260 <div class="muscle-item">261 <div class="thumb">[IMG: Shoulder Diagram]</div>262 <div class="label">Shoulder</div>263 </div>264 265 <div class="muscle-item">266 <div class="thumb">[IMG: Biceps Diagram]</div>267 <div class="label">Biceps</div>268 </div>269 <div class="muscle-item">270 <div class="thumb">[IMG: Core Diagram]</div>271 <div class="label">Core</div>272 </div>273 <div class="muscle-item">274 <div class="thumb">[IMG: Back Diagram]</div>275 <div class="label">Back</div>276 </div>277 278 <div class="muscle-item">279 <div class="thumb">[IMG: Forearms Diagram]</div>280 <div class="label">Forearms</div>281 </div>282 <div class="muscle-item">283 <div class="thumb">[IMG: Upper Legs Diagram]</div>284 <div class="label">Upper Legs</div>285 </div>286 <div class="muscle-item">287 <div class="thumb">[IMG: Glutes Diagram]</div>288 <div class="label">Glutes</div>289 </div>290 291 <div class="muscle-item">292 <div class="thumb">[IMG: Cardio Illustration]</div>293 <div class="label">Cardio</div>294 </div>295 <div class="muscle-item">296 <div class="thumb">[IMG: Calves Diagram]</div>297 <div class="label">Calves</div>298 </div>299 <div class="muscle-item">300 <div class="thumb">[IMG: Full Body - Show All]</div>301 <div class="label">Show All</div>302 </div>303 </div>304 </div>305 306 <!-- Ad banner -->307 <div class="ad-banner">308 <div class="ad-logo">[AD Logo]</div>309 <div class="ad-text">310 <div class="brand">realme India</div>311 <div class="headline">120Hz Curved Vision Display</div>312 </div>313 <div class="ad-action">Shop Now</div>314 </div>315 316 <!-- Bottom navigation -->317 <div class="bottom-nav">318 <div class="nav-item">319 <svg viewBox="0 0 24 24">320 <circle cx="12" cy="12" r="7"></circle>321 <path d="M12 5l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"></path>322 </svg>323 <div>Discover</div>324 </div>325 <div class="nav-item">326 <svg viewBox="0 0 24 24">327 <rect x="5" y="5" width="14" height="14" rx="2"></rect>328 <path d="M8 12l2 2 6-6" stroke-linecap="round" stroke-linejoin="round"></path>329 </svg>330 <div>Workout</div>331 </div>332 <div class="nav-item active">333 <svg viewBox="0 0 24 24">334 <!-- Dumbbell icon -->335 <path d="M4 9h3v6H4zM17 9h3v6h-3zM7 11h10v2H7z" fill="none"></path>336 <rect x="4" y="9" width="3" height="6"></rect>337 <rect x="17" y="9" width="3" height="6"></rect>338 <rect x="7" y="11" width="10" height="2"></rect>339 </svg>340 <div>Exercises</div>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24">344 <rect x="4" y="6" width="16" height="14" rx="2"></rect>345 <path d="M8 3v4M16 3v4M7 11h10M7 15h10"></path>346 </svg>347 <div>Progress</div>348 </div>349 <div class="nav-item">350 <svg viewBox="0 0 24 24">351 <circle cx="12" cy="8" r="4"></circle>352 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>353 </svg>354 <div>Profile</div>355 </div>356 </div>357 358 <!-- Home indicator -->359 <div class="home-indicator"></div>360 361</div>362</body>363</html>