# Test

Testing page. 


<div id="cm-product-mlrk53ro" style="text-align:center;padding:32px 20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;margin:16px 0;max-width:420px;margin-left:auto;margin-right:auto;">
  <div style="width:80px;height:80px;border-radius:12px;background:linear-gradient(135deg,#9d4edd,#722ed1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;"><span style="font-size:36px;color:#fff;">&#x1F6D2;</span></div>
  <div style="display:inline-block;padding:2px 10px;border-radius:4px;background:#1890ff;color:#fff;font-size:11px;font-weight:600;margin-bottom:8px;">DIGITAL</div>
  <h3 style="color:#fff;margin:8px 0 4px;">Test Product 1</h3>
  <p style="color:rgba(255,255,255,0.7);font-size:0.9rem;margin-bottom:12px;">A test product</p>
  <p style="color:#fff;font-size:1.4rem;font-weight:700;margin-bottom:20px;">$90.00</p>
  <div id="cm-product-mlrk53ro-form" style="max-width:320px;margin:0 auto;text-align:left;">
    <input type="email" id="cm-product-mlrk53ro-email" placeholder="your@email.com *" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;font-size:0.95rem;box-sizing:border-box;margin-bottom:10px;outline:none;" required />
    <input type="text" id="cm-product-mlrk53ro-name" placeholder="Name (optional)" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;font-size:0.95rem;box-sizing:border-box;margin-bottom:10px;outline:none;" />
    <div id="cm-product-mlrk53ro-error" style="color:#ff4d4f;font-size:0.9rem;margin-bottom:8px;display:none;"></div>
    <button type="button" id="cm-product-mlrk53ro-submit" style="width:100%;padding:14px 24px;background:#722ed1;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1.05rem;cursor:pointer;">Buy Now &mdash; $90.00</button>
    <p style="margin-top:12px;font-size:0.75rem;color:rgba(255,255,255,0.4);text-align:center;">
      Secure payment via Stripe. <a href="http://app.org/shop" style="color:rgba(255,255,255,0.5);">Browse all products</a>
    </p>
  </div>
  <noscript><a href="http://app.org/shop" style="display:inline-block;padding:14px 36px;background:#722ed1;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;">View in Shop</a></noscript>
</div>
<script>
(function(){
  var root=document.getElementById('cm-product-mlrk53ro');
  if(!root)return;
  var apiUrl='http://api.org';
  var productId='cmlritfdm0000mkbgf9eelg4t';
  var submitBtn=document.getElementById('cm-product-mlrk53ro-submit');
  var emailInput=document.getElementById('cm-product-mlrk53ro-email');
  var nameInput=document.getElementById('cm-product-mlrk53ro-name');
  var errDiv=document.getElementById('cm-product-mlrk53ro-error');
  function showErr(msg){errDiv.textContent=msg;errDiv.style.display='block';}
  function hideErr(){errDiv.style.display='none';}
  submitBtn.addEventListener('click',function(){
    hideErr();
    var email=(emailInput.value||'').trim();
    if(!email||email.indexOf('@')<1){showErr('Please enter a valid email address.');return;}
    submitBtn.disabled=true;submitBtn.textContent='Processing...';
    fetch(apiUrl+'/api/payments/purchase',{
      method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({productId:productId,buyerEmail:email,buyerName:(nameInput.value||'').trim()||undefined})
    }).then(function(r){return r.json();}).then(function(data){
      if(data.url){window.location.href=data.url;}
      else{showErr(data.error&&data.error.message||'Something went wrong.');submitBtn.disabled=false;submitBtn.textContent='Buy Now';}
    }).catch(function(){showErr('Connection error. Please try again.');submitBtn.disabled=false;submitBtn.textContent='Buy Now';});
  });
})();
</script>



<div id="cm-donate-mlrjofs1" style="text-align:center;padding:40px 20px;background:linear-gradient(135deg,#2d1b69,#1a1a2e);border-radius:12px;margin:16px 0;max-width:560px;margin-left:auto;margin-right:auto;">
  <p style="font-size:48px;margin:0;">&#x2764;&#xFE0F;</p>
  <h2 style="color:#fff;margin:12px 0;">Support Our Work</h2>
  <p style="color:rgba(255,255,255,0.8);margin-bottom:24px;">Every contribution makes a difference. Choose an amount below.</p>

  <div id="cm-donate-mlrjofs1-amounts" style="margin-bottom: 16px;">
    <button type="button" class="cm-donate-mlrjofs1-amt" data-cents="1000" style="display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);">$10</button>
    <button type="button" class="cm-donate-mlrjofs1-amt" data-cents="2500" style="display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);">$25</button>
    <button type="button" class="cm-donate-mlrjofs1-amt" data-cents="5000" style="display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);">$50</button>
    <button type="button" class="cm-donate-mlrjofs1-amt" data-cents="10000" style="display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);">$100</button>
    <button type="button" class="cm-donate-mlrjofs1-amt" data-cents="custom" style="display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);">Custom</button>
  </div>
  <div id="cm-donate-mlrjofs1-custom" style="display:none;margin-bottom:12px;">
    <input type="number" id="cm-donate-mlrjofs1-custom-input" min="1" step="1" placeholder="Enter amount ($)" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;font-size:0.95rem;box-sizing:border-box;margin-bottom:10px;outline:none;" />
  </div>
  <div id="cm-donate-mlrjofs1-form" style="display:none;max-width:360px;margin:0 auto;text-align:left;">
    <input type="email" id="cm-donate-mlrjofs1-email" placeholder="your@email.com *" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;font-size:0.95rem;box-sizing:border-box;margin-bottom:10px;outline:none;" required />
    <input type="text" id="cm-donate-mlrjofs1-name" placeholder="Name (optional)" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;font-size:0.95rem;box-sizing:border-box;margin-bottom:10px;outline:none;" />
    <div style="margin-bottom:12px;color:rgba(255,255,255,0.7);font-size:0.85rem;">
      <label><input type="checkbox" id="cm-donate-mlrjofs1-anon" style="margin-right:6px;" />Make my donation anonymous</label>
    </div>
    <div id="cm-donate-mlrjofs1-error" style="color:#ff4d4f;font-size:0.9rem;margin-bottom:8px;display:none;"></div>
    <button type="button" id="cm-donate-mlrjofs1-submit" style="width:100%;padding:14px 24px;background:#eb2f96;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1.05rem;cursor:pointer;">
Donate
    </button>
    <p style="margin-top:12px;font-size:0.75rem;color:rgba(255,255,255,0.4);text-align:center;">
      Secure payment via Stripe. <a href="http://app.org/donate" style="color:rgba(255,255,255,0.5);">Open full donate page</a>
    </p>
  </div>
  <noscript><a href="http://app.org/donate" style="display:inline-block;padding:14px 36px;background:#eb2f96;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;">Donate Now</a></noscript>
</div>
<script>
(function(){
  var root=document.getElementById('cm-donate-mlrjofs1');
  if(!root)return;
  var apiUrl='http://api.org';
  var selectedCents=0;
  var form=document.getElementById('cm-donate-mlrjofs1-form');
  var submitBtn=document.getElementById('cm-donate-mlrjofs1-submit');
  var emailInput=document.getElementById('cm-donate-mlrjofs1-email');
  var nameInput=document.getElementById('cm-donate-mlrjofs1-name');
  var anonBox=document.getElementById('cm-donate-mlrjofs1-anon');
  var errDiv=document.getElementById('cm-donate-mlrjofs1-error');
  var amtBtns=root.querySelectorAll('.cm-donate-mlrjofs1-amt');
  var customWrap=document.getElementById('cm-donate-mlrjofs1-custom');
  var customInput=document.getElementById('cm-donate-mlrjofs1-custom-input');
  var activeStyle='background:#eb2f96;border-color:#eb2f96;';
  var baseStyle='background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25);';
  function selectAmt(btn,cents){
    amtBtns.forEach(function(b){b.style.cssText='display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);'+baseStyle;});
    btn.style.cssText='display:inline-block;padding:10px 22px;margin:4px;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);'+activeStyle;
    if(cents==='custom'){
      selectedCents=0;customWrap.style.display='block';
      customInput.focus();
      submitBtn.textContent='Donate';
    }else{
      selectedCents=parseInt(cents,10);customWrap.style.display='none';
      submitBtn.textContent='Donate $'+(selectedCents/100).toFixed(0);
    }
    form.style.display='block';
  }
  amtBtns.forEach(function(b){
    b.addEventListener('click',function(){selectAmt(b,b.getAttribute('data-cents'));});
  });
  if(customInput){customInput.addEventListener('input',function(){
    var v=parseFloat(customInput.value);
    if(v>0){selectedCents=Math.round(v*100);submitBtn.textContent='Donate $'+v.toFixed(2);}
    else{selectedCents=0;submitBtn.textContent='Donate';}
  });}
  function showErr(msg){errDiv.textContent=msg;errDiv.style.display='block';}
  function hideErr(){errDiv.style.display='none';}
  submitBtn.addEventListener('click',function(){
    hideErr();
    var email=(emailInput.value||'').trim();
    if(!email||email.indexOf('@')<1){showErr('Please enter a valid email address.');return;}
    if(!selectedCents||selectedCents<100){showErr('Please select a donation amount.');return;}
    submitBtn.disabled=true;submitBtn.textContent='Processing...';
    fetch(apiUrl+'/api/payments/donate',{
      method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({amountCents:selectedCents,email:email,name:(nameInput.value||'').trim()||undefined,isAnonymous:!!(anonBox&&anonBox.checked)})
    }).then(function(r){return r.json();}).then(function(data){
      if(data.url){window.location.href=data.url;}
      else{showErr(data.error&&data.error.message||'Something went wrong.');submitBtn.disabled=false;submitBtn.textContent='Donate';}
    }).catch(function(){showErr('Connection error. Please try again.');submitBtn.disabled=false;submitBtn.textContent='Donate';});
  });
})();
</script>


<div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius: 12px; margin: 16px 0; max-width: 560px; margin-left: auto; margin-right: auto;">
  <p style="font-size: 48px; margin: 0;">&#x2764;&#xFE0F;</p>
  <h2 style="color: #fff; margin: 12px 0;">Support Our Work</h2>
  <p style="color: rgba(255,255,255,0.8); margin-bottom: 24px;">Every contribution makes a difference. Choose an amount below.</p>
  <div style="margin-bottom: 16px;">
  <a href="http://app.org/donate?amount=1000" style="display: inline-block; padding: 10px 22px; margin: 4px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.2);">$10</a>
  <a href="http://app.org/donate?amount=2500" style="display: inline-block; padding: 10px 22px; margin: 4px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.2);">$25</a>
  <a href="http://app.org/donate?amount=5000" style="display: inline-block; padding: 10px 22px; margin: 4px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.2);">$50</a>
  <a href="http://app.org/donate?amount=10000" style="display: inline-block; padding: 10px 22px; margin: 4px; background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.2);">$100</a>
  </div>
  <a href="http://app.org/donate" style="display: inline-block; padding: 10px 22px; margin: 4px; background: #eb2f96; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem;">Custom Amount</a>
</div>


<div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #9d4edd, #722ed1); border-radius: 12px; margin: 16px 0;">
  <p style="font-size: 48px; margin: 0;">&#x1F6D2;</p>
  <h2 style="color: #fff; margin: 12px 0;">Browse Our Products</h2>
  <p style="color: rgba(255,255,255,0.8); margin-bottom: 24px;">Reports, toolkits, event tickets, and more.</p>
  <a href="http://app.org/shop" style="display: inline-block; padding: 14px 36px; background: #fff; color: #722ed1; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem;">Shop Now</a>
</div>


<div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 12px; margin: 16px 0;">
  <h2 style="color: #fff; margin: 12px 0;">Choose Your Plan</h2>
  <p style="color: rgba(255,255,255,0.8); margin-bottom: 24px;">Get access to exclusive content and features.</p>
  <a href="http://app.org/pricing" style="display: inline-block; padding: 14px 36px; background: #722ed1; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem;">View Plans</a>
</div>


<div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius: 12px; margin: 16px 0;">
  <p style="font-size: 48px; margin: 0;">&#x2764;&#xFE0F;</p>
  <h2 style="color: #fff; margin: 12px 0;">Support Our Cause</h2>
  <p style="color: rgba(255,255,255,0.8); margin-bottom: 24px;">Your contribution helps us create lasting change in our community.</p>
  <a href="http://app.org/donate" style="display: inline-block; padding: 14px 36px; background: #eb2f96; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem;">Donate Now</a>
</div>


<div class="video-card-block" data-video-id="2" data-video-title="Testing This Sucker" data-video-duration="594" data-video-quality="" data-video-views="0" style="max-width: 480px; margin: 0 auto;">
  <a href="http://app.org/gallery/watch/2" style="display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; background: #1b2838; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
    <div style="position: relative; padding-bottom: 56.25%; background: #0d1b2a; overflow: hidden;">
      <img src="http://app.orgdata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22270%22%20viewBox%3D%220%200%20480%20270%22%3E%3Crect%20fill%3D%22%230d1b2a%22%20width%3D%22480%22%20height%3D%22270%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%22135%22%20r%3D%2232%22%20fill%3D%22rgba(157%2C78%2C221%2C0.6)%22%2F%3E%3Cpolygon%20points%3D%22230%2C118%20258%2C135%20230%2C152%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E" alt="Testing This Sucker" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;" />
      
      <span style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: #fff; font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 4px;">9:54</span>
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <svg width="24" height="24" viewBox="0 0 20 20" fill="#fff"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg>
      </div>
    </div>
    <div style="padding: 12px 16px;">
      <div style="color: #fff; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Testing This Sucker</div>
      <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 6px;">
        <span style="color: #8899aa; font-size: 13px;">0 views</span>
        <span style="color: #9d4edd; font-size: 13px; font-weight: 500;">Watch &rarr;</span>
      </div>
    </div>
  </a>
</div>