GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Exercise Goals</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar (gray) */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #9E9E9E;25 }26 .status-icons {27 position: absolute;28 right: 24px;29 top: 26px;30 display: flex;31 gap: 22px;32 align-items: center;33 }34 .dot {35 width: 22px; height: 22px; background:#fff; border-radius:50%;36 opacity: 0.9;37 }38 39 /* App bar */40 .appbar {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1080px;45 height: 140px;46 border-bottom: 1px solid #ececec;47 display: flex;48 align-items: center;49 justify-content: center;50 background: #fff;51 }52 .appbar h1 {53 font-size: 54px;54 margin: 0;55 font-weight: 700;56 color: #1b1b1b;57 letter-spacing: 0.2px;58 }59 .icon-btn {60 position: absolute;61 width: 100px;62 height: 100px;63 top: 30px;64 display: flex;65 align-items: center;66 justify-content: center;67 cursor: default;68 }69 .icon-back { left: 16px; }70 .icon-info { right: 16px; }71 72 /* Header row under title */73 .header-row {74 position: absolute;75 top: 280px;76 left: 40px;77 right: 40px;78 height: 70px;79 display: flex;80 align-items: center;81 color: #777;82 font-size: 36px;83 }84 .header-row .spacer { flex: 1; } /* left side where exercise name goes */85 .header-row .col {86 display: inline-block;87 text-align: left;88 }89 .header-row .col.period { width: 140px; color:#3DA0FF; font-weight: 700; }90 .header-row .col.progress { width: 300px; text-align: left; }91 .header-row .col.goal { width: 140px; text-align: left; }92 93 /* List rows */94 .list {95 position: absolute;96 top: 360px;97 left: 24px;98 right: 24px;99 }100 .list-row {101 display: flex;102 align-items: center;103 padding: 26px 16px;104 height: 180px;105 border-bottom: 1px solid #f0f0f0;106 }107 .avatar {108 width: 96px; height: 96px; border-radius: 50%;109 background: #E0E0E0; border: 1px solid #BDBDBD;110 display: flex; align-items: center; justify-content: center;111 color: #757575; font-size: 22px;112 margin: 0 24px 0 12px;113 }114 .title {115 font-size: 40px; color: #1c1c1c; font-weight: 600;116 flex: 1;117 }118 .values {119 display: flex;120 align-items: center;121 gap: 40px;122 margin-right: 20px;123 }124 .val-na {125 width: 140px;126 color: #3DA0FF;127 font-size: 40px;128 font-weight: 700;129 }130 .progress-bar {131 width: 320px; height: 22px; background: #E9E9E9; border-radius: 12px;132 position: relative;133 }134 .goal-na {135 width: 140px; font-size: 40px; color: #333; text-align: left;136 }137 138 /* Bottom Add button */139 .bottom-actions {140 position: absolute;141 left: 0; right: 0;142 bottom: 160px; /* above nav bar */143 display: flex;144 justify-content: center;145 }146 .add-btn {147 width: 980px; height: 140px;148 background: #64B5F6;149 border-radius: 24px;150 color: #fff;151 display: flex; align-items: center; justify-content: center;152 font-size: 48px; font-weight: 800;153 letter-spacing: 1px;154 }155 156 /* Bottom navigation area (black) */157 .nav-bar {158 position: absolute;159 bottom: 0; left: 0;160 width: 1080px; height: 160px; background: #000;161 }162 .nav-handle {163 position: absolute;164 left: 50%; transform: translateX(-50%);165 bottom: 46px;166 width: 300px; height: 10px; border-radius: 6px; background: #bdbdbd;167 opacity: 0.8;168 }169 170 /* Simple icon svgs */171 svg { display: block; }172</style>173</head>174<body>175<div id="render-target">176 177 <div class="status-bar">178 <div class="status-icons">179 <div class="dot"></div>180 <div class="dot"></div>181 <div class="dot" style="width: 28px; height: 28px;"></div>182 </div>183 </div>184 185 <div class="appbar">186 <div class="icon-btn icon-back">187 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">188 <path d="M15.5 4.5L8 12l7.5 7.5" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>189 </svg>190 </div>191 <h1>Exercise Goals</h1>192 <div class="icon-btn icon-info">193 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">194 <circle cx="12" cy="12" r="10" stroke="#222" stroke-width="2"/>195 <path d="M12 7.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 3v7" stroke="#222" stroke-width="2" stroke-linecap="round"/>196 </svg>197 </div>198 </div>199 200 <div class="header-row">201 <div class="spacer"></div>202 <div class="col period">3M</div>203 <div class="col progress">Progress</div>204 <div class="col goal">Goal</div>205 </div>206 207 <div class="list">208 <!-- Row 1 -->209 <div class="list-row">210 <div class="avatar">[IMG]</div>211 <div class="title">Barbell Bench Press</div>212 <div class="values">213 <div class="val-na">N/A</div>214 <div class="progress-bar"></div>215 <div class="goal-na">N/A</div>216 </div>217 </div>218 <!-- Row 2 -->219 <div class="list-row">220 <div class="avatar">[IMG]</div>221 <div class="title">Barbell Squat</div>222 <div class="values">223 <div class="val-na">N/A</div>224 <div class="progress-bar"></div>225 <div class="goal-na">N/A</div>226 </div>227 </div>228 <!-- Row 3 -->229 <div class="list-row">230 <div class="avatar">[IMG]</div>231 <div class="title">Barbell Deadlift</div>232 <div class="values">233 <div class="val-na">N/A</div>234 <div class="progress-bar"></div>235 <div class="goal-na">N/A</div>236 </div>237 </div>238 </div>239 240 <div class="bottom-actions">241 <div class="add-btn">ADD GOALS</div>242 </div>243 244 <div class="nav-bar">245 <div class="nav-handle"></div>246 </div>247 248</div>249</body>250</html>