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>Fitvate - Workout Plans</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F5F6F7;12 border-radius: 24px;13 box-shadow: 0 6px 24px rgba(0,0,0,0.15);14 }15 16 /* Header */17 .header { background: #2E7D32; color: #fff; }18 .status-bar {19 height: 110px; display: flex; align-items: center; justify-content: space-between;20 padding: 0 36px; font-size: 30px; opacity: 0.95;21 }22 .status-left { letter-spacing: 0.5px; }23 .status-right { display: flex; gap: 22px; align-items: center; }24 .toolbar {25 height: 140px; display: flex; align-items: center; padding: 0 36px; gap: 26px;26 }27 .app-title { font-size: 56px; font-weight: 700; letter-spacing: 0.3px; }28 .toolbar-right { margin-left: auto; display: flex; align-items: center; }29 .tabs {30 height: 100px; display: flex; align-items: flex-end; gap: 42px;31 padding: 0 36px 0 36px;32 }33 .tab {34 color: rgba(255,255,255,0.9);35 font-size: 34px; font-weight: 600; letter-spacing: 1.2px;36 padding-bottom: 22px;37 opacity: 0.85;38 }39 .tab.active {40 color: #fff; border-bottom: 6px solid #fff; opacity: 1;41 }42 43 /* Sections */44 .content { padding: 30px 32px 120px; }45 .section-header {46 display: flex; align-items: center; justify-content: space-between;47 margin: 18px 6px 22px;48 }49 .section-title { font-size: 50px; color: #212121; font-weight: 700; }50 .more-link { color: #2E7D32; font-size: 36px; font-weight: 700; letter-spacing: 0.8px; }51 52 /* Cards */53 .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }54 .card {55 background: #fff; border-radius: 20px;56 box-shadow: 0 6px 14px rgba(0,0,0,0.12);57 position: relative; overflow: hidden;58 }59 .card.pad { padding: 34px; }60 61 .blue-card {62 background: linear-gradient(180deg, #5AB1F5 0%, #2F7ECF 100%);63 color: #fff; height: 300px;64 }65 .blue-card .large-initial {66 position: absolute; left: 34px; top: 24px;67 font-size: 120px; font-weight: 900; line-height: 1;68 }69 .blue-card .trash { position: absolute; right: 24px; top: 24px; }70 .blue-card .title {71 position: absolute; left: 34px; bottom: 86px;72 font-size: 42px; font-weight: 800;73 }74 .blue-card .meta {75 position: absolute; left: 34px; bottom: 28px;76 display: flex; align-items: center; gap: 18px;77 font-size: 30px; opacity: 0.95;78 }79 .divider-dot { width: 6px; height: 32px; background: #29B449; border-radius: 4px; }80 81 .create-card { height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; }82 .create-card .plus-icon { margin-bottom: 14px; }83 .create-card .create-title { font-size: 40px; color: #2E7D32; font-weight: 700; }84 .create-card .create-sub { font-size: 30px; color: #777; margin-top: 8px; }85 86 .import-card { height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; }87 .import-card .import-title { font-size: 40px; color: #2E7D32; font-weight: 700; margin-top: 12px; }88 .import-card .import-sub { font-size: 30px; color: #777; }89 90 /* Workout list cards */91 .workout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }92 .workout-card {93 border-radius: 22px; overflow: hidden; position: relative;94 box-shadow: 0 6px 14px rgba(0,0,0,0.15);95 }96 .img-ph {97 width: 100%; height: 380px;98 background: #E0E0E0;99 border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center;101 color: #757575; font-size: 30px; text-align: center; padding: 0 20px;102 }103 .workout-card .badge { position: absolute; right: 18px; top: 18px; }104 .workout-card .overlay {105 position: absolute; left: 0; right: 0; bottom: 0;106 padding: 26px; color: #fff;107 background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.65) 100%);108 }109 .workout-title { font-size: 42px; font-weight: 800; margin-bottom: 8px; }110 .workout-meta { display: flex; align-items: center; gap: 16px; font-size: 30px; opacity: 0.95; }111 112 /* Home indicator (bottom) */113 .home-indicator {114 position: absolute; left: 50%; transform: translateX(-50%);115 bottom: 30px; width: 280px; height: 14px; background: #111; border-radius: 8px; opacity: 0.18;116 }117 118 /* Simple icon styling */119 svg { display: block; }120</style>121</head>122<body>123<div id="render-target">124 125 <div class="header">126 <div class="status-bar">127 <div class="status-left">12:13 13°</div>128 <div class="status-right">129 <!-- Simple dot -->130 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#fff"/></svg>131 <!-- WiFi -->132 <svg width="34" height="24" viewBox="0 0 34 24">133 <path d="M2 8c7-7 23-7 30 0" stroke="#fff" stroke-width="2" fill="none"/>134 <path d="M7 12c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"/>135 <path d="M13 16c3-3 5-3 8 0" stroke="#fff" stroke-width="2" fill="none"/>136 <circle cx="17" cy="20" r="2" fill="#fff"/>137 </svg>138 <!-- Battery -->139 <svg width="42" height="22" viewBox="0 0 42 22">140 <rect x="1" y="3" width="36" height="16" rx="3" stroke="#fff" stroke-width="2" fill="none"/>141 <rect x="4" y="6" width="30" height="10" fill="#fff"/>142 <rect x="38" y="7" width="4" height="8" fill="#fff"/>143 </svg>144 </div>145 </div>146 147 <div class="toolbar">148 <!-- Hamburger -->149 <svg width="54" height="54" viewBox="0 0 24 24">150 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>151 </svg>152 <div class="app-title">Fitvate</div>153 <div class="toolbar-right">154 <!-- Medal icon -->155 <svg width="44" height="44" viewBox="0 0 24 24">156 <circle cx="12" cy="9" r="6" fill="#F9A825" stroke="#fff" stroke-width="2"/>157 <path d="M9 13l-2 7 5-3 5 3-2-7" fill="#2E7D32"/>158 </svg>159 </div>160 </div>161 162 <div class="tabs">163 <div class="tab">TIPS</div>164 <div class="tab">EXERCISES</div>165 <div class="tab active">WORKOUT PLANS</div>166 <div class="tab">CHALLENGES</div>167 <div class="tab">MORE</div>168 </div>169 </div>170 171 <div class="content">172 <!-- My Plans -->173 <div class="section-header">174 <div class="section-title">My Plans</div>175 <div class="more-link">MORE</div>176 </div>177 <div class="cards-grid">178 <!-- Morning Schedule -->179 <div class="card blue-card">180 <div class="large-initial">M</div>181 <div class="trash">182 <svg width="42" height="42" viewBox="0 0 24 24">183 <path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="title">Morning Sechdule</div>187 <div class="meta">188 <span>Muscle Build</span>189 <div class="divider-dot"></div>190 <span>60 weeks</span>191 </div>192 </div>193 194 <!-- Create New Plan -->195 <div class="card create-card">196 <div>197 <div class="plus-icon">198 <svg width="74" height="74" viewBox="0 0 24 24">199 <path d="M12 5v14M5 12h14" stroke="#2E7D32" stroke-width="2.5" stroke-linecap="round" fill="none"/>200 </svg>201 </div>202 <div class="create-title">Create New Plan</div>203 <div class="create-sub">No plan added tap to<br/>create a new plan</div>204 </div>205 </div>206 207 <!-- Import Plan -->208 <div class="card import-card">209 <div>210 <svg width="74" height="74" viewBox="0 0 24 24">211 <path d="M12 3v10M8 9l4 4 4-4M4 19h16" stroke="#2E7D32" stroke-width="2.5" stroke-linecap="round" fill="none"/>212 </svg>213 <div class="import-title">Import Plan</div>214 </div>215 </div>216 217 <!-- Spacer (to keep grid layout similar to screenshot) -->218 <div style="visibility:hidden;"></div>219 </div>220 221 <!-- Muscle Building -->222 <div class="section-header" style="margin-top: 36px;">223 <div class="section-title">Muscle Building</div>224 <div class="more-link">MORE</div>225 </div>226 227 <div class="workout-grid">228 <!-- Card 1 -->229 <div class="workout-card">230 <div class="img-ph">[IMG: Hoodie wearing athlete showing abdominal muscles]</div>231 <div class="badge">232 <svg width="48" height="48" viewBox="0 0 24 24">233 <circle cx="12" cy="10" r="7" fill="#F9A825" stroke="#2E7D32" stroke-width="2"/>234 <path d="M8 14l-2 6 6-3 6 3-2-6" fill="#2E7D32"/>235 </svg>236 </div>237 <div class="overlay">238 <div class="workout-title">Home Based Abs Workout</div>239 <div class="workout-meta">240 <span>Beginner</span>241 <div class="divider-dot"></div>242 <span>6 weeks</span>243 </div>244 </div>245 </div>246 247 <!-- Card 2 -->248 <div class="workout-card">249 <div class="img-ph">[IMG: Close-up of muscular back and arm]</div>250 <div class="overlay">251 <div class="workout-title">Big Arms Fast</div>252 <div class="workout-meta">253 <span>Beginner</span>254 <div class="divider-dot"></div>255 <span>4 weeks</span>256 </div>257 </div>258 </div>259 260 <!-- Card 3 -->261 <div class="workout-card">262 <div class="img-ph">[IMG: Athlete doing dumbbell workout focusing on abs]</div>263 <div class="badge">264 <svg width="48" height="48" viewBox="0 0 24 24">265 <circle cx="12" cy="10" r="7" fill="#F9A825" stroke="#2E7D32" stroke-width="2"/>266 <path d="M8 14l-2 6 6-3 6 3-2-6" fill="#2E7D32"/>267 </svg>268 </div>269 <div class="overlay">270 <div class="workout-title">Increasing Intensity Circuit Abs Workout</div>271 <div class="workout-meta">272 <span>Intermediate</span>273 <div class="divider-dot"></div>274 <span>8 weeks</span>275 </div>276 </div>277 </div>278 279 <!-- Card 4 -->280 <div class="workout-card">281 <div class="img-ph">[IMG: Dark gritty fitness backdrop with athlete profile]</div>282 <div class="overlay">283 <div class="workout-title">Blast And Pump</div>284 <div class="workout-meta">285 <span>Intermediate</span>286 </div>287 </div>288 </div>289 </div>290 </div>291 292 <div class="home-indicator"></div>293</div>294</body>295</html>