GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Workout Day UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:44px;11 }12 13 /* Hero */14 .hero {15 position:absolute; left:0; top:0; width:100%; height:640px;16 background:17 linear-gradient(180deg, rgba(0,0,0,0.80), rgba(0,0,0,0.65)),18 radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 60%),19 #121212;20 }21 .hero::after {22 content:""; position:absolute; inset:0;23 background:24 repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 18px, rgba(255,255,255,0) 18px 36px);25 mix-blend-mode: overlay; opacity:0.25;26 }27 .status-bar {28 position:absolute; top:22px; left:24px; right:24px; height:48px;29 display:flex; align-items:center; justify-content:space-between; color:#fff;30 font-weight:600; font-size:32px;31 }32 .status-right { display:flex; align-items:center; gap:18px; }33 .icon { display:inline-block; }34 35 .back-btn {36 position:absolute; left:24px; top:120px; width:64px; height:64px; display:flex; align-items:center; justify-content:center;37 }38 .back-btn svg { width:40px; height:40px; stroke:#fff; stroke-width:4; fill:none; }39 40 .hero-image {41 position:absolute; right:0; bottom:0; top:70px; width:700px;42 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;43 display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600;44 }45 46 .hero-text {47 position:absolute; left:104px; bottom:140px; color:#fff;48 }49 .hero-text .title {50 font-size:90px; font-weight:800; letter-spacing:-1px;51 }52 .hero-text .subtitle {53 margin-top:10px; font-size:34px; font-weight:600; letter-spacing:2px; opacity:0.9;54 }55 56 /* Content sheet */57 .sheet {58 position:absolute; left:0; top:640px; width:100%; height:auto; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;59 box-shadow: 0 -2px 10px rgba(0,0,0,0.08);60 }61 62 .summary {63 display:flex; align-items:center; gap:18px; padding:36px 40px 24px 40px;64 border-bottom:1px solid #eee;65 }66 .summary .bar {67 width:6px; height:34px; background:#2E6BFF; border-radius:4px;68 }69 .summary .text {70 font-size:40px; font-weight:800; color:#333;71 }72 73 /* List */74 .list { padding:12px 0; }75 .item {76 display:flex; align-items:center; gap:24px; padding:36px 40px;77 border-bottom:1px solid #eee;78 }79 .drag {80 width:48px; display:flex; align-items:center; justify-content:center;81 }82 .thumb {83 width:160px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;84 display:flex; align-items:center; justify-content:center; text-align:center; font-size:28px; font-weight:600;85 border-radius:12px;86 }87 .details { flex:1; }88 .details .name {89 font-size:48px; font-weight:800; color:#111; letter-spacing:0.5px;90 }91 .details .meta {92 margin-top:8px; font-size:32px; color:#7A7A7A; font-weight:600;93 }94 95 /* Floating Adjust pill */96 .adjust-pill {97 position:absolute; right:0; top:1400px; background:#111; color:#fff;98 padding:22px 28px; border-top-left-radius:26px; border-bottom-left-radius:26px;99 display:flex; align-items:center; gap:14px;100 box-shadow: 0 8px 24px rgba(0,0,0,0.25);101 }102 .adjust-pill svg { width:40px; height:40px; fill:none; stroke:#fff; stroke-width:2.5; }103 104 /* Start button */105 .start-wrap { position:absolute; left:0; right:0; top:1950px; display:flex; justify-content:center; }106 .start-btn {107 width:940px; height:160px; border-radius:90px;108 background: linear-gradient(90deg, #2F6DFF, #2A63F1);109 color:#fff; font-size:64px; font-weight:800; text-align:center; line-height:160px;110 box-shadow: 0 12px 24px rgba(42,99,241,0.35);111 }112 113 /* Ad card */114 .ad-card {115 position:absolute; left:0; top:2140px; width:100%; height:220px; background:#F7F7F7; border-top:1px solid #E0E0E0;116 display:flex; align-items:center; padding:24px 28px; gap:24px;117 }118 .ad-thumb {119 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;120 display:flex; align-items:center; justify-content:center; font-weight:700; border-radius:12px;121 }122 .ad-content { flex:1; }123 .ad-title { font-size:36px; font-weight:800; color:#222; }124 .ad-sub { margin-top:8px; font-size:28px; color:#666; max-width:700px; }125 .ad-cta {126 background:#7ED1D5; color:#033D3F; font-weight:800; border-radius:40px; padding:26px 34px; font-size:32px;127 display:flex; align-items:center; gap:14px;128 }129 .ad-cta svg { width:28px; height:28px; fill:none; stroke:#033D3F; stroke-width:2.5; }130 131 /* Bottom handle */132 .home-area { position:absolute; left:0; bottom:0; width:100%; height:70px; background:#000; display:flex; align-items:center; justify-content:center; }133 .home-pill { width:220px; height:10px; background:#fff; border-radius:8px; opacity:0.9; }134</style>135</head>136<body>137<div id="render-target">138 139 <div class="hero">140 <div class="status-bar">141 <div>11:05</div>142 <div class="status-right">143 <!-- simple icons -->144 <span class="icon">145 <svg viewBox="0 0 36 36">146 <path d="M3 12c9-9 21-9 30 0" stroke="#fff" stroke-width="3" fill="none"/>147 <path d="M7 16c7-7 15-7 22 0" stroke="#fff" stroke-width="3" fill="none"/>148 <path d="M11 20c5-5 9-5 14 0" stroke="#fff" stroke-width="3" fill="none"/>149 <circle cx="18" cy="26" r="2.5" fill="#fff"/>150 </svg>151 </span>152 <span class="icon">153 <svg viewBox="0 0 40 40">154 <rect x="6" y="10" width="26" height="20" rx="3" ry="3" stroke="#fff" stroke-width="3" fill="none"/>155 <rect x="9" y="13" width="20" height="14" fill="#fff"/>156 <rect x="33" y="16" width="3" height="8" fill="#fff"/>157 </svg>158 </span>159 </div>160 </div>161 162 <div class="back-btn">163 <svg viewBox="0 0 40 40">164 <path d="M26 8 L12 20 L26 32" />165 </svg>166 </div>167 168 <div class="hero-image">[IMG: Fitness hero]</div>169 170 <div class="hero-text">171 <div class="title">Day 1</div>172 <div class="subtitle">FULL BODY</div>173 </div>174 </div>175 176 <div class="sheet">177 <div class="summary">178 <div class="bar"></div>179 <div class="text">9 mins • 11 Workouts</div>180 </div>181 182 <div class="list">183 <div class="item">184 <div class="drag">185 <svg viewBox="0 0 36 36">186 <path d="M6 10 H30 M6 18 H30 M6 26 H30" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>187 </svg>188 </div>189 <div class="thumb">[IMG: Exercise illustration]</div>190 <div class="details">191 <div class="name">JUMPING JACKS</div>192 <div class="meta">00:20</div>193 </div>194 </div>195 196 <div class="item">197 <div class="drag">198 <svg viewBox="0 0 36 36">199 <path d="M6 10 H30 M6 18 H30 M6 26 H30" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>200 </svg>201 </div>202 <div class="thumb">[IMG: Exercise illustration]</div>203 <div class="details">204 <div class="name">INCLINE PUSH-UPS</div>205 <div class="meta">x10</div>206 </div>207 </div>208 209 <div class="item">210 <div class="drag">211 <svg viewBox="0 0 36 36">212 <path d="M6 10 H30 M6 18 H30 M6 26 H30" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>213 </svg>214 </div>215 <div class="thumb">[IMG: Exercise illustration]</div>216 <div class="details">217 <div class="name">KNEE PUSH-UPS</div>218 <div class="meta">x6</div>219 </div>220 </div>221 222 <div class="item">223 <div class="drag">224 <svg viewBox="0 0 36 36">225 <path d="M6 10 H30 M6 18 H30 M6 26 H30" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>226 </svg>227 </div>228 <div class="thumb">[IMG: Exercise illustration]</div>229 <div class="details">230 <div class="name">PUSH-UPS</div>231 <div class="meta">x6</div>232 </div>233 </div>234 235 <div class="item">236 <div class="drag">237 <svg viewBox="0 0 36 36">238 <path d="M6 10 H30 M6 18 H30 M6 26 H30" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>239 </svg>240 </div>241 <div class="thumb">[IMG: Exercise illustration]</div>242 <div class="details">243 <div class="name">WIDE ARM PUSH-UPS</div>244 <div class="meta">x6</div>245 </div>246 </div>247 </div>248 </div>249 250 <div class="adjust-pill">251 <svg viewBox="0 0 40 40">252 <rect x="9" y="8" width="22" height="26" rx="3" ry="3" />253 <path d="M14 8 h12 v5 h-12 z" />254 <path d="M14 18 h12 M14 24 h12" />255 </svg>256 <div style="font-size:34px; font-weight:800;">Adjust</div>257 </div>258 259 <div class="start-wrap">260 <div class="start-btn">Start</div>261 </div>262 263 <div class="ad-card">264 <div class="ad-thumb">[IMG: KOHLER logo]</div>265 <div class="ad-content">266 <div class="ad-title">Spacity by Kohler <span style="color:#8AA2A6; font-weight:800;">AD</span></div>267 <div class="ad-sub">Give your bathroom a premium essence with the ultimate in bathroom experience</div>268 </div>269 <div class="ad-cta">270 <svg viewBox="0 0 28 28">271 <circle cx="14" cy="14" r="11" fill="none" stroke="#033D3F"/>272 <circle cx="14" cy="9" r="1.6" fill="#033D3F"/>273 <path d="M14 12 v8" stroke="#033D3F" stroke-width="2.5"/>274 </svg>275 <span>KNOW MORE!</span>276 </div>277 </div>278 279 <div class="home-area"><div class="home-pill"></div></div>280 281</div>282</body>283</html>