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>Home Workout UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; font-family: "Inter", Arial, sans-serif; color: #111;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; box-sizing: border-box; color: #111;19 }20 .status-left { display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 600; }21 .sb-pill, .sb-dot {22 width: 38px; height: 38px; border-radius: 10px; background: #ECECEC; display: inline-block;23 }24 .sb-dot { width: 14px; height: 14px; border-radius: 7px; background: #9E9E9E; }25 .status-right { display: flex; align-items: center; gap: 24px; }26 .icon { width: 40px; height: 40px; }27 28 /* Page content */29 .content { position: absolute; top: 120px; left: 0; right: 0; padding: 0 48px; box-sizing: border-box; }30 31 .title { font-size: 72px; font-weight: 900; letter-spacing: 1px; margin: 30px 0 20px; }32 33 /* Stats row */34 .stats { display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 40px; }35 .stat { width: 32%; text-align: center; }36 .stat .num { font-size: 66px; font-weight: 800; line-height: 1; }37 .stat .label { font-size: 28px; color: #777; letter-spacing: 2px; margin-top: 10px; }38 39 /* Week goal card */40 .card {41 background: #fff; border: 1px solid #EAEAEA; border-radius: 36px;42 box-shadow: 0 8px 24px rgba(0,0,0,0.06);43 }44 .week-goal {45 height: 340px; padding: 24px; margin-bottom: 36px; position: relative;46 }47 .week-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 16px; }48 .week-title { font-size: 46px; font-weight: 800; }49 .week-count { font-size: 40px; font-weight: 800; color: #1E58FF; }50 .goal-grid { display: flex; gap: 18px; padding: 12px 6px; }51 .goal-item {52 flex: 1; height: 240px;53 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;54 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;55 }56 57 /* Challenge blue card */58 .challenge {59 height: 560px; border-radius: 40px; overflow: hidden; margin-bottom: 40px;60 background: radial-gradient(1200px 700px at 30% 20%, #1E58FF 0%, #1646CF 65%, #133DB5 100%);61 position: relative; color: #fff;62 padding: 40px; box-sizing: border-box;63 }64 .challenge h2 { font-size: 64px; font-weight: 900; line-height: 1.05; margin: 0 0 18px; }65 .challenge p { font-size: 32px; line-height: 1.4; opacity: 0.95; margin: 0 0 36px; max-width: 72%; }66 .cta {67 width: 640px; height: 96px; border-radius: 48px; background: #fff; color: #1E58FF;68 display: flex; align-items: center; justify-content: center;69 font-size: 42px; font-weight: 900; letter-spacing: 1px;70 }71 .challenge .img-placeholder {72 position: absolute; right: 24px; bottom: 24px; width: 440px; height: 480px;73 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 26px;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;75 }76 77 /* Section heading */78 .section-title { font-size: 56px; font-weight: 900; margin: 8px 0 20px; }79 80 /* Beginner card with image */81 .beginner-card {82 height: 370px; border-radius: 36px; position: relative; overflow: hidden; margin-bottom: 34px;83 background: #000;84 }85 .beginner-card .img {86 position: absolute; inset: 0;87 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;88 display: flex; align-items: center; justify-content: center; font-size: 32px;89 }90 .beginner-card .overlay {91 position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);92 }93 .badge-row { position: absolute; top: 24px; left: 24px; display: flex; gap: 12px; }94 .bolt { width: 28px; height: 28px; }95 .beginner-text { position: absolute; left: 24px; bottom: 70px; color: #fff; }96 .beginner-title { font-size: 56px; font-weight: 900; margin: 0 0 6px; }97 .beginner-sub { font-size: 30px; color: #ddd; }98 99 /* Bottom navigation */100 .bottom-bar {101 position: absolute; bottom: 0; left: 0; width: 100%; height: 220px;102 background: #fff; border-top: 1px solid #EAEAEA;103 display: flex; align-items: center; justify-content: space-around;104 padding-bottom: 40px; box-sizing: border-box;105 }106 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #777; }107 .nav-item .label { font-size: 28px; }108 .nav-item .icon { width: 64px; height: 64px; }109 .active { color: #1E58FF; }110 .home-indicator {111 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);112 width: 300px; height: 10px; background: #111; border-radius: 8px;113 opacity: 0.6;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div class="status-left">123 <span>11:01</span>124 <div class="sb-pill"></div>125 <div class="sb-pill"></div>126 <div class="sb-pill"></div>127 <div class="sb-pill"></div>128 <div class="sb-dot"></div>129 </div>130 <div class="status-right">131 <!-- WiFi -->132 <svg class="icon" viewBox="0 0 24 24">133 <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>134 <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>135 <path d="M9 15c2-2 4-2 6 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>136 <circle cx="12" cy="18" r="1.6" fill="#444"/>137 </svg>138 <!-- Battery -->139 <svg class="icon" viewBox="0 0 26 24">140 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"/>141 <rect x="4" y="8" width="12" height="8" rx="1" fill="#4CAF50"/>142 <rect x="21" y="9" width="3" height="6" rx="1" fill="#444"/>143 </svg>144 </div>145 </div>146 147 <div class="content">148 <div class="title">HOME WORKOUT</div>149 150 <!-- Stats -->151 <div class="stats">152 <div class="stat">153 <div class="num">0</div>154 <div class="label">WORKOUT</div>155 </div>156 <div class="stat">157 <div class="num">0</div>158 <div class="label">KCAL</div>159 </div>160 <div class="stat">161 <div class="num">0</div>162 <div class="label">MINUTE</div>163 </div>164 </div>165 166 <!-- Week Goal Card -->167 <div class="card week-goal">168 <div class="week-header">169 <div class="week-title">WEEK GOAL</div>170 <div class="week-count">0/4</div>171 </div>172 <div class="goal-grid">173 <div class="goal-item">[IMG: Goal item]</div>174 <div class="goal-item">[IMG: Goal item]</div>175 <div class="goal-item">[IMG: Goal item]</div>176 </div>177 </div>178 179 <!-- Full Body Challenge -->180 <div class="challenge">181 <h2>FULL<br>BODY 7X4<br>CHALLENGE</h2>182 <p>Start your body-toning journey to target all muscle groups and build your dream body in 4 weeks!</p>183 <div class="cta">START</div>184 <div class="img-placeholder">[IMG: Muscular torso]</div>185 </div>186 187 <!-- Beginner Section -->188 <div class="section-title">BEGINNER</div>189 190 <!-- Beginner Card -->191 <div class="beginner-card card">192 <div class="img">[IMG: Man doing sit-ups]</div>193 <div class="overlay"></div>194 <div class="badge-row">195 <!-- blue bolt -->196 <svg class="bolt" viewBox="0 0 24 24">197 <path d="M10 2L4 13h6l-2 9 8-12h-6l0-8z" fill="#1E58FF"/>198 </svg>199 <!-- grey bolt -->200 <svg class="bolt" viewBox="0 0 24 24">201 <path d="M10 2L4 13h6l-2 9 8-12h-6l0-8z" fill="#BDBDBD"/>202 </svg>203 </div>204 <div class="beginner-text">205 <div class="beginner-title">ABS BEGINNER</div>206 <div class="beginner-sub">20 MINS • 16 EXERCISES</div>207 </div>208 </div>209 </div>210 211 <!-- Bottom Navigation -->212 <div class="bottom-bar">213 <div class="nav-item active">214 <svg class="icon" viewBox="0 0 24 24">215 <circle cx="12" cy="12" r="9" fill="none" stroke="#1E58FF" stroke-width="2"/>216 <path d="M12 6v6l4 2" fill="none" stroke="#1E58FF" stroke-width="2" stroke-linecap="round"/>217 </svg>218 <div class="label">Training</div>219 </div>220 <div class="nav-item">221 <svg class="icon" viewBox="0 0 24 24">222 <path d="M12 3c-5 6-5 12 0 18 5-6 5-12 0-18z" fill="none" stroke="#777" stroke-width="2"/>223 <path d="M12 9c-3 2-3 5 0 7" fill="none" stroke="#777" stroke-width="2"/>224 </svg>225 <div class="label">Discover</div>226 </div>227 <div class="nav-item">228 <svg class="icon" viewBox="0 0 24 24">229 <rect x="4" y="10" width="4" height="8" fill="#777"/>230 <rect x="10" y="6" width="4" height="12" fill="#777"/>231 <rect x="16" y="12" width="4" height="6" fill="#777"/>232 </svg>233 <div class="label">Report</div>234 </div>235 <div class="nav-item">236 <svg class="icon" viewBox="0 0 24 24">237 <circle cx="12" cy="12" r="4" fill="none" stroke="#777" stroke-width="2"/>238 <path d="M12 2v3M20 12h3M12 19v3M1 12h3M5 5l2 2M17 5l-2 2M5 19l2-2M17 19l-2-2" stroke="#777" stroke-width="2" stroke-linecap="round"/>239 </svg>240 <div class="label">Settings</div>241 </div>242 <div class="home-indicator"></div>243 </div>244 245</div>246</body>247</html>