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>7x4 Challenge UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1e1e1e; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #f3f4f6;11 }12 13 /* Top hero */14 .hero {15 position: relative;16 height: 740px;17 background: #0f1013;18 }19 .hero-img {20 position: absolute; inset: 0;21 display: flex; align-items: center; justify-content: center;22 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-weight: 600;23 }24 .hero::after {25 content: "";26 position: absolute; inset: 0;27 background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.0) 100%);28 pointer-events: none;29 }30 31 /* Status bar */32 .status {33 position: absolute; top: 24px; left: 36px; right: 36px; height: 48px; display: flex; align-items: center; justify-content: space-between; color: #fff; z-index: 2;34 font-size: 30px; font-weight: 600;35 }36 .status-icons { display: flex; align-items: center; gap: 22px; }37 .icon { width: 36px; height: 36px; }38 39 /* Header row inside hero */40 .hero-header {41 position: absolute; top: 140px; left: 36px; right: 36px; display: flex; align-items: center; justify-content: space-between; z-index: 2;42 }43 .title-wrap { display: flex; align-items: center; gap: 26px; }44 .title {45 font-size: 72px; line-height: 78px; font-weight: 800; letter-spacing: 1px; color: #fff;46 }47 .kebab { width: 48px; height: 48px; }48 49 .hero-sub {50 position: absolute; top: 280px; left: 36px; right: 36px; z-index: 2; color: #fff; font-size: 34px; line-height: 48px; opacity: 0.95; max-width: 900px;51 }52 53 .progress-row {54 position: absolute; bottom: 160px; left: 36px; right: 36px; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #fff;55 }56 .days-left { font-size: 54px; font-weight: 800; }57 .percent { font-size: 44px; font-weight: 700; opacity: 0.9; }58 .progress-bar {59 position: absolute; bottom: 110px; left: 36px; right: 36px; height: 16px; background: rgba(255,255,255,0.18); border-radius: 12px; overflow: hidden; z-index: 2;60 }61 .progress-fill { width: 0%; height: 100%; background: #4c8dff; }62 63 /* Content area */64 .content {65 position: absolute; top: 740px; left: 0; right: 0; bottom: 0; background: #f6f6f7;66 }67 68 /* Vertical timeline */69 .timeline {70 position: absolute; top: 60px; bottom: 380px; left: 90px; width: 6px; background: linear-gradient(#2f66ff 0%, #2f66ff 34%, #cfd3da 34%, #cfd3da 100%);71 border-radius: 3px;72 }73 .bolt {74 position: absolute; left: 64px; width: 60px; height: 60px; border-radius: 50%;75 display: flex; align-items: center; justify-content: center;76 box-shadow: 0 2px 4px rgba(0,0,0,0.08);77 }78 .bolt.blue { background: #fff; border: 6px solid #2f66ff; top: 0; }79 .bolt.grey { background: #fff; border: 6px solid #cfd3da; }80 .bolt.w2 { top: 530px; }81 .bolt.w3 { top: 1060px; }82 83 /* Weeks block wrapper */84 .weeks { position: relative; padding-left: 170px; padding-right: 36px; padding-top: 20px; }85 .week { margin-top: 40px; }86 .week-header {87 display: flex; align-items: baseline; justify-content: space-between; padding-right: 20px;88 font-weight: 800; letter-spacing: 1px;89 }90 .week-header .label { font-size: 46px; }91 .week-header .label.blue { color: #2f66ff; }92 .week-header .label.grey { color: #8f949c; }93 .week-header .count { font-size: 36px; color: #2f66ff; }94 95 .week-card {96 margin-top: 24px; background: #fff; border-radius: 36px; padding: 36px; box-shadow: 0 6px 18px rgba(0,0,0,0.05);97 }98 99 /* Day circles row */100 .days-grid { display: grid; grid-template-columns: repeat(9, auto); align-items: center; column-gap: 22px; row-gap: 28px; }101 .day {102 width: 132px; height: 132px; border-radius: 50%;103 border: 6px solid #cfd3da; color: #8f949c; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; background: #fff;104 }105 .day.active {106 border: 6px dashed #2f66ff; color: #2f66ff;107 }108 .chev { width: 28px; height: 28px; }109 .trophy {110 width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;111 border-radius: 16px; border: 4px solid #cfd3da; color: #8f949c;112 }113 114 /* GO button */115 .go-btn {116 width: 936px; height: 148px; margin: 70px auto 24px auto; border-radius: 80px; background: linear-gradient(90deg, #2f66ff, #2f89ff);117 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 56px; font-weight: 900; letter-spacing: 1px;118 }119 120 /* Ad bar */121 .ad {122 position: absolute; left: 0; right: 0; bottom: 120px; padding: 20px 24px;123 }124 .ad-card {125 background: #fff; border-radius: 24px; box-shadow: 0 6px 18px rgba(0,0,0,0.08);126 display: grid; grid-template-columns: 160px 1fr 220px; align-items: center; gap: 26px; padding: 24px;127 }128 .ad-img {129 width: 160px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;130 display: flex; align-items: center; justify-content: center; font-weight: 700;131 }132 .ad-text .title { font-size: 38px; font-weight: 800; margin-bottom: 6px; }133 .ad-text .subtitle { font-size: 28px; color: #6b7280; line-height: 40px; }134 .ad-btn {135 justify-self: end; background: #7fc9c0; color: #fff; border-radius: 30px; padding: 20px 28px; font-size: 36px; font-weight: 800;136 }137 138 /* Bottom home indicator */139 .home-bar {140 position: absolute; bottom: 30px; left: 0; right: 0; height: 70px; background: #000;141 }142 .home-pill {143 position: absolute; left: 50%; transform: translateX(-50%); top: 22px; width: 320px; height: 12px; background: #fff; border-radius: 12px; opacity: 0.9;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <div class="hero">151 <div class="hero-img">[IMG: Fitness banner with muscular torso]</div>152 153 <div class="status">154 <div>9:54</div>155 <div class="status-icons">156 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 9l10 9 10-9-3-3-7 6-7-6-3 3z"/></svg>157 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="19" y="10" width="2" height="4"/></svg>158 </div>159 </div>160 161 <div class="hero-header">162 <div class="title-wrap">163 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M15 6l-6 6 6 6V6z"/></svg>164 <div class="title">7X4 CHALLENGE</div>165 </div>166 <svg class="kebab" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>167 </div>168 169 <div class="hero-sub">170 Start your body-toning journey to target all muscle groups and build your dream body in 4 weeks!171 </div>172 173 <div class="progress-row">174 <div class="days-left">28 Days left</div>175 <div class="percent">0%</div>176 </div>177 <div class="progress-bar"><div class="progress-fill"></div></div>178 </div>179 180 <div class="content">181 <div class="timeline"></div>182 <div class="bolt blue">183 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2f66ff"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>184 </div>185 <div class="bolt grey w2">186 <svg width="34" height="34" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>187 </div>188 <div class="bolt grey w3">189 <svg width="34" height="34" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>190 </div>191 192 <div class="weeks">193 <!-- Week 1 -->194 <div class="week">195 <div class="week-header">196 <div class="label blue">WEEK 1</div>197 <div class="count">1/7</div>198 </div>199 <div class="week-card">200 <div class="days-grid">201 <div class="day active">1</div>202 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>203 <div class="day">2</div>204 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>205 <div class="day">3</div>206 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>207 <div class="day">4</div>208 <div class="trophy">209 <svg width="80" height="80" viewBox="0 0 24 24" fill="#c0c5cc">210 <path d="M5 5h14v3c0 2.8-2.2 5-5 5H10C7.2 13 5 10.8 5 8V5z"/>211 <path d="M9 14h6v2H9zM8 18h8v2H8z"/>212 </svg>213 </div>214 215 <div class="day">5</div>216 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>217 <div class="day">6</div>218 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>219 <div class="day">7</div>220 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>221 </div>222 </div>223 </div>224 225 <!-- Week 2 -->226 <div class="week">227 <div class="week-header">228 <div class="label grey">WEEK 2</div>229 </div>230 <div class="week-card">231 <div class="days-grid">232 <div class="day">1</div>233 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>234 <div class="day">2</div>235 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>236 <div class="day">3</div>237 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>238 <div class="day">4</div>239 <div class="trophy">240 <svg width="80" height="80" viewBox="0 0 24 24" fill="#c0c5cc">241 <path d="M5 5h14v3c0 2.8-2.2 5-5 5H10C7.2 13 5 10.8 5 8V5z"/>242 <path d="M9 14h6v2H9zM8 18h8v2H8z"/>243 </svg>244 </div>245 246 <div class="day">5</div>247 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>248 <div class="day">6</div>249 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>250 <div class="day">7</div>251 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>252 </div>253 </div>254 </div>255 256 <!-- Week 3 -->257 <div class="week">258 <div class="week-header">259 <div class="label grey">WEEK 3</div>260 </div>261 <div class="week-card">262 <div class="days-grid">263 <div class="day">1</div>264 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>265 <div class="day">2</div>266 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>267 <div class="day">3</div>268 <svg class="chev" viewBox="0 0 24 24" fill="#c0c5cc"><path d="M9 6l6 6-6 6V6z"/></svg>269 <div class="day">4</div>270 </div>271 </div>272 </div>273 274 <div class="go-btn">GO</div>275 </div>276 277 <div class="ad">278 <div class="ad-card">279 <div class="ad-img">[IMG: Brand logo]</div>280 <div class="ad-text">281 <div class="title">Spacity by Kohler <span style="font-size:26px; color:#9aa1a8; font-weight:700;">AD</span></div>282 <div class="subtitle">Give your bathroom a premium essence with the ultimate in bathroom experience</div>283 </div>284 <div class="ad-btn">KNOW MORE!</div>285 </div>286 </div>287 288 <div class="home-bar"><div class="home-pill"></div></div>289 </div>290 291</div>292</body>293</html>