GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Fitvate - Exercises</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #F2F2F2;15    font-family: "Roboto", "Segoe UI", Arial, sans-serif;16    color: #212121;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 96px;24    background: #2E7D32;25    color: #FFFFFF;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 34px;32    letter-spacing: 0.3px;33  }34  .status-left { opacity: 0.95; }35  .status-right { display: flex; gap: 28px; align-items: center; opacity: 0.95; }36 37  .app-bar {38    position: absolute;39    top: 96px; left: 0; right: 0;40    height: 148px;41    background: #2E7D32;42    color: #FFFFFF;43    display: flex;44    align-items: center;45    padding: 0 36px;46    box-sizing: border-box;47  }48  .app-title {49    font-size: 64px;50    font-weight: 700;51    margin-left: 24px;52    flex: 1;53  }54  .app-actions { display: flex; gap: 32px; align-items: center; }55 56  .tabs {57    position: absolute;58    top: 244px; left: 0; right: 0;59    height: 96px;60    background: #2E7D32;61    display: flex;62    align-items: flex-end;63    gap: 60px;64    padding: 0 36px;65    box-sizing: border-box;66  }67  .tab {68    color: rgba(255,255,255,0.9);69    font-size: 44px;70    font-weight: 600;71    padding-bottom: 22px;72    opacity: 0.9;73  }74  .tab.active {75    color: #FFFFFF;76    border-bottom: 6px solid #FFFFFF;77  }78 79  /* Content area */80  .content {81    position: absolute;82    top: 340px; left: 0; right: 0; bottom: 0;83    overflow: hidden;84  }85 86  /* Cards */87  .card {88    background: #FFFFFF;89    border-radius: 18px;90    box-shadow: 0 3px 10px rgba(0,0,0,0.18);91    overflow: hidden;92  }93  .img-placeholder {94    width: 100%; height: 100%;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex;98    align-items: center;99    justify-content: center;100    color: #757575;101    font-size: 34px;102    box-sizing: border-box;103    position: relative;104  }105 106  /* Banner */107  .banner-card {108    margin: 24px;109    height: 420px;110    position: relative;111  }112  .banner-overlay {113    position: absolute;114    left: 0; right: 0; bottom: 0;115    padding: 26px 28px 30px 28px;116    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.0));117    color: #FFFFFF;118  }119  .banner-title {120    font-size: 64px;121    font-weight: 800;122    letter-spacing: 0.4px;123    margin: 8px 0 6px;124  }125  .banner-sub {126    font-size: 38px;127    opacity: 0.95;128    font-weight: 500;129  }130  .banner-accent {131    width: 12px; height: 56px; background: #4CAF50; border-radius: 6px;132  }133 134  /* Grid */135  .grid {136    display: grid;137    grid-template-columns: 1fr 1fr;138    gap: 24px;139    margin: 0 24px;140  }141  .category-card {142    height: 440px;143    position: relative;144  }145  .label-band {146    position: absolute;147    left: 0; right: 0; bottom: 0;148    height: 40%;149    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.0));150    display: flex;151    align-items: flex-end;152    padding: 0 0 24px 22px;153    box-sizing: border-box;154  }155  .label-text {156    color: #FFFFFF;157    font-size: 54px;158    font-weight: 800;159  }160  .label-accent {161    position: absolute;162    left: 22px;163    bottom: 110px;164    width: 140px;165    height: 10px;166    background: #4CAF50;167    border-radius: 4px;168    opacity: 0.95;169  }170 171  /* Bottom bar */172  .bottom-bar {173    position: absolute;174    left: 0; right: 0; bottom: 0;175    height: 110px;176    background: #000000;177  }178  .home-pill {179    position: absolute;180    left: 50%;181    top: 26px;182    transform: translateX(-50%);183    width: 300px; height: 20px;184    background: rgba(255,255,255,0.85);185    border-radius: 12px;186  }187 188  /* SVG icon helpers */189  .icon { width: 60px; height: 60px; fill: none; stroke: #FFFFFF; stroke-width: 6; }190  .icon.solid { fill: #FFFFFF; stroke: none; }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status bar -->197  <div class="status-bar">198    <div class="status-left">12:12  13°  ⏱  y  ebay  •</div>199    <div class="status-right">200      <!-- Simple wifi icon -->201      <svg class="icon" viewBox="0 0 24 24">202        <path d="M2 8c5-4 15-4 20 0" />203        <path d="M6 12c3-3 9-3 12 0" />204        <path d="M10 16c2-2 4-2 6 0" />205        <circle cx="12" cy="20" r="1.6" class="solid"></circle>206      </svg>207      <!-- Battery icon -->208      <svg class="icon" viewBox="0 0 32 24">209        <rect x="2" y="6" width="24" height="12" rx="2" ry="2" stroke="#FFFFFF" />210        <rect x="4" y="8" width="18" height="8" class="solid" />211        <rect x="26" y="9" width="4" height="6" rx="1" ry="1" stroke="#FFFFFF" />212      </svg>213    </div>214  </div>215 216  <!-- App bar -->217  <div class="app-bar">218    <!-- Menu icon -->219    <svg class="icon" viewBox="0 0 24 24">220      <path d="M3 6h18M3 12h18M3 18h18" />221    </svg>222    <div class="app-title">Fitvate</div>223    <div class="app-actions">224      <!-- Trophy/medal icon -->225      <svg class="icon" viewBox="0 0 24 24">226        <circle cx="12" cy="9" r="5" stroke="#FFFFFF"></circle>227        <path d="M7 5H4c0 4 3 6 5 6" />228        <path d="M17 5h3c0 4-3 6-5 6" />229        <path d="M9 15l3 6 3-6" />230      </svg>231      <!-- Search icon -->232      <svg class="icon" viewBox="0 0 24 24">233        <circle cx="10" cy="10" r="6" />234        <path d="M15 15l6 6" />235      </svg>236    </div>237  </div>238 239  <!-- Tabs -->240  <div class="tabs">241    <div class="tab">HEALTH TIPS</div>242    <div class="tab active">EXERCISES</div>243    <div class="tab">WORKOUT PLANS</div>244    <div class="tab">CHALLENGES</div>245  </div>246 247  <!-- Content -->248  <div class="content">249 250    <!-- Featured banner -->251    <div class="card banner-card">252      <div class="img-placeholder">253        [IMG: Home workout plank in bedroom]254      </div>255      <div class="banner-overlay">256        <div style="display:flex; align-items:center; gap:18px;">257          <div class="banner-accent"></div>258          <div>259            <div class="banner-title">HOME WORKOUTS</div>260            <div class="banner-sub">No Equipment Required</div>261          </div>262        </div>263      </div>264    </div>265 266    <!-- Categories grid -->267    <div class="grid">268      <!-- Chest -->269      <div class="card category-card">270        <div class="img-placeholder">[IMG: Muscular chest close-up]</div>271        <div class="label-band">272          <div class="label-accent"></div>273          <div class="label-text">Chest</div>274        </div>275      </div>276      <!-- Back -->277      <div class="card category-card">278        <div class="img-placeholder">[IMG: Back muscles with dumbbells]</div>279        <div class="label-band">280          <div class="label-accent"></div>281          <div class="label-text">Back</div>282        </div>283      </div>284      <!-- Legs -->285      <div class="card category-card">286        <div class="img-placeholder">[IMG: Legs at gym equipment]</div>287        <div class="label-band">288          <div class="label-accent"></div>289          <div class="label-text">Legs</div>290        </div>291      </div>292      <!-- Triceps -->293      <div class="card category-card">294        <div class="img-placeholder">[IMG: Triceps definition close-up]</div>295        <div class="label-band">296          <div class="label-accent"></div>297          <div class="label-text">Triceps</div>298        </div>299      </div>300      <!-- Abs -->301      <div class="card category-card">302        <div class="img-placeholder">[IMG: Abdominal muscles close-up]</div>303        <div class="label-band">304          <div class="label-accent"></div>305          <div class="label-text">Abs</div>306        </div>307      </div>308      <!-- Forearm -->309      <div class="card category-card">310        <div class="img-placeholder">[IMG: Forearm holding dumbbell]</div>311        <div class="label-band">312          <div class="label-accent"></div>313          <div class="label-text">Forearm</div>314        </div>315      </div>316    </div>317 318  </div>319 320  <!-- Bottom navigation pill -->321  <div class="bottom-bar">322    <div class="home-pill"></div>323  </div>324 325</div>326</body>327</html>