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>WPS Pro Paywall Mock</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: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar over hero */20  .status-bar {21    position: absolute;22    top: 18px;23    left: 28px;24    right: 28px;25    height: 48px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    z-index: 5;31    pointer-events: none;32  }33  .status-time { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }34  .status-icons { display: flex; align-items: center; gap: 18px; }35  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.2; }36 37  /* Hero image placeholder */38  .hero {39    position: absolute;40    top: 0;41    left: 0;42    width: 1080px;43    height: 760px;44    background: #E0E0E0;45    border-bottom: 1px solid #BDBDBD;46    display: flex;47    align-items: flex-end;48    justify-content: flex-start;49  }50  .hero-label {51    margin: 28px;52    padding: 10px 14px;53    font-size: 26px;54    color: #757575;55    background: rgba(255,255,255,0.75);56    border: 1px solid #BDBDBD;57    border-radius: 10px;58  }59 60  /* Close (X) button */61  .close-btn {62    position: absolute;63    top: 230px;64    right: 28px;65    width: 88px;66    height: 88px;67    border-radius: 50%;68    background: #ffffff;69    border: 1px solid #e6e6e6;70    display: flex;71    align-items: center;72    justify-content: center;73    z-index: 6;74    box-shadow: 0 6px 20px rgba(0,0,0,0.08);75  }76  .close-btn svg { width: 34px; height: 34px; stroke: #9E9E9E; stroke-width: 3; }77 78  /* Bottom sheet */79  .sheet {80    position: absolute;81    left: 0;82    top: 620px;83    width: 100%;84    height: 1780px;85    background: #fff;86    border-top-left-radius: 48px;87    border-top-right-radius: 48px;88    box-shadow: 0 -10px 30px rgba(0,0,0,0.06);89    padding: 48px 40px 24px 40px;90  }91 92  .title {93    font-size: 64px;94    font-weight: 800;95    color: #1f1f1f;96    margin: 12px 8px 8px;97  }98  .subtitle {99    font-size: 30px;100    line-height: 44px;101    color: #727a86;102    margin: 8px 8px 26px;103    max-width: 920px;104  }105 106  /* Plan card */107  .plan-card {108    position: relative;109    border: 2px solid #dfe6ff;110    border-radius: 28px;111    padding: 34px 36px;112    display: flex;113    align-items: center;114    justify-content: space-between;115    background: #ffffff;116    margin: 8px;117  }118  .plan-card.selected { border-color: #3f7cff; box-shadow: 0 6px 18px rgba(63,124,255,0.15) inset; }119  .plan-left { display: flex; align-items: center; gap: 22px; }120  .plan-left .label { font-size: 44px; font-weight: 700; color: #1e1e1e; }121  .plan-left .sub { font-size: 28px; color: #8a8f98; margin-top: 6px; }122  .plan-right { text-align: right; }123  .plan-right .price { font-size: 46px; font-weight: 800; color: #3a3f4a; }124  .plan-right .per { font-weight: 600; color: #9aa1ac; font-size: 30px; }125  .plan-right .old { font-size: 30px; color: #c9cdd5; text-decoration: line-through; margin-top: 6px; }126 127  .badge-offer {128    position: absolute;129    top: -22px;130    right: 36px;131    background: #ff7a2f;132    color: #fff;133    font-weight: 700;134    font-size: 28px;135    padding: 10px 18px;136    border-radius: 20px;137    box-shadow: 0 6px 14px rgba(255,122,47,0.35);138  }139 140  .check-icon {141    width: 62px;142    height: 62px;143    border-radius: 50%;144    background: linear-gradient(135deg,#3f7cff,#59b3ff);145    display: flex;146    align-items: center;147    justify-content: center;148    box-shadow: 0 4px 10px rgba(63,124,255,0.35);149  }150  .check-icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3; }151 152  /* Benefits card */153  .benefits {154    margin: 36px 8px;155    background: #f7f9fb;156    border: 1px solid #edf1f5;157    border-radius: 28px;158    padding: 34px;159  }160  .benefits h3 {161    margin: 4px 6px 18px;162    font-size: 36px;163    color: #1f2630;164  }165  .divider {166    height: 1px;167    background: #e8edf2;168    margin: 18px 6px 22px;169  }170  .benefit-row {171    display: flex;172    align-items: center;173    justify-content: space-between;174    padding: 18px 6px;175  }176  .benefit-title {177    font-size: 30px;178    color: #3c4653;179    font-weight: 700;180  }181  .new-pill {182    margin-left: 12px;183    font-size: 24px;184    font-weight: 800;185    color: #fff;186    padding: 4px 10px;187    background: linear-gradient(90deg, #ff3e89, #9b6bff, #5fe0ff);188    border-radius: 12px;189  }190  .benefit-sub {191    font-size: 28px;192    color: #98a1ae;193    margin: 8px 6px 10px 6px;194  }195  .benefit-item {196    font-size: 30px;197    color: #c2c8d1;198    padding: 10px 6px;199  }200  .chev svg { width: 32px; height: 32px; stroke: #b3bac2; stroke-width: 3; }201 202  /* CTA button */203  .cta-wrap { position: absolute; left: 40px; right: 40px; bottom: 140px; }204  .cta-btn {205    width: 100%;206    height: 128px;207    border-radius: 64px;208    border: 1px solid #e0e7ff;209    background: linear-gradient(90deg, #3f7cff 0%, #1bb2ff 100%);210    color: #fff;211    font-size: 44px;212    font-weight: 800;213    letter-spacing: 0.3px;214    display: flex;215    align-items: center;216    justify-content: center;217    gap: 18px;218    box-shadow: 0 14px 30px rgba(27, 178, 255, 0.35);219  }220  .cta-btn svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; }221  .one-time {222    text-align: center;223    margin-top: 18px;224    font-size: 28px;225    color: #a8afba;226    letter-spacing: 0.2px;227  }228 229  /* Home indicator */230  .home-indicator {231    position: absolute;232    left: 50%;233    transform: translateX(-50%);234    bottom: 34px;235    width: 300px;236    height: 10px;237    background: #bfc5ce;238    border-radius: 8px;239    opacity: 0.8;240  }241</style>242</head>243<body>244<div id="render-target">245  <!-- Hero Image Placeholder -->246  <div class="hero">247    <div class="hero-label">[IMG: Hand holding smartphone with WPS app]</div>248  </div>249 250  <!-- Status bar -->251  <div class="status-bar">252    <div class="status-time">2:22</div>253    <div class="status-icons">254      <!-- Do not disturb (circle minus) -->255      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="7" y1="12" x2="17" y2="12"></line></svg>256      <!-- WiFi -->257      <svg viewBox="0 0 24 24">258        <path d="M2 8c5-4 15-4 20 0"></path>259        <path d="M5 12c3-2 11-2 14 0"></path>260        <path d="M8 16c2-1 6-1 8 0"></path>261        <circle cx="12" cy="19" r="1.2" fill="#fff" stroke="none"></circle>262      </svg>263      <!-- Battery with percentage -->264      <svg viewBox="0 0 28 24">265        <rect x="1" y="6" width="22" height="12" rx="2"></rect>266        <rect x="3" y="8" width="14" height="8" rx="1" fill="#fff" stroke="none"></rect>267        <rect x="24" y="9" width="3" height="6" rx="1"></rect>268      </svg>269      <span style="font-size:30px; font-weight:700; margin-left:4px;">100%</span>270    </div>271  </div>272 273  <!-- Close Button -->274  <div class="close-btn" aria-label="Close">275    <svg viewBox="0 0 24 24">276      <line x1="6" y1="6" x2="18" y2="18"></line>277      <line x1="18" y1="6" x2="6" y2="18"></line>278    </svg>279  </div>280 281  <!-- Bottom Sheet Content -->282  <div class="sheet">283    <div class="title">Work easier with WPS Pro</div>284    <div class="subtitle">285      WPS Pro integrates over 80 benefits to help you work more easily. Join now and start a new way of working.286    </div>287 288    <!-- Plan card -->289    <div class="plan-card selected">290      <div class="badge-offer">Limited time: 50% OFF</div>291      <div class="plan-left">292        <div class="check-icon">293          <svg viewBox="0 0 24 24">294            <polyline points="5 12 10 17 19 7"></polyline>295          </svg>296        </div>297        <div>298          <div class="label">Monthly</div>299          <div class="sub">Billed at ₹490/month</div>300        </div>301      </div>302      <div class="plan-right">303        <div class="price">₹490.0<span class="per">/month</span></div>304        <div class="old">₹950/month</div>305      </div>306    </div>307 308    <!-- Benefits -->309    <div class="benefits">310      <h3>Upgrade to WPS Pro to enjoy all benefits</h3>311      <div class="divider"></div>312 313      <div class="benefit-row">314        <div class="benefit-title">315          WPS AI Benefits <span class="new-pill">NEW</span>316        </div>317        <div class="chev">318          <svg viewBox="0 0 24 24"><polyline points="6 15 12 9 18 15" fill="none"></polyline></svg>319        </div>320      </div>321      <div class="benefit-sub">(40000 Credits/1month)</div>322 323      <div class="benefit-item">AI Writer</div>324      <div class="benefit-item">AI PDF Reader</div>325      <div class="benefit-item">More AI benefits are available soon</div>326 327      <div class="divider" style="margin-top:24px;"></div>328 329      <div class="benefit-row" style="padding-top:8px;">330        <div class="benefit-title">Powerful PDF Tools</div>331        <div class="chev">332          <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" fill="none"></polyline></svg>333        </div>334      </div>335      <div class="benefit-item">PDF Edit</div>336      <div class="benefit-item">PDF to Word</div>337      <div class="benefit-item">Fill Form</div>338    </div>339  </div>340 341  <!-- CTA at bottom -->342  <div class="cta-wrap">343    <div class="cta-btn">344      Upgrade to WPS Pro345      <svg viewBox="0 0 24 24">346        <polyline points="8 5 16 12 8 19" fill="none"></polyline>347      </svg>348    </div>349    <div class="one-time">One-Time Purchase >></div>350  </div>351 352  <!-- Home indicator bar -->353  <div class="home-indicator"></div>354</div>355</body>356</html>