GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>7x4 Challenge UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative; overflow: hidden;11 width:1080px; height:2400px;12 background:#F5F5F7;13 color:#212121;14 }15 16 /* Status bar */17 .status-bar {18 position:absolute; top:0; left:0; right:0; height:110px; padding:0 36px;19 display:flex; align-items:center; justify-content:space-between; color:#ffffff;20 z-index:5;21 }22 .status-left { font-weight:600; font-size:42px; letter-spacing:1px; }23 .status-center { display:flex; align-items:center; gap:22px; font-size:34px; opacity:0.95; }24 .status-right { display:flex; align-items:center; gap:24px; }25 .icon { display:inline-flex; align-items:center; justify-content:center; }26 .dot { width:10px; height:10px; background:#fff; opacity:0.85; border-radius:50%; display:inline-block; margin:0 6px; }27 28 /* Hero */29 .hero {30 position:absolute; top:0; left:0; width:100%; height:540px; overflow:hidden;31 }32 .hero .img {33 position:absolute; inset:0;34 background:#E0E0E0; border-bottom:1px solid #BDBDBD;35 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;36 }37 .hero::after {38 content:""; position:absolute; inset:0;39 background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.25) 100%);40 pointer-events:none;41 }42 43 .topbar {44 position:absolute; top:120px; left:30px; right:30px; z-index:6; display:flex; align-items:center; gap:16px;45 color:#fff;46 }47 .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }48 .title { font-size:64px; font-weight:700; letter-spacing:1px; }49 50 .progress-wrap {51 position:absolute; bottom:22px; left:30px; right:30px; z-index:6; color:#fff;52 }53 .progress-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }54 .progress-top .left { font-size:44px; opacity:0.95; }55 .progress-top .right { font-size:42px; opacity:0.95; }56 .progress-bar {57 width:100%; height:8px; background:rgba(255,255,255,0.35); border-radius:4px; overflow:hidden;58 }59 .progress-bar .fill { width:0%; height:100%; background:#2E7DFF; }60 61 /* Timeline */62 .timeline {63 position:absolute; top:560px; bottom:330px; left:82px; width:4px; background:#D0D3D9;64 }65 .timeline .blue { position:absolute; top:0; bottom:auto; height:280px; background:#2962FF; width:4px; }66 67 .bolt {68 position:absolute; left:62px; width:44px; height:44px; border-radius:50%;69 background:#ffffff; border:2px solid #D0D3D9; display:flex; align-items:center; justify-content:center;70 }71 .bolt.blue { border-color:#2962FF; }72 .bolt.w1 { top:560px; }73 .bolt.w2 { top:980px; }74 .bolt.w3 { top:1400px; }75 .bolt.w4 { top:1820px; }76 77 /* Content area */78 .content { position:absolute; top:560px; left:140px; right:30px; padding-bottom:320px; }79 .section { margin-bottom:86px; }80 .week-label {81 font-size:44px; font-weight:700; margin:0 0 20px 0; color:#9E9E9E;82 }83 .week-label.active { color:#2962FF; }84 85 .week-header-right {86 position:absolute; right:40px; margin-top:-64px; color:#8B8E98; font-size:40px; font-weight:600;87 }88 89 .week-card {90 background:#ffffff; border-radius:26px; box-shadow:0 6px 16px rgba(0,0,0,0.06);91 padding:34px 36px; 92 }93 94 .days {95 display:flex; flex-wrap:wrap; align-items:center; row-gap:24px;96 }97 .day {98 width:136px; height:136px; border-radius:50%;99 border:3px solid #CFCFD5; color:#9EA3AE; font-size:54px; font-weight:700;100 display:flex; align-items:center; justify-content:center; background:#fff;101 margin-right:22px;102 }103 .day.dashed {104 border-style:dashed; border-color:#2E7DFF; color:#2E7DFF; background:rgba(46,125,255,0.04);105 }106 .arrow {107 width:34px; height:34px; margin-right:22px; opacity:0.55;108 }109 .trophy {110 margin-left:auto; display:flex; align-items:center; gap:10px; color:#9EA3AE;111 }112 .trophy .badge {113 margin-left:8px; font-weight:700; background:#E6E7EB; border-radius:10px; padding:6px 16px; font-size:36px;114 }115 116 /* Muted weeks */117 .muted .day { border-color:#DADCE2; color:#C1C5CE; background:#FAFAFA; }118 .muted .arrow { opacity:0.35; }119 .muted .trophy { opacity:0.55; }120 121 /* Bottom CTA button */122 .cta {123 position:absolute; left:30px; right:30px; bottom:300px; height:132px; border-radius:66px;124 background:linear-gradient(90deg, #2160FF, #2E86FF);125 color:#fff; display:flex; align-items:center; justify-content:center;126 font-size:56px; font-weight:800; letter-spacing:2px; box-shadow:0 12px 26px rgba(46,125,255,0.35);127 }128 129 /* Ad banner */130 .ad-banner {131 position:absolute; left:0; right:0; bottom:110px; height:170px; background:#ECEFF1; border-top:1px solid #B0BEC5;132 display:flex; align-items:center; padding:22px 26px; gap:26px;133 }134 .ad-thumb {135 width:160px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;136 display:flex; align-items:center; justify-content:center; font-weight:700;137 }138 .ad-copy { flex:1; }139 .ad-title { font-size:40px; font-weight:700; color:#263238; margin-bottom:6px; }140 .ad-desc { font-size:32px; color:#607D8B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }141 .ad-cta {142 background:#3DD17B; color:#fff; font-weight:800; border-radius:40px; padding:18px 30px; font-size:36px;143 }144 145 /* Gesture pill */146 .gesture {147 position:absolute; left:50%; transform:translateX(-50%);148 bottom:40px; width:300px; height:12px; background:#D0D3D9; border-radius:6px;149 }150</style>151</head>152<body>153<div id="render-target">154 <!-- Hero with status bar -->155 <div class="hero">156 <div class="img">[IMG: Gym hero photo]</div>157 </div>158 159 <div class="status-bar">160 <div class="status-left">2:01</div>161 <div class="status-center">162 <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="none">163 <path d="M3 6h18v12H3z" stroke="#fff" stroke-width="2"/>164 <path d="M3 6l9 7 9-7" stroke="#fff" stroke-width="2" fill="none"/>165 </svg>166 <span>83°</span>167 <svg class="icon" width="34" height="34" viewBox="0 0 24 24" fill="none">168 <path d="M9 22a6 6 0 116-6 6 6 0 01-6 6z" stroke="#fff" stroke-width="2"/>169 <path d="M15 8V3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>170 </svg>171 <span>Calm</span>172 <span class="dot"></span><span class="dot" style="opacity:0.55;"></span>173 </div>174 <div class="status-right">175 <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="none">176 <path d="M2 12c4-4 16-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>177 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>178 <path d="M8 12c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>179 <circle cx="12" cy="12" r="1.2" fill="#fff"/>180 </svg>181 <svg class="icon" width="60" height="44" viewBox="0 0 30 18" fill="none">182 <rect x="1" y="1" width="24" height="16" rx="2" stroke="#fff" stroke-width="2"/>183 <rect x="26" y="6" width="3" height="6" rx="1" fill="#fff"/>184 <rect x="3" y="3" width="20" height="12" rx="1" fill="#fff"/>185 </svg>186 </div>187 </div>188 189 <div class="topbar">190 <div class="back-btn">191 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">192 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 <div class="title">7X4 CHALLENGE</div>196 </div>197 198 <div class="progress-wrap">199 <div class="progress-top">200 <div class="left">28 Days left</div>201 <div class="right">0%</div>202 </div>203 <div class="progress-bar">204 <div class="fill"></div>205 </div>206 </div>207 208 <!-- Timeline rail -->209 <div class="timeline">210 <div class="blue"></div>211 </div>212 <div class="bolt blue w1">213 <svg width="30" height="30" viewBox="0 0 24 24" fill="#2962FF">214 <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>215 </svg>216 </div>217 <div class="bolt w2">218 <svg width="30" height="30" viewBox="0 0 24 24" fill="#9EA3AE">219 <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>220 </svg>221 </div>222 <div class="bolt w3">223 <svg width="30" height="30" viewBox="0 0 24 24" fill="#9EA3AE">224 <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>225 </svg>226 </div>227 <div class="bolt w4">228 <svg width="30" height="30" viewBox="0 0 24 24" fill="#9EA3AE">229 <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>230 </svg>231 </div>232 233 <!-- Content -->234 <div class="content">235 236 <!-- Week 1 -->237 <div class="section">238 <div class="week-label active">Week 1</div>239 <div class="week-header-right">1/7</div>240 <div class="week-card">241 <div class="days">242 <div class="day dashed">1</div>243 <svg class="arrow" viewBox="0 0 16 16">244 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 <div class="day">2</div>247 <svg class="arrow" viewBox="0 0 16 16">248 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 <div class="day">3</div>251 <svg class="arrow" viewBox="0 0 16 16">252 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 <div class="day">4</div>255 256 <div style="flex-basis:100%; height:0;"></div>257 258 <div class="day">5</div>259 <svg class="arrow" viewBox="0 0 16 16">260 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 <div class="day">6</div>263 <svg class="arrow" viewBox="0 0 16 16">264 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>265 </svg>266 <div class="day">7</div>267 <svg class="arrow" viewBox="0 0 16 16">268 <path d="M4 3l6 5-6 5" fill="none" stroke="#9EA3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 271 <div class="trophy">272 <svg width="86" height="86" viewBox="0 0 48 48" fill="none">273 <path d="M12 10h24v10a12 12 0 01-24 0V10z" stroke="#9EA3AE" stroke-width="3" fill="#ECEFF1"/>274 <path d="M8 10h8v6a8 8 0 01-8-6zM32 10h8a8 8 0 01-8 6V10z" fill="#CFD8DC"/>275 <rect x="18" y="30" width="12" height="6" fill="#B0BEC5"/>276 <rect x="14" y="36" width="20" height="8" fill="#9EA3AE"/>277 <rect x="20" y="38" width="8" height="4" fill="#fff"/>278 </svg>279 <span class="badge">1</span>280 </div>281 </div>282 </div>283 </div>284 285 <!-- Week 2 -->286 <div class="section muted">287 <div class="week-label">Week 2</div>288 <div class="week-card">289 <div class="days">290 <div class="day">1</div>291 <svg class="arrow" viewBox="0 0 16 16">292 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>293 </svg>294 <div class="day">2</div>295 <svg class="arrow" viewBox="0 0 16 16">296 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>297 </svg>298 <div class="day">3</div>299 <svg class="arrow" viewBox="0 0 16 16">300 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>301 </svg>302 <div class="day">4</div>303 304 <div style="flex-basis:100%; height:0;"></div>305 306 <div class="day">5</div>307 <svg class="arrow" viewBox="0 0 16 16">308 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>309 </svg>310 <div class="day">6</div>311 <svg class="arrow" viewBox="0 0 16 16">312 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 <div class="day">7</div>315 <svg class="arrow" viewBox="0 0 16 16">316 <path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>317 </svg>318 319 <div class="trophy">320 <svg width="86" height="86" viewBox="0 0 48 48" fill="none">321 <path d="M12 10h24v10a12 12 0 01-24 0V10z" stroke="#9EA3AE" stroke-width="3" fill="#ECEFF1"/>322 <path d="M8 10h8v6a8 8 0 01-8-6zM32 10h8a8 8 0 01-8 6V10z" fill="#CFD8DC"/>323 <rect x="18" y="30" width="12" height="6" fill="#B0BEC5"/>324 <rect x="14" y="36" width="20" height="8" fill="#9EA3AE"/>325 <rect x="20" y="38" width="8" height="4" fill="#fff"/>326 </svg>327 <span class="badge">2</span>328 </div>329 </div>330 </div>331 </div>332 333 <!-- Week 3 -->334 <div class="section muted">335 <div class="week-label">Week 3</div>336 <div class="week-card">337 <div class="days">338 <div class="day">1</div>339 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>340 <div class="day">2</div>341 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>342 <div class="day">3</div>343 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>344 <div class="day">4</div>345 346 <div style="flex-basis:100%; height:0;"></div>347 348 <div class="day">5</div>349 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>350 <div class="day">6</div>351 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>352 <div class="day">7</div>353 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>354 355 <div class="trophy">356 <svg width="86" height="86" viewBox="0 0 48 48" fill="none">357 <path d="M12 10h24v10a12 12 0 01-24 0V10z" stroke="#9EA3AE" stroke-width="3" fill="#ECEFF1"/>358 <path d="M8 10h8v6a8 8 0 01-8-6zM32 10h8a8 8 0 01-8 6V10z" fill="#CFD8DC"/>359 <rect x="18" y="30" width="12" height="6" fill="#B0BEC5"/>360 <rect x="14" y="36" width="20" height="8" fill="#9EA3AE"/>361 <rect x="20" y="38" width="8" height="4" fill="#fff"/>362 </svg>363 <span class="badge">3</span>364 </div>365 </div>366 </div>367 </div>368 369 <!-- Week 4 -->370 <div class="section muted">371 <div class="week-label">Week 4</div>372 <div class="week-card">373 <div class="days">374 <div class="day">1</div>375 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>376 <div class="day">2</div>377 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>378 <div class="day">3</div>379 <svg class="arrow" viewBox="0 0 16 16"><path d="M4 3l6 5-6 5" fill="none" stroke="#B9BEC7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>380 <div class="day">4</div>381 </div>382 </div>383 </div>384 385 </div>386 387 <!-- CTA -->388 <div class="cta">GO!</div>389 390 <!-- Ad banner -->391 <div class="ad-banner">392 <div class="ad-thumb">[IMG: Brand logo]</div>393 <div class="ad-copy">394 <div class="ad-title">Purewash by Kohler AD</div>395 <div class="ad-desc">Make your personal space advanced with the smart features of Purewash...</div>396 </div>397 <div class="ad-cta">KNOW MORE!</div>398 </div>399 400 <div class="gesture"></div>401</div>402</body>403</html>