GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>7x4 Challenge</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #222;15 }16 .hero {17 position: relative;18 width: 1080px;19 height: 760px;20 overflow: hidden;21 }22 .hero-img {23 position: absolute;24 left: 0; top: 0;25 width: 1080px; height: 760px;26 background: #E0E0E0;27 border-bottom: 1px solid #BDBDBD;28 display: flex; align-items: center; justify-content: center;29 color: #757575; font-weight: 600; letter-spacing: 0.5px;30 }31 .hero-overlay {32 position: absolute; inset: 0;33 background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), rgba(0,0,0,0.75));34 pointer-events: none;35 }36 .topbar {37 position: absolute; top: 54px; left: 36px; right: 36px;38 display: flex; align-items: center; justify-content: space-between;39 color: #fff;40 }41 .topbar .left {42 display: flex; align-items: center; gap: 24px;43 }44 .title {45 font-size: 64px; font-weight: 800; letter-spacing: 1px; color: #fff;46 }47 .menu-dots {48 display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;49 }50 51 .hero-text {52 position: absolute; left: 36px; right: 36px; top: 220px;53 color: #fff;54 }55 .hero-text .desc {56 font-size: 36px; line-height: 48px; opacity: 0.95;57 max-width: 900px;58 }59 .hero-stats {60 position: absolute; left: 36px; right: 36px; top: 420px;61 display: flex; align-items: baseline; justify-content: space-between; color: #fff;62 }63 .days-left { font-size: 56px; font-weight: 800; }64 .percent { font-size: 48px; font-weight: 700; opacity: 0.95; }65 .progress {66 position: absolute; left: 36px; right: 36px; top: 500px;67 height: 16px; background: rgba(255,255,255,0.3); border-radius: 8px; overflow: hidden;68 }69 .progress .bar { width: 0%; height: 100%; background: #4A90E2; }70 71 /* Content area */72 .content {73 position: absolute; left: 0; right: 0; top: 760px; bottom: 0;74 background: #F5F5F7;75 padding: 36px 36px 0 36px;76 }77 78 /* Vertical timeline */79 .timeline {80 position: absolute; left: 96px; top: 820px; bottom: 360px;81 width: 8px; background: #D9D9DF; border-radius: 4px;82 }83 .timeline.active {84 top: 820px; background: linear-gradient(to bottom, #2D6AE3 0, #2D6AE3 28%, #D9D9DF 28%);85 }86 .mark {87 position: absolute; left: 72px; width: 56px; height: 56px;88 background: #fff; border: 2px solid #CFCFD6; border-radius: 50%;89 display: flex; align-items: center; justify-content: center;90 box-shadow: 0 1px 0 rgba(0,0,0,0.05);91 }92 .mark.active { border-color: #2D6AE3; }93 .mark svg { width: 32px; height: 32px; }94 95 /* Week section */96 .week {97 margin-left: 180px;98 margin-bottom: 36px;99 }100 .week-header {101 display: flex; align-items: center; justify-content: space-between;102 padding-right: 24px;103 }104 .week-title {105 display: flex; align-items: center; gap: 16px;106 font-size: 40px; font-weight: 800;107 }108 .week-title .bolt {109 width: 48px; height: 48px; border-radius: 24px; background: #2D6AE3; display: flex; align-items: center; justify-content: center;110 box-shadow: 0 4px 10px rgba(45,106,227,0.3);111 }112 .week-title.grey .bolt { background: #CFCFD6; box-shadow: none; }113 .week-title.grey { color: #8E8E98; }114 115 .progress-count { font-size: 34px; font-weight: 800; color: #2D6AE3; }116 117 .week-card {118 margin-top: 18px;119 background: #fff;120 border-radius: 28px;121 box-shadow: 0 1px 0 rgba(0,0,0,0.06);122 padding: 36px 32px;123 }124 .days-grid {125 display: grid;126 grid-template-columns: repeat(9, minmax(0, 1fr)); /* circles with chevrons and trophy at end */127 column-gap: 20px; row-gap: 24px;128 align-items: center;129 }130 .day {131 width: 120px; height: 120px;132 border: 4px solid #CFCFD6; border-radius: 60px;133 display: flex; align-items: center; justify-content: center;134 font-size: 44px; font-weight: 800; color: #7A7A86;135 background: #fff;136 }137 .day.dashed {138 border: 6px dashed #2D6AE3;139 color: #2D6AE3;140 }141 .chev {142 width: 24px; height: 24px; color: #B3B3BB;143 display: flex; align-items: center; justify-content: center;144 }145 .trophy {146 width: 120px; height: 120px; border: 4px solid #CFCFD6; border-radius: 24px;147 display: flex; align-items: center; justify-content: center; color: #9A9AA5;148 }149 .trophy .label {150 position: absolute; margin-top: 78px; font-size: 32px; font-weight: 800; color: #7A7A86;151 background: #ECECEF; padding: 6px 16px; border-radius: 20px;152 }153 154 /* CTA button */155 .cta {156 margin: 40px 36px 24px 180px;157 height: 140px; border-radius: 70px;158 background: linear-gradient(90deg, #2D6AE3, #3B61F6);159 display: flex; align-items: center; justify-content: center;160 color: #fff; font-size: 56px; font-weight: 800; letter-spacing: 2px;161 }162 163 /* Ad banner */164 .ad {165 position: absolute; left: 0; right: 0; bottom: 120px;166 margin: 0 0 0 0;167 padding: 24px 24px;168 background: #fff; border-top: 1px solid #E0E0E0;169 display: flex; align-items: center; gap: 24px;170 }171 .ad .img {172 width: 160px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;173 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; font-weight: 700;174 }175 .ad .text {176 flex: 1;177 }178 .ad .title {179 font-size: 36px; font-weight: 800; margin-bottom: 6px;180 }181 .ad .subtitle {182 font-size: 30px; color: #7A7A86; line-height: 40px;183 }184 .ad .btn {185 width: 260px; height: 90px; border-radius: 45px; background: #8ED1C3; color: #fff; font-weight: 800; font-size: 32px;186 display: flex; align-items: center; justify-content: center;187 }188 189 /* Helper: place timeline markers near week headers */190 .mark.w1 { top: 860px; }191 .mark.w2 { top: 1240px; }192 .mark.w3 { top: 1640px; }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Hero -->199 <div class="hero">200 <div class="hero-img">[IMG: Fitness Hero]</div>201 <div class="hero-overlay"></div>202 203 <div class="topbar">204 <div class="left">205 <!-- Back arrow -->206 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">207 <path d="M10 6 L4 12 L10 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208 <path d="M4 12 H20" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>209 </svg>210 <div class="title">7X4 CHALLENGE</div>211 </div>212 <!-- Vertical menu dots -->213 <svg class="menu-dots" width="36" height="72" viewBox="0 0 10 28" fill="none">214 <circle cx="5" cy="4" r="2" fill="#FFFFFF"/>215 <circle cx="5" cy="14" r="2" fill="#FFFFFF"/>216 <circle cx="5" cy="24" r="2" fill="#FFFFFF"/>217 </svg>218 </div>219 220 <div class="hero-text">221 <div class="desc">Start your body-toning journey to target all muscle groups and build your dream body in 4 weeks!</div>222 </div>223 224 <div class="hero-stats">225 <div class="days-left">28 Days left</div>226 <div class="percent">0%</div>227 </div>228 <div class="progress"><div class="bar"></div></div>229 </div>230 231 <!-- Content area -->232 <div class="content">233 <div class="timeline active"></div>234 <div class="mark w1 active">235 <!-- Lightning icon -->236 <svg viewBox="0 0 24 24">237 <path d="M13 2 L5 14 H11 L9 22 L19 10 H13 Z" fill="#2D6AE3"/>238 </svg>239 </div>240 <div class="mark w2">241 <svg viewBox="0 0 24 24">242 <path d="M13 2 L5 14 H11 L9 22 L19 10 H13 Z" fill="#CFCFD6"/>243 </svg>244 </div>245 <div class="mark w3">246 <svg viewBox="0 0 24 24">247 <path d="M13 2 L5 14 H11 L9 22 L19 10 H13 Z" fill="#CFCFD6"/>248 </svg>249 </div>250 251 <!-- WEEK 1 -->252 <div class="week" style="margin-top: 36px;">253 <div class="week-header">254 <div class="week-title">255 <div class="bolt">256 <svg viewBox="0 0 24 24">257 <path d="M13 2 L5 14 H11 L9 22 L19 10 H13 Z" fill="#fff"/>258 </svg>259 </div>260 <span style="color:#2D6AE3;">WEEK 1</span>261 </div>262 <div class="progress-count">1/7</div>263 </div>264 <div class="week-card">265 <div class="days-grid">266 <div class="day dashed">1</div>267 <div class="chev">268 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>269 </div>270 <div class="day">2</div>271 <div class="chev">272 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>273 </div>274 <div class="day">3</div>275 <div class="chev">276 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>277 </div>278 <div class="day">4</div>279 <div class="trophy" style="position: relative;">280 <!-- Simple trophy icon -->281 <svg width="64" height="64" viewBox="0 0 24 24">282 <path d="M7 4 H17 A2 2 0 0 1 19 6 V8 A4 4 0 0 1 15 12 H9 A4 4 0 0 1 5 8 V6 A2 2 0 0 1 7 4 Z" fill="#CFCFD6"/>283 <path d="M10 12 V15 H14 V12" fill="#CFCFD6"/>284 <rect x="9" y="15" width="6" height="2" fill="#CFCFD6"/>285 <rect x="8" y="17" width="8" height="2" fill="#CFCFD6"/>286 </svg>287 <div class="label">1</div>288 </div>289 290 <div class="day">5</div>291 <div class="chev">292 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>293 </div>294 <div class="day">6</div>295 <div class="chev">296 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>297 </div>298 <div class="day">7</div>299 <div class="chev">300 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>301 </div>302 <div class="trophy" style="position: relative;">303 <svg width="64" height="64" viewBox="0 0 24 24">304 <path d="M7 4 H17 A2 2 0 0 1 19 6 V8 A4 4 0 0 1 15 12 H9 A4 4 0 0 1 5 8 V6 A2 2 0 0 1 7 4 Z" fill="#CFCFD6"/>305 <path d="M10 12 V15 H14 V12" fill="#CFCFD6"/>306 <rect x="9" y="15" width="6" height="2" fill="#CFCFD6"/>307 <rect x="8" y="17" width="8" height="2" fill="#CFCFD6"/>308 </svg>309 </div>310 </div>311 </div>312 </div>313 314 <!-- WEEK 2 -->315 <div class="week">316 <div class="week-header">317 <div class="week-title grey">318 <div class="bolt">319 <svg viewBox="0 0 24 24">320 <path d="M13 2 L5 14 H11 L9 22 L19 10 H13 Z" fill="#fff"/>321 </svg>322 </div>323 <span>WEEK 2</span>324 </div>325 </div>326 <div class="week-card">327 <div class="days-grid">328 <div class="day">1</div>329 <div class="chev"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>330 <div class="day">2</div>331 <div class="chev"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>332 <div class="day">3</div>333 <div class="chev"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#B3B3BB" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>334 <div class="day">4</div>335 <div class="trophy" st