GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Workout Day 1</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11  }12 13  /* Status spacer (just to give top padding like a mobile status bar) */14  .top-space { height: 56px; }15 16  /* Toast */17  .toast {18    position:absolute; left:36px; right:36px; top:74px;19    background:#fff; border-radius:28px; box-shadow:0 8px 20px rgba(0,0,0,0.12);20    display:flex; align-items:center; padding:24px 28px; gap:18px; font-size:40px;21  }22  .toast .icon {23    width:56px; height:56px; background:#E8F5E9; border-radius:50%;24    display:flex; align-items:center; justify-content:center;25  }26  .toast .text { font-weight:600; }27 28  /* Hero */29  .hero {30    margin-top:168px;31    position:relative; height:420px; overflow:hidden; border-bottom:1px solid #ececec;32  }33  .hero .img {34    position:absolute; inset:0;35    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;36    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;37  }38  .hero .shade {39    position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.2));40  }41  .hero .title {42    position:absolute; left:36px; bottom:36px; color:#fff;43  }44  .hero .title h1 { margin:0; font-size:86px; font-weight:800; letter-spacing:0.5px; }45  .hero .title .sub { margin-top:6px; font-size:36px; letter-spacing:2px; opacity:0.9; }46 47  /* Section header */48  .summary {49    display:flex; align-items:center; gap:18px; padding:28px 36px; font-size:44px; font-weight:700;50    border-bottom:1px solid #eee;51  }52  .summary .bar { width:10px; height:44px; background:#1E63FF; border-radius:5px; }53 54  /* Workout list */55  .list { padding-bottom:520px; } /* room for bottom button and ad */56  .workout {57    display:flex; align-items:center; gap:28px; padding:34px 24px 34px 24px;58    border-bottom:1px solid #EFEFEF;59  }60  .drag {61    width:56px; display:flex; justify-content:center;62  }63  .drag svg { opacity:0.45; }64  .thumb {65    width:240px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:10px;66    display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;67  }68  .info { flex:1; }69  .info .name {70    margin:6px 0 6px; font-size:56px; font-weight:800; letter-spacing:0.5px;71  }72  .info .meta { color:#666; font-size:36px; }73 74  /* Floating Adjust pill */75  .adjust {76    position:absolute; right:24px; top:1400px;77    background:#1b1b1b; color:#fff; padding:22px 26px; border-radius:22px 22px 22px 22px;78    display:flex; align-items:center; gap:14px; font-size:38px; box-shadow:0 8px 16px rgba(0,0,0,0.2);79  }80  .adjust .ico {81    width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center;82  }83 84  /* Start button */85  .start-wrap {86    position:absolute; left:36px; right:36px; bottom:300px;87    display:flex; justify-content:center;88  }89  .start-btn {90    width:100%; height:140px; border-radius:70px; font-size:56px; font-weight:800; color:#fff; border:none; cursor:pointer;91    background:linear-gradient(90deg, #0A5BFF, #0071FF);92    box-shadow:0 12px 24px rgba(0,92,255,0.25);93  }94 95  /* Ad card */96  .ad {97    position:absolute; left:0; right:0; bottom:120px; background:#F2F4F7; border-top:1px solid #E0E3E8; padding:24px 24px;98    display:flex; align-items:center; gap:22px;99  }100  .ad .logo {101    width:130px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;102  }103  .ad .adtext { flex:1; }104  .ad .adtext .headline { font-weight:700; font-size:36px; margin-bottom:8px; }105  .ad .adtext .copy { color:#667085; font-size:30px; line-height:1.25; }106  .ad .cta {107    background:#3EC1BE; color:#fff; border:none; border-radius:30px; padding:24px 30px; font-size:34px; font-weight:800;108  }109 110  /* Home indicator */111  .home-indicator {112    position:absolute; left:50%; transform:translateX(-50%); bottom:34px; width:320px; height:10px; background:#ddd; border-radius:10px;113  }114 115</style>116</head>117<body>118<div id="render-target">119 120  <div class="top-space"></div>121 122  <div class="toast">123    <div class="icon">124      <svg width="36" height="36" viewBox="0 0 24 24" fill="#2E7D32" xmlns="http://www.w3.org/2000/svg">125        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.2-6.2l6-6-1.4-1.4-4.6 4.59-2.2-2.19-1.4 1.4 3.6 3.6z"/>126      </svg>127    </div>128    <div class="text">Enjoy your new journey!</div>129  </div>130 131  <div class="hero">132    <div class="img">[IMG: Fitness hero]</div>133    <div class="shade"></div>134    <div class="title">135      <h1>Day 1</h1>136      <div class="sub">FULL BODY</div>137    </div>138  </div>139 140  <div class="summary">141    <div class="bar"></div>142    <div>9 mins • 11 Workouts</div>143  </div>144 145  <div class="list">146 147    <div class="workout">148      <div class="drag">149        <svg width="28" height="80" viewBox="0 0 24 80" xmlns="http://www.w3.org/2000/svg">150          <rect x="2" y="14" width="20" height="2" fill="#999"/>151          <rect x="2" y="24" width="20" height="2" fill="#999"/>152          <rect x="2" y="34" width="20" height="2" fill="#999"/>153        </svg>154      </div>155      <div class="thumb">[IMG: Exercise]</div>156      <div class="info">157        <div class="name">JUMPING JACKS</div>158        <div class="meta">00:20</div>159      </div>160    </div>161 162    <div class="workout">163      <div class="drag">164        <svg width="28" height="80" viewBox="0 0 24 80" xmlns="http://www.w3.org/2000/svg">165          <rect x="2" y="14" width="20" height="2" fill="#999"/>166          <rect x="2" y="24" width="20" height="2" fill="#999"/>167          <rect x="2" y="34" width="20" height="2" fill="#999"/>168        </svg>169      </div>170      <div class="thumb">[IMG: Incline Push-ups]</div>171      <div class="info">172        <div class="name">INCLINE PUSH-UPS</div>173        <div class="meta">x10</div>174      </div>175    </div>176 177    <div class="workout">178      <div class="drag">179        <svg width="28" height="80" viewBox="0 0 24 80" xmlns="http://www.w3.org/2000/svg">180          <rect x="2" y="14" width="20" height="2" fill="#999"/>181          <rect x="2" y="24" width="20" height="2" fill="#999"/>182          <rect x="2" y="34" width="20" height="2" fill="#999"/>183        </svg>184      </div>185      <div class="thumb">[IMG: Knee Push-ups]</div>186      <div class="info">187        <div class="name">KNEE PUSH-UPS</div>188        <div class="meta">x6</div>189      </div>190    </div>191 192    <div class="workout">193      <div class="drag">194        <svg width="28" height="80" viewBox="0 0 24 80" xmlns="http://www.w3.org/2000/svg">195          <rect x="2" y="14" width="20" height="2" fill="#999"/>196          <rect x="2" y="24" width="20" height="2" fill="#999"/>197          <rect x="2" y="34" width="20" height="2" fill="#999"/>198        </svg>199      </div>200      <div class="thumb">[IMG: Push-ups]</div>201      <div class="info">202        <div class="name">PUSH-UPS</div>203        <div class="meta">x6</div>204      </div>205    </div>206 207    <div class="workout">208      <div class="drag">209        <svg width="28" height="80" viewBox="0 0 24 80" xmlns="http://www.w3.org/2000/svg">210          <rect x="2" y="14" width="20" height="2" fill="#999"/>211          <rect x="2" y="24" width="20" height="2" fill="#999"/>212          <rect x="2" y="34" width="20" height="2" fill="#999"/>213        </svg>214      </div>215      <div class="thumb">[IMG: Wide Arm Push-ups]</div>216      <div class="info">217        <div class="name">WIDE ARM PUSH-UPS</div>218        <div class="meta">x6</div>219      </div>220    </div>221 222  </div>223 224  <div class="adjust">225    <div class="ico">226      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">227        <path d="M4 7h16v2H4V7zm3 4h10v2H7v-2zm-3 4h16v2H4v-2z"/>228      </svg>229    </div>230    <div>Adjust</div>231  </div>232 233  <div class="start-wrap">234    <button class="start-btn">Start</button>235  </div>236 237  <div class="ad">238    <div class="logo">[IMG: Brand Logo]</div>239    <div class="adtext">240      <div class="headline">Spacity by Kohler</div>241      <div class="copy">Give your bathroom a premium essence with the ultimate in bathroom experience</div>242    </div>243    <button class="cta">KNOW MORE!</button>244  </div>245 246  <div class="home-indicator"></div>247 248</div>249</body>250</html>