Site Builder

Editing: modules-c1oupon.php

writable 0666

<?php
/**************************************************************************
 *  COUPON MODULE  – Sponsors / Affiliate deals  (RESPONSIVE v2)
 *  ----------------------------------------------------------------------
 *  • Reads ../../coupon.json  (adjacent to profile.json)
 *  • Width now matches other gold cards on tiny screens
 **************************************************************************/

/* 1) Locate coupon.json */
$coupons = get_coupon(); 
if (!$coupons) return;

/* 3) (Optional) profile handle for “recommended by …” */

$handle = $profile['handle']
        ?? $profile['name']           // ← business profiles
        ?? 'BestDealOn';
?>

<section class="cp-wrap">
  <h2>🔥 Sponsors & Exclusive Deals</h2>

<?php foreach ($coupons as $i=>$c):
      $title   = $c['title']   ?? '';
      $code    = $c['code']    ?? '';
      $link    = $c['link']    ?? '';
      $expiry  = $c['expiry']  ?? '';
      $descRaw = trim($c['desc'] ?? '');
      if (!$title) continue;

$descLimit = 160;
      $hasMore   = mb_strlen($descRaw,'UTF-8') > $descLimit;
      $descShort = nl2br(htmlspecialchars(mb_substr($descRaw,0,$descLimit,'UTF-8')));
      $descFull  = nl2br(htmlspecialchars($descRaw));

/* element‑specific IDs */
      $card = "cpCard$i";
      $dID  = "cpDesc$i";
      $rID  = "read$i";
      $lID  = "less$i";
      $pID  = "print$i";
      $sID  = "share$i";
?>
  <style>
  /* print‑only tweaks for EACH card */
  @media print{
    #<?= $card ?> .cp-toolbar,
    #<?= $card ?> .cp-btn,
    #<?= $card ?> #<?= $rID ?>,
    #<?= $card ?> #<?= $lID ?>{display:none!important}
    #<?= $card ?> .d-screen{display:none!important}
    #<?= $card ?> .d-print {display:block!important}
  }
  #<?= $card ?> .d-print{display:none}
  </style>

<div class="cp-card" id="<?= $card ?>" itemscope itemtype="https://schema.org/Offer">
    <div class="cp-head">Recommended by <?= htmlspecialchars($handle) ?></div>

<p class="cp-desc d-screen" id="<?= $dID ?>" itemprop="description">
      <?php if ($hasMore): ?>
        <?= $descShort ?> <button id="<?= $rID ?>" class="cp-more">Read more</button>
      <?php else: ?>
        <?= $descFull ?>
      <?php endif; ?>
    </p>
    <p class="cp-desc d-print"><?= $descFull ?></p>

<div class="cp-row"><span>Coupon Code:</span><code><?= htmlspecialchars($code) ?></code></div>
    <div class="cp-row"><span>Expires:</span><em><?= htmlspecialchars($expiry ?: 'No Expiry') ?></em></div>

<?php if ($link): ?>
      <p style="text-align:center;margin:1rem 0 0">
        <a href="<?= htmlspecialchars($link) ?>" target="_blank" rel="noopener" class="cp-deal">Get Deal Now »</a>
      </p>
    <?php endif; ?>

<div class="cp-toolbar">
      <button id="<?= $pID ?>" class="cp-btn">🖨️ Print</button>
      <button id="<?= $sID ?>" class="cp-btn">📤 Share</button>
    </div>
  </div>

const desc = document.getElementById('<?= $dID ?>');
    const rd   = document.getElementById('<?= $rID ?>');

<?php if ($hasMore): ?>
    rd.onclick = () => {
      desc.innerHTML = full + '<button id="<?= $lID ?>" class="cp-more">Show less</button>';
      document.getElementById('<?= $lID ?>').onclick = () => {
        desc.innerHTML = short + rd.outerHTML;
        document.getElementById('<?= $rID ?>').onclick = rd.onclick;
      };
    };
    <?php endif; ?>

/* print */
    document.getElementById('<?= $pID ?>').onclick = ()=>{
      const html = document.getElementById('<?= $card ?>').outerHTML;
      const w = window.open('','w','width=600,height=800');
      w.document.write('<html><head><title>Print Coupon</title><style>body{font-family:system-ui,Arial,sans-serif;margin:0;padding:1.2rem;background:#f5f8fb}</style></head><body>'+html+'</body></html>');
      w.document.close(); setTimeout(()=>{w.print();w.close();},250);
    };

/* share (WebShare API fallback to clipboard) */
    document.getElementById('<?= $sID ?>').onclick = async e=>{
      const url = location.href.split('#')[0]+'#<?= $card ?>';
      try{
        if(navigator.share){
          await navigator.share({title:<?= json_encode($title) ?>,url});
        }else{
          await navigator.clipboard.writeText(url);
          e.target.textContent='✅ Copied!';setTimeout(()=>e.target.textContent='📤 Share',1500);
        }
      }catch{}
    };
  })();
  </script>
<?php endforeach; ?>
</section>

/* --- gold card --- */
.cp-card{
  box-sizing:border-box;                       /* ✅ makes padding part of width */
  max-width:clamp(280px,90vw,720px);
  width:100%;
  margin:2.4rem auto;
  padding:2rem 1.8rem 1.4rem;
  background:#fff;
  border:3.5px solid #ffb63b;
  border-radius:27px;
  box-shadow:0 10px 38px #f5db9c3c;
  overflow:hidden
}
/* a touch tighter on tiny phones */
@media(max-width:440px){
  .cp-card{padding:1.5rem 1rem}
}

.cp-head{
  font-weight:800;
  font-size:1.05em;
  color:#194285;
  border-bottom:1px solid #ef8f13;
  padding-bottom:.15em;
  margin-bottom:1.1em;
  text-align:center
}
.cp-title{
  font-size:1.2em;
  font-weight:800;
  color:#df6200;
  margin:0 0 .6em;
  text-align:center
}
.cp-desc{font-size:1.05em;color:#3a3232;margin:0 0 1.3em;line-height:1.55}
.cp-more{background:none;border:none;padding:0;margin-left:.3em;color:#2574bc;font-size:.95em;text-decoration:underline;cursor:pointer}

.cp-row{
  display:flex;gap:1.1em;align-items:center;margin-bottom:.5em;font-size:1.05em;
  flex-wrap:wrap
}
.cp-row span{font-weight:700;color:#ab2d00}
.cp-row code{
  background:#ffefc1;border-radius:9px;padding:.28em 1.2em;
  font-family:monospace;color:#a95600;font-weight:700;white-space:nowrap
}
.cp-row em{font-style:normal;color:#a75608;font-weight:600}

.cp-deal{
  display:inline-block;
  background:#2357d7;
  color:#fff;
  padding:.55em 1.9em;
  border-radius:8px;
  font-weight:700;
  font-size:1.06rem;
  text-decoration:none
}
.cp-deal:hover{background:#1e4dbf}

.cp-toolbar{
  display:flex;justify-content:center;gap:1.2em;margin:1.15em 0 0;flex-wrap:wrap
}
.cp-btn{
  padding:.65em 1.6em;
  border-radius:11px;
  font-size:1.05em;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow:0 1px 5px #ffeebb50;
  background:#ffeebb;
  color:#000
}
.cp-btn:hover{background:#ffd96e}
</style>

Site Builder

Editing: modules-c1oupon.php

Site Builder