GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Premium Trial UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #1c1c1c;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #222;29    font-weight: 600;30    font-size: 40px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon-dot { width: 18px; height: 18px; background: #777; border-radius: 50%; }38  .wifi { width: 36px; height: 28px; border: 4px solid #555; border-top-left-radius: 28px; border-top-right-radius: 28px; border-bottom: none; position: relative; }39  .battery { width: 60px; height: 30px; border: 4px solid #555; position: relative; }40  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 10px; height: 18px; background: #555; border-radius: 2px; }41  /* Close button */42  .close-btn {43    position: absolute;44    top: 130px;45    left: 40px;46    width: 66px;47    height: 66px;48    border: none;49    background: transparent;50    cursor: default;51  }52  .close-btn svg { width: 66px; height: 66px; }53  .content {54    position: absolute;55    left: 60px;56    right: 60px;57    top: 220px;58  }59 60  /* Premium header */61  .premium-row {62    display: flex;63    align-items: center;64    gap: 24px;65    margin-bottom: 40px;66  }67  .premium-dots {68    display: flex;69    align-items: center;70    gap: 10px;71  }72  .premium-dots span {73    width: 14px;74    height: 14px;75    background: #E2B95C;76    border-radius: 50%;77    display: inline-block;78  }79  .premium-text {80    font-size: 58px;81    font-weight: 700;82    color: #1a1a1a;83  }84 85  /* Headline */86  .headline {87    font-size: 68px;88    line-height: 1.18;89    font-weight: 700;90    color: #0f1d2b;91    margin: 30px 0 24px;92  }93 94  /* Feature list */95  .features {96    margin-top: 10px;97    margin-bottom: 34px;98  }99  .feature-item {100    display: flex;101    align-items: center;102    gap: 24px;103    margin: 30px 0;104    font-size: 44px;105    color: #263238;106  }107  .check {108    width: 40px;109    height: 40px;110    border-radius: 10px;111  }112  .check svg { width: 44px; height: 44px; }113  .see-all {114    display: flex;115    align-items: center;116    gap: 22px;117    color: #1f8a89;118    font-size: 48px;119    font-weight: 700;120    margin-top: 20px;121  }122  .see-all svg { width: 38px; height: 38px; }123 124  /* Fine print */125  .fine-print {126    margin-top: 50px;127    font-size: 36px;128    color: #455A64;129    line-height: 1.5;130  }131  .plans {132    margin-top: 60px;133  }134 135  /* Annual plan card */136  .plan-card {137    border-radius: 40px;138    border: 2px solid #e1e1e1;139    overflow: hidden;140    position: relative;141    margin-bottom: 26px;142  }143  .plan-annual {144    background: #fff7e8;145  }146  .plan-annual .header {147    background: #D8B466;148    color: #fff;149    font-weight: 800;150    font-size: 44px;151    padding: 32px 40px;152  }153  .plan-annual .body {154    display: flex;155    align-items: center;156    gap: 34px;157    padding: 36px 40px 40px;158    background: #ffffff;159  }160  .radio {161    width: 64px;162    height: 64px;163    border-radius: 50%;164    border: 8px solid #D8B466;165    box-sizing: border-box;166  }167  .price {168    flex: 1;169  }170  .striked {171    font-size: 48px;172    color: #7a7a7a;173    text-decoration: line-through;174    margin-bottom: 8px;175  }176  .current-price {177    font-size: 64px;178    font-weight: 800;179    color: #0d2136;180  }181  .trial-note {182    font-size: 40px;183    color: #616161;184    margin-top: 10px;185  }186 187  /* Monthly pill */188  .monthly-pill {189    width: 100%;190    border-radius: 40px;191    background: #eceff1;192    color: #37474f;193    text-align: center;194    font-weight: 800;195    font-size: 48px;196    padding: 34px 0;197    border: 2px solid #e0e0e0;198  }199 200  /* Start trial button */201  .start-btn {202    margin-top: 34px;203    width: 100%;204    height: 120px;205    border-radius: 40px;206    background: #8f969b;207    color: #ffffff;208    font-size: 54px;209    font-weight: 800;210    border: none;211  }212 213  /* bottom home bar */214  .home-bar {215    position: absolute;216    bottom: 40px;217    left: 50%;218    transform: translateX(-50%);219    width: 420px;220    height: 16px;221    background: #9e9e9e;222    border-radius: 10px;223  }224</style>225</head>226<body>227<div id="render-target">228  <div class="status-bar">229    <div class="time">10:21</div>230    <div class="status-icons">231      <div class="icon-dot"></div>232      <div class="icon-dot"></div>233      <div class="wifi"></div>234      <div class="battery"></div>235    </div>236  </div>237 238  <button class="close-btn" aria-label="Close">239    <svg viewBox="0 0 24 24">240      <line x1="4" y1="4" x2="20" y2="20" stroke="#2c2c2c" stroke-width="2" />241      <line x1="20" y1="4" x2="4" y2="20" stroke="#2c2c2c" stroke-width="2" />242    </svg>243  </button>244 245  <div class="content">246    <div class="premium-row">247      <div class="premium-dots">248        <span></span><span></span><span></span>249      </div>250      <div class="premium-text">premium</div>251    </div>252 253    <div class="headline">254      Try Fitbit Premium for 90 days at no charge. Cancel anytime.255    </div>256 257    <div class="features">258      <div class="feature-item">259        <div class="check">260          <svg viewBox="0 0 24 24">261            <path d="M3 12l5 5 13-13" stroke="#D8B466" stroke-width="3" fill="none" />262          </svg>263        </div>264        <div>Sleep score details for advanced analysis</div>265      </div>266      <div class="feature-item">267        <div class="check">268          <svg viewBox="0 0 24 24">269            <path d="M3 12l5 5 13-13" stroke="#D8B466" stroke-width="3" fill="none" />270          </svg>271        </div>272        <div>Wellness report for your health trends</div>273      </div>274      <div class="feature-item">275        <div class="check">276          <svg viewBox="0 0 24 24">277            <path d="M3 12l5 5 13-13" stroke="#D8B466" stroke-width="3" fill="none" />278          </svg>279        </div>280        <div>45+ mindfulness sessions</div>281      </div>282      <div class="feature-item">283        <div class="check">284          <svg viewBox="0 0 24 24">285            <path d="M3 12l5 5 13-13" stroke="#D8B466" stroke-width="3" fill="none" />286          </svg>287        </div>288        <div>150+ video workouts</div>289      </div>290 291      <div class="see-all">292        <svg viewBox="0 0 24 24">293          <path d="M4 9l8 8 8-8" fill="none" stroke="#1f8a89" stroke-width="2" />294        </svg>295        <div>See all Premium features</div>296      </div>297    </div>298 299    <div class="fine-print">300      Select a plan to start your trial. After the trial ends, you will be charged unless you cancel. Offer valid for new Premium users only. Cancel anytime.301    </div>302 303    <div class="plans">304      <div class="plan-card plan-annual">305        <div class="header">PAY ANNUALLY - SAVE 16%</div>306        <div class="body">307          <div class="radio"></div>308          <div class="price">309            <div class="striked">₹1,188.00</div>310            <div class="current-price">₹999.00/year</div>311            <div class="trial-note">First 90 days for ₹0</div>312          </div>313        </div>314      </div>315 316      <div class="monthly-pill">PAY MONTHLY</div>317 318      <button class="start-btn">START TRIAL</button>319    </div>320  </div>321 322  <div class="home-bar"></div>323</div>324</body>325</html>