GD-ML/AndroidCode

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>Workout Plan Preview</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 0;24    right: 0;25    height: 120px;26    padding: 0 48px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #4a4a4a;31    font-size: 44px;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .icon {39    display: inline-flex;40    align-items: center;41    justify-content: center;42  }43 44  /* Avatar placeholder */45  .avatar {46    width: 220px;47    height: 220px;48    margin: 260px auto 40px;49    border-radius: 50%;50    background: #E0E0E0;51    border: 1px solid #BDBDBD;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #757575;56    font-size: 28px;57    text-align: center;58  }59 60  /* Title */61  .title {62    width: 920px;63    margin: 20px auto 32px;64    text-align: center;65    font-weight: 800;66    font-size: 64px;67    line-height: 1.15;68    letter-spacing: 0.2px;69  }70 71  /* Tags row */72  .tags {73    display: flex;74    justify-content: center;75    gap: 140px;76    margin: 12px 0 60px;77  }78  .tag {79    display: inline-flex;80    align-items: center;81    gap: 18px;82    font-weight: 700;83    font-size: 36px;84    color: #222;85  }86 87  /* Preview heading */88  .preview {89    text-align: center;90    font-size: 44px;91    font-weight: 800;92    letter-spacing: 0.5px;93    margin-bottom: 22px;94    color: #2a2a2a;95  }96  .preview .dot {97    margin: 0 12px;98    opacity: 0.8;99  }100  .preview .day {101    color: #1E5BFF;102    font-weight: 800;103  }104 105  /* Compare card */106  .compare-card {107    width: 960px;108    margin: 0 auto;109    border-radius: 40px;110    overflow: hidden;111    position: relative;112    box-shadow: 0 2px 0 rgba(0,0,0,0.04);113  }114  .compare-header {115    display: grid;116    grid-template-columns: 1fr 1fr;117    height: 130px;118  }119  .compare-header .before {120    background: #3B3B3B;121    color: #fff;122    display: flex;123    align-items: center;124    justify-content: center;125    font-weight: 800;126    font-size: 42px;127  }128  .compare-header .after {129    background: #1E5BFF;130    color: #fff;131    display: flex;132    align-items: center;133    justify-content: center;134    font-weight: 800;135    font-size: 42px;136  }137  .divider-arrow {138    position: absolute;139    top: 52px;140    left: calc(50% - 18px);141    width: 36px;142    height: 36px;143  }144 145  .table {146    background: #EFEFEF;147    border-top: 1px solid #E0E0E0;148  }149  .row {150    display: grid;151    grid-template-columns: 1fr 140px 1fr 140px;152    padding: 36px 48px;153    font-size: 34px;154    align-items: center;155    border-bottom: 1px solid #E4E4E4;156  }157  .row:last-child { border-bottom: none; }158  .label {159    color: #232323;160    letter-spacing: 0.3px;161  }162  .value {163    text-align: right;164    font-weight: 800;165    color: #111;166  }167  .time {168    font-weight: 800;169  }170  .right.label { padding-left: 40px; }171 172  /* Action button */173  .finish-btn {174    width: 936px;175    height: 150px;176    margin: 100px auto 28px;177    border: none;178    outline: none;179    border-radius: 90px;180    background: linear-gradient(90deg, #2D70FF 0%, #1A55E8 100%);181    color: #fff;182    font-size: 52px;183    font-weight: 800;184    letter-spacing: 0.5px;185    cursor: default;186    display: block;187  }188 189  .secondary-link {190    text-align: center;191    color: #8A8A8A;192    font-size: 34px;193    margin-top: 16px;194  }195 196  /* Home indicator */197  .home-indicator {198    position: absolute;199    bottom: 32px;200    left: 50%;201    transform: translateX(-50%);202    width: 300px;203    height: 10px;204    background: #000;205    opacity: 0.8;206    border-radius: 6px;207  }208</style>209</head>210<body>211<div id="render-target">212  <!-- Status bar -->213  <div class="status-bar">214    <div class="status-left">215      <div>9:54</div>216      <div class="icon" aria-label="status icon">217        <svg width="44" height="44" viewBox="0 0 24 24">218          <path d="M2 5h20v14H2z" fill="none" stroke="#676767" stroke-width="1.6"/>219          <path d="M2 5l10 8 10-8" fill="none" stroke="#676767" stroke-width="1.6"/>220        </svg>221      </div>222    </div>223    <div class="status-right">224      <div class="icon" aria-label="wifi">225        <svg width="44" height="44" viewBox="0 0 24 24">226          <path d="M2 8c5.5-4.5 14.5-4.5 20 0" fill="none" stroke="#676767" stroke-width="1.6" stroke-linecap="round"/>227          <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#676767" stroke-width="1.6" stroke-linecap="round"/>228          <path d="M8.5 15c2.5-2 6.5-2 9 0" fill="none" stroke="#676767" stroke-width="1.6" stroke-linecap="round"/>229          <circle cx="12" cy="18" r="1.6" fill="#676767"/>230        </svg>231      </div>232      <div class="icon" aria-label="battery">233        <svg width="44" height="44" viewBox="0 0 24 24">234          <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#676767" stroke-width="1.6"/>235          <rect x="4" y="9" width="12" height="6" rx="1" ry="1" fill="#676767"/>236          <rect x="20" y="10" width="2.5" height="4" rx="0.8" fill="#676767"/>237        </svg>238      </div>239    </div>240  </div>241 242  <!-- Avatar placeholder -->243  <div class="avatar">[IMG: Person in white shirt]</div>244 245  <!-- Title -->246  <div class="title">A new and harder 28 days plan is ready for you!</div>247 248  <!-- Tags -->249  <div class="tags">250    <div class="tag">251      <span>CARDIO</span>252      <svg width="22" height="22" viewBox="0 0 20 20">253        <path d="M10 4l6 10H4z" fill="#F26B35"/>254      </svg>255    </div>256    <div class="tag">257      <span>POWER</span>258      <svg width="22" height="22" viewBox="0 0 20 20">259        <path d="M10 4l6 10H4z" fill="#1E5BFF"/>260      </svg>261    </div>262  </div>263 264  <!-- Preview heading -->265  <div class="preview">266    <span>PREVIEW</span>267    <span class="dot">·</span>268    <span class="day">DAY 1</span>269  </div>270 271  <!-- Comparison card -->272  <div class="compare-card">273    <div class="compare-header">274      <div class="before">Before</div>275      <div class="after">After</div>276    </div>277    <div class="divider-arrow" aria-hidden="true">278      <svg width="36" height="36" viewBox="0 0 24 24">279        <path d="M8 5l8 7-8 7V5z" fill="#ffffff"/>280      </svg>281    </div>282 283    <div class="table">284      <div class="row">285        <div class="label">KNEE PUSH-UPS</div>286        <div class="value">×4</div>287        <div class="label right label">KNEE PUSH-UPS</div>288        <div class="value">×6</div>289      </div>290      <div class="row">291        <div class="label">PUSH-UPS</div>292        <div class="value">×4</div>293        <div class="label right label">PUSH-UPS</div>294        <div class="value">×6</div>295      </div>296      <div class="row">297        <div class="label">WIDE ARM PUSH-UPS</div>298        <div class="value">×4</div>299        <div class="label right label">WIDE ARM PUSH-UPS</div>300        <div class="value">×6</div>301      </div>302      <div class="row">303        <div class="label">COBRA STRETCH</div>304        <div class="value time">00:20</div>305        <div class="label right label">COBRA STRETCH</div>306        <div class="value time">00:20</div>307      </div>308      <div class="row">309        <div class="label">CHEST STRETCH</div>310        <div class="value time">00:20</div>311        <div class="label right label">CHEST STRETCH</div>312        <div class="value time">00:20</div>313      </div>314    </div>315  </div>316 317  <!-- Action button -->318  <button class="finish-btn">Finish</button>319 320  <!-- Secondary link -->321  <div class="secondary-link">No, I'd prefer my previous plan</div>322 323  <!-- Home indicator -->324  <div class="home-indicator"></div>325</div>326</body>327</html>